You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
461 lines
12 KiB
461 lines
12 KiB
<template>
|
|
<view class="order-submission">
|
|
|
|
<view v-if="volume" class="volume">
|
|
<u--image :src="volume.poster" width="300rpx" height="168.75rpx" mode="aspectFill" radius="8rpx"></u--image>
|
|
<view class="volume-info">
|
|
<view class="volume-title">{{volume.volumeName}}</view>
|
|
<view class="volume-level">{{volume.level}} | {{volume.nodeList?volume.nodeList.length: 0}}小节</view>
|
|
<view class="volume-price">
|
|
<view style="height: 30rpx;"><text style="font-size: 16rpx;">￥</text>{{isSpike?volume.spikePrice:volume.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="wrapper">
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view>积分抵扣</view>
|
|
<view class="discount">
|
|
<view class="select-btn">
|
|
<view class="checkbox-wrapper">
|
|
<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
|
|
<checkbox-group @change="changeUseIntegral">
|
|
<label class="well-check">
|
|
<text class="integral">
|
|
当前积分
|
|
<text class="num font-color-red">{{ userInfo.integral || 0 }}</text>
|
|
</text>
|
|
<checkbox value="true" :checked="useIntegral ? true : false"></checkbox>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="wrapper">
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view>余额抵扣</view>
|
|
<view class="discount">
|
|
<view class="select-btn">
|
|
<view class="checkbox-wrapper">
|
|
<!-- <input type="checkbox" v-model="useIntegral" @click="changeUseIntegral"/> -->
|
|
<checkbox-group @change="changeUseNowMoney">
|
|
<label class="well-check">
|
|
<text class="integral">
|
|
当前余额
|
|
<text class="num font-color-red">{{ userInfo.nowMoney || 0 }}</text>
|
|
</text>
|
|
<checkbox value="true" :checked="useNowMoney ? true : false"></checkbox>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="wrapper">
|
|
<view class="item">
|
|
<view>支付方式</view>
|
|
<view class="list">
|
|
<view class="payItem acea-row row-middle" v-if="!isIntegral"
|
|
:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="isWeixin">
|
|
<view class="name acea-row row-center-wrapper">
|
|
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
|
|
微信支付
|
|
</view>
|
|
<view class="tip">微信快捷支付</view>
|
|
</view>
|
|
<view class="payItem acea-row row-middle" v-if="!isIntegral"
|
|
:class="active === 'weixin' ? 'on' : ''" @click="payItem('weixin')" v-show="!isWeixin">
|
|
<view class="name acea-row row-center-wrapper">
|
|
<view class="iconfont icon-weixin2" :class="active === 'weixin' ? 'bounceIn' : ''"></view>
|
|
微信支付
|
|
</view>
|
|
<view class="tip">微信快捷支付</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="moneyList">
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view>商品总价：</view>
|
|
<view class="money">￥{{ orderPrice.totalPrice }}</view>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view>积分抵扣：</view>
|
|
<view class="money">-￥{{ orderPrice.deductionIntegral }}</view>
|
|
</view>
|
|
<view class="item acea-row row-between-wrapper">
|
|
<view>余额抵扣：</view>
|
|
<view class="money">-￥{{ orderPrice.deductionMoney }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="com_buy_agreement">
|
|
订单不支持退款，提交则表示您同意<text style="color: #eb3729;" @click="toAgreement">《用户购买充值协议》</text>
|
|
</view>
|
|
<view style="height: 120rpx"></view>
|
|
|
|
<view class="footer acea-row row-between-wrapper">
|
|
<view>
|
|
合计:
|
|
<text class="font-color-red">￥{{ orderPrice.payPrice }}</text>
|
|
</view>
|
|
<view class="settlement" @click="createOrder">立即结算</view>
|
|
</view>
|
|
<CouponListWindow v-on:couponchange="changecoupon($event)" v-model="showCoupon" :price="orderPrice.totalPrice"
|
|
:checked="usableCoupon.id" @checked="changeCoupon" :cartid="cartid"></CouponListWindow>
|
|
<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
|
|
:checked="addressInfo.id" ref="mychild"></AddressWindow>
|
|
</view>
|
|
</template>
|
|
<style scoped lang="less">
|
|
.order-submission .wrapper .shipping select {
|
|
color: #999;
|
|
padding-right: 0.15 * 100rpx;
|
|
}
|
|
|
|
.order-submission .wrapper .shipping .iconfont {
|
|
font-size: 0.3 * 100rpx;
|
|
color: #515151;
|
|
}
|
|
|
|
.order-submission .allAddress {
|
|
width: 100%;
|
|
background-image: linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
|
|
background-image: -webkit-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
|
|
background-image: -moz-linear-gradient(to bottom, #eb3729 0%, #eb3729 100%);
|
|
padding-top: 1 * 100rpx;
|
|
}
|
|
|
|
.order-submission .allAddress .nav {
|
|
margin: 0 auto;
|
|
padding: 0 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item.on {
|
|
position: relative;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item.on:before {
|
|
position: absolute;
|
|
bottom: 0;
|
|
content: '快递配送';
|
|
font-size: 0.28 * 100rpx;
|
|
display: block;
|
|
height: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-width: 0.4 * 100rpx;
|
|
border-style: solid;
|
|
border-color: #fff;
|
|
z-index: 9;
|
|
text-align: center;
|
|
line-height: 0.14 * 100rpx;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
|
|
content: '到店自提';
|
|
border-width: 0.4 * 100rpx;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item.on2 {
|
|
position: relative;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item.on2:before {
|
|
position: absolute;
|
|
bottom: 0;
|
|
content: '到店自提';
|
|
font-size: 0.28 * 100rpx;
|
|
display: block;
|
|
height: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-width: 0.4 * 100rpx;
|
|
border-style: solid;
|
|
border-color: #d5e6e6;
|
|
text-align: center;
|
|
line-height: 0.14 * 100rpx;
|
|
}
|
|
|
|
.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
|
|
content: '快递配送';
|
|
border-width: 0.4 * 100rpx;
|
|
}
|
|
|
|
.order-submission .allAddress .address {
|
|
width: 6.91 * 100rpx;
|
|
height: 1.5 * 100rpx;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.order-submission .allAddress .line {
|
|
width: 7.1 * 100rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.order-submission .wrapper .item .discount input::placeholder {
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
<script>
|
|
import OrderGoods from '@/components/OrderGoods'
|
|
import {
|
|
postOrderConfirm,
|
|
postOrderComputed,
|
|
createOrder
|
|
} from '@/api/order'
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import {
|
|
handleOrderPayResults,
|
|
subscribeMessage
|
|
} from '@/libs/order'
|
|
import {
|
|
weappPay
|
|
} from '@/libs/wechat'
|
|
import {
|
|
isWeixin,
|
|
handleErrorMessage
|
|
} from '@/utils'
|
|
import * as SubjectApi from '@/api/subject.js'
|
|
const NAME = 'SubjectOrderSubmission',
|
|
_isWeixin = true
|
|
const orderKey = "v" + Date.now()
|
|
|
|
export default {
|
|
name: NAME,
|
|
components: {
|
|
OrderGoods,
|
|
},
|
|
props: {},
|
|
data: function() {
|
|
return {
|
|
offlinePayStatus: 2,
|
|
from: this.$deviceType,
|
|
deduction: true,
|
|
enableIntegral: true,
|
|
enableIntegralNum: 0,
|
|
isWeixin: _isWeixin,
|
|
volumeId: 0,
|
|
volume: undefined,
|
|
active: _isWeixin ? 'weixin' : 'yue',
|
|
showCoupon: false,
|
|
showAddress: false,
|
|
addressInfo: {},
|
|
|
|
useIntegral: true,
|
|
useNowMoney: true,
|
|
orderPrice: {
|
|
payPrice: '计算中',
|
|
deductionIntegral: 0,
|
|
deductionMoney: 0,
|
|
totalPrice: 0
|
|
},
|
|
isSpike: false
|
|
}
|
|
},
|
|
computed: mapGetters(['userInfo', 'storeItems']),
|
|
watch: {
|
|
useIntegral() {
|
|
this.computedPrice()
|
|
},
|
|
useNowMoney() {
|
|
this.computedPrice()
|
|
},
|
|
shipping_type() {
|
|
this.computedPrice()
|
|
},
|
|
},
|
|
onLoad: function() {
|
|
let that = this
|
|
this.volumeId = that.$yroute.query.volumeId
|
|
this.$store.dispatch('getUser', true)
|
|
this.getVolumeInfo()
|
|
},
|
|
methods: {
|
|
toAgreement() {
|
|
uni.navigateTo({
|
|
url: '/pages/subject/agreement/agreement'
|
|
})
|
|
},
|
|
getVolumeInfo() {
|
|
SubjectApi.getSubjectVolumeInfo(this.volumeId).then(res => {
|
|
this.volume = res.data
|
|
this.computedPrice()
|
|
})
|
|
},
|
|
|
|
changeUseIntegral: function(e) {
|
|
this.useIntegral = e.mp.detail.value[0]
|
|
},
|
|
changeUseNowMoney: function(e) {
|
|
this.useNowMoney = e.mp.detail.value[0]
|
|
},
|
|
// 计算商品价格
|
|
computedPrice() {
|
|
// 是否秒杀
|
|
const now = Date.now()
|
|
let {
|
|
isSpike,
|
|
spikeEndTime,
|
|
spikeStartTime,
|
|
price,
|
|
spikePrice
|
|
} = this.volume
|
|
let payPrice = price;
|
|
if (this.volume.isSpike && spikeEndTime && spikeStartTime && spikePrice != null) {
|
|
spikeStartTime = spikeStartTime.replace(/-/g, '/')
|
|
spikeEndTime = spikeEndTime.replace(/-/g, '/')
|
|
if (new Date(spikeStartTime).getTime() < now && new Date(spikeEndTime) > now) {
|
|
payPrice = spikePrice
|
|
this.isSpike = true
|
|
}
|
|
}
|
|
this.orderPrice.totalPrice = payPrice.toFixed(2)
|
|
let deductionIntegral = 0
|
|
if (this.useIntegral) {
|
|
if (this.userInfo.integral >= payPrice) {
|
|
deductionIntegral = payPrice
|
|
payPrice = 0
|
|
} else {
|
|
deductionIntegral = this.userInfo.integral
|
|
payPrice -= this.userInfo.integral
|
|
}
|
|
}
|
|
|
|
let deductionMoney = 0
|
|
if (this.useNowMoney) {
|
|
if (this.userInfo.nowMoney >= payPrice) {
|
|
deductionMoney = payPrice
|
|
payPrice = 0
|
|
} else {
|
|
deductionMoney = this.userInfo.nowMoney
|
|
payPrice -= this.userInfo.nowMoney
|
|
}
|
|
}
|
|
|
|
this.orderPrice.payPrice = payPrice.toFixed(2)
|
|
this.orderPrice.deductionMoney = deductionMoney.toFixed(2)
|
|
this.orderPrice.deductionIntegral = deductionIntegral.toFixed(2)
|
|
},
|
|
|
|
|
|
|
|
payItem: function(index) {
|
|
this.active = index
|
|
},
|
|
|
|
createOrder() {
|
|
uni.showLoading({
|
|
title: '生成订单中',
|
|
})
|
|
let from = {}
|
|
if (this.$deviceType == 'app') {
|
|
from.from = 'app'
|
|
}
|
|
console.log(this.$deviceType)
|
|
// #ifdef MP-WEIXIN
|
|
subscribeMessage()
|
|
// #endif
|
|
SubjectApi.createOrder(orderKey, {
|
|
|
|
useIntegral: this.useIntegral ? 1 : 0,
|
|
useNowMoney: this.useNowMoney ? 1 : 0,
|
|
payType: this.active,
|
|
volumeId: this.volumeId,
|
|
from: this.from,
|
|
mark: this.mark || '',
|
|
...from,
|
|
})
|
|
.then(res => {
|
|
console.log('res: ',res);
|
|
if(res.data.status == 'pay_success') {
|
|
uni.showToast({
|
|
title: "支付成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
uni.$emit("VolumePaid", this.volumeId)
|
|
this.$yrouter.back();
|
|
}else {
|
|
weappPay(res.data.data)
|
|
.then((res)=>{
|
|
uni.showToast({
|
|
title: "支付成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
uni.$emit("VolumePaid", this.volumeId)
|
|
this.$yrouter.back();
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: "支付失败",
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
.catch(err => {
|
|
handleErrorMessage(err, '创建订单失败')
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scope>
|
|
.volume {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
justify-content: space-between;
|
|
|
|
&-info {
|
|
width: 350rpx;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 32rpx;
|
|
height: 70rpx;
|
|
}
|
|
|
|
&-level {
|
|
font-size: 24rpx;
|
|
color: #6c6c6c;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
&-price {
|
|
font-size: 26rpx;
|
|
color: #eb3729;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn-pay {
|
|
width: 130rpx;
|
|
}
|
|
}
|
|
|
|
.com_buy_agreement{
|
|
padding: 27rpx 30rpx;
|
|
background-color: #FFFFFF;
|
|
margin-top: 12rpx;
|
|
}
|
|
</style>
|