测试版
This commit is contained in:
liuyuan
281
pages/vip/index.vue
Normal file
281
pages/vip/index.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="commonPageBox">
|
||||
<z-nav-bar title="VIP情况"></z-nav-bar>
|
||||
<view class="vip_block">
|
||||
<view class="vip_item"
|
||||
:class="[item.type==1||item.type==2?'vip_item_special':'',
|
||||
item.state==1?'vip_item_overdue':'',
|
||||
item.type==1&&item.state==0||item.type==2&&item.state==0?'vip_item_bg_1':'',
|
||||
item.type!=1&&item.type!=2&&item.state==0?'vip_item_bg_2':'']"
|
||||
v-for="(item, index) in list" :key="index">
|
||||
<view>
|
||||
<text class="vip_item_title">{{item.title}}</text>
|
||||
<text class="vip_item_tip" v-if="item.tip&&item.tip<100"><uni-icons type="info" size="17" color="#ff1f00"></uni-icons>还有{{item.tip}}天到期</text>
|
||||
<text class="vip_item_flag" v-if="item.state==1">
|
||||
<uni-icons type="info" size="17" color="#999"></uni-icons>已过期
|
||||
</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>
|
||||
|
||||
<text class="vip_item_btn" v-if="item.state==null" @click="openorderModal(item,0)">去办理</text>
|
||||
<text class="vip_item_btn" v-else @click="openorderModal(item,0)">去续费</text>
|
||||
|
||||
<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>VIP价格：</text>
|
||||
<text class="vip_price_v" v-for="(item_price, index_price) in item.vcbList" :key="index_price" @click="openorderModal(item_price)">
|
||||
{{item_price.year}}年<text>{{item_price.rebateFee}}</text>元
|
||||
</text>
|
||||
</view>
|
||||
<view class="vip_price" v-if="item.yanqiList&&item.yanqiList.length>0">
|
||||
<text class="font_bold">延期价格：</text>
|
||||
<text class="vip_price_v" v-for="(item_yq, index_yq) in item.yanqiList" :key="index_yq" @click="openorderModal(item_yq,1)">
|
||||
{{item_yq.year}}年<text>{{item_yq.rebateFee}}</text>元
|
||||
</text>
|
||||
</view>
|
||||
<view class="vip_qx">
|
||||
<text class="font_bold" style=" display: block;">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>
|
||||
|
||||
<u-popup :show="orderModalShow" mode="bottom" :round="20">
|
||||
<view class="orderModalShow popup_box">
|
||||
<u-icon name="close" color="#333" size="18" @click="closeOrderModalShow" style="
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
"></u-icon>
|
||||
<orderPay ref="orderPay" :dataInfo="selectVipData"></orderPay>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import orderPay from "./order.vue";
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
type: 0,
|
||||
text: '', //针对不同type展示文案
|
||||
list: [],
|
||||
orderModalShow: false,
|
||||
selectVipData: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
orderPay
|
||||
},
|
||||
onLoad(){
|
||||
this.getData();
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
$http.request({
|
||||
url: "common/userVip/getVipBuyConfigList",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
uni.hideLoading();
|
||||
if (res.code == 0) {
|
||||
this.list = res.res;
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//点击购买
|
||||
openorderModal(item,type) {
|
||||
let text = '';
|
||||
//如果是右侧按钮点击展示
|
||||
//判断点击类型是vip价格还是延期价格
|
||||
if(type==0){
|
||||
if(item.state==null){ //没有vip
|
||||
this.selectVipData.list = item.vcbList;
|
||||
this.selectVipData.id = item.vcbList[0].id;
|
||||
}else{
|
||||
this.selectVipData.list = item.yanqiList;
|
||||
this.selectVipData.id = item.yanqiList[0].id;
|
||||
}
|
||||
}else{
|
||||
this.selectVipData.id = item.id;
|
||||
}
|
||||
|
||||
if(type){
|
||||
this.selectVipData.type = type;
|
||||
}
|
||||
|
||||
this.selectVipData.title = item.title + '-' + item.year + '年';
|
||||
this.selectVipData.lastFee = item.rebateFee;
|
||||
|
||||
this.orderModalShow = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.orderPay.initPrepareOrder();
|
||||
});
|
||||
},
|
||||
//关闭
|
||||
closeOrderModalShow() {
|
||||
this.orderModalShow = false;
|
||||
this.selectVipData = {};
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.commonPageBox {
|
||||
height: 100% !important;
|
||||
}
|
||||
.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{
|
||||
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_v{
|
||||
font-size: 26rpx !important;
|
||||
color: #ff1f00;
|
||||
border: 1rpx solid #ff1f00;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.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: #294a97;
|
||||
font-style: italic;
|
||||
}
|
||||
.vip_item_flag{
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.vip_item_flag text{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
.vip_item_overdue{
|
||||
background: rgba(220, 223, 225, 0.9) !important;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.vip_item_overdue .vip_item_title{
|
||||
background-image: none;
|
||||
font-size: 32rpx;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
}
|
||||
.vip_item_bg_1{
|
||||
background: rgba(227, 120, 125, 0.3) !important;
|
||||
}
|
||||
.vip_item_bg_2{
|
||||
background: rgba(64, 148, 222, 0.3) !important;
|
||||
}
|
||||
.vip_item_tip{
|
||||
color: #ff1f00;
|
||||
font-size: 26rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.vip_item_tip text{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user