captain-ui
Version:
有赞vue wap业务组件库
480 lines (421 loc) • 13.4 kB
JavaScript
import "vant/es/dialog/style";
import _Dialog from "vant/es/dialog";
import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/popup/style";
import _Popup from "vant/es/popup";
import "vant/es/button/style";
import _Button from "vant/es/button";
import "vant/es/switch/style";
import _Switch from "vant/es/switch";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
import "vant/es/cell/style";
import _Cell from "vant/es/cell";
import "vant/es/field/style";
import _Field from "vant/es/field";
import Area from '../../../area/index';
import EditDetailField from './edit-detail-field';
export default {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "cap-address-edit"
}, [_c('van-cell-group', [!_vm.hideSimpleField ? [_c('van-field', {
attrs: {
"label": _vm.addressText + '人',
"placeholder": "名字",
"maxlength": "15",
"error": _vm.errorInfo.user_name
},
on: {
"focus": function focus($event) {
_vm.handleInputFocus('user_name');
}
},
model: {
value: _vm.currentInfo.user_name,
callback: function callback($$v) {
_vm.$set(_vm.currentInfo, "user_name", $$v);
},
expression: "currentInfo.user_name"
}
}), _c('van-field', {
attrs: {
"type": "number",
"maxlength": "11",
"label": "联系电话",
"placeholder": "手机或固定电话",
"error": _vm.errorInfo.tel
},
on: {
"focus": function focus($event) {
_vm.handleInputFocus('tel');
}
},
model: {
value: _vm.currentInfo.tel,
callback: function callback($$v) {
_vm.$set(_vm.currentInfo, "tel", $$v);
},
expression: "currentInfo.tel"
}
})] : _vm._e(), _c('van-cell', {
staticClass: "cap-address-edit__area",
attrs: {
"title": "收件地区"
},
on: {
"click": _vm.handleAreaSelect
}
}, [_c('span', [_vm._v(_vm._s(_vm.currentInfo.province ? _vm.currentInfo.province : '选择省份'))]), _c('span', [_vm._v(_vm._s(_vm.currentInfo.city ? _vm.currentInfo.city : '选择城市'))]), _c('span', [_vm._v(_vm._s(_vm.currentInfo.county ? _vm.currentInfo.county : '选择地区'))])]), _c('edit-detail-field', {
attrs: {
"is-error": _vm.errorInfo.address_detail,
"need-search": _vm.needSearch,
"search-location": _vm.searchLocationFunc
},
on: {
"focus": function focus($event) {
_vm.handleInputFocus('address_detail');
},
"blur": _vm.handleDetailBlur
},
model: {
value: _vm.currentInfo.address_detail,
callback: function callback($$v) {
_vm.$set(_vm.currentInfo, "address_detail", $$v);
},
expression: "currentInfo.address_detail"
}
}), !_vm.hideAllField ? [_vm.showPostal ? _c('van-field', {
attrs: {
"type": "number",
"label": "邮政编码",
"placeholder": "邮政编码(选填)",
"maxlength": "6",
"error": _vm.errorInfo.postal_code
},
on: {
"focus": function focus($event) {
_vm.handleInputFocus('postal_code');
}
},
model: {
value: _vm.currentInfo.postal_code,
callback: function callback($$v) {
_vm.$set(_vm.currentInfo, "postal_code", $$v);
},
expression: "currentInfo.postal_code"
}
}) : _vm._e(), _vm.defaultSet ? _c('van-cell', {
staticClass: "cap-address-edit__default",
attrs: {
"title": "设为默认收票地址"
}
}, [_c('van-switch', {
attrs: {
"checked": _vm.currentInfo.is_default
}
})], 1) : _vm._e()] : _vm._e()], 2), !_vm.hideAllField ? [_c('div', {
staticClass: "cap-address-edit__buttons"
}, [_c('van-button', {
attrs: {
"type": "primary",
"block": "",
"loading": _vm.isSaving
},
on: {
"click": _vm.handleSaveAddress
}
}, [_vm._v("\n 保存\n ")]), _vm.isEdit ? _c('van-button', {
attrs: {
"block": "",
"loading": _vm.isDeleting
},
on: {
"click": _vm.handleDeleteAddress
}
}, [_vm._v("\n 删除" + _vm._s(_vm.addressText) + "地址\n ")]) : _vm._e()], 1), _c('van-popup', {
staticClass: "cap-address-edit__popup",
attrs: {
"position": "bottom"
},
model: {
value: _vm.showAreaSelect,
callback: function callback($$v) {
_vm.showAreaSelect = $$v;
},
expression: "showAreaSelect"
}
}, [_c('cap-area', {
attrs: {
"value": _vm.currentInfo.area_code,
"url": _vm.areaUrl
},
on: {
"confirm": _vm.handleAreaConfirm,
"cancel": _vm.handleAreaCancel
}
})], 1)] : _vm._e()], 2);
},
name: 'cap-address-edit',
components: {
'van-field': _Field,
'van-cell': _Cell,
'van-cell-group': _CellGroup,
'van-switch': _Switch,
'van-button': _Button,
'van-popup': _Popup,
'cap-area': Area,
'edit-detail-field': EditDetailField
},
props: {
value: [String, Number],
saveUrl: String,
deleteUrl: String,
defaultSet: Boolean,
addressText: {
type: String,
default: '收货'
},
addressInfo: {
type: Object,
default: function _default() {
return {};
}
},
requestAddEditAddress: Function,
requestDeleteAddress: Function,
needSearch: Boolean,
searchLocation: Function,
needLocation: Boolean,
getLocation: Function,
showPostal: Boolean,
areaUrl: String
},
data: function data() {
return {
showAreaSelect: false,
currentInfo: this.addressInfo,
isEdit: !!this.addressInfo.id,
detailFocused: false,
detailSearching: false,
// 地址是否在保存中
isSaving: false,
// 地址是否在删除中
isDeleting: false,
errorInfo: {
user_name: false,
tel: false,
address_detail: false,
postal_code: false
}
};
},
computed: {
// 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
hideAllField: function hideAllField() {
return this.needSearch && this.detailSearching;
},
// 当地址输入框开启了搜索，并且聚焦后，隐藏地址详情以上的输入框
hideSimpleField: function hideSimpleField() {
return this.hideAllField || this.needSearch && this.detailFocused;
}
},
watch: {
addressInfo: function addressInfo(val) {
this.currentInfo = val;
this.isEdit = !!val.id;
}
},
methods: {
handleInputFocus: function handleInputFocus(key) {
this.errorInfo[key] = false;
if (key === 'address_detail') {
this.detailFocused = true;
}
},
handleDetailBlur: function handleDetailBlur() {
this.detailSearching = false;
this.detailFocused = false;
},
/**
* 地址详情搜索方法包装
*/
searchLocationFunc: function searchLocationFunc(keyword) {
this.detailSearching = true;
return this.searchLocation(keyword, this.currentInfo.city, this.currentInfo);
},
/**
* 省市县选择点击弹出area picker
*/
handleAreaSelect: function handleAreaSelect() {
this.showAreaSelect = true;
},
/**
* 省市县确认
*/
handleAreaConfirm: function handleAreaConfirm(values) {
values = values || []; // 全部选中才允许确认
if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
_Toast('请选择正确的收件地区');
return;
}
this.currentInfo.area_code = values[values.length - 1].code;
this.currentInfo.province = values[0].name;
this.currentInfo.city = values[1].name;
this.currentInfo.county = values[2].name;
this.showAreaSelect = false;
},
/**
* 省市县取消
*/
handleAreaCancel: function handleAreaCancel() {
this.showAreaSelect = false;
},
/**
* 保存地址
*/
handleSaveAddress: function handleSaveAddress() {
var _this = this;
var userNameMessage = this.getErrorMessageByKey('user_name');
if (userNameMessage.length !== 0) {
_Toast(userNameMessage);
return;
}
var telMessage = this.getErrorMessageByKey('tel');
if (telMessage.length !== 0) {
_Toast(telMessage);
return;
}
var areaCodeMessage = this.getErrorMessageByKey('area_code');
if (areaCodeMessage.length !== 0) {
_Toast(areaCodeMessage);
return;
}
var addressDetailMessage = this.getErrorMessageByKey('address_detail');
if (addressDetailMessage.length !== 0) {
_Toast(addressDetailMessage);
return;
}
var postalCodeMessage = this.getErrorMessageByKey('postal_code');
if (this.showPostal && postalCodeMessage.length !== 0) {
_Toast(postalCodeMessage);
return;
} // 如果在保存中，就先返回
if (this.isSaving) {
return;
} // 获取了定位信息以后再保存
this.getGeoLocation().then(function (geoData) {
_this.currentInfo.lat = geoData.lat;
_this.currentInfo.lon = geoData.lon;
_this.isSaving = true;
_this.requestAddEditAddress(_this.saveUrl, _this.isEdit, _this.currentInfo).then(function (data) {
_this.isSaving = false;
if (!_this.currentInfo.id) {
_this.currentInfo.id = data.id;
}
_this.showAreaSelect = false;
_this.$emit('save', _this.currentInfo, _this.isEdit);
_this.isEdit = true;
}).catch(function (res) {
if (res === void 0) {
res = {};
}
_this.isSaving = false;
_Toast(res.msg || '地址保存失败，请稍后重试');
_this.$emit('error:save');
});
});
},
/**
* 根据`key`计算返回错误信息
*/
getErrorMessageByKey: function getErrorMessageByKey(key) {
var currentInfo = this.currentInfo;
var message = '';
if (key === 'user_name') {
if (!currentInfo.user_name) {
message = '请填写名字';
} // 名字过长
if (currentInfo.user_name && currentInfo.user_name.length > 15) {
message = '名字过长，请重新输入';
}
} else if (key === 'tel' && !/^((\+86)|(86))?(1)\d{10}$/.test(currentInfo.tel)) {
message = '请填写正确的手机号码或电话号码';
} else if (key === 'area_code') {
if (!currentInfo.area_code) {
message = '请选择收件地区';
}
if (+currentInfo.area_code === -1) {
message = '请选择正确的收件地区';
}
} else if (key === 'address_detail') {
if (!currentInfo.address_detail) {
message = '请填写详细地址';
}
if (currentInfo.address_detail && currentInfo.address_detail.length > 200) {
message = '详细地址不能超过200个字符';
}
} else if (key === 'postal_code' && typeof currentInfo.postal_code !== 'undefined' && currentInfo.postal_code !== '' && !/^\d{6}$/.test(currentInfo.postal_code)) {
message = '邮政编码格式不正确';
}
if (message.length !== 0) {
this.errorInfo[key] = true;
}
return message;
},
/**
* 删除地址
*/
handleDeleteAddress: function handleDeleteAddress() {
var _this2 = this;
if (this.isDeleting) {
return;
}
_Dialog.confirm({
message: "\u786E\u5B9A\u8981\u5220\u9664\u8FD9\u4E2A" + this.addressText + "\u5730\u5740\u4E48"
}).then(function (action) {
if (action === 'confirm') {
_this2.isDeleting = true;
_this2.requestDeleteAddress(_this2.deleteUrl, {
id: _this2.currentInfo.id
}).then(function () {
_this2.isDeleting = false;
_this2.showAreaSelect = false;
_this2.$emit('delete', _this2.currentInfo);
}).catch(function (res) {
if (res === void 0) {
res = {};
}
_this2.isDeleting = false;
_Toast(res.msg || '地址删除失败，请稍后重试');
_this2.$emit('error:delete');
});
}
}).catch(function () {});
},
getGeoLocation: function getGeoLocation() {
var _this3 = this;
return new Promise(function (resolve, reject) {
if (!_this3.needLocation) {
resolve({
lat: '',
lon: ''
});
return;
} // 根据是否是promise来处理
var locationRes = _this3.getLocation(_this3.currentInfo.address_detail, _this3.currentInfo);
if (locationRes.then) {
locationRes.then(function (res) {
return resolve(res);
});
} else {
resolve(locationRes);
}
});
}
}
};