This commit is contained in:
2025-03-13 17:52:21 +08:00
parent 14807d6b54
commit f0b144f4d7
12 changed files with 9554 additions and 6582 deletions

View File

@@ -1,109 +1,215 @@
<template>
<page-meta
<page-meta
:page-font-size="$baseFontSize() + 'px'"
:root-font-size="$baseFontSize() + 'px'"
></page-meta>
<view class="super_wrap">
<view class="super_content">
<view class="super_wrap" style="padding: 0;">
<view class="vip_block">
<view class="vip_item"
:class="[item.type==2?'vip_item_special':'',
<text class="super_title super_title_2" style="margin-top: 40rpx;">国学与心理学超级VIP</text>
<view class="super_con">
<text class="weight">课程价格</text>一年<text class="bigred line">26504</text></br>
<text class="weight">超级VIP价格</text>三年/四年<text class="bigred">4980/5980</text></br>
<text class="weight">延期价格</text>一年/三年/四年<text class="bigred">1980/3980/4980</text></br>
<text class="weight">超级VIP权限</text></br>
无限制观看众妙之门APP与吴门医述APP心理学板块任意课程</br>
国学与心理学培训班报名享受<text class="bigred">8</text>优惠</br>
疯子读书APP购书享受<text class="bigred">8</text>优惠
</view>
<text class="super_title">心理学VIP</text>
<view class="super_con">
<text class="weight">课程价格</text>一年<text class="bigred line">7188</text></br>
<text class="weight">VIP价格</text>三年/四年<text class="bigred">3980/4980</text></br>
<text class="weight">延期价格</text>一年/三年/四年<text class="bigred">1600/2980/3980</text></br>
<text class="weight">VIP权限</text></br>
无限制观看吴门医述APP心理学板块任意课程</br>
心理学培训班报名享受<text class="bigred">9</text>优惠</br>
疯子读书APP购书享受<text class="bigred">9</text>优惠
</view>
<text class="super_title">众妙之门国学VIP</text>
<view class="super_con">
<text class="weight">课程价格</text>一年<text class="bigred line">19316</text></br>
<text class="weight">VIP价格</text>三年/四年<text class="bigred">2480/2980</text></br>
<text class="weight">延期价格</text>一年/三年/四年<text class="bigred">800/1980/2400</text></br>
<text class="weight">VIP权限</text></br>
无限制观看众妙之门APP任意课程</br>
国学培训班报名享受<text class="bigred">9</text>优惠</br>
疯子读书APP购书享受<text class="bigred">9</text>优惠
</view>
]" 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';
.super_wrap{
height: auto;
background-color: #fdfcdf3d;
padding-bottom: 20rpx;
margin-bottom: 20px;
.vip_block{
padding: 20rpx;
}
.super_content{
background-color: #fdfcdf3d;
.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;
}
.super_title{
.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;
display: inline-block;
font-size: 26rpx;
@include theme("btn_bg");
color: #fff;
padding: 0 15rpx;
border-radius: 15rpx;
margin: 15rpx 25rpx 15rpx;
font-weight: bold;
}
.super_title_2{
font-size: 32rpx;
height: 64rpx;
line-height: 64rpx;
margin: 50rpx 25rpx 20rpx;
padding: 0 20rpx;
background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
}
.super_con{
display: block;
.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: 46rpx;
padding: 0rpx 25rpx 0;
letter-spacing: 1px;
line-height: 40rpx;
}
.super_con2{
display: block;
line-height: 50rpx;
letter-spacing: 1px;
color: #666;
padding: 50rpx 25rpx 60rpx;
}
.bigred{
font-size: 34rpx;
color: red;
.vip_item_used{
position: absolute;
right: 20rpx;
bottom: 20rpx;
font-size: 24rpx;
color: #427ec5;
font-weight: bold;
padding: 0 3rpx;
}
.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;
}
.weight{
display: line-block;
font-weight: bold;
color: #000;
.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>