235 lines
9.0 KiB
Vue
235 lines
9.0 KiB
Vue
<template>
|
||
<view>
|
||
<view class="address-edit">
|
||
|
||
<!-- 联系方式 -->
|
||
<template v-if="type == 2 || type == 3">
|
||
<view class="form-item bb flex">
|
||
<view class="label">收货人</view>
|
||
<input class="m-l-10" v-model="refund_address.nickname" name="nickname" type="text"
|
||
placeholder="请填写收货人姓名" />
|
||
</view>
|
||
<view class="form-item bb flex">
|
||
<view class="label">联系方式</view>
|
||
<input class="m-l-10" name="mobile" v-model="refund_address.mobile" type="number"
|
||
placeholder="请填写手机号码"></input>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 地区选择 -->
|
||
<view @click="showRegion = true">
|
||
<view class="form-item bb flex">
|
||
<view class="label">省/市/区</view>
|
||
<view class="flex flex-1 row-between m-l-10" style="width: 100%;">
|
||
<input name="region" class="m-r-10" v-model="region" disabled type="text"
|
||
value="请选择"></input>
|
||
<u-icon color="#707070" name="arrow-down"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详细地址填写 -->
|
||
<view class="form-item flex col-top bb">
|
||
<view class="label">详细地址</view>
|
||
<input name="address" v-model="refund_address.address" placeholder="请填写小区、街道、门牌号等信息" />
|
||
</view>
|
||
</view>
|
||
|
||
<button class="my-btn md white flex br60 row-center" @click="onSubmit">完成</button>
|
||
|
||
<!-- 地址选择 -->
|
||
<u-select v-model="showRegion" confirm-color="#101010" cancel-color="#999" mode="mutil-column-auto"
|
||
@confirm="regionChange" :list="lists"></u-select>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
apiSetShopInfo
|
||
} from '@/api/store'
|
||
import {
|
||
apiOrderGetAddress,
|
||
apiOrderEditAddress
|
||
} from '@/api/order'
|
||
|
||
import area from '@/utils/area'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: 0,
|
||
type: 1,
|
||
|
||
refund_address: {
|
||
nickname: '', //联系方式
|
||
mobile: '', //手机号码
|
||
province_id: '', //省
|
||
city_id: '', //市
|
||
district_id: '', //区
|
||
address: '', //详细地址
|
||
},
|
||
region: '请选择', //省市区显示
|
||
|
||
defaultRegion: ['广东省', '广州市', '番禺区'],
|
||
showRegion: false, //显示地区选择的flag
|
||
lists: [] //省市区的数据
|
||
};
|
||
},
|
||
|
||
onLoad: function(options) {
|
||
this.lists = area; //省市区数据
|
||
|
||
try {
|
||
const type = this.$Route.query.type;
|
||
const id = this.$Route.query.id;
|
||
if (type) {
|
||
this.type = type;
|
||
const shopInfo = this.shopInfo;
|
||
|
||
if (type == 1) {
|
||
this.region = shopInfo.province_name + " " + shopInfo.province_name + " " + shopInfo
|
||
.district_name
|
||
for (const key in shopInfo) {
|
||
this.$set(this.refund_address, key, shopInfo[key])
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑商家地址'
|
||
});
|
||
} else if (type == 2) {
|
||
this.region = shopInfo.refund_address.province_name + " " + shopInfo.refund_address
|
||
.province_name + " " + shopInfo.refund_address.district_name
|
||
for (const key in shopInfo.refund_address) {
|
||
this.$set(this.refund_address, key, shopInfo.refund_address[key])
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑退货地址'
|
||
});
|
||
}
|
||
}
|
||
if (id) {
|
||
this.type = 3;
|
||
this.id = id;
|
||
this.getAddressFunc(id)
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
methods: {
|
||
// 提交地址信息
|
||
async onSubmit() {
|
||
console.log(this.type == 3)
|
||
let refund_address = {
|
||
nickname: this.type == 2 ? this.refund_address.nickname : '',
|
||
id: this.type == 3 ? this.id : '',
|
||
mobile: this.type != 1 ? this.refund_address.mobile : '',
|
||
consignee: this.type == 3 ? this.refund_address.nickname : '',
|
||
province: this.type == 3 ? this.refund_address.province_id : '',
|
||
city: this.type == 3 ? this.refund_address.city_id : '',
|
||
district: this.type == 3 ? this.refund_address.district_id : '',
|
||
province_id: this.type != 3 ? this.refund_address.province_id : '',
|
||
city_id: this.type != 3 ? this.refund_address.city_id : '',
|
||
district_id: this.type != 3 ? this.refund_address.district_id : '',
|
||
address: this.refund_address.address
|
||
}
|
||
if (this.type == 2 || this.type == 3) {
|
||
if (!this.refund_address.nickname) return this.$toast({
|
||
title: '请填写收货人姓名'
|
||
});
|
||
if (!this.refund_address.nickname.length >= 20) return this.$toast({
|
||
title: '输入的收货人长度不得大于20位'
|
||
})
|
||
if (!this.refund_address.mobile) return this.$toast({
|
||
title: '请填写手机号码'
|
||
});
|
||
}
|
||
if (!this.region) return this.$toast({
|
||
title: '请选择地区'
|
||
});
|
||
if (!this.refund_address.address) return this.$toast({
|
||
title: '请填写小区、街道、门牌号等信息'
|
||
});
|
||
|
||
if (this.type == 2) {
|
||
await apiSetShopInfo({
|
||
refund_address
|
||
})
|
||
} else if (this.type == 1) {
|
||
await apiSetShopInfo({
|
||
...refund_address
|
||
})
|
||
} else if (this.type == 3) {
|
||
await apiOrderEditAddress({
|
||
...refund_address
|
||
})
|
||
}
|
||
this.$refs.uToast.show({
|
||
title: '设置成功',
|
||
type: 'success'
|
||
})
|
||
setTimeout(() => {
|
||
this.$Router.back()
|
||
}, 1000)
|
||
},
|
||
|
||
async getAddressFunc(id) {
|
||
const res = await apiOrderGetAddress({
|
||
id
|
||
})
|
||
|
||
this.refund_address.nickname = res.consignee;
|
||
this.refund_address.mobile = res.mobile
|
||
this.refund_address.province_id = res.province
|
||
this.refund_address.city_id = res.city
|
||
this.refund_address.district_id = res.district
|
||
this.refund_address.address = res.address
|
||
this.region = res.region[0] + " " + res.region[1] + " " + res.region[2]
|
||
},
|
||
|
||
// 地区选择，选择当前省市区的ID
|
||
regionChange(region) {
|
||
this.refund_address.province_id = region[0].value;
|
||
this.refund_address.city_id = region[1].value;
|
||
this.refund_address.district_id = region[2].value;
|
||
this.region = region[0].label + " " + region[1].label + " " + region[2].label
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.address-edit {
|
||
padding-top: 20rpx;
|
||
|
||
.bb {
|
||
border-bottom: 1px solid #F8F8F8;
|
||
}
|
||
|
||
.form-item {
|
||
padding: 30rpx;
|
||
background-color: $-color-white;
|
||
|
||
.label {
|
||
width: 150rpx;
|
||
color: $-color-black;
|
||
font-size: $-font-size-nr;
|
||
font-weight: 500;
|
||
}
|
||
|
||
input {
|
||
text-align: right;
|
||
height: 100%;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.my-btn {
|
||
height: 88rpx;
|
||
margin: 30rpx 26rpx;
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
background-color: $-color-primary;
|
||
}
|
||
</style>
|