295 lines
7.6 KiB
Vue
295 lines
7.6 KiB
Vue
<template>
|
||
<div class="placeOrder">
|
||
<div class="header-info">
|
||
<div class="flex">
|
||
<img :src="goodsInfo.picUrl" alt="">
|
||
<div class="type" :class="`type`+goodsInfo.typeText">{{ $dict.getLabel('integralSGTypeText', goodsInfo.typeText) }}</div>
|
||
<div class="flex-right">
|
||
<p>{{goodsInfo.title}}</p>
|
||
<div>
|
||
<u-number-box v-model="goodsNum" @change="valChange" input-height="44" size="24" :min="1" :max="goodsInfo.stock"></u-number-box>
|
||
</div>
|
||
<h3>{{goodsInfo.integralPrice}}积分<span v-if="goodsInfo.type == 2">+￥{{goodsInfo.payMoney}}.00</span></h3>
|
||
</div>
|
||
</div>
|
||
<p class="tips" v-if="goodsInfo.type == 2">兑换成功后，点击「去购买」前往京东低价购买</p>
|
||
<p class="tips" v-else>积分兑换商品，可到固定的兑换点进行「核销兑换」</p>
|
||
</div>
|
||
<div class="content">
|
||
<div class="item-flex" @click="show=true">
|
||
<div class="label">订单备注</div>
|
||
<div class="value" :class="value ? '' : 'color-999'">{{value || '无备注'}}<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="label">积分余额</div>
|
||
<div class="value color-FF6900">{{total}}积分</div>
|
||
</div>
|
||
<div class="item-flex">
|
||
<div class="label">支付积分</div>
|
||
<div class="value">减{{(goodsNum*goodsInfo.integralPrice).toFixed(2)}}积分</div>
|
||
</div>
|
||
<div class="item-flex" v-if="goodsInfo.type == 2">
|
||
<div class="label">京东支付</div>
|
||
<div class="value color-999">¥{{(goodsNum*goodsInfo.payMoney).toFixed(2)}}</div>
|
||
</div>
|
||
</div>
|
||
<u-popup v-model="show" mode="bottom">
|
||
<div class="textarea">
|
||
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
|
||
<p>字数{{value.length}}/1000</p>
|
||
</div>
|
||
<div class="btn">
|
||
<span @click="value=''">清空内容</span>
|
||
<span class="confirm" @click="confirm">保存</span>
|
||
</div>
|
||
</u-popup>
|
||
<div class="bottom-btn" @click="confirmOrder()">
|
||
<div>提交订单</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: 'placeOrder',
|
||
appName: '提交订单',
|
||
data() {
|
||
return {
|
||
value: '',
|
||
show: false,
|
||
total: 0,
|
||
goodsInfo: {},
|
||
goodsNum: 1,
|
||
backLevel: 0,
|
||
userId: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
onLoad(option) {
|
||
this.userId = option.userId
|
||
this.shopGoodsId = option.shopGoodsId
|
||
this.total = option.total
|
||
this.backLevel = option.backLevel
|
||
this.$dict.load(['integralSGTypeText']).then(() => {
|
||
this.getDetail()
|
||
})
|
||
},
|
||
onShow() {
|
||
document.title = '提交订单'
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/appintegralsupermarketshop/queryGoodsInfoXCX?shopGoodsId=${this.shopGoodsId}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.goodsInfo = res.data
|
||
this.goodsInfo.typeText = this.goodsInfo.type == 0 ? 0 : 1
|
||
}
|
||
})
|
||
},
|
||
valChange(e) {
|
||
this.goodsNum = e.value
|
||
},
|
||
confirm() {
|
||
this.show = false
|
||
},
|
||
confirmOrder() {
|
||
this.$http.post(`/app/appintegralsupermarketorder/addWXCP`, {
|
||
shopId: this.goodsInfo.shopId,
|
||
goodsId: this.goodsInfo.id,
|
||
remarks: this.value,
|
||
quantity: this.goodsNum,
|
||
createUserId: this.userId
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
uni.$emit('updateGoodsList')
|
||
this.toSuccess()
|
||
}
|
||
})
|
||
},
|
||
toSuccess() {
|
||
var integralPrice = this.goodsNum*this.goodsInfo.integralPrice
|
||
uni.navigateTo({url: `./successOrder?shopGoodsId=${this.goodsInfo.shopGoodsId}&integralPrice=${integralPrice}&backLevel=${this.backLevel}`})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.placeOrder {
|
||
.header-info {
|
||
padding: 48px 32px;
|
||
background-color: #fff;
|
||
margin-bottom: 24px;
|
||
.flex {
|
||
margin-bottom: 32px;
|
||
display: flex;
|
||
position: relative;
|
||
img {
|
||
width: 166px;
|
||
height: 166px;
|
||
border-radius: 16px;
|
||
margin-right: 20px;
|
||
}
|
||
.type {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
border-bottom-left-radius: 16px;
|
||
border-bottom-right-radius: 16px;
|
||
width: 166px;
|
||
text-align: center;
|
||
line-height: 34px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 18px;
|
||
color: #FFF;
|
||
p {
|
||
scale: 0.9;
|
||
}
|
||
}
|
||
.type1 {
|
||
background-color: #E64E39;
|
||
}
|
||
.type0 {
|
||
background-color: #FF6900;
|
||
}
|
||
.flex-right {
|
||
width: calc(100% - 186px);
|
||
p {
|
||
word-break: break-all;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 26px;
|
||
color: #222;
|
||
line-height: 34px;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
margin-bottom: 22px;
|
||
}
|
||
div {
|
||
text-align: right;
|
||
}
|
||
h3 {
|
||
font-family: PingFangSC-SNaNpxibold;
|
||
font-weight: 600;
|
||
font-size: 34px;
|
||
color: #FF6900;
|
||
line-height: 48px;
|
||
span {
|
||
display: inline-block;
|
||
font-size: 34px;
|
||
color: #4181FF;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
display: inline-block;
|
||
padding: 12px;
|
||
line-height: 36px;
|
||
background: #F5FCF5;
|
||
border-radius: 16px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 24px;
|
||
color: #3BBC37;
|
||
span {
|
||
display: inline-block;
|
||
scale: 0.9;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
padding: 0 32px;
|
||
background-color: #fff;
|
||
.item-flex {
|
||
display: flex;
|
||
padding: 30px 0;
|
||
font-size: 26px;
|
||
line-height: 34px;
|
||
font-family: PingFangSC-Regular;
|
||
.label {
|
||
color: #222;
|
||
width: 120px;
|
||
}
|
||
.value {
|
||
width: calc(100% - 120px);
|
||
text-align: right;
|
||
color: #222;
|
||
}
|
||
.color-FF6900 {
|
||
color: #FF6900;
|
||
}
|
||
.color-999 {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.textarea {
|
||
margin: 32px 32px 24px;
|
||
width: calc(100% - 64px);
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
background: #f7f7f7;
|
||
border-radius: 8px;
|
||
p {
|
||
font-size: 26px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #999;
|
||
line-height: 36px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.btn {
|
||
padding: 0 32px 24px;
|
||
height: 64px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
span {
|
||
display: inline-block;
|
||
line-height: 64px;
|
||
font-size: 26px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #666;
|
||
}
|
||
.confirm {
|
||
width: 144px;
|
||
text-align: center;
|
||
background: #1365dd;
|
||
border-radius: 32px;
|
||
font-size: 28px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.bottom-btn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 20px 32px;
|
||
box-sizing: border-box;
|
||
div {
|
||
width: 100%;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
text-align: center;
|
||
border-radius: 44px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 34px;
|
||
color: #FFF;
|
||
background: #4181FF;
|
||
}
|
||
}
|
||
}
|
||
</style>
|