123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- // Utils
- import { createNamespace, isObject } from '../utils';
- import { isMobile } from '../utils/validate/mobile'; // Components
- import Area from '../area';
- import Cell from '../cell';
- import Field from '../field';
- import Popup from '../popup';
- import Toast from '../toast';
- import Button from '../button';
- import Dialog from '../dialog';
- import Detail from './Detail';
- import Switch from '../switch';
- var _createNamespace = createNamespace('address-edit'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1],
- t = _createNamespace[2];
- var defaultData = {
- name: '',
- tel: '',
- country: '',
- province: '',
- city: '',
- county: '',
- areaCode: '',
- postalCode: '',
- addressDetail: '',
- isDefault: false
- };
- function isPostal(value) {
- return /^\d{6}$/.test(value);
- }
- export default createComponent({
- props: {
- areaList: Object,
- isSaving: Boolean,
- isDeleting: Boolean,
- validator: Function,
- showDelete: Boolean,
- showPostal: Boolean,
- searchResult: Array,
- telMaxlength: [Number, String],
- showSetDefault: Boolean,
- saveButtonText: String,
- areaPlaceholder: String,
- deleteButtonText: String,
- showSearchResult: Boolean,
- showArea: {
- type: Boolean,
- default: true
- },
- showDetail: {
- type: Boolean,
- default: true
- },
- disableArea: Boolean,
- detailRows: {
- type: [Number, String],
- default: 1
- },
- detailMaxlength: {
- type: [Number, String],
- default: 200
- },
- addressInfo: {
- type: Object,
- default: function _default() {
- return _extends({}, defaultData);
- }
- },
- telValidator: {
- type: Function,
- default: isMobile
- },
- postalValidator: {
- type: Function,
- default: isPostal
- },
- areaColumnsPlaceholder: {
- type: Array,
- default: function _default() {
- return [];
- }
- }
- },
- data: function data() {
- return {
- data: {},
- showAreaPopup: false,
- detailFocused: false,
- errorInfo: {
- tel: '',
- name: '',
- areaCode: '',
- postalCode: '',
- addressDetail: ''
- }
- };
- },
- computed: {
- areaListLoaded: function areaListLoaded() {
- return isObject(this.areaList) && Object.keys(this.areaList).length;
- },
- areaText: function areaText() {
- var _this$data = this.data,
- country = _this$data.country,
- province = _this$data.province,
- city = _this$data.city,
- county = _this$data.county,
- areaCode = _this$data.areaCode;
- if (areaCode) {
- var arr = [country, province, city, county];
- if (province && province === city) {
- arr.splice(1, 1);
- }
- return arr.filter(function (text) {
- return text;
- }).join('/');
- }
- return '';
- },
- // hide bottom field when use search && detail get focused
- hideBottomFields: function hideBottomFields() {
- var searchResult = this.searchResult;
- return searchResult && searchResult.length && this.detailFocused;
- }
- },
- watch: {
- addressInfo: {
- handler: function handler(val) {
- this.data = _extends({}, defaultData, val);
- this.setAreaCode(val.areaCode);
- },
- deep: true,
- immediate: true
- },
- areaList: function areaList() {
- this.setAreaCode(this.data.areaCode);
- }
- },
- methods: {
- onFocus: function onFocus(key) {
- this.errorInfo[key] = '';
- this.detailFocused = key === 'addressDetail';
- this.$emit('focus', key);
- },
- onChangeDetail: function onChangeDetail(val) {
- this.data.addressDetail = val;
- this.$emit('change-detail', val);
- },
- onAreaConfirm: function onAreaConfirm(values) {
- values = values.filter(function (value) {
- return !!value;
- });
- if (values.some(function (value) {
- return !value.code;
- })) {
- Toast(t('areaEmpty'));
- return;
- }
- this.showAreaPopup = false;
- this.assignAreaValues();
- this.$emit('change-area', values);
- },
- assignAreaValues: function assignAreaValues() {
- var area = this.$refs.area;
- if (area) {
- var detail = area.getArea();
- detail.areaCode = detail.code;
- delete detail.code;
- _extends(this.data, detail);
- }
- },
- onSave: function onSave() {
- var _this = this;
- var items = ['name', 'tel'];
- if (this.showArea) {
- items.push('areaCode');
- }
- if (this.showDetail) {
- items.push('addressDetail');
- }
- if (this.showPostal) {
- items.push('postalCode');
- }
- var isValid = items.every(function (item) {
- var msg = _this.getErrorMessage(item);
- if (msg) {
- _this.errorInfo[item] = msg;
- }
- return !msg;
- });
- if (isValid && !this.isSaving) {
- this.$emit('save', this.data);
- }
- },
- getErrorMessage: function getErrorMessage(key) {
- var value = String(this.data[key] || '').trim();
- if (this.validator) {
- var message = this.validator(key, value);
- if (message) {
- return message;
- }
- }
- switch (key) {
- case 'name':
- return value ? '' : t('nameEmpty');
- case 'tel':
- return this.telValidator(value) ? '' : t('telInvalid');
- case 'areaCode':
- return value ? '' : t('areaEmpty');
- case 'addressDetail':
- return value ? '' : t('addressEmpty');
- case 'postalCode':
- return value && !this.postalValidator(value) ? t('postalEmpty') : '';
- }
- },
- onDelete: function onDelete() {
- var _this2 = this;
- Dialog.confirm({
- title: t('confirmDelete')
- }).then(function () {
- _this2.$emit('delete', _this2.data);
- }).catch(function () {
- _this2.$emit('cancel-delete', _this2.data);
- });
- },
- // get values of area component
- getArea: function getArea() {
- return this.$refs.area ? this.$refs.area.getValues() : [];
- },
- // set area code to area component
- setAreaCode: function setAreaCode(code) {
- this.data.areaCode = code || '';
- if (code) {
- this.$nextTick(this.assignAreaValues);
- }
- },
- // @exposed-api
- setAddressDetail: function setAddressDetail(value) {
- this.data.addressDetail = value;
- },
- onDetailBlur: function onDetailBlur() {
- var _this3 = this;
- // await for click search event
- setTimeout(function () {
- _this3.detailFocused = false;
- });
- },
- genSetDefaultCell: function genSetDefaultCell(h) {
- var _this4 = this;
- if (this.showSetDefault) {
- var slots = {
- 'right-icon': function rightIcon() {
- return h(Switch, {
- "attrs": {
- "size": "24"
- },
- "on": {
- "change": function change(event) {
- _this4.$emit('change-default', event);
- }
- },
- "model": {
- value: _this4.data.isDefault,
- callback: function callback($$v) {
- _this4.$set(_this4.data, "isDefault", $$v);
- }
- }
- });
- }
- };
- return h(Cell, {
- "directives": [{
- name: "show",
- value: !this.hideBottomFields
- }],
- "attrs": {
- "center": true,
- "title": t('defaultAddress')
- },
- "class": bem('default'),
- "scopedSlots": slots
- });
- }
- return h();
- }
- },
- render: function render(h) {
- var _this5 = this;
- var data = this.data,
- errorInfo = this.errorInfo,
- disableArea = this.disableArea,
- hideBottomFields = this.hideBottomFields;
- var onFocus = function onFocus(name) {
- return function () {
- return _this5.onFocus(name);
- };
- };
- return h("div", {
- "class": bem()
- }, [h("div", {
- "class": bem('fields')
- }, [h(Field, {
- "attrs": {
- "clearable": true,
- "label": t('name'),
- "placeholder": t('namePlaceholder'),
- "errorMessage": errorInfo.name
- },
- "on": {
- "focus": onFocus('name')
- },
- "model": {
- value: data.name,
- callback: function callback($$v) {
- _this5.$set(data, "name", $$v);
- }
- }
- }), h(Field, {
- "attrs": {
- "clearable": true,
- "type": "tel",
- "label": t('tel'),
- "maxlength": this.telMaxlength,
- "placeholder": t('telPlaceholder'),
- "errorMessage": errorInfo.tel
- },
- "on": {
- "focus": onFocus('tel')
- },
- "model": {
- value: data.tel,
- callback: function callback($$v) {
- _this5.$set(data, "tel", $$v);
- }
- }
- }), h(Field, {
- "directives": [{
- name: "show",
- value: this.showArea
- }],
- "attrs": {
- "readonly": true,
- "clickable": !disableArea,
- "label": t('area'),
- "placeholder": this.areaPlaceholder || t('areaPlaceholder'),
- "errorMessage": errorInfo.areaCode,
- "rightIcon": !disableArea ? 'arrow' : null,
- "value": this.areaText
- },
- "on": {
- "focus": onFocus('areaCode'),
- "click": function click() {
- _this5.$emit('click-area');
- _this5.showAreaPopup = !disableArea;
- }
- }
- }), h(Detail, {
- "directives": [{
- name: "show",
- value: this.showDetail
- }],
- "attrs": {
- "focused": this.detailFocused,
- "value": data.addressDetail,
- "errorMessage": errorInfo.addressDetail,
- "detailRows": this.detailRows,
- "detailMaxlength": this.detailMaxlength,
- "searchResult": this.searchResult,
- "showSearchResult": this.showSearchResult
- },
- "on": {
- "focus": onFocus('addressDetail'),
- "blur": this.onDetailBlur,
- "input": this.onChangeDetail,
- "select-search": function selectSearch(event) {
- _this5.$emit('select-search', event);
- }
- }
- }), this.showPostal && h(Field, {
- "directives": [{
- name: "show",
- value: !hideBottomFields
- }],
- "attrs": {
- "type": "tel",
- "maxlength": "6",
- "label": t('postal'),
- "placeholder": t('postal'),
- "errorMessage": errorInfo.postalCode
- },
- "on": {
- "focus": onFocus('postalCode')
- },
- "model": {
- value: data.postalCode,
- callback: function callback($$v) {
- _this5.$set(data, "postalCode", $$v);
- }
- }
- }), this.slots()]), this.genSetDefaultCell(h), h("div", {
- "directives": [{
- name: "show",
- value: !hideBottomFields
- }],
- "class": bem('buttons')
- }, [h(Button, {
- "attrs": {
- "block": true,
- "round": true,
- "loading": this.isSaving,
- "type": "danger",
- "text": this.saveButtonText || t('save')
- },
- "on": {
- "click": this.onSave
- }
- }), this.showDelete && h(Button, {
- "attrs": {
- "block": true,
- "round": true,
- "loading": this.isDeleting,
- "text": this.deleteButtonText || t('delete')
- },
- "on": {
- "click": this.onDelete
- }
- })]), h(Popup, {
- "attrs": {
- "round": true,
- "position": "bottom",
- "lazyRender": false,
- "getContainer": "body"
- },
- "model": {
- value: _this5.showAreaPopup,
- callback: function callback($$v) {
- _this5.showAreaPopup = $$v;
- }
- }
- }, [h(Area, {
- "ref": "area",
- "attrs": {
- "value": data.areaCode,
- "loading": !this.areaListLoaded,
- "areaList": this.areaList,
- "columnsPlaceholder": this.areaColumnsPlaceholder
- },
- "on": {
- "confirm": this.onAreaConfirm,
- "cancel": function cancel() {
- _this5.showAreaPopup = false;
- }
- }
- })])]);
- }
- });
|