251 lines
7.3 KiB
Vue
251 lines
7.3 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<!-- 自定义导航栏 -->
|
||
<nav-bar :title="$t('vip.courseVip')" />
|
||
<view
|
||
class="info"
|
||
:class="{
|
||
'vip-item-special': item.type == 1 || item.type == 2,
|
||
'vip-item-overdue': item.state == 1,
|
||
'vip-item-special-effective': (item.type == 1 || item.type == 2) && item.state == 0,
|
||
'vip-item-ordinary-effective': item.type != 1 && item.type != 2 && item.state == 0,
|
||
}"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
>
|
||
<!-- 购买按钮 -->
|
||
<wd-button
|
||
type="error"
|
||
size="small"
|
||
plain
|
||
class="vip-item-btn"
|
||
@click="handlePurchase(item)"
|
||
>
|
||
{{ item.state == null ? '去办理' : '去续费' }}
|
||
</wd-button>
|
||
|
||
<!-- vip标志 -->
|
||
<view>
|
||
<text class="vip-item-title">{{ item.title }}</text>
|
||
<text v-if="item.tip && item.tip < 100">
|
||
<wd-icon name="warning" size="14px" color="#ff1f00"/> 还有{{ item.tip }}天到期
|
||
</text>
|
||
<text v-if="item.state == 1">
|
||
<wd-icon name="warning" size="14px" color="#999"/> 已过期
|
||
</text>
|
||
</view>
|
||
|
||
<view class="info-row pt-1">
|
||
<text class="info-label">课程价格：</text>
|
||
<view class="info-content">一年<text class="course-price">{{ item.originalPrice || 0 }}</text>天医币</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">
|
||
<template v-if="item.state !== null">延期价格：</template>
|
||
<template v-else>{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP价格：` }}</template>
|
||
</text>
|
||
<view class="info-content">
|
||
<text
|
||
class="vip-product"
|
||
v-for="(item_price, index_price) in (item.yanqiList ?? item.vcbList)"
|
||
:key="index_price"
|
||
@click="openorderModal(item, index_price)"
|
||
>
|
||
{{ item_price.year }}年<text>{{ item_price.rebateFee }}</text>{{ t('global.coin') }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label" style="display: block">{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP权限：` }}</text>
|
||
<view class="info-content" v-html="vipIntro[item.type]"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品选择器 -->
|
||
<GoodsSelector
|
||
:show="showGoodsSelector"
|
||
:goods="goodsList"
|
||
@select="handleGoodsSelect"
|
||
@confirm="handleGoodsConfirm"
|
||
@close="closeGoodsSelector"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { vipApi } from '@/api/modules/vip'
|
||
import { t } from '@/utils/i18n'
|
||
import type { IVipItem, IVipItemProduct } from '@/types/vip'
|
||
import type { IGoods } from '@/types/order'
|
||
import GoodsSelector from '@/components/order/GoodsSelector.vue'
|
||
|
||
const vipIntro = {
|
||
1: '<p>无限制观看中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
|
||
2: '<p>无限制观看国学与心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
|
||
4: '<p>无限制观看中医任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
|
||
5: '<p>无限制观看针灸任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
|
||
6: '<p>无限制观看肿瘤学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
|
||
7: '<p>无限制观看国学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
|
||
8: '<p>无限制观看心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
|
||
9: '<p>无限制观看中医学板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>'
|
||
}
|
||
|
||
// 获取VIP列表
|
||
const list = ref<IVipItem[]>([])
|
||
const getData = async () => {
|
||
const res = await vipApi.getVipBuyConfigList()
|
||
list.value = res.res
|
||
}
|
||
onShow(() => {
|
||
getData()
|
||
})
|
||
|
||
// 商品选择
|
||
const showGoodsSelector = ref(false)
|
||
const goodsList = ref<IGoods[]>([])
|
||
const selectedGoods = ref<IGoods | null>(null)
|
||
|
||
/**
|
||
* 打开商品选择器
|
||
*/
|
||
const handlePurchase = async (item: IVipItem) => {
|
||
const currentVipProductList = item[item.state == null ? 'vcbList' : 'yanqiList']
|
||
goodsList.value = currentVipProductList.map((e: IVipItemProduct) => {
|
||
return {
|
||
productId: e.id,
|
||
productName: `${e.title} ${e.year}年`,
|
||
price: item.state == null ? e.fee : e.rebateFee,
|
||
productImages: '/static/vip.png',
|
||
state: item.state,
|
||
orderType: 'vip'
|
||
}
|
||
})
|
||
showGoodsSelector.value = true
|
||
}
|
||
/**
|
||
* 关闭商品选择器
|
||
*/
|
||
const closeGoodsSelector = () => {
|
||
showGoodsSelector.value = false
|
||
}
|
||
|
||
// 处理选择商品
|
||
const handleGoodsSelect = (data: IGoods) => {
|
||
selectedGoods.value = data
|
||
}
|
||
|
||
// 购买商品
|
||
const handleGoodsConfirm = () => {
|
||
uni.navigateTo({
|
||
url: `/pages/order/vipConfirm`,
|
||
success: () => {
|
||
setTimeout(() => {
|
||
uni.$emit('selectedGoods', selectedGoods.value)
|
||
}, 100)
|
||
}
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.info {
|
||
width: 100%;
|
||
padding: 20rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0px 0px 5px 0px #a7bbe4;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: 3px;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.info-label {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
font-weight: bold;
|
||
}
|
||
.info-content {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.course-price {
|
||
font-size: 34rpx !important;
|
||
color: #258feb;
|
||
font-weight: bold;
|
||
text-decoration: line-through;
|
||
font-style: italic;
|
||
padding: 0 5rpx;
|
||
}
|
||
.vip-product {
|
||
display: inline-block;
|
||
color: #ff1f00;
|
||
border: 1rpx solid #ff1f00;
|
||
border-radius: 10rpx;
|
||
margin-right: 15rpx;
|
||
margin-bottom: 10rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
.vip-item-btn {
|
||
position: absolute !important;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
padding: 2rpx 10rpx !important;
|
||
height: auto !important;
|
||
line-height: 1.5 !important;
|
||
border-radius: 5px !important;
|
||
}
|
||
.vip-item-title {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
color: #fff;
|
||
padding: 10rpx 12rpx;
|
||
border-radius: 15rpx;
|
||
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
|
||
}
|
||
|
||
// 超级vip
|
||
.vip-item-special {
|
||
.vip-item-title {
|
||
font-size: 26rpx;
|
||
background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
|
||
}
|
||
}
|
||
// 已过期
|
||
.vip-item-overdue{
|
||
background: rgba(220, 223, 225, 0.9) !important;
|
||
opacity: 0.75;
|
||
|
||
.vip-item-title {
|
||
background-image: linear-gradient(90deg, #999 0%, #ccc 100%);
|
||
color: #000;
|
||
}
|
||
}
|
||
// 普通vip生效中
|
||
.vip-item-ordinary-effective {
|
||
background-color: rgba(64, 148, 222, 0.3) !important;
|
||
}
|
||
// 超级vip生效中
|
||
.vip-item-special-effective {
|
||
background: rgba(227, 120, 125, 0.3) !important;
|
||
}
|
||
</style> |