zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：增加课程和图书VIP购买及“我的”主页vip身份显示

Browse Source
This commit is contained in:
chenghuan
2025-11-27 14:19:51 +08:00
parent 509f735493
commit 7062e675f6
20 changed files with 1117 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
pages/vip/course.vue
View File

@@ -0,0 +1,251 @@
<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>