martial-arts/pagesB/buy-now/buy-now.vue

120 lines
4.0 KiB
Vue
Raw Normal View History

2022-08-03 13:28:45 +00:00
<template>
<view>
<status-container titlet="课程购买" returnc="#FFFFFF">
<view slot="content" style="margin-top: -20rpx;">
<view class="bacf pad30 fon24 boxshowb">
2022-08-10 10:18:06 +00:00
<view class="disac bbot pad-x30" v-for="(item,index) in courseInfo.list" :key="index">
<image :src="item.spu_cover" mode="aspectFill" class="flexs mar-y20" style="width: 228rpx;height: 160rpx;" lazy-load></image>
2022-08-03 13:28:45 +00:00
<view class="disjb fc pad-s10 pad-x20" style="height: 160rpx;">
2022-08-10 10:18:06 +00:00
<view class="fon26 col26 clips2">{{item.spu_name}}</view>
2022-08-03 13:28:45 +00:00
<view class="col-e42417 dis ae">
2022-08-10 10:18:06 +00:00
<view class="bold">{{item.price}}</view>
<view class="tline-through fon20 col-969696 mar-z10">{{item.original_price}}</view>
2022-08-03 13:28:45 +00:00
</view>
</view>
</view>
<view class="bbot pad-sx30">
<view class="disjbac">
<view class="">商品金额</view>
2022-08-10 10:18:06 +00:00
<view class="">{{$toolAll.tools.addXiaoShu(courseInfo.original_total*1)}}</view>
2022-08-03 13:28:45 +00:00
</view>
<view class="disjbac mar-s30">
<view class="">优惠券抵扣</view>
2022-08-10 10:18:06 +00:00
<view class="disjbac col-e42417">-{{couponInfo.coupon_price}} <i class="icon icon-next fon20" style="color: #7f7f7f;"></i></view>
2022-08-03 13:28:45 +00:00
</view>
</view>
</view>
<view class="bacf mar-s30 disjbac fon24 pad-sx20 pad-zy30 boxshowb">
<view class="">支付方式</view>
<view class="">微信支付</view>
</view>
<!-- 立即购买 -->
<view class="posixzy bacf pad-sx20 disjbac pad-zy30 boxshowt">
2022-08-10 10:18:06 +00:00
<view class="fon30 col-e42417 bold">{{realityPrice}}</view>
<view @tap="goPay" class="fon24 colf radius32 disjcac" style="background-color: #f37617;width: 184rpx;height: 64rpx;">去支付</view>
2022-08-03 13:28:45 +00:00
</view>
</view>
</status-container>
</view>
</template>
<script>
// 底部组件
import footTab from '@/components/foot-tabs/foot-tab.vue';
export default {
components:{'foot-tab' :footTab},
data() {
return {
2022-08-10 10:18:06 +00:00
courseInfo:'',
couponInfo:{
coupon_id:'',//优惠券ID
coupon_price:0//优惠券抵扣金额
},
flag:true
2022-08-03 13:28:45 +00:00
}
},
onLoad() {
2022-08-10 10:18:06 +00:00
this.courseInfo = uni.getStorageSync('courseInfo');
// uni.getStorageSync('skuList');
},
computed:{
realityPrice(){
let newPrice = 0;
if(this.courseInfo){
this.courseInfo.list.forEach(item=>{
let tempprice = this.$toolAll.tools.operationEv(item.price,item.num,'*',2)
newPrice = this.$toolAll.tools.operationEv(tempprice,newPrice,'+',2);
})
}
// 商品金额减优惠券抵扣
newPrice = this.$toolAll.tools.operationEv(newPrice,this.couponInfo.coupon_price,'-',2);
return newPrice;
}
2022-08-03 13:28:45 +00:00
},
methods: {
2022-08-10 10:18:06 +00:00
// 去支付
goPay(){
if(this.flag){
this.flag = false;
this.$toolAll.tools.showToast('正在调起支付...');
let params = {
sku_list:uni.getStorageSync('skuList'),
total:this.realityPrice,//实际付款金额 即:使用优惠券、积分抵扣等所有优惠后的金额(需加上运费)
...this.couponInfo,
type:'course',//订单类型 spu=商品 course=课程
}
this.$requst.post('/api/order/create',params).then(res=>{
if(res.code==0){
let info = res.data;
uni.requestPayment({
provider: 'wxpay',
appId:info.payment_params.appId,//appId
timeStamp: info.payment_params.timeStamp,//时间戳
nonceStr: info.payment_params.nonceStr,//随机字符串
package: info.payment_params.package,//package
signType: info.payment_params.signType,//MD5
paySign: info.payment_params.sign,//签名
success:(result)=> {
this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
if(res.code==0){
this.$toolAll.tools.showToast('支付成功(*^▽^*)');
} else this.$toolAll.tools.showToast(res.msg);
})
},
fail:()=> {
this.$toolAll.tools.showToast('支付已取消o(╥﹏╥)o');
},
complete:()=> {
this.flag = true;
}
});
}
})
}
}
2022-08-03 13:28:45 +00:00
}
}
</script>
<style></style>