siyu_app/pages/course/privilege.nvue

<template>
	<view class="page" @click.stop="handleClick" catchtouchmove="true"  :style="{'height':privilegeBoxHei+'px'}" >
		<view class="privilegeBox es es-ver es-br-38 es-pt-10 es-pb-30 ">
			
			<view class="es es-fx es-pc es-h-56 es-ml-40 es-mr-20 es-mt-10">
				<image class="es-w-74 es-h-40" style="position: absolute;left:55px;top:20rpx" src="/static/image/course/xiangyun.png"></image>
				<text class="es-fs-32 es-h-56 es-fw-500 prititle">开通VIP专享以下特权</text>
				<image class="es-w-74 es-h-40" style="position: absolute;right:55px;top:20rpx" src="/static/image/course/xiangyun2.png"></image>
			    <image  class="es-w-40 es-h-40" style="position: absolute;right:0;top:0" @tap="closePopup" src="/static/images/close40.png"></image>
			</view>
			
			<view class="sec1 es-mt-20 es-ml-48 es-mr-48 ">
				<view class="es x-bc es-pl-28 es-pt-12 fl-row" >
					<view class="l1">
						<view class="x-f fl-row">
							<image class="es-w-44 es-h-44" src="/static/image/course/privilege/fozhu.png"></image>
							<text class="es-ml-8 es-c-white es-fs-32 es-fw-600">名家讲堂</text>
						</view>
						<text class="es-fs-30 es-mt-10 es-c-99">畅享10000+VIP视频</text>
					</view>
					<view class="es">
						<image src="/static/image/course/zyx.png" class="es-w-183 es-h-98 es-br-15"></image>
					</view>
				</view>
			</view>
			
			<view class="sec2 es es-fx es-pc es-h-40 es-mt-40 es-ml-48 es-mr-48 fl-row">
				<text class="es-fs-30 es-h-56 es-fw-bold" style="color: #FFDAA3;">超多权益待你开启</text>
			</view>
			
		    <!-- AI舌诊 -->
		   <view class="primenu-box es es-fx es-pc  es-mb-20 es-ml-48 es-mr-48 fl-row" >
				 <view class="content-inner fl-row">
				 	<view class="item">
				 		<image class="img" src="/static/image/course/privilege/she.png" mode="heightFix"></image>
				 		<text class="label">AI舌诊</text>
				 	</view>
				 	<view class="item">
				 		<image class="img" src="/static/image/course/privilege/tizhi.png" mode="heightFix"></image>
				 		<text class="label">体质检测</text>
				 	</view>
				 	<view class="item" >
				 		<image class="img" src="/static/image/course/privilege/baike.png" mode="heightFix"></image>
				 		<text class="label">养生百科</text>
				 	</view>
				 	<view class="item">
				 		<image class="img" src="/static/image/course/privilege/yishu.png" mode="heightFix"></image>
				 		<text class="label">经典医书</text>
				 	</view>
				 	<view class="item">
				 		<image class="img" src="/static/image/course/privilege/more.png" mode="heightFix"></image>
				 		<text class="label">多设备登陆</text>
				 	</view>
				 	<view class="item">
				 		<image class="img" src="/static/image/course/privilege/ad.png" mode="heightFix"></image>
				 		<text class="label">去除广告</text>
				 	</view>
				 </view>	 
		   </view>
		   
		    <!-- 开通会员 -->
		   <view class="vipMethodBox es-ml-48 es-mr-48 es-mt-10 es-pt-10 es-pb-10 es-br-5">
				<view v-for="(item, index) in vipMethods" :key="index" @tap="changeVipMethod(index)" class="vipMethodItem es x-bc fl-row">
					<view class="x-bc es-ml-14 ">
						<text class="es-fs-32  es-fw-500 es-ml-14 color1" :class="index==1?'es-fw-bold color2':''">{{item}}</text>
					</view>
					<view class="es-w-40 es-h-40 es-mr-14 es-mr-26 circular" v-if="index==1&&vipMethodIdx!=index"></view>
					<image  class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26" v-else :src="vipMethodIdx==index?'/static/image/course/vipBuy/check.png':'/static/image/course/vipBuy/check_mr.png'"></image>
				</view>
		   </view>
		 
		   <!-- 支付方式 -->
		    <view v-if="isShowPayType" class="payTypeBox es-ml-48 es-mr-28 es-mt-40 x-bc fl-row" >
			   <view v-for="(item, index) in payTypes" :key="index"  @tap="changePayType(index)"  class="payTypeItem es x-bc " :class="payType==index+1?'pt_ac':''">
					<view class="x-bc es-ml-14">
						<image class="es-w-59 es-h-52" :src="index==0?'/static/image/course/vipBuy/wx.png':'/static/image/course/vipBuy/zfb.png'"></image>
						<text class="es-fs-33 es-c-white es-fw-500 es-ml-14">{{item}}</text>
					</view>
					<image v-if="payType==index+1" src="/static/image/course/vipBuy/check.png" class="es-w-40 es-h-40 es-br-ban es-mr-14"></image>
					<text v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 circle"></text>
			   </view>
		    </view>
		
			<view class="es es-mt-30 es-ml-48 es-mr-48 x-c fl-row">
				<view @tap="doBuy()" class="es-h-94 x-c  vipCourseBtn vipAc es-br-46" style="width: 310rpx;">
					<text class="es-fw-700 es-fs-34" style="color: #1B1F22;">立即购买</text>  
				</view>
			</view>
			
		</view>
			  
	</view>
