You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.2 KiB
328 lines
9.2 KiB
<template>
|
|
<view class="flex fld-c p15">
|
|
<u-sticky>
|
|
<view class="flex ai-c">
|
|
<view v-for="(item, index) in vipAllList" :key="index" class="km-item" :class="{ actived: index == current }"
|
|
@click="current = index">
|
|
{{ getKmTitle(item.subjects) }}
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="mt15">
|
|
<swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
|
|
:disable-programmatic-animation="true" @change="onChange">
|
|
<swiper-item v-for="(item, index) in vipAllList" :key="index">
|
|
<view class="relative">
|
|
<image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
|
|
<view class="vip-info">
|
|
<u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
|
|
<view class="ml10">
|
|
<view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
|
|
{{ item.memberName }}
|
|
</view>
|
|
<view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
|
|
{{ getExpireText(item) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="vipHasOpened(item)" class="corner">
|
|
VIP已开通
|
|
</view>
|
|
<view v-if="vipHasOpened(item)" class="renew">
|
|
{{ item.price }}元立即续费
|
|
</view>
|
|
<view v-else class="buy">
|
|
立即充值
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="mt20">
|
|
<swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
|
|
:disable-programmatic-animation="true" @change="onChange">
|
|
<swiper-item v-for="(item, index) in vipAllList" :key="index">
|
|
<view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
|
|
<view class="fs18 cor-000 fwb">
|
|
3步轻松学{{ getKmTitle(item.subjects) }}
|
|
</view>
|
|
<view class="mt25 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
精简500题
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
题目全部做对，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study" @tap="to500(item)">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
<view class="mt45 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
真实考场模拟
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
10次95分以上，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study" @tap="toRealExam(item)">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
<view class="mt45 flex ai-c jc-sb">
|
|
<view class="flex ai-c">
|
|
<image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
|
|
<view class="ml7">
|
|
<view class="fs16 cor-000 fwb" style="line-height: 16px;">
|
|
考前密卷
|
|
</view>
|
|
<view class="mt7 fs12 cor-666" style="line-height: 12px;">
|
|
2套试卷95分以上，视为完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="study" @tap="toSpecExam(item)">
|
|
去学习
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else style="margin-top: 30rpx;">
|
|
<view class="video-box">
|
|
<view class="flex jc-sb ai-c wp100">
|
|
<text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
|
|
<text class="cor-666 fs12">全部 ></text>
|
|
</view>
|
|
<view class="flex ai-c mt20">
|
|
<view class="contain-box relative">
|
|
<image class="contain-box" src="../../../static/image/index/jpsp.png"></image>
|
|
<image class="play_btn_2" src="../../static/image/index/play.png" />
|
|
</view>
|
|
<view class="ml15 text-center">
|
|
<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
|
|
text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle" @click="toPlaceLive(item)">
|
|
</u-button>
|
|
<view class="cor-333 fs15 fw600 mt10">真实考场模拟</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import useUserStore from '@/jtools/store/user'
|
|
export default {
|
|
computed: {
|
|
vipAllList() {
|
|
return useUserStore().vipAllList.filter(it => [1, 2, 3, 4].includes(Number(it.subjects)))
|
|
},
|
|
vipOnList() {
|
|
return useUserStore().vipOnList
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
current: 0
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
getKmTitle(km) {
|
|
return {
|
|
'1': '科一',
|
|
'2': '科二',
|
|
'3': '科三',
|
|
'4': '科四',
|
|
}[km]
|
|
},
|
|
getExpireText(item) {
|
|
const vipOn = this.vipOnList.find(it => it.memberId == item.memberId)
|
|
if (vipOn) {
|
|
return `${vipOn.endDate.split(' ')[0]}到期`
|
|
} else {
|
|
return '开通vip助您快速拿证'
|
|
}
|
|
},
|
|
vipHasOpened(item) {
|
|
return !!this.vipOnList.find(it => it.memberId == item.memberId)
|
|
},
|
|
// 去精选500题 item=> 当前科目vip信息
|
|
to500(item) {
|
|
// 当前vip是否已开通
|
|
if (this.vipHasOpened(item)) {
|
|
// 跳转
|
|
} else {
|
|
uni.showToast({
|
|
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 去真实考场 item=> 当前科目vip信息
|
|
toRealExam(item) {
|
|
// 当前vip是否已开通
|
|
if (this.vipHasOpened(item)) {
|
|
// 跳转
|
|
} else {
|
|
uni.showToast({
|
|
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 去秘卷 item=> 当前科目vip信息
|
|
toSpecExam(item) {
|
|
// 当前vip是否已开通
|
|
if (this.vipHasOpened(item)) {
|
|
// 跳转
|
|
} else {
|
|
uni.showToast({
|
|
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// 去考场实况 item=> 当前科目vip信息
|
|
toPlaceLive(item) {
|
|
// 当前vip是否已开通
|
|
if (this.vipHasOpened(item)) {
|
|
// 跳转
|
|
} else {
|
|
uni.showToast({
|
|
title: `请先充值${this.getKmTitle(item.subjects)}vip`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.km-item {
|
|
margin-right: 8px;
|
|
width: 72px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
color: #333;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
border: 1px solid #CCCCCC;
|
|
}
|
|
|
|
.actived {
|
|
background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.km-item:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.vip-info {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 77px;
|
|
height: 23px;
|
|
background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
|
|
opacity: 0.86;
|
|
border-radius: 0px 8px 0px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
}
|
|
|
|
.renew {
|
|
position: absolute;
|
|
right: 10%;
|
|
bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 185rpx;
|
|
height: 52rpx;
|
|
background: #873E1D;
|
|
border-radius: 26rpx;
|
|
font-size: 12px;
|
|
color: #F6E99F;
|
|
}
|
|
|
|
.buy {
|
|
position: absolute;
|
|
left: 45%;
|
|
transform: translateX(-50%);
|
|
bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
background: #873E1D;
|
|
border-radius: 30rpx;
|
|
font-size: 14px;
|
|
color: #F6E99F;
|
|
}
|
|
|
|
.study {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 161rpx;
|
|
height: 67rpx;
|
|
background: #F6E99F;
|
|
border-radius: 34rpx;
|
|
font-size: 12px;
|
|
color: #873E1D;
|
|
}
|
|
|
|
.video-box {
|
|
padding: 20rpx;
|
|
width: 694rpx;
|
|
height: 369rpx;
|
|
background: #F9F3E7;
|
|
border: 2rpx solid #CF8B6D;
|
|
border-radius: 16rpx;
|
|
}
|
|
.contain-box {
|
|
width: 406rpx;
|
|
height: 228rpx;
|
|
background: #00B74F;
|
|
border-radius: 16rpx;
|
|
}
|
|
.play_btn_2 {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
position: absolute;
|
|
left: 165.5rpx;
|
|
top: 78rpx
|
|
}
|
|
</style> |