You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
495 lines
12 KiB
495 lines
12 KiB
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;
|
|
}
|
|
}
|
|
})])]);
|
|
}
|
|
}); |