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

<template>
	<view>
		<status-container titlet="课程购买" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="bacf pad30 fon24 boxshowb">
					<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>
						<view class="disjb fc pad-s10 pad-x20" style="height: 160rpx;">
							<view class="fon26 col26 clips2">{{item.spu_name}}</view>
							<view class="col-e42417 dis ae">
								<view class="bold">￥{{item.price}}</view>
								<view class="tline-through fon20 col-969696 mar-z10">￥{{item.original_price}}</view>
							</view>
						</view>
					</view>
					<view class="bbot pad-sx30">
						<view class="disjbac">
							<view class="">商品金额</view>
							<view class="">￥{{$toolAll.tools.addXiaoShu(courseInfo.original_total*1)}}</view>
						</view>
						<view @tap="chooseCoupon" class="disjbac mar-s30">
							<view class="">优惠券抵扣</view>
							<view class="disjbac col-e42417" v-if="couponInfo.coupon_id">-￥{{couponInfo.coupon_price}} <i class="icon icon-next fon20" style="color: #7f7f7f;"></i></view>
							<view class="disjbac col26" v-else>可用优惠券{{couponNum}}张<i class="icon icon-next fon20" style="color: #7f7f7f;"></i></view>
						</view>
					</view>
					<view class="fon24 dis fe mar-s20">合计：<span class="col-e42417">{{realityPrice}}</span></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">
					<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>
				</view>
			</view>
		</status-container>
		<customCoupon ref="refCoupon" :currentPrice="courseInfo.original_total" @confrimEv="confrimEv"></customCoupon>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import customCoupon from '@/components/custom-coupon.vue';
	export default {
		components:{'foot-tab' :footTab,customCoupon},
		data() {
			return {
				courseInfo:'',
				couponInfo:{
					coupon_id:'',//优惠券ID
					coupon_price:0//优惠券抵扣金额
				},
				flag:true,
				couponNum:0
			}
		},
		onLoad() {
			this.courseInfo = uni.getStorageSync('courseInfo');
			this.getCoupon();
			// 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 < 0 ? 0 : newPrice;
			}
		},
		methods: {
			// 获取待使用优惠券列表
			getCoupon(){
				let params = {
					status:'normal',
					page:1,
					size:100,
					condition:this.courseInfo.original_total*1
				}
				this.$requst.get('/api/user/coupon-list',params).then(res=>{
					if(res.code==0){
						this.couponNum = res.data.list.length;
					}
				})
			},
			// 调起优惠券弹框
			chooseCoupon(){
				this.$refs.refCoupon.couponId = this.couponInfo.coupon_id;
				this.$refs.refCoupon.checkChoose();
				this.$refs.refCoupon.ifMask = true;
				this.$refs.refCoupon.ifAnimated = true;
			},
			// 优惠券弹框确定事件
			confrimEv(obj){
				this.couponInfo = obj;
			},
			// 去支付
			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;
							if(info.status!='paid' && info.status!='completed'){
								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.implementEv(info.coding);
									},
									fail:()=> {
										this.$toolAll.tools.showToast('支付已取消o(╥﹏╥)o');
									},
									complete:()=> {
										this.flag = true;
									}
								});
							} else {
								this.implementEv(info.coding);
							}
						} else {
							this.flag = true;
						}
					})
				}
			},
			// 支付成功接口
			implementEv(coding){
				this.$requst.post('/api/order/paid',{order_coding:coding}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('支付成功(*^▽^*)');
						setTimeout(()=>{
							uni.navigateBack({delta:1})
						},1000)
					} else this.$toolAll.tools.showToast(res.msg);
				})
			}
		}
	}
</script>

<style></style>