273 lines
6.5 KiB
Vue
273 lines
6.5 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('w_0075')}}</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: '',
|
||
|
|
recProvince: 0,
|
||
|
|
recCity: 0,
|
||
|
|
recCounty: 0,
|
||
|
|
address: {},
|
||
|
|
delta: 1,
|
||
|
|
province: [],
|
||
|
|
city: [],
|
||
|
|
area: [],
|
||
|
|
is_load: false,
|
||
|
|
isDefault: false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad: function(options) {
|
||
|
|
this.delta = options.delta;
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取省市区
|
||
|
|
getData() {
|
||
|
|
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;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/*提交*/
|
||
|
|
formSubmit: function(e) {
|
||
|
|
let self = this;
|
||
|
|
var formdata = e.detail.value;
|
||
|
|
formdata.recProvince = self.recProvince;
|
||
|
|
formdata.recCity = self.recCity;
|
||
|
|
formdata.recCounty = self.recCounty;
|
||
|
|
formdata.isDefault = self.isDefault ? 1 : 0;
|
||
|
|
if (formdata.name == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title:self.$t('w_0067'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formdata.recPhone == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0053'),
|
||
|
|
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.recAddress == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('S_C_30'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formdata.recAddress == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0070'),
|
||
|
|
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(self.delta)
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
// #ifdef H5
|
||
|
|
history.go(-self.delta);
|
||
|
|
// #endif
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
/*发送短信*/
|
||
|
|
sendCode() {
|
||
|
|
let self = this;
|
||
|
|
var formdata = self.form;
|
||
|
|
if (formdata.phone == '') {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0278'),
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('w_0204')+'!',
|
||
|
|
duration: 2000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
self._get(
|
||
|
|
'member/api/sms/verification', {
|
||
|
|
phone: self.form.phone
|
||
|
|
},
|
||
|
|
result => {
|
||
|
|
if (result.code == 200) {
|
||
|
|
uni.showToast({
|
||
|
|
title: self.$t('MY_WAL_49')
|
||
|
|
});
|
||
|
|
self.is_send = true;
|
||
|
|
self.changeMsg();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
/*改变发送验证码按钮文本*/
|
||
|
|
changeMsg() {
|
||
|
|
if (this.second > 0) {
|
||
|
|
this.send_btn_txt = this.second + this.$t('ENU_SETTLE_P_1');
|
||
|
|
this.second--;
|
||
|
|
setTimeout(this.changeMsg, 1000);
|
||
|
|
} else {
|
||
|
|
this.send_btn_txt = this.$t('w_0055');
|
||
|
|
this.second = 60;
|
||
|
|
this.is_send = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
formReset: function(e) {
|
||
|
|
console.log('清空数据');
|
||
|
|
},
|
||
|
|
|
||
|
|
/*三级联动选择*/
|
||
|
|
showMulLinkageThreePicker() {
|
||
|
|
this.$refs.mpvueCityPicker.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
/*确定选择的省市区*/
|
||
|
|
onConfirm(e) {
|
||
|
|
console.log(e);
|
||
|
|
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>
|