web-africa-h5/pages/self-service/modify-adddress/apply.vue

567 lines
13 KiB
Vue
Raw Normal View History

2025-03-21 14:49:01 +08:00
<template>
<view v-if="isPop">
<view class="pop-bg" @click="closeFunc"></view>
<view class="pop-box">
<form @submit="formSubmit" @reset="formReset">
<view class="tips-box">{{ $t('MY_CK_31') }}</view>
<view class="form-group">
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('MY_ORD_1') }}
</view>
<view class="disabled-input">{{ form.orderCode }}</view>
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('MY_ORD_10') }}
</view>
<input class="form-input" v-model="form.newRecName" type="text" value="" :placeholder="$t('w_0067')" />
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('w_0052') }}
</view>
<input class="form-input" v-model="form.newRecPhone" type="text" value="" :placeholder="$t('w_0053')" />
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('w_0068') }}
</view>
<input class="form-input" type="text" value="" :placeholder="$t('w_0069')" v-model="selectCity"
disabled="true" @click="showMulLinkageThreePicker" />
<text class="icon iconfont icon-jiantou"></text>
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('S_C_27') }}
</view>
<textarea auto-height v-model="form.newRecAddress" class="form-textarea" value=""
placeholder="" />
</view>
<view class="form-item" v-if="addressData.length > 0">
<view class="address-box">
<view class="domation f28 mb20">{{ $t('w_0073') }}</view>
<view class="address-item" v-for="(item, index) in addressData" :key="index"
@click="selectAddress(item)">
<view class="radio-check d-c-c" :class="{ checked: item.pkId == address_index }">
<u-icon name="checkbox-mark" color="#fff" size="28rpx"></u-icon>
</view>
<view class="flex-1">
<view class="f28 gray3 fb mb10 d-s-s">{{ item.recName }}</view>
<view class="f26 gray3 mb10">{{ item.recPhone }}</view>
<view class="f24 gray9">{{ item.recArea }}{{ item.recAddress }}</view>
</view>
</view>
</view>
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('MY_CK_34') }}
</view>
<view class="disabled-input">{{form.postage}}</view>
</view>
<view class="form-item">
<view class="form-label">
<text class="domation mr10">*</text>
{{ $t('MY_WAL_22') }}
</view>
<textarea auto-height class="form-textarea" v-model="form.selfRemark" value="" placeholder="" />
</view>
</view>
<button class="normal-sub-btn" form-type="submit" style="margin-top: 37rpx;width: 80%;">{{ $t('w_0035') }}</button>
</form>
<Popup :show="isPopup" :width="665" :padding="0" @hidePopup="hidePopupFunc">
<view class="d-e-c ww100">
<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text>
</view>
</view>
<view class="ww100 box-s-b" style="padding: 0 60rpx;">
<view class="d-s-c" style="margin-bottom: 50rpx;">
<u-icon name="checkmark-circle-fill" color="#333333" size="38rpx"></u-icon>
<text class="ml20">{{ $t('MY_CK_35') }}</text>
</view>
<view class="f24 gray6 line-h-15">{{ $t('MY_CK_36') }}</view>
<view class="f24 gray6 line-h-15 mb40">{{ $t('MY_CK_28') }}400-0000-8888</view>
<button class="s-pop-btn" @click="hidePopupFunc">{{ $t('MY_WAL_23') }}</button>
</view>
</Popup>
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</view>
</template>
<script>
import Popup from '@/components/uni-popup.vue';
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
import utils from '@/common/utils.js';
export default {
components: {
Popup,
mpvueCityPicker
},
data() {
return {
cityPickerValueDefault: [0, 0, 0],
isPopup: false,
form: {
creationTime: '',
creatorCode: '',
deliveryWay: 1,
dizhi: ['', '', ''],
memberCode: '',
memberName: '',//////
nameList: '',
newPostage: '', //新的邮费
newRecAddress: '', //新详细地址
newRecCity:'',///
newRecCounty:'',/////
newRecName: '', //新收货人
newRecPhone: '', //新手机
newRecProvince:'',/////
orderAchieve: '',
orderAmount: '',
orderCode: '', //订单编号
orderItemsParams: [],
orderStatus: 1,
orderStatusVal: '',
orderType: 3,
orderTypeVal: '',
payTime: '', //支付时间
pkId: 0,/////
postage: '',
recAddress: '',////
recCity: '',///
recCityVal: '',////
recName: '', //收货人
recPhone: '', //手机
recProvince: '',///
recProvinceVal: '',///
selfRemark: '', //备注
tranType: 1
},
addressData: [],
province: [],
city: [],
area: [],
is_load: false,
selectCity: '',
address_index: ''
};
},
props: ['detail', 'isPop'],
watch: {
isPop: function(n, o) {
if ((n != o) & n) {
let data = this.detail;
/*获取地址列表*/
this.getAddressData();
this.getAreaData();
utils.objForEach(this.form, (value, key) => {
if (data[key]) {
this.form[key] = data[key];
}
});
console.log(this.form)
}
}
},
methods: {
closeFunc(e) {
let flag = false;
if(e){
flag = true;
}
this.$emit('close',flag);
},
selectAddress(e) {
this.address_index = e.pkId;
this.form.dizhi[0] = e.recProvince;
this.form.dizhi[1] = e.recCity;
if (e.recCounty > 0) {
this.form.dizhi[2] = e.recCounty;
}
this.form.newRecName = e.recName;
this.form.newRecPhone = e.recPhone;
this.selectCity = e.recArea;
this.form.newRecAddress = e.recAddress;
this.form.nameList = e.recArea;
this.form.newRecProvince = e.recProvince;
this.form.newRecCity = e.recCity;
this.form.newRecCounty = e.recCounty;
this.selfOrderPostage();
},
selfOrderPostage() {
let self = this;
console.log(1111111)
self._post('sale/api/order/self-order-postage', {
recCity: self.form.newRecProvince,
recProvince: self.form.newRecCity
}, res => {
console.log(res)
self.form.newPostage = res.data.postage;
},err=>{
console.log(err)
})
},
/*提交*/
formSubmit: function(e) {
// this.isPopup = true;
// return
let self = this;
var formdata = self.form;
if (formdata.name == '') {
uni.showToast({
title: this.$t('w_0067'),
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.recPhone == '') {
uni.showToast({
title: this.$t('w_0134'),
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: this.$t('S_C_30'),
duration: 1000,
icon: 'none'
});
return false;
}
}
if (formdata.recAddress == '') {
uni.showToast({
title: this.$t('w_0070'),
duration: 1000,
icon: 'none'
});
return false;
}
self._post('member/api/self-modify-address/putin', formdata, function(res) {
self.isPopup = true;
});
},
/*获取数据*/
getAddressData() {
let self = this;
let dataType = self.dataType;
self.loadding = true;
self._get('member/api/member-address/list', {}, function(res) {
self.addressData = res.data;
self.loadding = false;
uni.hideLoading();
});
},
// 获取省市区
getAreaData() {
let self = this;
self._get('system/api/area/tree', {}, function(res) {
self.province = res.data;
self.is_load = true;
});
},
hidePopupFunc() {
this.isPopup = false;
this.closeFunc(true);
},
/*三级联动选择*/
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show();
},
/*确定选择的省市区*/
onConfirm(e) {
console.log(e);
this.selectCity = e.label;
this.form.nameList = e.label;
// this.recProvince = e.cityCode[0];
// this.recCity = e.cityCode[1];
// this.recCounty = e.cityCode[2];
this.form.newRecProvince = e.cityCode[0];
this.form.newRecCity = e.cityCode[1];
this.form.newRecCounty = e.cityCode[2];
this.form.dizhi[0] = e.cityCode[0];
this.form.dizhi[1] = e.cityCode[1];
if (e.cityCode[2] > 0) {
this.form.dizhi[2] = e.cityCode[2];
}
this.selfOrderPostage();
}
}
};
</script>
<style lang="scss">
.agreement-box {
width: 750rpx;
background: #ffffff;
padding: 28rpx 22rpx;
box-sizing: border-box;
margin-top: 2rpx;
margin-bottom: 20rpx;
.agreement-content {
font-size: 24rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #999999;
line-height: 32rpx;
word-break: break-all;
margin-bottom: 32rpx;
}
.agreement-btn {
min-width: 320rpx;
height: 76rpx;
line-height: 1.5;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx;
box-sizing: border-box;
background: #282828;
border-radius: 38rpx;
color: #ffffff;
font-size: 24rpx;
}
}
.form-title {
width: 750rpx;
height: 106rpx;
background: #fb3024;
padding-left: 44rpx;
position: relative;
box-sizing: border-box;
font-size: 28rpx;
color: #fff;
line-height: 106rpx;
font-weight: bold;
z-index: 1;
}
.form-title::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
left: 25rpx;
width: 6rpx;
height: 24rpx;
background-color: #fb3024;
z-index: 1;
}
.form-group {
padding: 0 22rpx;
background: #ffffff;
.form-item {
min-height: 104rpx;
box-sizing: border-box;
padding: 15rpx 0;
line-height: 1.5;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid #eee;
.icon-jiantou {
font-size: 32rpx;
color: 090000;
}
.form-tips {
font-size: 24rpx;
color: #999;
}
.form-label {
width: 255rpx;
flex-shrink: 0;
word-break: break-all;
margin-right: 20rpx;
}
.disabled-input {
width: 340rpx;
height: 64rpx;
padding: 0 16rpx;
line-height: 64rpx;
background: #eee;
font-size: 24rpx;
color: #333;
flex: 1;
}
.form-textarea {
width: 340rpx;
padding: 0 16rpx;
line-height: 1.5;
font-size: 24rpx;
color: #333;
flex: 1;
background: #fff;
}
.form-input {
width: 340rpx;
height: 64rpx;
padding: 0 16rpx;
line-height: 64rpx;
background: #fff;
font-size: 24rpx;
color: #333;
flex: 1;
}
.form-item:last-child {
border: none;
}
}
}
.form-upload {
padding: 30rpx 23rpx;
}
.form-upload-name {
font-size: 28rpx;
color: #333;
margin-bottom: 20rpx;
}
.form-upload-tips {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
}
.form-upload-tips2 {
font-size: 24rpx;
color: #fb3024;
line-height: 1.5;
}
.upload-add {
width: 142rpx;
height: 142rpx;
margin-right: 18rpx;
margin-bottom: 18rpx;
}
.tips-box {
padding: 33rpx 27rpx 29rpx 41rpx;
font-size: 26rpx;
color: #666;
line-height: 1.5;
word-break: break-all;
}
.address-box {
width: 706rpx;
padding: 21rpx 26rpx;
background-color: #f5f5f5;
border-radius: 15rpx;
}
.address-item {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
}
.radio-check {
width: 40rpx;
height: 40rpx;
background: #ffffff;
border: 1rpx solid #dddddd;
border-radius: 50%;
box-sizing: border;
position: relative;
margin-right: 20rpx;
}
.radio-check.checked {
border: 1rpx solid #fb3024;
background: #fb3024;
}
.icon.icon-guanbi {
font-size: 24rpx;
color: #999;
}
.s-pop-btn {
width: 462rpx;
height: 78rpx;
background: #fb3024;
border-radius: 39rpx;
text-align: center;
line-height: 1.2;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #fff;
margin: 0 auto;
margin-bottom: 68rpx;
}
.pop-box {
width: 95%;
box-sizing: border-box;
position: fixed;
top: 40rpx;
// bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #ffffff;
border-radius: 15rpx;
z-index: 100;
padding-bottom: 60rpx;
max-height: 90vh;
overflow-y: auto;
}
.pop-bg {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 98;
background-color: rgba(0, 0, 0, 0.6);
}
</style>