181 lines
4.7 KiB
Vue
181 lines
4.7 KiB
Vue
<template>
|
|
<view class="address u-p-l-32 u-p-r-32">
|
|
<u-form :model="addressObj" ref="uForm">
|
|
<u-form-item label="收货人" label-width="160">
|
|
<u-input v-model="addressObj.contact" placeholder="请填写收货人姓名"/>
|
|
</u-form-item>
|
|
<u-form-item label="联系方式" label-width="160">
|
|
<u-input v-model="addressObj.telephone" placeholder="请填写手机号码"/>
|
|
</u-form-item>
|
|
<u-form-item label="所在地区" label-width="160">
|
|
<view @tap="showPopup = true" class="row-between w-full">
|
|
<view :class="[{'placeholder-color': !addressObj.region}]">{{ addressObj.region || '请选择地区' }}</view>
|
|
<view>
|
|
<u-icon name="arrow-right" size="32" color="rgb(192, 196, 204)"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="详细地址" label-width="160" >
|
|
<u-input v-model="addressObj.address" type="textarea" placeholder="请填写小区、街道、门牌号等信息"/>
|
|
</u-form-item>
|
|
<u-form-item :border-bottom="false">
|
|
<u-checkbox v-model="addressObj.is_default" shape="circle" :active-color="themeColor">
|
|
设为默认
|
|
</u-checkbox>
|
|
</u-form-item>
|
|
|
|
<view class="u-m-t-60">
|
|
<u-button @click="save" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">保存</u-button>
|
|
</view>
|
|
</u-form>
|
|
|
|
<u-select v-model="showPopup" mode="mutil-column-auto" :list="lists" @confirm="regionChange"></u-select>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { editAddress, getOneAddress, hasRegionCode, addAddress } from '@/api/user'
|
|
import area from '@/utils/area'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
addressObj: {
|
|
contact: '',
|
|
telephone: '',
|
|
province: '',
|
|
city: '',
|
|
district: '',
|
|
address: '',
|
|
region: '',
|
|
is_default: false
|
|
},
|
|
defaultRegion: ['广东省', '广州市', '番禺区'],
|
|
defaultRegionCode: '440113',
|
|
showPopup: false,
|
|
lists: [],
|
|
addressId: '',
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.addressId = parseInt(options.id)
|
|
if (options.id) {
|
|
uni.setNavigationBarTitle({
|
|
title: '编辑地址'
|
|
})
|
|
this.getOneAddressFun()
|
|
} else {
|
|
uni.setNavigationBarTitle({
|
|
title: '添加地址'
|
|
})
|
|
}
|
|
this.$nextTick(() => {
|
|
this.lists = area
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {
|
|
uni.removeStorageSync('wxAddress')
|
|
},
|
|
|
|
methods: {
|
|
// 地区选择
|
|
regionChange(region) {
|
|
this.addressObj.province_id = region[0].value
|
|
this.addressObj.city_id = region[1].value
|
|
this.addressObj.district_id = region[2].value
|
|
this.addressObj.region = region[0].label + ' ' + region[1].label + ' ' + region[2].label
|
|
},
|
|
|
|
// 获取地址详情
|
|
getOneAddressFun() {
|
|
getOneAddress(this.addressId).then((res) => {
|
|
if (res.code == 1) {
|
|
let { city, province, district } = res.data
|
|
this.addressObj = res.data
|
|
this.addressObj.region = `${province} ${city} ${district}`
|
|
}
|
|
})
|
|
},
|
|
|
|
save() {
|
|
let {
|
|
addressObj,
|
|
addressId
|
|
} = this
|
|
|
|
if (!addressObj.contact) {
|
|
return this.$toast({
|
|
title: '请填写收货人姓名'
|
|
})
|
|
}
|
|
|
|
if (!addressObj.telephone) {
|
|
return this.$toast({
|
|
title: '请填写手机号码'
|
|
})
|
|
}
|
|
|
|
if (!addressObj.region) {
|
|
return this.$toast({
|
|
title: '请选择省、市、区'
|
|
})
|
|
}
|
|
|
|
if (!addressObj.address) {
|
|
return this.$toast({
|
|
title: '请填写小区、街道、门牌号等信息'
|
|
})
|
|
}
|
|
|
|
delete addressObj.region
|
|
|
|
if (addressId) {
|
|
editAddress(addressObj).then((res) => {
|
|
if (res.code == 1) {
|
|
this.$toast( {
|
|
title: res.msg
|
|
}, {
|
|
tab: 3,
|
|
url: 1
|
|
})
|
|
}
|
|
}).catch((err) => {
|
|
return this.$toast({
|
|
title: err
|
|
})
|
|
})
|
|
} else {
|
|
addAddress(addressObj).then((res) => {
|
|
if (res.code == 1) {
|
|
this.$toast({
|
|
title: res.msg
|
|
},{
|
|
tab: 3,
|
|
url: 1
|
|
})
|
|
}
|
|
}).catch((err) => {
|
|
return this.$toast({
|
|
title: err
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
|
|
.placeholder-color {
|
|
color: rgb(192, 196, 204);
|
|
}
|
|
</style> |