forked from angelo/web-retail-h5
556 lines
15 KiB
Vue
556 lines
15 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: 王三华
|
||
* @Date: 2023-06-02 15:41:29
|
||
-->
|
||
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: kBank
|
||
* @Date: 2022-11-21 15:11:22
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<view class="index_header">
|
||
|
||
</view>
|
||
<view class="context">
|
||
<u-form :model="form"
|
||
labelAlign="right"
|
||
labelWidth="75"
|
||
:rules="rules"
|
||
ref="uForm">
|
||
<view class="kuang">
|
||
<u-form-item :label="$t('MN_F_T_140')">
|
||
<view class="pickerHui">
|
||
<u-input v-model="form.deliveryName"
|
||
disabled
|
||
:placeholder="$t('w_0062')"
|
||
border="none"></u-input>
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="kuang">
|
||
<view class="disFlex tit_t">
|
||
<view>{{$t('w_0065')}}</view>
|
||
<!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
|
||
</view>
|
||
<u-form-item :label="$t('MY_ORD_10')"
|
||
prop="recName">
|
||
<u-input v-model.trim="form.recName"
|
||
:placeholder="$t('w_0067')" />
|
||
</u-form-item>
|
||
<u-form-item :label="$t('w_0242')"
|
||
prop="recPhone">
|
||
<u-input v-model.trim="form.recPhone" maxlength="20"
|
||
type="number"
|
||
:placeholder="$t('w_0321')" />
|
||
</u-form-item>
|
||
<u-form-item :label="$t('w_0068')"
|
||
prop="diqu"
|
||
@click='getDiqu'>
|
||
<view class="picker">
|
||
<u-input v-model.trim="form.diqu"
|
||
:placeholder="$t('w_0322')"
|
||
border="none"></u-input>
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item :label="$t('S_C_27')"
|
||
prop="recAddress">
|
||
<u--textarea v-model.trim="form.recAddress"
|
||
maxlength="200"
|
||
:placeholder="$t('w_0070')"></u--textarea>
|
||
|
||
</u-form-item>
|
||
<u-form-item :label="$t('w_0071')">
|
||
<u-input disabled
|
||
v-model="form.postage" />
|
||
</u-form-item>
|
||
<u-form-item :label="$t('MY_WAL_22')">
|
||
<u--textarea v-model="form.remark"
|
||
:placeholder="$t('w_0072')"></u--textarea>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
<view class="kuang" v-for="item in goodList">
|
||
<view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{$t('w_0323')}}</view>
|
||
<img :src="item.cover"
|
||
alt="">
|
||
<view class="sTit">{{$t('w_0078')}}</view>
|
||
<view class="cTit">{{ item.productName }}</view>
|
||
</view>
|
||
<view class="kuang_tr">
|
||
<view class="sTit">{{$t('ENU_N_B_T_3')}}</view>
|
||
<view v-for="ctem,index in item.waresSkuList"
|
||
:key="index"
|
||
>
|
||
<view class="cTit">{{ ctem.specValueNames }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{$t('w_0080')}}(￥)</view>
|
||
<view class="cTit">{{ item.waresPrice | numberToCurrency }}</view>
|
||
</view>
|
||
<view class="kuang_tr">
|
||
<view class="sTit">{{$t('w_0080')}}(PV)</view>
|
||
<view class="cTit">{{ item.pv | numberToCurrency }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{$t('w_0081')}}</view>
|
||
<u-number-box :min="1"
|
||
v-model="goodsNum"
|
||
@change="valChange"></u-number-box>
|
||
</view>
|
||
<view></view>
|
||
</view> -->
|
||
</view>
|
||
<view class="kuang">
|
||
<view class="disFlex just">
|
||
<view>{{$t('w_0083')}}(¥)：</view>
|
||
<view>{{ allDataObj.price | numberToCurrency}}</view>
|
||
</view>
|
||
<view class="disFlex just">
|
||
<view>{{$t('w_0324')}}(PV)：</view>
|
||
<view>{{ allDataObj.pv | numberToCurrency}}</view>
|
||
</view>
|
||
<view class="disFlex just">
|
||
<view>{{$t('w_0071')}}:</view>
|
||
<view>{{ form.postage | numberToCurrency}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuang disFlex">
|
||
<u-checkbox-group v-model="checkboxValue1"
|
||
@change="checkboxChange">
|
||
<u-checkbox :name="1">
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
<view class="tit3">{{$t('w_0207')}}</view>
|
||
<view class="tit2"
|
||
@click="toAgree"> 《{{$t('w_0208')}}》</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 占空 -->
|
||
<view style="height:150rpx"></view>
|
||
<!-- 底部 -->
|
||
<view class="footer_f">
|
||
<view class="footer">
|
||
<view class="footer_l">
|
||
<view class="disFlex">
|
||
<view class="h1">{{ $t('w_0325') }}</view>
|
||
<view class="r1">¥{{ totalMont | numberToCurrency}}</view>
|
||
</view>
|
||
<view class="disFlex">
|
||
<view class="h1">{{$t('ENU_TOTAL_V_1')}}</view>
|
||
<view class="l1">¥{{ achiveAmount | numberToCurrency}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<u-button type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
:loading="isLoading"
|
||
:loadingText="$t('w_0313')"
|
||
@tap="goBuy"
|
||
color="linear-gradient(to right, #fb3024, #fb3024 )">{{$t('w_0163')}} </u-button>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<agreement ref="agreement"></agreement>
|
||
<v-address ref="address"
|
||
:defaultCode="defaultCode"
|
||
@addressData="addressData"></v-address>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import address from '@/components/address.vue'
|
||
import * as api from '@/config/goods'
|
||
import agreement from '@/components/agreement.vue'
|
||
export default {
|
||
components: {
|
||
'v-address': address,
|
||
agreement,
|
||
},
|
||
data() {
|
||
return {
|
||
postList:[],
|
||
allGoodsData: {},
|
||
allDataObj:{},
|
||
goodList:[],
|
||
defaultCode: [],
|
||
specialArea: 21,
|
||
form: {
|
||
deliveryName: this.$t('ENU_DELIVERY_1'),
|
||
deliveryWay: 1,
|
||
postage: 0,
|
||
transType: 1,
|
||
},
|
||
deliList: [],
|
||
diqu: '',
|
||
allData: [],
|
||
goodsNum: 1,
|
||
checkboxValue1: [],
|
||
priceAmount: 0, //商品总价
|
||
achiveAmount: 0, //总业绩
|
||
totalMont: 0,
|
||
orderItemsParams: [],
|
||
isLoading: false,
|
||
hasChecked: '',
|
||
rules: {
|
||
recName: [
|
||
{
|
||
required: true,
|
||
message: this.$t('w_0067'),
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
recPhone: [
|
||
{
|
||
required: true,
|
||
message: this.$t('w_0321'),
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
diqu: [
|
||
{
|
||
required: true,
|
||
message: this.$t('w_0069'),
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
recAddress: [
|
||
{
|
||
required: true,
|
||
message: this.$t('w_0070'),
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// this.allData = JSON.parse(options.allData)
|
||
// this.hasChecked = options.hasChecked
|
||
|
||
this.allData = JSON.parse(options.allData)
|
||
console.log('%c [ this.allData ]-248', 'font-size:13px; background:#5a9c24; color:#9ee068;', this.allData)
|
||
let confirmOrderWaresInfoParamsList = []
|
||
this.hasChecked = options.hasChecked || ''
|
||
this.allData.forEach((item) => {
|
||
item.waresSkuList.forEach((ctem) => {
|
||
confirmOrderWaresInfoParamsList.push({
|
||
pkTWares: ctem.pkTWares,
|
||
pkTWaresSku:ctem.pkTWaresSku||ctem.pkThWaresSku,
|
||
quantity: item.quantity,
|
||
source: item.source,
|
||
})
|
||
})
|
||
})
|
||
// 获取购物车详情
|
||
this.getCatDetail(confirmOrderWaresInfoParamsList)
|
||
this.getGenerate()
|
||
this.valChange({ value: 1 })
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
getCatDetail(confirmOrderWaresInfoParamsList) {
|
||
api
|
||
.waresinfo({
|
||
confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
|
||
})
|
||
.then((res) => {
|
||
this.goodList = res.data
|
||
let price = 0
|
||
let pv = 0
|
||
this.goodList.forEach((item) => {
|
||
item.waresItemsParamList = []
|
||
price += Number(item.priceAmount)
|
||
pv += Number(item.pv)
|
||
item.waresSkuList.forEach((ctem) => {
|
||
item.waresItemsParamList.push({
|
||
pkWaresSpecsSku: ctem.pkId,
|
||
})
|
||
})
|
||
})
|
||
this.allDataObj.price = price
|
||
this.allDataObj.pv = pv
|
||
this.totalMont = price
|
||
this.achiveAmount = pv
|
||
this.totalAmont = this.allDataObj.price
|
||
let arr = []
|
||
this.goodList.forEach((item) => {
|
||
arr.push({
|
||
channel: item.source,
|
||
pkId: item.pkId,
|
||
quantity: item.quantity,
|
||
waresItemsParamList: item.waresItemsParamList,
|
||
})
|
||
})
|
||
this.postList = arr
|
||
this.allGoodsData.specialArea = 21
|
||
})},
|
||
addAdress() {
|
||
uni.navigateTo({
|
||
url: '/pages/address/index',
|
||
})
|
||
},
|
||
toAgree() {
|
||
// agreeMent
|
||
this.$refs.agreement.openDig()
|
||
},
|
||
getGenerate() {
|
||
api.generate().then((res) => {
|
||
uni.setStorageSync('mToken', res.msg)
|
||
})
|
||
},
|
||
goBuy() {
|
||
if (this.checkboxValue1.length == 0) {
|
||
uni.showToast({
|
||
title: this.$t('w_0091'),
|
||
icon: 'none',
|
||
duration: 1500,
|
||
})
|
||
return
|
||
}
|
||
this.$refs.uForm.validate().then((res) => {
|
||
this.isLoading = true
|
||
api
|
||
.confirmShareOrder(
|
||
Object.assign({}, this.form, {
|
||
orderItemsParams: this.postList,
|
||
specialArea: 21,
|
||
})
|
||
)
|
||
.then((res) => {
|
||
this.isLoading = false
|
||
if (res.code == 200) {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages/pay/index?paramsPost=' +
|
||
JSON.stringify(res.data) +
|
||
'&businessType=1',
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
setGoodlistType() {
|
||
let carList = {
|
||
channel: this.allData.source,
|
||
pkId: this.allData.pkId,
|
||
quantity: this.goodsNum,
|
||
waresItemsParamList: [
|
||
{
|
||
pkWaresSpecsSku: this.hasChecked,
|
||
},
|
||
],
|
||
}
|
||
this.orderItemsParams = [carList]
|
||
},
|
||
checkboxChange() {},
|
||
valChange(e) {
|
||
this.goodsNum = e.value
|
||
this.priceAmount = this.allData.waresPrice * this.goodsNum
|
||
this.achiveAmount = this.allData.waresAchieve * this.goodsNum
|
||
this.totalMont = this.priceAmount.toFixed(3)
|
||
this.setGoodlistType()
|
||
if (this.form.recProvince) {
|
||
this.queryAdressPostage()
|
||
}
|
||
},
|
||
getDiqu() {
|
||
this.$refs.address.setShow()
|
||
},
|
||
confirmPopup() {},
|
||
queryAdressPostage() {
|
||
api
|
||
.queryAdressPostage(
|
||
Object.assign({}, this.form, {
|
||
orderItemsParams:this.postList,
|
||
})
|
||
)
|
||
.then((res) => {
|
||
this.form.postage = Number(res.data.postage).toFixed(2)
|
||
this.totalMont =
|
||
parseFloat(this.allDataObj.price) + parseFloat(res.data.postage)
|
||
this.totalMont = this.totalMont.toFixed(3)
|
||
})
|
||
},
|
||
addressData(diqu, obj) {
|
||
this.form.diqu = diqu
|
||
this.form.recProvince = obj.province
|
||
this.form.recCity = obj.city
|
||
this.form.recCounty = obj.county
|
||
this.$forceUpdate()
|
||
this.setGoodlistType()
|
||
this.queryAdressPostage()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: #f9f9f9;
|
||
}
|
||
.index_header {
|
||
background: #f9f9f9;;
|
||
height: 330rpx;
|
||
}
|
||
.context {
|
||
position: relative;
|
||
padding: 24rpx;
|
||
margin-top: -360rpx;
|
||
}
|
||
.disFlex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.just {
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.kuang {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx 40rpx;
|
||
background: #fff;
|
||
box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
||
border-radius: 10px 10px 10px 10px;
|
||
.tit_t {
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
.lan {
|
||
font-size: 10px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #289fff;
|
||
}
|
||
}
|
||
.picker {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
border-width: 0.5px !important;
|
||
border-color: #dadbde !important;
|
||
border-style: solid;
|
||
border-radius: 4px;
|
||
padding: 6px 9px;
|
||
}
|
||
.pickerHui {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
border-width: 0.5px !important;
|
||
border-color: #dadbde !important;
|
||
border-style: solid;
|
||
border-radius: 4px;
|
||
padding: 6px 9px;
|
||
background: #f5f7fa;
|
||
}
|
||
.kuang_t {
|
||
display: flex;
|
||
.kuang_tl {
|
||
flex: 1;
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 6px 6px 6px 6px;
|
||
}
|
||
}
|
||
.kuang_tr {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.sTit {
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #999999;
|
||
margin: 14rpx 0;
|
||
}
|
||
.cTit {
|
||
font-size: 13px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
|
||
margin-bottom: 14rpx;
|
||
}
|
||
.footer_f {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 10;
|
||
box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
|
||
}
|
||
.footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 24rpx 40rpx 20rpx;
|
||
background: #fff;
|
||
.footer_l {
|
||
}
|
||
.footer_r {
|
||
// flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.h1 {
|
||
font-size: 10px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-right: 20rpx;
|
||
}
|
||
.r1 {
|
||
font-size: 18px;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ed4623;
|
||
}
|
||
.l1 {
|
||
font-size: 16px;
|
||
font-family: PingFang SC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #384a8a;
|
||
}
|
||
.tit2 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #fb3024;
|
||
}
|
||
.tit3 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
</style>
|