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>
|