399 lines
9.9 KiB
Vue
399 lines
9.9 KiB
Vue
|
<template>
|
||
|
|
<view class="pb20">
|
||
|
|
<!-- 收货人信息 -->
|
||
|
|
<view class="form-title d-b-c">
|
||
|
|
<text>
|
||
|
|
<!-- 收货人信息 -->
|
||
|
|
{{$t('w_0065')}}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="prefecture 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="form.recName" placeholder="" />
|
||
|
|
</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="form.recPhone" placeholder="" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
<!-- 收货地址 -->
|
||
|
|
{{$t('w_0068')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" disabled type="text" v-model="form.diqu" placeholder=""
|
||
|
|
@click="showAddPicker" />
|
||
|
|
<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="form.recAddress" placeholder="" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<view class="form-label">
|
||
|
|
<text class="domation mr10">*</text>
|
||
|
|
<!-- 邮费 -->
|
||
|
|
{{$t('w_0071')}}
|
||
|
|
</view>
|
||
|
|
<input class="form-input" disabled type="text" :value="formatNum(form.postage)" />
|
||
|
|
</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.remark" placeholder="" />
|
||
|
|
</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 detail.pgpList" :key="index" class="product-item">
|
||
|
|
<view class="d-b-s mb20">
|
||
|
|
<image class="product-img" :src="item.cover1 || item.cover" mode=""></image>
|
||
|
|
<view class="product-info d-c d-b-s flex-1">
|
||
|
|
<view class="text-ellipsis-2 f28 gray3">{{ item.waresName || item.productName }}</view>
|
||
|
|
<view v-if="item.waresSkuList" class="f22 gray6">{{item.waresSkuList[0].specValueNames}}
|
||
|
|
</view>
|
||
|
|
<view class="price-color f24">
|
||
|
|
{{currencyIcon()}}
|
||
|
|
<text class="f32 fb">{{ formatNum(item.price || item.waresPrice) }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="f24 gray9 ml20">X{{ item.quantity }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="ww100 pt30">
|
||
|
|
<view class="d-b-c mb20">
|
||
|
|
<view class="flex-1 f26 gray9">{{$t('w_0083')}}</view>
|
||
|
|
<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(detail.price) }}</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="d-b-c mb20">
|
||
|
|
<view class="flex-1 f26 gray9">{{$t('w_0071')}}</view>
|
||
|
|
<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(form.postage) || '0.00' }}</view>
|
||
|
|
</view> -->
|
||
|
|
<!-- <view class="d-b-c mb20">
|
||
|
|
<view class="flex-1 f26 gray9">复购券抵扣</view>
|
||
|
|
<view class="f26 gray3">{{currencyIcon()}}1400</view>
|
||
|
|
</view> -->
|
||
|
|
<!-- <view class="d-b-c mb20">
|
||
|
|
<view class="flex-1 f26 gray9">总价</view>
|
||
|
|
<view class="f26 gray3">{{currencyIcon()}}{{form.priceAmount}}</view>
|
||
|
|
</view> -->
|
||
|
|
<!-- <view class="d-b-c mb20">
|
||
|
|
<view class="flex-1 f26 gray9">{{$t('ENU_TOTAL_V_1')}}</view>
|
||
|
|
<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(form.achieveAmount) }}</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="subFunc">{{$t('w_0085')}}</button>
|
||
|
|
<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province"
|
||
|
|
:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
mpvueCityPicker
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
detail: {},
|
||
|
|
province: [],
|
||
|
|
is_load: false,
|
||
|
|
cityPickerValueDefault: [0, 0, 0],
|
||
|
|
form: {
|
||
|
|
deliveryName: "快递发货",
|
||
|
|
deliveryWay: 1,
|
||
|
|
diqu: "",
|
||
|
|
pkGradeVal: "",
|
||
|
|
pkNewPeople: 0,
|
||
|
|
postPrice: 0,
|
||
|
|
postage: "0.00",
|
||
|
|
recAddress: "",
|
||
|
|
recCity: 35,
|
||
|
|
recCounty: 37,
|
||
|
|
recName: "",
|
||
|
|
recPhone: "",
|
||
|
|
recProvince: 1,
|
||
|
|
specialArea: 9,
|
||
|
|
transType: 1
|
||
|
|
},
|
||
|
|
specialArea: 9
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
if (e.data) {
|
||
|
|
this.detail = JSON.parse(decodeURIComponent(e.data));
|
||
|
|
this.form.pkNewPeople = this.detail.pkNewPeople;
|
||
|
|
console.log(this.detail)
|
||
|
|
}
|
||
|
|
this.getInfo();
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getGenerate();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/* 生成token */
|
||
|
|
getGenerate() {
|
||
|
|
let self = this;
|
||
|
|
self._get('system/api/idempotent/generate', {}, res => {
|
||
|
|
uni.setStorageSync('token', res.msg);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
subFunc(){
|
||
|
|
let self =this;
|
||
|
|
let params = this.form;
|
||
|
|
let flag = false;
|
||
|
|
let values = [];
|
||
|
|
values.push({
|
||
|
|
name: this.$t('w_0067'),
|
||
|
|
value: 'recName',
|
||
|
|
callback: function(e) {
|
||
|
|
return e != '';
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: this.$t('w_0053'),
|
||
|
|
value: 'recPhone',
|
||
|
|
callback: function(e) {
|
||
|
|
return e != '';
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: this.$t('w_0070'),
|
||
|
|
value: 'recAddress',
|
||
|
|
callback: function(e) {
|
||
|
|
return e.length != '';
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
name: this.$t('w_0069'),
|
||
|
|
value: 'diqu',
|
||
|
|
callback: function(e) {
|
||
|
|
return e.length != '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
values.forEach((item, index) => {
|
||
|
|
if (!flag && !item.callback(params[item.value])) {
|
||
|
|
flag = item.name;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (flag) {
|
||
|
|
uni.showToast({
|
||
|
|
title: flag,
|
||
|
|
duration: 1000,
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
self._post('sale/api/order/confirm-gift-order',params,res=>{
|
||
|
|
self.gotoPage('/pages/order/cashier?pkSettleCountry=1&specialArea=9&orderCode='+res.data.orderCode)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/* 查询邮费 */
|
||
|
|
selfOrderPostage() {
|
||
|
|
let self = this;
|
||
|
|
self._post(
|
||
|
|
'sale/api/order/self-order-postage', {
|
||
|
|
specialArea: self.specialArea,
|
||
|
|
pkNewPeople: self.detail.pkNewPeople
|
||
|
|
},
|
||
|
|
res => {
|
||
|
|
self.form.postage = res.data.postage;
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
showAddPicker() {
|
||
|
|
this.$refs.mpvueCityPicker.show();
|
||
|
|
},
|
||
|
|
getInfo() {
|
||
|
|
let self = this;
|
||
|
|
self._get('member/api/member/get-info', {}, res => {
|
||
|
|
self.userCountry = res.data.pkSettleCountry;
|
||
|
|
self.getAreaData();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取省市区
|
||
|
|
getAreaData() {
|
||
|
|
let self = this;
|
||
|
|
self._get('system/api/area/tree', {
|
||
|
|
pkCountry: self.userCountry
|
||
|
|
}, function(res) {
|
||
|
|
self.province = res.data;
|
||
|
|
self.is_load = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/*三级联动选择*/
|
||
|
|
showMulLinkageThreePicker() {
|
||
|
|
this.$refs.mpvueCityPicker.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
/*确定选择的省市区*/
|
||
|
|
onConfirm(e) {
|
||
|
|
let self = this;
|
||
|
|
self.form['recProvince'] = e.cityCode[0]*1;
|
||
|
|
self.form['recCity'] = e.cityCode[1]*1;
|
||
|
|
self.form['recCounty'] = e.cityCode[2]*1;
|
||
|
|
self.form.diqu = self.getAddName();
|
||
|
|
self.selfOrderPostage();
|
||
|
|
},
|
||
|
|
getAddName: function() {
|
||
|
|
let self = this;
|
||
|
|
let pid = 0;
|
||
|
|
let cid = 0;
|
||
|
|
let aid = 0;
|
||
|
|
let defaultValue = [0, 0, 0];
|
||
|
|
pid = self.form['recProvince'];
|
||
|
|
cid = self.form['recCity'];
|
||
|
|
aid = self.form['recCounty'];
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 106rpx;
|
||
|
|
background: #fb3024;
|
||
|
|
padding-left: 44rpx;
|
||
|
|
padding-right: 25rpx;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
line-height: 106rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title.redtitle {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.redtitle.form-title::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: auto;
|
||
|
|
left: 25rpx;
|
||
|
|
width: 6rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|