</template>

<script>
	import { createCourseOrder,createIntegralOrder,createVipOrder,aliPayment,wxPayment } from '@/api/course'
	import { showLoginPage } from '@/utils/login'
	export default {
		data() {
			return {
				vipSelIndex:0,
				vipMethods:["开通会员","芳华币兑换","0.01元购买"],
				vipMethodIdx:1,
				isShowPayType:false,
				payTypes:["微信支付","支付宝支付"],
				payType:1,//微信支付1  支付宝支付2
				createType:2,//1直接购买，2芳华币兑换 3开通会员
				courseId:null,
				videoId:null,
				orderId:null,
				order:null,
				subNVue:null,
				sellPrice:0,
				privilegeBoxHei:0,
				catalogIndex:-1,
				integral: 0, // 芳华币
			}
		},
		mounted() {
			let that=this;
			this.subNVue= uni.getSubNVueById('privilege');
			uni.$on('privilege', (data) => {  
			    that.videoId=data.videoId;
				that.courseId=data.courseId;
				that.sellPrice=data.sellPrice;
				that.catalogIndex=data.catalogIndex;
				that.vipMethods=["开通会员", data.integral + "芳华币兑换", data.sellPrice+"元购买"];
			}); 
			
			uni.$on('closePrivilege', () => {
			    that.closePopup();
			}); 
			
			const res = uni.getSystemInfoSync();
			this.privilegeBoxHei=uni.upx2px(1150);
			//let tempHei=res.windowHeight*0.65;
		},
	
		methods: {
			changeVip(index){
				this.vipSelIndex=index;
				if(index==2){
					this.showPopPrivilege();
				}
			},
			changeVipMethod(index){
			    this.vipMethodIdx=index;	
				const vipMethod=this.vipMethods[index];
				this.isShowPayType=false;
				if(vipMethod.indexOf('元购买')!=-1){  //直接购买
					this.isShowPayType=true;
					this.createType=1;
					//this.changeFrame(true);
				}
				if(vipMethod.indexOf('芳华币兑换')!=-1){  //芳华币兑换
					this.createType=2;
					//this.changeFrame(false);
				}
				if(vipMethod.indexOf('开通会员')!=-1){  //开通会员
					this.createType=3;
					//this.changeFrame(false);
				}
			},
			changePayType(index){
				this.payType=index+1;
			},
			doBuy(){
				if(this.createType==1){  //直接购买
					 this.createCourseOrder();
				}
				else if(this.createType==2){   //芳华币兑换
					 this.createIntegralOrder();
				}
				else{  //开通会员
					 //this.$navTo('./vipBuy');	
					 uni.navigateTo({url: './vipBuy' });
					 setTimeout(e => {
					 	  this.subNVue.hide();
					 }, 500)
				}
			},
			createCourseOrder(){
			   	if(!this.isLogin()){
			   		uni.showToast({title:"请先登录",icon: 'none'});
			   		return;
			   	}
			   	uni.showLoading({title:""});
				let params={"courseId":this.courseId,"createType":this.createType,"videoId":this.videoId,"payType":this.payType};
			   	createCourseOrder(params).then(res => {
			   			uni.hideLoading();
			   			if(res.code==200){
							this.order=res.order;
							if(this.payType==1){  //微信支付
								this.doWxPay();
							}else{   //支付宝
								this.doAlipay();
							}
			   			}else{
			   				uni.showToast({title: res.msg,icon: 'error'});
			   			}
			   		},
			   		rej => {}
			   	);
			},
			createIntegralOrder(){
			   	if(!this.isLogin()){
					uni.showToast({title:"请先登录",icon: 'none'});
			   		return;
			   	}
			   	uni.showLoading({title:""});
				let params={"courseId":this.courseId,"videoId":this.videoId};
			   	createIntegralOrder(params).then(res => {
			   			uni.hideLoading();
			   			if(res.code==200){
			   				uni.showToast({title: "兑换成功",icon: 'success'});
							uni.$emit("refreshCatalog",this.catalogIndex);
						    this.closePopup();
			   			}else{
			   				uni.showToast({title: res.msg,icon: 'error'});
			   			}
			   		},
			   		rej => {}
			   	);
			},
			doAlipay(){
				let that=this;
				var data = {orderId:this.order.orderId};
				// #ifdef APP-PLUS
				const tzCashier=uni.requireNativePlugin("TZBank-Cashier");
				uni.showLoading();
				aliPayment(data).then(res => {
						uni.hideLoading();
						if(res.code==200){
							if(res.type=="tz"){
								//console.log("qxj res:"+JSON.stringify(res));
								//console.log("qxj orderFlowNo:"+res.data.body.orderFlowNo+" businessCstNo:"+res.data.body.orderNo+" platMerCstNo:"+res.data.body.platMerCstNo);
								that.closePopup();
								const match = res.data.body.url.match(/[\?&]businessCstNo=([^&]+)/);
								const businessCstNo = match ? match[1] : null;
						        console.log("qxj tzCashier:"+tzCashier+" businessCstNo:"+businessCstNo);
								tzCashier.pay({
									env:0,
									wxMiniProgramType:0,
									wxAppId:'wx703c4bd07bbd1695',
									wxUniversalLink:"https://yjf.runtzh.com/",
									orderFlowNo:res.data.body.orderFlowNo,
									businessCstNo:businessCstNo,
									platMerCstNo:res.data.body.platMerCstNo
								},(res)=>{
										uni.$emit('showPayTips', {"courseOrderId":that.order.orderId});
								  });
							}
							else if(res.type=='hf'){
								//this.$refs.popTip.open()
								if(res.data.qr_code==null){
									uni.showToast({title:res.data.bank_message,icon:'none'});
									return;
								}
								this.closePopup();
								if (uni.getSystemInfoSync().platform == 'android') {
									var alipayScheme ='alipays://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
								}else{
								    var alipayScheme ='alipay://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
								}
								// 在uni-app中使用plus.runtime.openURL打开URL
								plus.runtime.openURL(alipayScheme, function(error) {
								   console.log("qxj alipayScheme error:"+error);
								   if (error) {
								       uni.showToast({title:error.message,icon:'error' });
								   }
								});
								uni.$emit('showPayTips', {"courseOrderId":this.order.orderId});
							}
						}
						else{
							uni.showToast({title:res.msg,icon:'none'})
						}
						
					},
					rej => {}
				);
				// #endif	 
			},
			doWxPay(){
				var that=this;
				setTimeout(()=>{
					this.closePopup();
				},5000);
				plus.share.getServices(function(res){
				    var sweixin = null;  
				    for(var i=0;i<res.length;i++){  
				        var t = res[i];  
				        if(t.id == 'weixin'){  
				            sweixin = t;  
				        }  
				    }  
					if(sweixin){
						console.log('调起小程序');
						uni.$emit('showPayTips', { "courseOrderId":that.order.orderId });
						//唤起微信跳转小程序
						sweixin.launchMiniProgram({
							id:"gh_7a6a32e5ef61",
							path:'/pages_order/courseOrderPayment?orderId='+that.order.orderId+"&payMethod=app",
							type:0 // 微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						},function(){
							console.log("微信唤起成功");
							return true;
						},function(e){
							console.log("微信唤起失败",e);
							uni.showToast({
								title:'微信唤起失败，请检查是否有微信应用',
								icon:'none'
							});
							return false;
						});

					}else{
						uni.showToast({
							title:'微信唤起失败，请检查是否安装微信应用',
							icon:'none',
							duration:3000
						})
						return false;
					}
				      
				},function(res){  
				    console.log(JSON.stringify(res));  
				});
			},
			handleClick() {
			    // 阻止事件冒泡
			},
			changeFrame(isCheck){
				console.log("qxj changeFrame");
				let pHeight=isCheck?1320:1020;
				const subNVue = uni.getSubNVueById('privilege');
				subNVue.setStyle({   
					 "bottom": "0",
					 "left": "0",
					 "width": "100%",   
					 "height" : pHeight+'upx' ,
				});
			},
			closePopup() {
			   const subNVue = uni.getSubNVueById('privilege');
			   subNVue.hide('slide-out-bottom');
			},
			isLogin() {
				let obj=uni.getStorageSync("AppToken");
				return !!obj;
			},
			
		},
		destroyed() {
			console.log("qxj privilege destroyed----")
			// 注销全局配置监听
			uni.$off("privilege");
			uni.$off("closePrivilege");
		}
	}
