|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="row b-b">
|
|
|
<text class="tit">收货姓名</text>
|
|
|
<u-input class="input" type="text" border="none" v-model="addressData.name" placeholder="收货人姓名" />
|
|
|
</view>
|
|
|
<view class="row b-b">
|
|
|
<text class="tit">手机号码</text>
|
|
|
<u-input class="input" type="number" border="none" v-model="addressData.phoneNumber"
|
|
|
placeholder="收货人手机号码" />
|
|
|
</view>
|
|
|
<!-- <view class="row b-b">
|
|
|
<text class="tit">邮政编码</text>
|
|
|
<input class="input" type="number" v-model="addressData.postCode" placeholder="收货人邮政编码" />
|
|
|
</view> -->
|
|
|
<!-- <view class="row b-b">
|
|
|
<text class="tit">所在区域</text>
|
|
|
<text @click="chooseLocation" class="input">
|
|
|
{{addressData.province}} {{addressData.city}} {{addressData.region}}
|
|
|
</text>
|
|
|
<text class="yticon icon-shouhuodizhi" @click="chooseLocation"></text>
|
|
|
</view> -->
|
|
|
<view class="row b-b">
|
|
|
<text class="tit">收货地区</text>
|
|
|
<u-input class="input" border="none" placeholder="省市区县、乡镇" v-model="addressData.prefixAddress">
|
|
|
<template slot="suffix">
|
|
|
<image class="icon_location" src="@/static/icons/icon_location.png" @click="chooseLocation" />
|
|
|
</template>
|
|
|
</u-input>
|
|
|
</view>
|
|
|
<view class="row b-b">
|
|
|
<text class="tit">详细地址</text>
|
|
|
<u-input class="input" type="text" border="none" v-model="addressData.detailAddress" placeholder="街道、楼牌号" />
|
|
|
</view>
|
|
|
<view class="address-box">
|
|
|
<u-textarea @change="autoParse" height="200" border="none" v-model="content"
|
|
|
placeholder="粘贴收货人、手机号、收货地址信息" />
|
|
|
</view>
|
|
|
<view class="row default-row">
|
|
|
<text class="tit">设为默认</text>
|
|
|
<switch :checked="addressData.defaultStatus==1" color="#fa436a" @change="switchChange" />
|
|
|
</view>
|
|
|
<button class="add-btn" @click="confirm">保存</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
addAddress,
|
|
|
updateAddress,
|
|
|
fetchAddressDetail
|
|
|
} from '@/api/address.js';
|
|
|
import rule from '@/utils/rule.js'
|
|
|
import {
|
|
|
AddressParse
|
|
|
}
|
|
|
from '@/utils/addressParseBundle.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
addressData: {
|
|
|
name: '',
|
|
|
phoneNumber: '',
|
|
|
postCode: '',
|
|
|
detailAddress: '',
|
|
|
default: false,
|
|
|
province: '',
|
|
|
city: '',
|
|
|
region: '',
|
|
|
prefixAddress: ''
|
|
|
},
|
|
|
content: '',
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
let title = '新增地址';
|
|
|
if (option.type === 'edit') {
|
|
|
title = '编辑地址'
|
|
|
fetchAddressDetail(option.id).then(response => {
|
|
|
this.addressData = response.data;
|
|
|
this.addressData.prefixAddress = this.addressData.province + this.addressData.city + this
|
|
|
.addressData.region;
|
|
|
});
|
|
|
}
|
|
|
this.manageType = option.type;
|
|
|
uni.setNavigationBarTitle({
|
|
|
title
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
switchChange(e) {
|
|
|
this.addressData.defaultStatus = e.detail.value ? 1 : 0;
|
|
|
},
|
|
|
// 粘贴地址自动填充
|
|
|
autoParse() {
|
|
|
if (!this.content) {
|
|
|
return uni.showToast({
|
|
|
title: '请粘贴您需要识别的地址',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
const address = this.content
|
|
|
const result = AddressParse.parse(address)
|
|
|
if (result && result.length) {
|
|
|
const [data] = result
|
|
|
const {
|
|
|
name,
|
|
|
phone,
|
|
|
mobile,
|
|
|
zip_code,
|
|
|
details,
|
|
|
province,
|
|
|
city,
|
|
|
area
|
|
|
} = data
|
|
|
console.log(data)
|
|
|
this.addressData = {
|
|
|
name,
|
|
|
phoneNumber: phone || mobile,
|
|
|
postCode: zip_code,
|
|
|
detailAddress: details,
|
|
|
province,
|
|
|
city,
|
|
|
region: area,
|
|
|
prefixAddress: province + city + area,
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
//地图选择地址
|
|
|
chooseLocation() {
|
|
|
console.log('chooseLocation')
|
|
|
uni.chooseLocation({
|
|
|
success: (data) => {
|
|
|
this.covertAdderss(data.address);
|
|
|
this.addressData.detailAddress = data.name;
|
|
|
},
|
|
|
fail: (error) => {
|
|
|
console.log(error)
|
|
|
},
|
|
|
|
|
|
})
|
|
|
},
|
|
|
//将地址转化为省市区
|
|
|
covertAdderss(address) {
|
|
|
console.log("covertAdderss", address);
|
|
|
if (address.indexOf("省") != -1) {
|
|
|
this.addressData.province = address.substr(0, address.indexOf("省") + 1);
|
|
|
address = address.replace(this.addressData.province, "");
|
|
|
this.addressData.city = address.substr(0, address.indexOf("市") + 1);
|
|
|
address = address.replace(this.addressData.city, "");
|
|
|
this.addressData.region = address.substr(0, address.indexOf("区") + 1);
|
|
|
} else {
|
|
|
this.addressData.province = address.substr(0, address.indexOf("市") + 1);
|
|
|
address = address.replace(this.addressData.province, "");
|
|
|
this.addressData.city = "";
|
|
|
this.addressData.region = address.substr(0, address.indexOf("区") + 1);
|
|
|
}
|
|
|
},
|
|
|
//提交
|
|
|
confirm() {
|
|
|
let data = this.addressData;
|
|
|
if (!data.name) {
|
|
|
this.$api.msg('请填写收货人姓名');
|
|
|
return;
|
|
|
}
|
|
|
if (!rule.mobile(data.phoneNumber)) {
|
|
|
this.$api.msg('请输入正确的手机号码');
|
|
|
return;
|
|
|
}
|
|
|
if (!data.prefixAddress) {
|
|
|
this.$api.msg('请输入区域');
|
|
|
return;
|
|
|
}
|
|
|
this.covertAdderss(data.prefixAddress);
|
|
|
if (!data.province) {
|
|
|
this.$api.msg('请输入正确的省份');
|
|
|
return;
|
|
|
}
|
|
|
if (!data.detailAddress) {
|
|
|
this.$api.msg('请填写详细地址信息');
|
|
|
return;
|
|
|
}
|
|
|
if (this.manageType == 'edit') {
|
|
|
updateAddress(this.addressData).then(response => {
|
|
|
//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
|
|
|
this.$api.prePage().refreshList(data, this.manageType);
|
|
|
this.$api.msg("地址修改成功！");
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack()
|
|
|
}, 800)
|
|
|
});
|
|
|
} else {
|
|
|
addAddress(this.addressData).then(response => {
|
|
|
//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
|
|
|
this.$api.prePage().refreshList(data, this.manageType);
|
|
|
this.$api.msg("地址添加成功！");
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack()
|
|
|
}, 800)
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
page {
|
|
|
|
|
|
padding-top: 16upx;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
background: #F3F2F7;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
.row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
padding: 0 30upx;
|
|
|
height: 110upx;
|
|
|
background: #fff;
|
|
|
|
|
|
.tit {
|
|
|
flex-shrink: 0;
|
|
|
width: 150upx;
|
|
|
font-size: 30upx;
|
|
|
color: $font-color-dark;
|
|
|
}
|
|
|
|
|
|
.input {
|
|
|
flex: 1;
|
|
|
font-size: 30upx;
|
|
|
color: $font-color-dark;
|
|
|
}
|
|
|
|
|
|
.icon-shouhuodizhi {
|
|
|
font-size: 36upx;
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.default-row {
|
|
|
margin-top: 16upx;
|
|
|
|
|
|
.tit {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
switch {
|
|
|
transform: translateX(16upx) scale(.9);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.address-box {
|
|
|
padding: 30upx;
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
/deep/ .u-textarea {
|
|
|
width: 100%;
|
|
|
height: 200upx;
|
|
|
padding: 10upx;
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.add-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 600upx;
|
|
|
height: 90upx;
|
|
|
margin: 60upx auto;
|
|
|
font-size: $font-lg;
|
|
|
color: #fff;
|
|
|
background-color: rgba(204, 52, 45, 1);
|
|
|
border-radius: 60upx;
|
|
|
}
|
|
|
.icon_location {
|
|
|
width: 38upx;
|
|
|
height: 38upx;
|
|
|
}
|
|
|
</style> |
