284 lines
6.9 KiB
Vue
284 lines
6.9 KiB
Vue
<template>
|
|
<view class="address-form" :data-theme='theme()' :class="theme() || ''">
|
|
<navbar title="编辑地址"></navbar>
|
|
|
|
<form @submit="formSubmit" @reset="formReset">
|
|
<view class="bg-white f30">
|
|
<view class="p-0-30 ">
|
|
<view class="d-s-c border-b">
|
|
<text class="key-name">联系人</text>
|
|
<input class="ml20 f32 flex-1 p-30-0" name="name" type="text" v-model="address.name" placeholder-class="grary9"
|
|
placeholder="请填写联系人" style="font-size: 30rpx;"/>
|
|
</view>
|
|
<view class="d-s-c border-b">
|
|
<text class="key-name">电话</text>
|
|
<input class="ml20 f32 flex-1 p-30-0" name="phone" type="text" v-model="address.phone" placeholder-class="grary9"
|
|
placeholder="请填写联系电话" style="font-size: 30rpx;"/>
|
|
</view>
|
|
<view class="d-s-c border-b">
|
|
<text class="key-name">省市区</text>
|
|
<view class="input-box flex-1">
|
|
<input class="ml20 f32 flex-1 p-30-0" type="text" value="" placeholder-class="grary9" placeholder="" v-model="selectCity"
|
|
disabled="true" @click="showMulLinkageThreePicker" style="font-size: 30rpx;"/>
|
|
</view>
|
|
</view>
|
|
<view class="d-s-c border-b">
|
|
<text class="key-name">地址</text>
|
|
<textarea class="ml20 flex-1 f32 p-30-0 lh150" name="detail" placeholder-class="grary9" :auto-height="true"
|
|
v-model="address.detail" placeholder="请填写具体地址" style="font-size: 30rpx;"></textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line"></view>
|
|
|
|
<view class="d-b-c" style="padding: 0 30rpx; margin-top: 32rpx;">
|
|
<view class="key-name" style="width: 200rpx;">设为默认地址</view>
|
|
<view class="">
|
|
<radio style="transform:scale(0.6)" color='#4C9F44' :value="item.address_id+''" :checked="default_id==item.address_id+''"
|
|
@click="radioChange(item.address_id)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="d-f a-i-c btn">
|
|
<button class="f32 mt60 delBtn" @click="delAddress(address.address_id)">删除地址</button>
|
|
<button form-type="submit" class="theme-btn f32 mt60 addBtn">保存</button>
|
|
</view>
|
|
</form>
|
|
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar.vue';
|
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
|
export default {
|
|
components: {
|
|
mpvueCityPicker,
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
cityPickerValueDefault: [0, 0, 0],
|
|
selectCity: '选择省,市,区',
|
|
province_id: 0,
|
|
city_id: 0,
|
|
region_id: 0,
|
|
/*地址id*/
|
|
address_id: 0,
|
|
/*地址数据*/
|
|
address: {},
|
|
/*地区*/
|
|
region: {},
|
|
is_load: false,
|
|
province: [],
|
|
city: [],
|
|
area: [],
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
this.address_id = e.address_id;
|
|
},
|
|
mounted() {
|
|
/*获取地址数据*/
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
/*获取数据*/
|
|
getData() {
|
|
let self = this;
|
|
let address_id = self.address_id;
|
|
self._get(
|
|
'user.address/detail', {
|
|
address_id: address_id
|
|
},
|
|
function(res) {
|
|
self.address = res.data.detail;
|
|
self.address_id = res.data.detail.address_id;
|
|
self.province_id = res.data.detail.province_id;
|
|
self.city_id = res.data.detail.city_id;
|
|
self.region_id = res.data.detail.region_id;
|
|
self.region = res.data.region;
|
|
let add = '';
|
|
var b = self.region.forEach(item => {
|
|
add += item;
|
|
});
|
|
self.selectCity = add;
|
|
self.province = res.data.regionData[0];
|
|
self.city = res.data.regionData[1];
|
|
self.area = res.data.regionData[2];
|
|
self.is_load = true;
|
|
}
|
|
);
|
|
},
|
|
|
|
/*提交地址*/
|
|
formSubmit: function(e) {
|
|
let self = this;
|
|
var formdata = e.detail.value;
|
|
formdata.province_id = self.province_id;
|
|
formdata.city_id = self.city_id;
|
|
formdata.region_id = self.region_id;
|
|
formdata.address_id = self.address_id;
|
|
formdata.region = self.region;
|
|
|
|
if (formdata.name == '') {
|
|
uni.showToast({
|
|
title: '请输入收货人姓名',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if (formdata.phone == '') {
|
|
uni.showToast({
|
|
title: '请输入手机号码',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
/*let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
|
if (!reg.test(formdata.phone)) {
|
|
uni.showToast({
|
|
title: '手机号码格式不正确',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}*/
|
|
|
|
if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {
|
|
if (formdata.detail == '') {
|
|
uni.showToast({
|
|
title: '请选择完整省市区',
|
|
duration: 1000,
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
|
|
self._post('user.address/edit', formdata, function(res) {
|
|
self.showSuccess(res.msg, function() {
|
|
|
|
// #ifdef H5
|
|
uni.navigateBack({
|
|
delta: 2
|
|
});
|
|
//#endif
|
|
// #ifndef H5
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
//#endif
|
|
});
|
|
});
|
|
},
|
|
|
|
/*清空数据*/
|
|
formReset: function(e) {
|
|
console.log('清空数据');
|
|
},
|
|
|
|
/*三级联动选择*/
|
|
showMulLinkageThreePicker() {
|
|
this.$refs.mpvueCityPicker.show();
|
|
},
|
|
|
|
/*选择之后绑定*/
|
|
onConfirm(e) {
|
|
this.region = e.label.split(',');
|
|
this.selectCity = e.label;
|
|
this.province_id = e.cityCode[0];
|
|
this.city_id = e.cityCode[1];
|
|
this.region_id = e.cityCode[2];
|
|
},
|
|
|
|
/*删除地址*/
|
|
delAddress(e) {
|
|
let self = this;
|
|
wx.showModal({
|
|
title: "提示",
|
|
content: "您确定要移除当前收货地址吗?",
|
|
success: function(o) {
|
|
o.confirm && self._get('user.address/delete', {
|
|
address_id: e
|
|
}, function(result) {
|
|
if (result.code == 1) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
duration: 2000
|
|
});
|
|
|
|
setTimeout(res => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
}
|
|
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.address-form {
|
|
border-top: 16rpx solid #f2f2f2;
|
|
}
|
|
|
|
.address-form .key-name {
|
|
width: 140rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.address-form .btn-red {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 44rpx;
|
|
box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, .6);
|
|
}
|
|
|
|
.btn {
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 60rpx;
|
|
}
|
|
|
|
.delBtn {
|
|
width: 330rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #F6F7F8;
|
|
border-color: #F6F7F8;
|
|
color: #303133 !important;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.addBtn {
|
|
width: 330rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.border-b {
|
|
border-bottom: 1rpx soli#F2F2F2 !important;
|
|
}
|
|
|
|
.line {
|
|
height: 12rpx;
|
|
background: #F7F7F7;
|
|
}
|
|
</style>
|