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