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

修复：合并丢失的代码

Browse Source
This commit is contained in:
fuchao
2025-11-27 17:32:58 +08:00
committed by MS-ENEXEYCSUEKE\Administrator
parent 3b596e0a70
commit 38c4519e79
19 changed files with 1284 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
pages/vip/book.vue Normal file
View File

@@ -0,0 +1,400 @@
<template>
<view class="page-wrapper">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('vip.bookVip')" />
<!-- VIP介绍卡片 -->
<view class="vip-intro-card">
<view class="vip-intro-header">
<text class="vip-intro-title">📚 读书VIP特权</text>
<!-- <text class="vip-intro-subtitle">畅享海量电子图书</text> -->
</view>
<view class="vip-intro-features">
<view class="feature-item">
<wd-icon name="check-circle" size="16px" color="#258feb" />
<text>畅享海量电子图书</text>
</view>
</view>
</view>
<!-- VIP套餐列表 -->
<view class="vip-packages">
<text class="section-title">选择套餐</text>
<view class="package-grid">
<view
class="package-card"
:class="{ 'package-card--popular': vip.isRecommend }"
v-for="(vip, index) in vipList"
:key="index"
@click="selectPackage(vip)"
>
<view class="package-header">
<view class="package-title-wrapper">
<text class="package-title package-title--vip">{{ vip.title }}</text>
</view>
</view>
<view class="package-price">
<text class="price-amount">{{ vip.money }}</text>
<text class="price-unit">{{ $t('global.coin') }}</text>
</view>
<view class="package-duration">
<view class="duration-text">{{ vip.days }} {{ $t('global.days') }}</view>
<view class="daily-price">{{ $t('vip.daily') }}{{ Math.round(vip.money / vip.days * 100) / 100 }}{{ $t('global.coin') }}</view>
</view>
<wd-button
type="primary"
size="small"
class="package-btn"
@click="handlePurchase(vip)"
>
{{ $t('vip.openVip') }}
</wd-button>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { vipApi } from '@/api/modules/vip'
const userStore = useUserStore()
const vipList = ref([])
const getVipList = async () => {
const res = await vipApi.getBookVipList()
// 模拟推荐标识，实际项目中应该从后端获取
vipList.value = res.lableList || []
}
// 选择套餐
const selectPackage = (vip: any) => {
// 这里可以添加跳转到订单确认页面的逻辑
uni.showToast({
title: `已选择: ${vip.title}`,
icon: 'none'
})
}
// 处理购买
const handlePurchase = (vip: any) => {
const selectedGoods = {
productId: vip.id,
productName: `${vip.title}`,
price: vip.money,
productImages: '/static/vip.png',
state: null,
orderType: 'abroadVip'
}
uni.navigateTo({
url: `/pages/order/vipConfirm`,
success: () => {
setTimeout(() => {
uni.$emit('selectedGoods', selectedGoods)
}, 100)
}
})
}
onShow(() => {
getVipList()
})
</script>
<style lang="scss" scoped>
.page-wrapper {
padding: 20rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
// VIP介绍卡片
.vip-intro-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 30rpx 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10rpx);
}
.vip-intro-header {
text-align: center;
}
.vip-intro-title {
display: block;
font-size: 40rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
}
.vip-intro-subtitle {
display: block;
font-size: 28rpx;
color: #666;
}
.vip-intro-features {
margin-top: 20rpx;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
margin: 10rpx;
font-size: 28rpx;
color: #555;
}
.feature-item text {
margin-left: 8rpx;
}
// 套餐区域
.vip-packages {
margin-bottom: 30rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #fff;
margin-bottom: 20rpx;
text-align: center;
}
.package-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20rpx;
}
.package-card {
flex: 0 0 calc(50% - 10rpx);
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10rpx);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&:active {
transform: scale(0.98);
}
}
.package-card--popular {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
border: 2rpx solid #ff6b6b;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 60rpx solid transparent;
border-top: 60rpx solid #ff6b6b;
}
}
.package-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
// .package-title-wrapper {
// position: relative;
// display: inline-block;
// }
.package-title {
font-size: 36rpx;
font-weight: bold;
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: inline-block;
width: 3em;
text-align: center;
padding: 8rpx 0;
border-radius: 12rpx;
transition: all 0.3s ease;
}
.package-title--vip {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
color: #8b4513;
box-shadow:
0 4rpx 15rpx rgba(255, 215, 0, 0.6),
0 0 20rpx rgba(255, 215, 0, 0.4),
inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
border: 1rpx solid rgba(255, 215, 0, 0.5);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}
.package-title--popular {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
color: #8b4513;
box-shadow:
0 6rpx 20rpx rgba(255, 215, 0, 0.8),
0 0 30rpx rgba(255, 215, 0, 0.6),
inset 0 2rpx 0 rgba(255, 255, 255, 0.4);
border: 2rpx solid rgba(255, 215, 0, 0.7);
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
font-size: 38rpx;
}
.title-decoration {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 20rpx;
height: 20rpx;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border-radius: 50%;
animation: decorationPulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes crownFloat {
0%, 100% { transform: translateY(0rpx); }
50% { transform: translateY(-4rpx); }
}
@keyframes starSparkle {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
50% {
transform: scale(1.2) rotate(180deg);
filter: brightness(1.3);
}
}
@keyframes decorationPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.3);
opacity: 1;
}
}
.popular-badge {
background: #ff6b6b;
padding: 4rpx 12rpx;
border-radius: 20rpx;
}
.popular-text {
color: #fff;
font-size: 20rpx;
font-weight: bold;
}
.package-price {
text-align: center;
margin-bottom: 20rpx;
}
.price-amount {
font-size: 48rpx;
font-weight: bold;
color: #ff6b6b;
}
.price-unit {
font-size: 28rpx;
color: #666;
margin-left: 8rpx;
}
.package-duration {
margin-bottom: 20rpx;
padding: 15rpx;
background: rgba(102, 126, 234, 0.1);
border-radius: 12rpx;
text-align: center;
}
.duration-text {
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 10rpx;
}
.daily-price {
font-size: 24rpx;
color: #666;
}
.package-features {
margin-bottom: 30rpx;
}
.feature-dot {
font-size: 24rpx;
color: #555;
margin-bottom: 10rpx;
padding-left: 20rpx;
position: relative;
&::before {
content: '•';
position: absolute;
left: 0;
color: #667eea;
font-weight: bold;
}
}
.package-btn {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none !important;
border-radius: 50rpx !important;
font-size: 28rpx !important;
font-weight: bold;
padding: 30rpx !important;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.package-btn--popular {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
}
// 响应式设计
@media (max-width: 480px) {
.package-grid {
grid-template-columns: 1fr;
}
}
</style>

251
pages/vip/course.vue Normal file
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>