567 lines
13 KiB
Vue
567 lines
13 KiB
Vue
<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> |