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.
618 lines
16 KiB
618 lines
16 KiB
<template>
|
|
<view id="address-add">
|
|
<view class="indetify-img" v-show="parseResult" @tap="closeImg">
|
|
<image src="https://cdn.guojiang.club/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200403161800.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="address-info">
|
|
<view class="info-item">
|
|
<label for="name">姓名:</label>
|
|
<view class="form-control">
|
|
<input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<radio-group class="lf-flex">
|
|
<label>
|
|
<radio></radio>
|
|
<text class="lf-m-l-15">女士</text>
|
|
</label>
|
|
<label>
|
|
<radio></radio>
|
|
<text class="lf-m-l-15">先生</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="info-item">
|
|
<label for="phone">联系电话:</label>
|
|
<view class="form-control">
|
|
<input type="number" id="phone" data-type="mobile" :value="detail.mobile" @input="input" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="info-item">
|
|
<label>所在地:</label>
|
|
<view class="form-control select">
|
|
<picker mode="region" @change="bindRegionChange" :value="detail.address_name">
|
|
<view class="picker">
|
|
{{detail.address_name[0] || ''}} {{detail.address_name[1] || ''}} {{detail.address_name[2] || ''}}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef APP-PLUS || H5 -->
|
|
<view class="mpvue-picker">
|
|
<view class="info-item uni-btn-v" @click="showMulLinkageThreePicker">
|
|
<label>所在地:</label>
|
|
<view class="form-control select">
|
|
<view class="picker uni-common-mt">
|
|
{{pickerText.label || ''}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
|
|
@onConfirm="onConfirm"></mpvue-city-picker>
|
|
</view>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
|
|
|
|
<view class="info-item">
|
|
<label for="address">详细地址:</label>
|
|
<view class="form-control">
|
|
<input type="text" id="address" data-type="address" :value="detail.address" @input="input" />
|
|
</view>
|
|
</view>
|
|
<!-- TODO -->
|
|
<view class="info-item">
|
|
<label for="name">门牌号:</label>
|
|
<view class="form-control">
|
|
<input type="text" id="name" data-type="accept_name" :value="detail.accept_name" @input="input" />
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<label class="checkbox" @tap="check">
|
|
<!-- #ifdef H5 -->
|
|
<checkbox color="red" :checked="detail.is_default"></checkbox>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<checkbox color="#FFFFFF" :checked="detail.is_default"></checkbox>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<checkbox color="#FFFFFF" :checked="detail.is_default"></checkbox>
|
|
<!-- #endif -->
|
|
<text class="lf-m-l-10">设为默认地址</text>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
<view class="identify-address">
|
|
<textarea @input="changeIdentify" :value="address_text" placeholder-class="textarea-placeholder" placeholder="粘贴或输入整段地址，点击“识别”自动拆分姓名、电话和地址。" />
|
|
<view class="btn-box" v-if="address_text">
|
|
<view class="clear" @tap="clearInfo">清空</view>
|
|
<view class="sure" @tap="sureAddress">识别</view>
|
|
</view>
|
|
</view>
|
|
<view class="button-box">
|
|
<button type="primary" :style="'background: ' + config.mainColor" class="submit" @tap="submit" :loading="loading">保存</button>
|
|
<!-- <button type="warn" class="delete" :style="'background: ' + config.secColor" v-if="id" @tap="deleteAddress" :loading="deleteLoading">删除</button> -->
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<script>
|
|
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
|
|
|
|
// #ifdef H5
|
|
import wPicker from "@/components/w-picker/w-picker.vue";
|
|
// #endif
|
|
// #ifdef APP-PLUS || H5
|
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
|
import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
|
|
import cityData from '@/components/mpvue-citypicker/city-data/city.js';
|
|
// #endif
|
|
import AddressParse from '@/common/js/zh-address-parse.min.js'
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
detail: {
|
|
is_default: false,
|
|
address_name: [
|
|
'','',''
|
|
],
|
|
area: 430105,
|
|
city: 430100,
|
|
province: 430000,
|
|
},
|
|
order_no: '',
|
|
id: '',
|
|
loading: false,
|
|
deleteLoading: false,
|
|
config: '',
|
|
|
|
|
|
title: 'Hello',
|
|
/* mode:"range", */
|
|
defaultVal:[0,0,0,0,0,0,0],
|
|
tabList:[
|
|
{
|
|
mode:"region",
|
|
name:"省市区"
|
|
}
|
|
],
|
|
tabIndex:0,
|
|
resultInfo:{
|
|
result:""
|
|
},
|
|
// #ifdef H5
|
|
mulLinkageTwoPicker:cityData,
|
|
// #endif
|
|
cityPickerValueDefault: [0, 0, 1],
|
|
themeColor: '#007AFF',
|
|
pickerText:{
|
|
label:'',
|
|
value:'',
|
|
cityCode:''
|
|
},
|
|
mode: '',
|
|
deepLength: 1,
|
|
pickerValueDefault: [0],
|
|
pickerValueArray: [],
|
|
address_text:'',
|
|
parseResult:''
|
|
};
|
|
|
|
},
|
|
|
|
components:{
|
|
// #ifdef H5
|
|
/* wPicker */
|
|
// #endif
|
|
|
|
// #ifdef APP-PLUS || H5
|
|
mpvueCityPicker
|
|
// #endif
|
|
|
|
},
|
|
onShow() {// let app =getApp();
|
|
// app.isBirthday().then(()=>{
|
|
// if(this.$cookieStorage.get("birthday_gift")){
|
|
// var giftData=this.$cookieStorage.get("birthday_gift").data;
|
|
// new app.ToastPannel().__page.showText(giftData);
|
|
// }
|
|
// });
|
|
|
|
|
|
},
|
|
|
|
onLoad(e) {
|
|
// 第三方平台配置颜色
|
|
var config = this.$cookieStorage.get('globalConfig') || '';
|
|
this.setData({
|
|
config: config
|
|
});
|
|
pageLogin(getUrl());
|
|
this.setData({
|
|
id: e.id
|
|
});
|
|
|
|
if (e.id) {
|
|
wx.setNavigationBarTitle({
|
|
title: '修改收货地址'
|
|
});
|
|
this.queryAddress(e.id);
|
|
} else {
|
|
wx.setNavigationBarTitle({
|
|
title: '新增收货地址'
|
|
});
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
//清楚图片
|
|
closeImg(){
|
|
this.parseResult = '';
|
|
},
|
|
|
|
//清空所有地址
|
|
clearInfo(){
|
|
this.address_text = '';
|
|
},
|
|
//识别地址
|
|
sureAddress(){
|
|
if(this.address_text){
|
|
const options = {
|
|
type: 0, // 哪种方式解析，0：正则，1：树查找
|
|
textFilter: [], // 预清洗的字段
|
|
nameMaxLength: 4, // 查找最大的中文名字长度
|
|
}
|
|
let parseResult = AddressParse(this.address_text,options);
|
|
this.parseResult = parseResult;
|
|
this.detail.accept_name = parseResult.name;
|
|
this.detail.mobile = parseResult.phone;
|
|
this.detail.address = parseResult.detail;
|
|
// #ifdef MP-WEIXIN
|
|
this.detail.address_name = [parseResult.province,parseResult.city,parseResult.area];
|
|
// #endif
|
|
// #ifdef APP-PLUS || H5
|
|
this.detail.address_name = [parseResult.province,parseResult.city,parseResult.area];
|
|
let address = [parseResult.province,parseResult.city,parseResult.area];
|
|
this.pickerText.label = address.join(' ');
|
|
// #endif
|
|
} else{
|
|
return
|
|
}
|
|
|
|
},
|
|
changeIdentify(e){
|
|
this.address_text = e.detail.value;
|
|
},
|
|
showMulLinkageThreePicker() {
|
|
this.$refs.mpvueCityPicker.show()
|
|
},
|
|
onConfirm(e) {
|
|
this.pickerText = e;
|
|
var index = e.value;
|
|
var province_code = provinceData[index[0]].value+"0000";
|
|
var city_code = cityData[index[0]][index[1]].value+"00";
|
|
var label = e.label;
|
|
var address_name = label.split('-');
|
|
// 设置传给后台的参数
|
|
this.detail.address_name = address_name;
|
|
this.detail.city = city_code;
|
|
this.detail.province = province_code;
|
|
this.detail.area = e.cityCode;
|
|
|
|
},
|
|
bindRegionChange(e) {
|
|
this.setData({
|
|
'detail.address_name': e.detail.value
|
|
});
|
|
},
|
|
|
|
check(e) {
|
|
this.setData({
|
|
"detail.is_default": !this.detail.is_default
|
|
});
|
|
},
|
|
|
|
input(e) {
|
|
var type = e.currentTarget.dataset.type;
|
|
var value = e.detail.value;
|
|
// this.setData({
|
|
// [`detail.${type}`]: value
|
|
// });
|
|
//
|
|
this.detail[type]=value;
|
|
},
|
|
|
|
deleteAddress() {
|
|
this.setData({
|
|
deleteLoading: true
|
|
});
|
|
this.removeAddress(this.id);
|
|
},
|
|
|
|
/* onConfirm(val){
|
|
console.log(val);
|
|
//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
|
|
// switch(this.mode){
|
|
// case "date":
|
|
// break;
|
|
// }
|
|
|
|
|
|
this.detail.address_name[0]=val.checkArr[0];
|
|
this.detail.address_name[1]=val.checkArr[1];
|
|
this.detail.address_name[2]=val.checkArr[2];
|
|
|
|
this.resultInfo.result=val.result;
|
|
|
|
|
|
},
|
|
*/
|
|
toggleTab(item,index){
|
|
this.tabIndex=index;
|
|
this.mode=item.mode;
|
|
this.defaultVal=item.value;
|
|
this.$refs[item.mode].show();
|
|
},
|
|
|
|
submit() {
|
|
this.setData({
|
|
loading: true
|
|
});
|
|
var message = null;
|
|
|
|
if (!is.has(this.detail.accept_name)) {
|
|
message = '请输入姓名';
|
|
} else if (!is.has(this.detail.mobile)) {
|
|
message = '请输入手机号码';
|
|
} else if (!is.mobile(this.detail.mobile)) {
|
|
message = '请输入正确的手机号码';
|
|
} else if (!is.has(this.detail.address_name)||!is.has(this.detail.address_name[0]) ) {
|
|
message = '请选择地址';
|
|
} else if (!is.has(this.detail.address)) {
|
|
message = '请输入详细地址';
|
|
}
|
|
if (message) {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
wx.showModal({
|
|
title: '',
|
|
content: message,
|
|
showCancel: false
|
|
});
|
|
} else {
|
|
if (this.id) {
|
|
this.updateAddress(this.detail);
|
|
} else {
|
|
this.createAddress(this.detail);
|
|
}
|
|
}
|
|
},
|
|
|
|
// 获取收货地址详情
|
|
queryAddress(id) {
|
|
var token = this.$cookieStorage.get('user_token');
|
|
this.$http.get({
|
|
api: 'api/address/' + id,
|
|
header: {
|
|
Authorization: token
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
var data = res.data;
|
|
data.is_default = !!data.is_default;
|
|
data.address_value = [data.province, data.city, data.area].join(' ');
|
|
|
|
this.resultInfo.result=data.address_name;
|
|
data.address_name = data.address_name.split(' ');
|
|
|
|
|
|
if (res.status) {
|
|
this.setData({
|
|
detail: data
|
|
});
|
|
// #ifndef MP-WEIXIN
|
|
this.pickerText.label = res.data.address_name.join(' ')
|
|
// #endif
|
|
|
|
|
|
} else {
|
|
wx.showToast({
|
|
title: res.message,
|
|
image: '../../../static/error.png'
|
|
});
|
|
}
|
|
} else {
|
|
wx.showToast({
|
|
title: '获取信息失败',
|
|
image: '../../../static/error.png'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 新增收货地址
|
|
createAddress(data) {
|
|
var address = {
|
|
accept_name: data.accept_name,
|
|
mobile: data.mobile,
|
|
province: data.province,
|
|
city: data.city,
|
|
area: data.area,
|
|
address_name: data.address_name.join(" "),
|
|
address: data.address,
|
|
is_default: data.is_default ? 1 : 0
|
|
};
|
|
var token = this.$cookieStorage.get('user_token');
|
|
this.$http.post({
|
|
api: 'api/address/create',
|
|
header: {
|
|
Authorization: token
|
|
},
|
|
data: address
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
|
|
wx.showModal({
|
|
title: '',
|
|
content:'新增收货地址成功',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.navigateBack();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
wx.showToast({
|
|
title: '新增收货地址失败',
|
|
image: '../../../static/error.png',
|
|
complete: err => {
|
|
setTimeout(() => {
|
|
wx.navigateBack();
|
|
}, 1600);
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
wx.showToast({
|
|
title: '请求错误',
|
|
image: '../../../static/error.png',
|
|
complete: err => {
|
|
setTimeout(() => {
|
|
wx.navigateBack();
|
|
}, 1600);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
}).catch(rej => {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
});
|
|
},
|
|
|
|
// 修改收货地址
|
|
updateAddress(data) {
|
|
var address = {
|
|
id: data.id,
|
|
accept_name: data.accept_name,
|
|
mobile: data.mobile,
|
|
province: data.province,
|
|
city: data.city,
|
|
area: data.area,
|
|
address_name: data.address_name.join(" "),
|
|
address: data.address,
|
|
is_default: data.is_default ? 1 : 0
|
|
};
|
|
var token = this.$cookieStorage.get('user_token');
|
|
this.$http.ajax({
|
|
api: 'api/address/'+data.id,
|
|
method: 'PUT',
|
|
header: {
|
|
Authorization: token
|
|
},
|
|
data: address
|
|
}).then(res => {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
wx.showModal({
|
|
title: '',
|
|
content: '修改收货地址成功',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.navigateBack();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
wx.showToast({
|
|
title: '修改收货地址失败',
|
|
image: '../../../static/error.png',
|
|
complete: err => {
|
|
setTimeout(() => {
|
|
wx.navigateBack();
|
|
}, 1600);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
}).catch(rej => {
|
|
this.setData({
|
|
loading: false
|
|
});
|
|
});
|
|
},
|
|
|
|
// 删除收货地址
|
|
removeAddress(id) {
|
|
var token = this.$cookieStorage.get('user_token');
|
|
this.$http.ajax({
|
|
api: 'api/address/' + id,
|
|
header: {
|
|
Authorization: token
|
|
},
|
|
method: 'DELETE'
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
wx.showModal({
|
|
title: '',
|
|
content: '删除收货地址成功',
|
|
showCancel: false,
|
|
success: res => {
|
|
if (res.confirm) {
|
|
wx.navigateBack();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
wx.showToast({
|
|
title: '删除收货地址失败',
|
|
image: '../../../static/error.png',
|
|
complete: err => {
|
|
setTimeout(() => {
|
|
wx.navigateBack();
|
|
}, 1600);
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
wx.showToast({
|
|
title: '请求错误',
|
|
image: '../../../static/error.png',
|
|
complete: err => {
|
|
setTimeout(() => {
|
|
wx.navigateBack();
|
|
}, 1600);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.setData({
|
|
deleteLoading: false
|
|
});
|
|
}).catch(rej => {
|
|
this.setData({
|
|
deleteLoading: false
|
|
});
|
|
});
|
|
},
|
|
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/less" lang="less" scoped>
|
|
@import "add";
|
|
.identify-address>textarea{
|
|
border-color: #e5e5e5 !important;
|
|
}
|
|
</style>
|