289 lines
6.8 KiB
Vue
289 lines
6.8 KiB
Vue
|
<template>
|
||
|
|
<view class="address-form">
|
||
|
|
<form @submit="formSubmit" @reset="formReset">
|
||
|
|
<view class="bg-white address-box f28">
|
||
|
|
<view class="d-s-c border-b">
|
||
|
|
<text class="key-name">{{ $t('MY_ORD_10') }}</text>
|
||
|
|
<input class="ml20 f32 flex-1 address-input" name="recName" type="text" v-model="address.recName" placeholder-class="grary9" :placeholder="$t('w_0067')" />
|
||
|
|
</view>
|
||
|
|
<view class="d-s-c border-b">
|
||
|
|
<text class="key-name">{{ $t('w_0052') }}</text>
|
||
|
|
<input class="ml20 f32 flex-1 address-input" name="recPhone" type="text" v-model="address.recPhone" placeholder-class="grary9" :placeholder="$t('w_0053')" />
|
||
|
|
</view>
|
||
|
|
<view class="d-s-c border-b" @click="showMulLinkageThreePicker">
|
||
|
|
<text class="key-name">{{ $t('w_0068') }}</text>
|
||
|
|
<view class="input-box flex-1 d-b-c">
|
||
|
|
<input class="ml20 f32 flex-1 address-input" type="text" placeholder-class="grary9" :placeholder="$t('w_0069')" v-model="selectCity" disabled="true" />
|
||
|
|
<view class="icon iconfont fb icon-icon1"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="d-s-s border-b">
|
||
|
|
<text class="key-name">{{ $t('S_C_27') }}</text>
|
||
|
|
<textarea
|
||
|
|
class="ml20 flex-1 f32 lh150 addtextarea"
|
||
|
|
name="recAddress"
|
||
|
|
placeholder-class="grary9"
|
||
|
|
:auto-height="true"
|
||
|
|
v-model="address.recAddress"
|
||
|
|
:placeholder="$t('w_0070')"
|
||
|
|
></textarea>
|
||
|
|
</view>
|
||
|
|
<view class="d-b-c">
|
||
|
|
<text class="key-name">{{ $t('PER_DA_23') }}</text>
|
||
|
|
<view class="radio d-s-c"><radio style="transform:scale(0.6)" color="#FB3024" :checked="isDefault" @click="isDefault = !isDefault" /></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="addBtn">
|
||
|
|
<button form-type="submit" class="f32 mt60 normal-sub-btn">{{ $t('w_0035') }}</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 mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
mpvueCityPicker
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
cityPickerValueDefault: [0, 0, 0],
|
||
|
|
selectCity: this.$t('S_C_30'),
|
||
|
|
recProvince: 0,
|
||
|
|
recCity: 0,
|
||
|
|
recCounty: 0,
|
||
|
|
/*地址id*/
|
||
|
|
pkId: 0,
|
||
|
|
/*地址数据*/
|
||
|
|
address: {},
|
||
|
|
/*地区*/
|
||
|
|
region: {},
|
||
|
|
is_load: false,
|
||
|
|
province: [],
|
||
|
|
city: [],
|
||
|
|
area: [],
|
||
|
|
isDefault: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
this.pkId = e.pkId;
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
/*获取地址数据*/
|
||
|
|
this.getCityData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/* 省市区回显 */
|
||
|
|
getAddressName(pid, cid, aid, piker) {
|
||
|
|
let self = this;
|
||
|
|
/* 省市区列表 */
|
||
|
|
if (!self.province) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let add = '';
|
||
|
|
let citydata = [];
|
||
|
|
let areadata = [];
|
||
|
|
self.province.forEach((item, index) => {
|
||
|
|
if (item['id'] == pid) {
|
||
|
|
add += item['name'];
|
||
|
|
citydata = item['children'];
|
||
|
|
piker[0] = index;
|
||
|
|
citydata.forEach((citem, cindex) => {
|
||
|
|
if (citem['id'] == cid) {
|
||
|
|
add += citem['name'];
|
||
|
|
areadata = citem['children'] ? citem['children'] : [];
|
||
|
|
piker[1] = cindex;
|
||
|
|
if (areadata) {
|
||
|
|
areadata.forEach((aitem, aindex) => {
|
||
|
|
if (aitem['id'] == aid) {
|
||
|
|
add += aitem['name'];
|
||
|
|
piker[2] = aindex;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return add;
|
||
|
|
},
|
||
|
|
/*获取数据*/
|
||
|
|
getData() {
|
||
|
|
let self = this;
|
||
|
|
let pkId = self.pkId;
|
||
|
|
self._get('member/api/member-address/detail/' + pkId, {}, function(res) {
|
||
|
|
self.address = res.data;
|
||
|
|
self.isDefault = res.data.isDefault == 1 ? true : false;
|
||
|
|
self.pkId = res.data.pkId;
|
||
|
|
self.recProvince = res.data.recProvince;
|
||
|
|
self.recCity = res.data.recCity;
|
||
|
|
self.recCounty = res.data.recCounty;
|
||
|
|
self.selectCity = self.getAddressName(self.recProvince, self.recCity, self.recCounty, self.cityPickerValueDefault);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取省市区
|
||
|
|
getCityData() {
|
||
|
|
let self = this;
|
||
|
|
self._get('system/api/area/tree', {}, function(res) {
|
||
|
|
self.province = res.data;
|
||
|
|
// self.city = res.data.regionData[1];
|
||
|
|
// self.area = res.data.regionData[2];
|
||
|
|
self.is_load = true;
|
||
|
|
/*获取地址数据*/
|
||
|
|
self.getData();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/*提交地址*/
|
||
|
|
formSubmit: function(e) {
|
||
|
|
let self = this;
|
||
|
|
var formdata = e.detail.value;
|
||
|
|
formdata.pkId = self.pkId;
|
||
|
|
formdata.recProvince = self.recProvince;
|
||
|
|
formdata.recCity = self.recCity;
|
||
|
|
formdata.recCounty = self.recCounty;
|
||
|
|
formdata.pkId = self.pkId;
|
||
|
|
formdata.isDefault = self.isDefault ? 1 : 0;
|
||
|
|
// formdata.region = self.region;
|
||
|
|
|
||
|
|
if (formdata.recName == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0067'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formdata.recPhone == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0278'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
||
|
|
if (!reg.test(formdata.recPhone)) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '手机号码格式不正确',
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
if (formdata.recProvince == 0 || formdata.recCity == 0 || formdata.recCounty) {
|
||
|
|
if (formdata.detail == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('S_C_30'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
self._post('member/api/member-address/save', formdata, function(res) {
|
||
|
|
self.showSuccess(res.msg, function() {
|
||
|
|
// #ifndef H5
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: parseInt(1)
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
// #ifdef H5
|
||
|
|
history.go(-1);
|
||
|
|
// #endif
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/*清空数据*/
|
||
|
|
formReset: function(e) {
|
||
|
|
console.log('清空数据');
|
||
|
|
},
|
||
|
|
|
||
|
|
/*三级联动选择*/
|
||
|
|
showMulLinkageThreePicker() {
|
||
|
|
this.$refs.mpvueCityPicker.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
/*选择之后绑定*/
|
||
|
|
onConfirm(e) {
|
||
|
|
this.region = e.label.split(',');
|
||
|
|
this.selectCity = e.label;
|
||
|
|
this.recProvince = e.cityCode[0];
|
||
|
|
this.recCity = e.cityCode[1];
|
||
|
|
this.recCounty = e.cityCode[2];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.address-form {
|
||
|
|
padding: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-box {
|
||
|
|
padding: 0 31rpx 0 27rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-form .key-name {
|
||
|
|
width: 180rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
line-height: 90rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-form .btn-red {
|
||
|
|
height: 88rpx;
|
||
|
|
line-height: 88rpx;
|
||
|
|
border-radius: 44rpx;
|
||
|
|
box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.addBtn {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 60rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 750rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address-input {
|
||
|
|
line-height: 90rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addtextarea {
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 1.5;
|
||
|
|
padding: 25rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon.icon-icon1 {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
</style>
|