forked from angelo/web-retail-h5
526 lines
13 KiB
Vue
526 lines
13 KiB
Vue
<!--
|
||
* @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="'发货方式'">
|
||
<view class="pickerHui">
|
||
<u-input
|
||
v-model="form.deliveryName"
|
||
disabled
|
||
:placeholder="'请选择发货方式'"
|
||
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></view>
|
||
<!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
|
||
</view>
|
||
<u-form-item :label="'收货人'" prop="recName">
|
||
<u-input
|
||
v-model.trim="form.recName"
|
||
:placeholder="'请输入收货人'"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item :label="'收货电话'" prop="recPhone">
|
||
<u-input
|
||
v-model.trim="form.recPhone"
|
||
maxlength="20"
|
||
type="number"
|
||
:placeholder="'请输入收货电话'"
|
||
/>
|
||
</u-form-item>
|
||
<u-form-item :label="'收货地址'" prop="diqu" @click="getDiqu">
|
||
<view class="picker">
|
||
<u-input
|
||
v-model.trim="form.diqu"
|
||
:placeholder="'请选收货地址'"
|
||
border="none"
|
||
></u-input>
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item :label="'详细地址'" prop="recAddress">
|
||
<u--textarea
|
||
v-model.trim="form.recAddress"
|
||
maxlength="200"
|
||
:placeholder="'请输入详细地址'"
|
||
></u--textarea>
|
||
</u-form-item>
|
||
<u-form-item :label="'邮费'">
|
||
<u-input disabled v-model="form.postage" />
|
||
</u-form-item>
|
||
<u-form-item :label="'备注'">
|
||
<u--textarea
|
||
v-model="form.remark"
|
||
:placeholder="'请输入备注'"
|
||
></u--textarea>
|
||
</u-form-item>
|
||
</view>
|
||
</u-form>
|
||
<view class="kuang">
|
||
<view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{ '商品主图' }}</view>
|
||
<img :src="allData.cover" alt="" />
|
||
<view class="sTit">{{ '商品名称' }}</view>
|
||
<view class="cTit">{{ allData.waresName }}</view>
|
||
</view>
|
||
<view class="kuang_tr">
|
||
<view class="sTit">{{ '产品' }}</view>
|
||
<view v-for="(item, index) in allData.productParams" :key="index">
|
||
<view
|
||
v-for="(ctem, cndex) in item.waresItemsParamsList"
|
||
v-if="ctem.quantity > 0"
|
||
:key="cndex"
|
||
class="cTit"
|
||
>
|
||
{{ item.productName }}{{ ctem.specsName }}*{{ ctem.quantity }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{ '商品业绩' }}(￥)</view>
|
||
<view class="cTit">{{
|
||
allData.goodsPrice | numberToCurrency
|
||
}}</view>
|
||
</view>
|
||
<view class="kuang_tr">
|
||
<view class="sTit">{{ '商品业绩' }}</view>
|
||
<view class="cTit">{{
|
||
allData.goodsAchive | numberToCurrency
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuang_t">
|
||
<view class="kuang_tl">
|
||
<view class="sTit">{{ '商品数量' }}</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>{{ '商品金额总计' }}(¥)：</view>
|
||
<view>{{ priceAmount | numberToCurrency }}</view>
|
||
</view>
|
||
<view class="disFlex just">
|
||
<view>{{ '商品业绩' }}{{ '总计' }}：</view>
|
||
<view>{{ achiveAmount | numberToCurrency }}</view>
|
||
</view>
|
||
<view class="disFlex just">
|
||
<view>{{ '邮费' }}：</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">{{ '请阅读并同意' }}</view>
|
||
<view class="tit2"> 《{{ '购买协议' }}》</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">{{ '总价' }}</view>
|
||
<view class="r1">¥{{ totalMont | numberToCurrency }}</view>
|
||
</view>
|
||
<view class="disFlex">
|
||
<view class="h1">{{ '业绩' }}</view>
|
||
<view class="l1">¥{{ achiveAmount | numberToCurrency }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<u-button
|
||
type="success"
|
||
class="uBtn"
|
||
shape="circle"
|
||
:loading="isLoading"
|
||
:loadingText="'购买中'"
|
||
@tap="goBuy"
|
||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||
>{{ '立即购买' }}
|
||
</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 {
|
||
specialArea: 7,
|
||
|
||
defaultCode: [],
|
||
form: {
|
||
deliveryName: '快递发货',
|
||
deliveryWay: 1,
|
||
postage: 0,
|
||
transType: 1,
|
||
},
|
||
deliList: [],
|
||
diqu: '',
|
||
allData: [],
|
||
goodsNum: 1,
|
||
checkboxValue1: [],
|
||
priceAmount: 0, //商品总价
|
||
achiveAmount: 0, //总业绩
|
||
totalMont: 0,
|
||
orderItemsParams: [],
|
||
isLoading: false,
|
||
centerCodeId: '',
|
||
rules: {
|
||
recName: [
|
||
{
|
||
required: true,
|
||
message: '请输入收货人',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
recPhone: [
|
||
{
|
||
required: true,
|
||
message: '请输入收货电话',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
diqu: [
|
||
{
|
||
required: true,
|
||
message: '请选择收货地址',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
recAddress: [
|
||
{
|
||
required: true,
|
||
message: '请输入详细地址',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
],
|
||
},
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let user = uni.getStorageSync('User')
|
||
this.centerCodeId = user.memberCode
|
||
this.allData = JSON.parse(options.allData)
|
||
this.getGenerate()
|
||
this.valChange({ value: 1 })
|
||
// 发货方式
|
||
// this.getDeliveryList()
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
addAdress() {
|
||
uni.navigateTo({
|
||
url: '/pages/address/index',
|
||
})
|
||
},
|
||
toAgree() {
|
||
// agreeMent
|
||
this.$refs.agreement.openDig()
|
||
},
|
||
getGenerate() {
|
||
api.generate().then(res => {
|
||
uni.setStorageSync('mToken', res.msg)
|
||
})
|
||
},
|
||
goBuy() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
this.isLoading = true
|
||
api
|
||
.confirmFunShareOrder(
|
||
Object.assign({}, this.form, {
|
||
orderItemsParams: this.orderItemsParams,
|
||
specialArea: this.specialArea,
|
||
})
|
||
)
|
||
.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 = {
|
||
quantity: this.goodsNum,
|
||
waresCode: this.allData.waresCode,
|
||
waresItemsParamList: [],
|
||
}
|
||
this.allData.productParams.forEach(item => {
|
||
item.waresItemsParamsList.forEach(ctem => {
|
||
if (ctem.quantity != 0) {
|
||
carList.waresItemsParamList.push({
|
||
pkWaresSpecsSku: ctem.pkSkuId,
|
||
quantity: ctem.quantity,
|
||
})
|
||
}
|
||
})
|
||
})
|
||
this.orderItemsParams = [carList]
|
||
},
|
||
checkboxChange() {},
|
||
valChange(e) {
|
||
this.goodsNum = e.value
|
||
this.priceAmount = this.allData.goodsPrice * this.goodsNum
|
||
this.achiveAmount = this.allData.goodsAchive * this.goodsNum
|
||
this.totalMont = this.priceAmount
|
||
this.setGoodlistType()
|
||
if (this.form.recProvince) {
|
||
this.queryAdressPostage()
|
||
}
|
||
},
|
||
getDiqu() {
|
||
this.$refs.address.setShow()
|
||
},
|
||
confirmPopup() {},
|
||
queryAdressPostage() {
|
||
api
|
||
.queryAdressPostage(
|
||
Object.assign({}, this.form, {
|
||
orderItemsParams: this.orderItemsParams,
|
||
})
|
||
)
|
||
.then(res => {
|
||
this.form.postage = Number(res.data.postage).toFixed(2)
|
||
this.totalMont =
|
||
parseFloat(this.priceAmount) + 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: #005bac;
|
||
}
|
||
.tit3 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
</style>
|