480 lines
12 KiB
Vue
480 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="pb100">
|
|||
|
|
<view class="form-title">{{ $t('w_0065') }}</view>
|
|||
|
|
<view class="form-group mb20">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="domation mr10">*</text>
|
|||
|
|
{{ $t('MY_ORD_10') }}
|
|||
|
|
</view>
|
|||
|
|
<input class="form-input" type="text" v-model="FormData.recName" :placeholder="$t('S_C_70') + $t('MY_ORD_10') + $t('PER_DA_14')" />
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="domation mr10">*</text>
|
|||
|
|
{{ $t('w_0052') }}
|
|||
|
|
</view>
|
|||
|
|
<input class="form-input" type="text" v-model="FormData.recPhone" :placeholder="$t('w_0053')" />
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item" @click="showMulLinkageThreePicker">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="domation mr10">*</text>
|
|||
|
|
{{ $t('w_0068') }}
|
|||
|
|
</view>
|
|||
|
|
<input class="form-input" disabled type="text" v-model="FormData.nameList" :placeholder="$t('CK_KS_38')" />
|
|||
|
|
<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 class="form-textarea" v-model="FormData.recAddress" :placeholder="$t('w_0070')" />
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="form-label">
|
|||
|
|
<text class="white mr10">*</text>
|
|||
|
|
{{ $t('MY_WAL_22') }}
|
|||
|
|
</view>
|
|||
|
|
<textarea auto-height class="form-textarea" v-model="FormData.remark" placeholder="" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-title">{{ $t('w_0073') }}</view>
|
|||
|
|
<view class="prefecture form-group mb20">
|
|||
|
|
<view class="d-b-s address-item" v-for="(item, index) in memberAddress" :key="index">
|
|||
|
|
<view class="radio-check d-c-c" :class="{ checked: checkedindex == index }" @click.stop="checkedFunc(item, index)">
|
|||
|
|
<u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-1">
|
|||
|
|
<view class="f28 gray3 fb mb10 d-s-s">
|
|||
|
|
{{ item.recName }}
|
|||
|
|
<text class="small-text-btn" v-if="item.isDefault == 1">{{ $t('w_0263') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="f26 gray3 mb10">{{item.recPhone}}</view> -->
|
|||
|
|
<view class="f24 gray9">{{ item.recArea }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-c-c">
|
|||
|
|
<view class="icon-box plus d-c-c ml30" @click="gotoPage('/pages/user/address/edit?pkId=' + item.pkId)">
|
|||
|
|
<image class="add_icon_img edit" src="/static/icon/add-edit.png" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-box plus d-c-c ml30" @click="delAddress(item.pkId)">
|
|||
|
|
<image class="add_icon_img delete" src="/static/icon/add-delete.png" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="product-box">
|
|||
|
|
<view class="product-title">{{ $t('w_0077') }}</view>
|
|||
|
|
<view class="product-list order-product">
|
|||
|
|
<view v-for="(item, index) in productList" :key="index" class="product-item">
|
|||
|
|
<view class="d-b-s mb20">
|
|||
|
|
<image class="product-img" :src="item.cover" mode=""></image>
|
|||
|
|
<view class="product-info d-c d-b-s flex-1">
|
|||
|
|
<view class="text-ellipsis-2 f28 gray3">{{ item.productName }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="f24 gray9 ml20">X{{ FormData.quantity }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mb10 gray9 f26">{{ $t('MN_F_41') }}：{{ item.specsName }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="ww100 pt30">
|
|||
|
|
<view class="d-b-c mb20">
|
|||
|
|
<view class="flex-1 f26 gray9">{{ $t('w_0071') }}</view>
|
|||
|
|
<view class="f26 gray3">{{ currencyIcon() }}{{ postageData || '0.00' }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="subFunc">{{ $t('MY_CK_13') }}</button>
|
|||
|
|
<mpvueCityPicker v-if="is_load" ref="mpvueCityPicker" :province="province" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvueCityPicker>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
mpvueCityPicker
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
is_load: false,
|
|||
|
|
productList: [],
|
|||
|
|
/* 地址 */
|
|||
|
|
cityPickerValueDefault: [0, 0, 0],
|
|||
|
|
province: [],
|
|||
|
|
checkedindex: 0,
|
|||
|
|
showPop: true,
|
|||
|
|
FormData: {
|
|||
|
|
pkId: '',
|
|||
|
|
quantity: '',
|
|||
|
|
recAddress: '',
|
|||
|
|
recCity: '',
|
|||
|
|
recCounty: '',
|
|||
|
|
recName: '',
|
|||
|
|
recPhone: '',
|
|||
|
|
recProvince: '',
|
|||
|
|
nameList: ''
|
|||
|
|
},
|
|||
|
|
postageData: '0.0',
|
|||
|
|
memberAddress: []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this.FormData.quantity = e.quantity;
|
|||
|
|
this.FormData.pkId = e.pkId;
|
|||
|
|
this.getAreaData();
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getMemberAddress();
|
|||
|
|
this.getData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
postage() {
|
|||
|
|
let self = this;
|
|||
|
|
this._get(
|
|||
|
|
'activity/api/pick/postage',
|
|||
|
|
{
|
|||
|
|
quantity: self.FormData.quantity,
|
|||
|
|
pkId: self.FormData.pkId,
|
|||
|
|
recProvince: self.FormData.recProvince,
|
|||
|
|
recCity: self.FormData.recCity
|
|||
|
|
},
|
|||
|
|
res => {
|
|||
|
|
self.postageData = res.data;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
// 获取省市区
|
|||
|
|
getData() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get(
|
|||
|
|
'activity/api/pick/detail',
|
|||
|
|
{
|
|||
|
|
quantity: self.FormData.quantity,
|
|||
|
|
pkId: self.FormData.pkId
|
|||
|
|
},
|
|||
|
|
function(res) {
|
|||
|
|
self.productList = res.data.detailList;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
// 获取省市区
|
|||
|
|
getAreaData() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get('system/api/area/tree', {}, function(res) {
|
|||
|
|
self.province = res.data;
|
|||
|
|
self.is_load = true;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*三级联动选择*/
|
|||
|
|
showMulLinkageThreePicker() {
|
|||
|
|
this.$refs.mpvueCityPicker.show();
|
|||
|
|
},
|
|||
|
|
checkedFunc(e, n) {
|
|||
|
|
this.checkedindex = n;
|
|||
|
|
this.FormData.recName = e.recName;
|
|||
|
|
this.FormData.recPhone = e.recPhone;
|
|||
|
|
this.FormData.recProvince = e.recProvince;
|
|||
|
|
this.FormData.recCity = e.recCity;
|
|||
|
|
this.FormData.recCounty = e.recCounty;
|
|||
|
|
this.FormData.nameList = e.recArea;
|
|||
|
|
this.FormData.recAddress = e.recAddress;
|
|||
|
|
this.FormData.dizhi = [e.recProvince, e.recCity, e.recCounty];
|
|||
|
|
this.postage();
|
|||
|
|
},
|
|||
|
|
/*确定选择的省市区*/
|
|||
|
|
onConfirm(e) {
|
|||
|
|
let self = this;
|
|||
|
|
self.FormData['rec' + 'Province'] = e.cityCode[0];
|
|||
|
|
self.FormData['rec' + 'City'] = e.cityCode[1];
|
|||
|
|
self.FormData['rec' + 'County'] = e.cityCode[2];
|
|||
|
|
self.FormData.nameList = self.getAddName();
|
|||
|
|
self.postage();
|
|||
|
|
},
|
|||
|
|
getAddName: function() {
|
|||
|
|
let self = this;
|
|||
|
|
let pid = 0;
|
|||
|
|
let cid = 0;
|
|||
|
|
let aid = 0;
|
|||
|
|
let defaultValue = [0, 0, 0];
|
|||
|
|
pid = self.FormData['rec' + 'Province'];
|
|||
|
|
cid = self.FormData['rec' + 'City'];
|
|||
|
|
aid = self.FormData['rec' + 'County'];
|
|||
|
|
defaultValue = self.cityPickerValueDefault;
|
|||
|
|
let address = self.getAddressName(pid, cid, aid, defaultValue);
|
|||
|
|
return address;
|
|||
|
|
},
|
|||
|
|
/* 省市区回显 */
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
getMemberAddress() {
|
|||
|
|
let self = this;
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
self._get('member/api/member-address/list', {}, function(res) {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
self.memberAddress = res.data;
|
|||
|
|
let e = self.memberAddress[0];
|
|||
|
|
self.FormData.recName = e.recName;
|
|||
|
|
self.FormData.recPhone = e.recPhone;
|
|||
|
|
self.FormData.recProvince = e.recProvince;
|
|||
|
|
self.FormData.recCity = e.recCity;
|
|||
|
|
self.FormData.recCounty = e.recCounty;
|
|||
|
|
self.FormData.nameList = e.recArea;
|
|||
|
|
self.FormData.recAddress = e.recAddress;
|
|||
|
|
self.FormData.dizhi = [e.recProvince, e.recCity, e.recCounty];
|
|||
|
|
self.postage();
|
|||
|
|
resolve(true);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
resolve(false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*删除地址*/
|
|||
|
|
delAddress(e) {
|
|||
|
|
let self = this;
|
|||
|
|
wx.showModal({
|
|||
|
|
title: self.$t('w_0034'),
|
|||
|
|
content: self.$t('w_0088'),
|
|||
|
|
success: function(o) {
|
|||
|
|
o.confirm &&
|
|||
|
|
self._delete('member/api/member-address/' + e, {}, function(result) {
|
|||
|
|
if (result.code == 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: self.$t('w_0089'),
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
self.getMemberAddress();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
closeFunc(e) {
|
|||
|
|
console.log(e);
|
|||
|
|
if (e) {
|
|||
|
|
}
|
|||
|
|
this.showPop = false;
|
|||
|
|
},
|
|||
|
|
subFunc() {
|
|||
|
|
let self = this;
|
|||
|
|
let params = self.FormData;
|
|||
|
|
self._post('activity/api/pick/order', params, res => {
|
|||
|
|
self.gotoPage('/pages/order/cashier?orderCode=' + res.data + '&specialArea=8');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</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: #fff;
|
|||
|
|
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: 170rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
word-break: break-all;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
.disabled-input {
|
|||
|
|
width: 450rpx;
|
|||
|
|
height: 78rpx;
|
|||
|
|
padding: 0 18rpx;
|
|||
|
|
line-height: 78rpx;
|
|||
|
|
background: #eee;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.form-textarea {
|
|||
|
|
width: 450rpx;
|
|||
|
|
padding: 0 18rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.form-input {
|
|||
|
|
width: 450rpx;
|
|||
|
|
height: 78rpx;
|
|||
|
|
padding: 0 18rpx;
|
|||
|
|
line-height: 78rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.radiogroup::v-deep uni-radio:not([disabled]) .uni-radio-input:hover {
|
|||
|
|
border-color: #eee;
|
|||
|
|
}
|
|||
|
|
.radio-check {
|
|||
|
|
width: 34rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 1rpx solid #dddddd;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-sizing: border;
|
|||
|
|
position: relative;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.radio-check.checked {
|
|||
|
|
border: 1rpx solid #fb3024;
|
|||
|
|
background: #fb3024;
|
|||
|
|
}
|
|||
|
|
.product-box {
|
|||
|
|
padding: 26rpx 18rpx 36rpx 20rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
.product-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
padding-bottom: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|