</script>

<style>
	
    .fl-row{
		display: flex;
		flex-direction: row;
	}
	
	.page{
		background-color:#171a1d;
		border-radius: 20rpx;
	}
  
   .privilegeBox{
   	  /* background-color:#171a1d; */
   	  box-sizing: border-box;
   }
   
   .prititle{
   	   color: #ffdaa3 !important;
   	   text-align: center;
	   margin-top: 20rpx;
   }
   
   .primenu-box {
		 display: flex;
		 flex: 1;
		 justify-content: center;
		 align-items: center;
   }
   
   .content-inner {
		 display: flex;
		 flex: 1;
		 flex-wrap: wrap;
		 justify-content: space-between;
   }
   
   .content-inner .item{
		width: 100px;
		height: 75px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 26rpx;
		
   }
   
   .content-inner .item .img{
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 8rpx;
   }
   
   .content-inner .item .label{ 
   	 font-size: 32rpx;
   	 color: #83878A;
   }
   
   .vipMethodBox{
	  background:#2a2f32;
	  display: flex;
	  flex: 1;
   }
   	
   .vipMethodItem{
      border-radius: 10rpx;
      height: 70rpx;
      color: #FDD8A1;
   }
   
   .payTypeBox{
   	   display: flex;
   	   flex: 1;
   }
   
   .payTypeItem{
     
      border:1px solid #fff;
      border-radius: 10rpx;
      display: flex;
      flex: 1;
      height: 94rpx;
	  margin-right: 20rpx;
   }
   
   .circle{
   	   border:1px solid #FDD8A1;
   }
   
   .pt_ac{
    	border:1px solid #FDD8A1;
   }
   
   .color1{
	   color: #FFDAA3;
   }
   .color2 {
	   color: #fff;
   }
   .circular {
	   border-radius: 50%;
	   border: 1px solid #fff;
   }
   .slider-box{
     	flex:1
   }
   
  
   
   .vipCourseBtn{
		background: #1B1F22;
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #FFDAA3;
		width: calc(33.33333% - 46.6666rpx);
   }
   
   .vipAc{
		background: linear-gradient(90deg, #FFE0B2, #F8BA8B);
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #1B1F22;
   }
   
</style>