siyu_app/pages/course/privilege1.nvue

<template>
	<view>
		<view class="privilegeBox es es-ver es-br-38 es-pt-30 es-pb-30 ">
			<view class="es es-fx es-pc es-h-56 es-ml-48 es-mr-48">
				<image class="es-w-74 es-h-40" style="position: absolute;left:60rpx;top:0" src="/static/image/course/xiangyun.png"></image>
				<view class="es-fs-40 es-h-56 es-fw-500 prititle" >开通VIP专享以下特权</view>
				<image class="es-w-74 es-h-40" style="position: absolute;right:60rpx;top:0" src="/static/image/course/xiangyun2.png"></image>
			    <image  class="es-w-40 es-h-40" style="position: absolute;right:-20rpx;top:-10rpx" @tap="closePrivilege" 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>
							<view class="es-ml-8 es-c-white es-fs-32 es-fw-600">名家讲堂</view>
						</view>
						<view class="es-fs-30 es-mt-10 es-c-99">畅享10000+VIP视频</view>
					</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-56 es-mt-40 es-ml-48 es-mr-48 fl-row">
				<view class="es-fs-30 es-h-56 es-fw-bold" style="color: #FFDAA3;">超多权益待你开启</view>
			</view>
			
		   <view class="primenu-box es es-fx es-pc es-h-56 es-mt-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 jlxw" 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="es-ml-48 es-mr-48 es-mt-10 es-pt-10 es-pb-10 es-br-5" style="background:#2a2f32">
				<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 ">
						<view class="es-fs-32  es-fw-500 es-ml-14">{{item}}</view>
					</view>
					<image  v-if="vipMethodIdx==index" class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26" src="/static/image/course/vipBuy/check.png"></image>
					<view   v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26 circle"></view>	
				</view>
		   </view>
		 
		
		    <view v-if="isShowPayType" class="es-ml-48 es-mr-48 es-mt-40 x-bc fl-row" style="background:#2a2f32">
			   <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>
						<view class="es-fs-33 es-c-white es-fw-500 es-ml-14">{{item}}</view>
					</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>
					<view v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 circle"></view>
			   </view>
		   </view>
		
			<view class="es es-mt-40 es-ml-48 es-mr-48 x-c fl-row">
				<view @tap="doBuy()" class="es-h-94 x-c es-fw-700 es-fs-34 vipCourseBtn vipAc es-br-46" style="width: 310rpx;">
					立即购买
				</view>
			</view>
		</view>
			  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vipSelIndex:0,
				vipMethods:["开通会员","芳华币兑换","0.01元购买"],
				vipMethodIdx:0,
				isShowPayType:false,
				payTypes:["微信支付","支付宝支付"],
				payType:1,//微信支付1  支付宝支付2
				createType:3,//1直接购买，2芳华币兑换 3开通会员
				orderId:null,
				order:null,
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	
    .fl-row{
		display: flex;
		flex-direction: row;
	}
  
   .privilegeBox{
   	  background-color:#171a1d;
   	  box-sizing: border-box;
   }
   
   .prititle{
	   color: #ffdaa3 !important;
	   text-align: center;
   }
   
   .primenu-box {
     display: flex;
     justify-content: center;
     align-items: center;
	 height: 180px;
   }
   
   .content-inner {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     width: 100%;
   }
   
   .content-inner .item{
			width: calc(33.3333333%);
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 0rpx;
   	       
   }
   
   .content-inner .item .img{
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 8rpx;
   }
   
   .content-inner .item .label{ 
   	 font-size: 32rpx;
   	 color: #83878A;
   }
   	
   .vipMethodItem{
      border-radius: 10rpx;
      width: calc(100%);
      height: 70rpx;
      color: #FDD8A1;
   }
   
   
   .payTypeItem{
      background-color:#1B1F22;
      border:1px solid #fff;
      border-radius: 10rpx;
      width: calc(50% - 8px);
      height: 94rpx;
   }
   
   .circle{
   	   border:1px solid #FDD8A1;
   }
   
   .pt_ac{
   	border:1px solid #FDD8A1;
   }
   
   .slider-box{
     	flex:1
   }
   
   .vipCourseBtn{
		background: #1B1F22;
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #FFDAA3;
		width: calc(33.33333% - 23px);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
   }
   
</style>