<template>
	  
	<view class="super_wrap" style="padding: 0;">
	
		<view class="vip_block">
			<view class="vip_item" 
			:class="[item.type==2?'vip_item_special':'',
			
			]"  v-if="item.type == 2 || item.type == 7 || item.type == 8"
			v-for="(item, index) in list" :key="index">
				<view>
					<text class="vip_item_title">{{item.title}}</text>
				</view>
				
				<view class="vip_price" style=" padding-top: 10rpx;">
					<text class="font_bold">课程价格：</text>
					<view class="vip_qx_v">一年<text class="vip_fee line">{{item.originalPrice||0}}</text>元</view>
				</view>
				
				<view class="vip_price" v-if="item.vcbList&&item.vcbList.length>0">
					<text class="font_bold" v-if="item.type==1||item.type==2">超级VIP价格：</text>
					<text class="font_bold" v-else-if="item.vcbList&&item.vcbList.length>0">VIP价格：</text>
					<view class="vip_price_v" v-if="item.vcbList&&item.vcbList.length>0">
						{{ item.vcbList.map(p => numberToChinese(p.year) + '年').join('/') }}
						<text class="vip_price_red">{{ item.vcbList.map(p => p.rebateFee).join('/') }}</text>元
					</view>
				</view>
				<view class="vip_price" v-if="item.yanqiList&&item.yanqiList.length>0">
					<text class="font_bold">延期价格：</text>
					<view class="vip_price_v">
						{{ item.yanqiList.map(p => numberToChinese(p.year) + '年').join('/') }}
						<text class="vip_price_red">{{ item.yanqiList.map(p => p.rebateFee).join('/') }}</text>元
					</view>
				</view>
				<view class="vip_qx">
					<text class="font_bold" style=" display: block;" v-if="item.type==1||item.type==2">超级VIP权限：</text>
					<text class="font_bold" style=" display: block;" v-else>VIP权限：</text>
					<view class="vip_qx_v" v-if="item.type==1">无限制观看吴门医述APP中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</view>
					<view class="vip_qx_v" v-else-if="item.type==2">无限制观看众妙之门APP与吴门医述APP心理学板块任意课程；</view>
					<view class="vip_qx_v" v-else-if="item.type==7">无限制观看众妙之门APP任意课程；</view>
					<view class="vip_qx_v" v-else>无限制观看吴门医述APP{{item.title.replace(/VIP/g, '')}}板块任意课程；</view>
					
					<view class="vip_qx_v">
						<text v-if="item.type==1||item.type==2">{{item.title.replace(/超级VIP/g, '')}}</text>
						<text v-else>{{item.title.replace(/VIP/g, '')}}</text>
						培训班报名享受<text class="vip_fee" v-if="item.type==1||item.type==2">8折</text><text class="vip_fee" v-else>9折</text>优惠；
					</view>
					<view class="vip_qx_v">疯子读书APP购书享受<text class="vip_fee" v-if="item.type==1||item.type==2">8折</text><text class="vip_fee" v-else>9折</text>优惠。</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default{
	data(){
		return{
			list: []
		}
	},
	created(){
		this.getData();
	},
	onShow(){
		
	},
	methods:{
		//获取数据
		getData(){
			
			$http.request({
				url: "common/userVip/vipBuyConfigList",
				method: "POST",
				data: {},
				header: {
					'Content-Type': 'application/json'
				},
			})
			.then(res => {
				
				if (res.code == 0) {
					this.list = res.res;
				}
			}).catch(e => {
				
			});
		},
		numberToChinese(num) {
			const chineseNumbers = ['零','一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
			if (num >= 0 && num <= 10) {
				return chineseNumbers[num];
			}
			return num;
		}
	},
}
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.vip_block{
	padding: 20rpx;
}
.vip_item{
	width: 100%;
	padding: 30rpx 20rpx;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 5px 0px #a7bbe4;
	margin-bottom: 20rpx;
	position: relative;
}
.vip_item_title{
	display: inline-block;
	height: 46rpx;
	line-height: 46rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #fff;
	padding: 0 12rpx;
	border-radius: 15rpx;
	background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
}
.vip_item_special .vip_item_title{
	height: 50rpx;
	line-height: 50rpx;
	font-size: 26rpx;
	background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
}
.vip_price{
	display: flex;
	align-items: center;
	margin-top: 5rpx;
}
.vip_qx{
	margin-top: 5rpx;
}
.vip_price text,.vip_qx text,.vip_qx_v{
	display: inline-block;
	font-size: 28rpx;
	line-height: 40rpx;
}
.vip_item_used{
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	font-size: 24rpx;
	color: #427ec5;
	font-weight: bold;
}
.vip_item_btn{
	position: absolute;
	right: 20rpx;
	top: 30rpx;
	font-size: 23rpx;
	line-height: 40rpx;
	border: 1rpx solid #ff1f00;
	color: #ff1f00;
	padding: 0 12rpx;
	border-radius: 15rpx;
	opacity: 0.8;
}
.font_bold{
	font-weight: bold;
}
.vip_fee{
	font-size: 34rpx !important;
	color: #ff1f00;
	font-weight: bold;
	padding: 0 5rpx;
}
.vip_price_red{
	color: #ff1f00;
	padding-left: 5rpx;
	font-weight: bold;
	font-size: 34rpx !important;
}
.vip_price_yq{
	font-size: 26rpx !important;
	color: #427ec5;
	border: 1rpx solid #427ec5;
	border-radius: 10rpx;
	margin-right: 15rpx;
	margin-bottom: 10rpx;
	padding: 0 10rpx;
}
.line{
	text-decoration: line-through;
	color: #258feb;
	font-style: italic;
}
.vip_item_flag{
	font-size: 26rpx;
	color: #666;
	padding-left: 20rpx;
}
.vip_item_flag text{
	vertical-align: bottom;
}
.super_con{
	display: block;
	padding: 40rpx 30rpx 50rpx;
	line-height: 48rpx;
	font-size: 28rpx;
	color: #666;
	letter-spacing: 1px;
}
</style>