<template>
|
<view>
|
<view class="addr">
|
<view class="addrItem">
|
<text class="label">姓名</text>
|
<input type="text" v-model="formData.realname" placeholder="请输入姓名">
|
</view>
|
<view class="addrItem">
|
<text class="label">手机号</text>
|
<input type="tel" maxlength="11" v-model="formData.phone" placeholder="请输入手机号">
|
</view>
|
<view class="addrItem">
|
<text class="label">地区</text>
|
<text :class="defArea == '请选择地区' ? 'area' : ''" @tap="areaToggle">{{defArea}}</text>
|
<!-- <image @click="getArea" src="/static/imgs/address.png"></image> -->
|
</view>
|
<view class="addrItem">
|
<text class="label">详细地址</text>
|
<textarea v-model="formData.addr" placeholder="街道门牌号,楼层,房间号等信息" />
|
</view>
|
<view class="addrItem">
|
<text class="label">设置默认地址</text>
|
<switch @change="defChange" v-if="formData.isdef == 0" color="#e3b400" style="transform:scale(0.7)"/>
|
<switch @change="defChange" v-else checked color="#e3b400" style="transform:scale(0.7)"/>
|
</view>
|
</view>
|
<view class="addrBtn" @tap="addrSave">保存</view>
|
<view class="tips">
|
<view class="tipsTitle">
|
<image src="/static/imgs/notice2.png" mode=""></image>
|
<text>温馨提示</text>
|
</view>
|
<view class="tipsDesc">请填写真实有效的收货地址，以便我们提供方便快捷的收货体验。若因地址有误或无故拒收导致退货，以及货品运送期间要求修改地址，<text>从而产生的退回以及转运费用将由用户自行承担，敬请仔细填写。</text></view>
|
</view>
|
<cityPicker :column="column" :default-value="defaultArea" :mask-close-able="maskCloseAble" @confirm="confirmArea" @cancel="areaToggle" :visible="visible"/>
|
</view>
|
</template>
|
|
<script>
|
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
|
export default {
|
components: {
|
cityPicker
|
},
|
data() {
|
return {
|
column: 3,
|
visible: false,
|
maskCloseAble: true,
|
defArea: '请选择地区',
|
defaultArea: ['', '', ''],
|
formData: {
|
id: 0,
|
realname: '',
|
phone: '',
|
area: '',
|
addr: '',
|
isdef: 0,
|
},
|
phoneReg: /^\d{11}$/,
|
backUrl: '',
|
}
|
},
|
onLoad(op) {
|
this.formData.id = op.id ? op.id : 0
|
this.backUrl = op.backUrl ? op.backUrl : ''
|
if(this.formData.id > 0) {
|
this.getAddrInfo(this.formData.id)
|
}
|
},
|
methods: {
|
getArea () {
|
let t = this
|
uni.getLocation({
|
type: 'gcj02',
|
geocode: true,
|
success: function (res) {
|
let area = res.address.province + '/' + res.address.city + '/' + res.address.district
|
t.formData.area = area
|
t.defArea = area
|
}
|
})
|
},
|
areaToggle () {
|
this.visible = !this.visible
|
},
|
defChange (e) {
|
this.formData.isdef = e.detail.value ? 1 : 0
|
},
|
confirmArea (e) {
|
this.defArea = e.provinceName + '/' + e.cityName + '/' + e.areaName
|
this.formData.area = this.defArea
|
this.areaToggle()
|
},
|
getAddrInfo (id) {
|
this.$util.post('Address/getAddrInfo', this.formData).then(res => {
|
if(res.code == 1) {
|
this.defArea = res.data.area
|
this.formData = res.data
|
}
|
})
|
},
|
addrSave () {
|
let t = this
|
if(t.formData.realname == ''){
|
return uni.showToast({
|
title: '请输入姓名',
|
icon: 'error',
|
})
|
}
|
if(t.formData.phone == '' || !t.phoneReg.test(t.formData.phone)){
|
return uni.showToast({
|
title: '请输入正确的手机号！',
|
icon: 'error',
|
})
|
}
|
if(this.formData.area == ''){
|
return uni.showToast({
|
title: '请选择地区',
|
icon: 'error',
|
})
|
}
|
if(this.formData.addr == ''){
|
return uni.showToast({
|
title: '请输入详细地址',
|
icon: 'error',
|
})
|
}
|
t.$util.post('Address/addAddr', this.formData).then(res => {
|
if(res.code == 1) {
|
uni.showToast({
|
title: res.msg || '保存成功',
|
icon: 'success'
|
})
|
uni.setStorageSync('choose-address', JSON.stringify(res.data))
|
setTimeout(() => {
|
if(t.backUrl != ''){
|
t.$util.goPages(t.backUrl)
|
} else {
|
t.$util.goPages('/pages/address/address')
|
}
|
}, 1500)
|
} else {
|
uni.showToast({
|
title: res.msg || '保存失败',
|
icon: 'error'
|
})
|
}
|
})
|
},
|
}
|
}
|
</script>
|
|
<style>
|
@import url(/static/css/addAddr.css);
|
</style>
|
