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:
chenghuan
2025-12-01 16:39:58 +08:00
parent cd54ee48de
commit 1049030a46
15 changed files with 520 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/modules/course.ts
View File

@@ -114,7 +114,7 @@ export const courseApi = {
},
/**
* 开始学习免费课程
* 领取免费课程
* @param catalogueId 目录ID
*/
startStudyForMF(catalogueId: number) {

96
components/course/CatalogueList.vue
View File

@@ -1,96 +0,0 @@
<template>
<view
v-if="catalogues.length > 1"
:class="['catalogue-list', userVip ? 'vip-style' : '']"
>
<view
v-for="(catalogue, index) in catalogues"
:key="catalogue.id"
:class="['catalogue-item', currentIndex === index ? 'active' : '']"
@click="handleSelect(index)"
>
<text class="catalogue-title">{{ catalogue.title }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import type { ICatalogue, IVipInfo } from '@/types/course'
interface Props {
catalogues: ICatalogue[]
currentIndex: number
userVip: IVipInfo | null
}
const props = defineProps<Props>()
const emit = defineEmits<{
change: [index: number]
}>()
/**
* 选择目录
*/
const handleSelect = (index: number) => {
if (index === props.currentIndex) return
emit('change', index)
}
</script>
<style lang="scss" scoped>
.catalogue-list {
display: flex;
align-items: flex-end;
padding: 20rpx;
padding-bottom: 0;
border-radius: 20rpx 20rpx 0 0;
margin-top: 20rpx;
&.vip-style {
background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
.catalogue-item {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
border-color: #fff;
&.active {
background-color: #258feb;
color: #fff;
}
}
}
.catalogue-item {
flex: 1;
text-align: center;
padding: 16rpx 0;
margin-right: 10rpx;
border-radius: 20rpx 20rpx 0 0;
border: 1px solid #fff;
border-bottom: none;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
transition: all 0.3s;
&:last-child {
margin-right: 0;
}
&.active {
background-color: #258feb;
padding: 20rpx 0;
.catalogue-title {
font-size: 36rpx;
font-weight: bold;
}
}
.catalogue-title {
font-size: 30rpx;
}
}
}
</style>

320
components/course/ChapterList.vue
View File

@@ -1,320 +0,0 @@
<template>
<view class="chapter-list">
<!-- 目录状态信息 -->
<view v-if="catalogue" class="catalogue-status">
<view v-if="catalogue.isBuy === 1 || userVip" class="purchased-info">
<view class="info-row">
<text v-if="userVip">
VIP畅学权益有效期截止到：{{ userVip.endTime }}
</text>
<template v-else>
<text v-if="!catalogue.startTime">
当前目录还未开始学习
</text>
<text v-else>
课程有效期截止到：{{ catalogue.endTime }}
</text>
<!-- <wd-button
v-if="catalogue.startTime"
size="small"
@click="handleRenew"
>
续费
</wd-button> -->
</template>
</view>
</view>
<!-- 未购买状态 -->
<view v-else-if="catalogue.type === 0" class="free-course">
<wd-button type="success" @click="handleGetFreeCourse">
{{ $t('courseDetails.free') }}
</wd-button>
</view>
<view v-else class="unpurchased-info">
<text class="tip-text">
{{ $t('courseDetails.unpurchasedTip') }}
</text>
<view class="action-btns">
<wd-button size="small" type="warning" @click="handlePurchase">
{{ $t('courseDetails.purchase') }}
</wd-button>
<wd-button
v-if="showRenewBtn"
size="small"
type="success"
@click="handleRenew"
>
{{ $t('courseDetails.relearn') }}
</wd-button>
<wd-button size="small" type="primary" @click="goToVip">
{{ $t('courseDetails.openVip') }}
</wd-button>
</view>
</view>
</view>
<view v-if="chapters.length > 0" class="chapter-content">
<!-- VIP标识 -->
<view v-if="userVip" class="vip-badge">
<text>VIP畅学权益生效中</text>
</view>
<!-- 章节列表 -->
<view
v-for="(chapter, index) in chapters"
:key="chapter.id"
class="chapter-item"
@click="handleChapterClick(chapter)"
>
<view class="chapter-content-wrapper">
<view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
<text class="chapter-title">{{ chapter.title }}</text>
<!-- 试听标签 -->
<wd-tag
v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
type="success"
plain
size="small"
custom-class="chapter-tag"
>
试听
</wd-tag>
<!-- 学习状态标签 -->
<template v-if="isPurchased || userVip">
<wd-tag
v-if="chapter.isLearned === 0"
type="primary"
plain
size="small"
custom-class="chapter-tag"
>
未学
</wd-tag>
<wd-tag
v-else
type="success"
plain
size="small"
custom-class="chapter-tag"
>
已学
</wd-tag>
</template>
</view>
<!-- 锁定图标 -->
<view v-if="!canAccess(chapter)" class="lock-icon">
<wd-icon name="lock-on" size="24px" color="#258feb" />
</view>
</view>
</view>
</view>
<!-- 暂无章节 -->
<view v-else class="no-chapters">
<text>暂无章节内容</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
interface Props {
chapters: IChapter[]
catalogue: ICatalogue
userVip: IVipInfo | null
showRenewBtn?: boolean
}
const props = defineProps<Props>()
const emit = defineEmits<{
click: [chapter: IChapter],
purchase: [catalogue: ICatalogue],
renew: [catalogue: ICatalogue],
toVip: [catalogue: ICatalogue],
}>()
/**
* 判断目录是否已购买
*/
const isPurchased = computed(() => {
return props.catalogue.isBuy === 1
})
// 购买
const handlePurchase = () => {
emit('purchase', props.catalogue)
}
// 去开通vip
const goToVip = () => {
emit('toVip', props.catalogue)
}
// 续费/复读
const handleRenew = () => {
emit('renew', props.catalogue)
}
// 领取免费课程
const handleGetFreeCourse = () => {
emit('purchase', props.catalogue)
}
/**
* 判断章节是否可以访问
*/
const canAccess = (chapter: IChapter): boolean => {
// VIP用户可以访问所有章节
if (props.userVip) return true
// 已购买目录可以访问所有章节
if (isPurchased.value) return true
// 试听章节可以访问
if (chapter.isAudition === 1) return true
// 免费课程可以访问
if (props.catalogue.type === 0) return true
return false
}
/**
* 点击章节
*/
const handleChapterClick = (chapter: IChapter) => {
if (!canAccess(chapter)) {
if (props.catalogue.type === 0) {
uni.showToast({
title: '请先领取课程',
icon: 'none'
})
} else {
uni.showToast({
title: '请先购买课程',
icon: 'none'
})
}
return
}
emit('click', chapter)
}
</script>
<style lang="scss" scoped>
.chapter-list {
padding: 20rpx;
}
.catalogue-status {
padding: 20rpx;
margin-bottom: 20rpx;
background-color: #fff;
.purchased-info {
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
line-height: 50rpx;
}
}
.free-course {
text-align: center;
}
.unpurchased-info {
.tip-text {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 20rpx;
line-height: 1.6;
}
.action-btns {
display: flex;
gap: 20rpx;
justify-content: center;
}
}
}
.chapter-content {
position: relative;
padding: 20rpx;
border: 4rpx solid #fffffc;
background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
box-shadow: 0px 0px 10px 0px #89c8e9;
border-top-right-radius: 40rpx;
border-bottom-left-radius: 40rpx;
.vip-badge {
display: inline-block;
font-size: 24rpx;
background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
color: #fff;
padding: 10rpx 20rpx;
border-radius: 0 50rpx 50rpx 0;
z-index: 1;
}
.chapter-item {
padding: 20rpx 0;
border-bottom: 1px solid #fff;
&:last-child {
border-bottom: none;
}
.chapter-content-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
.chapter-info {
flex: 1;
display: flex;
align-items: center;
gap: 10rpx;
&.locked {
opacity: 0.6;
}
.chapter-title {
flex: 1;
font-size: 28rpx;
color: #1e2f3e;
line-height: 1.5;
}
.chapter-tag {
flex-shrink: 0;
}
}
.lock-icon {
margin-left: 20rpx;
flex-shrink: 0;
}
}
}
}
.no-chapters {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 28rpx;
}
</style>

10
components/order/Confirm.vue
View File

@@ -290,7 +290,11 @@ const handlePointsInput = (value: any) => {
}
// 重新计算实付款
calculateFinalPrice()
const result = Math.max(
0,
totalAmount.value - pointsDiscounted.value - promotionDiscounted.value - vipDiscounted.value
)
finalAmount.value = result
}
/**
@@ -314,9 +318,11 @@ const calculateFinalPrice = () => {
props?.userInfo?.jf || 0,
Math.floor(orderAmountAfterDiscount - couponAmount)
)
pointsDiscounted.value = pointsUsableMax.value
// 限制当前积分不超过最大值
if (pointsDiscounted.value > pointsUsableMax.value) {
if (pointsDiscounted.value >= pointsUsableMax.value) {
pointsDiscounted.value = pointsUsableMax.value
}

3
locale/en.json
View File

@@ -491,5 +491,8 @@
"openVip": "Open Now",
"renewal": "Renewal",
"daily": "Daily"
},
"news": {
"newsDetail": "News Detail"
}
}

3
locale/zh-Hans.json
View File

@@ -491,5 +491,8 @@
"openVip": "立即开通",
"renewal": "续费",
"daily": "日均"
},
"news": {
"newsDetail": "新闻详情"
}
}

26
pages/book/search.vue
View File

@@ -27,12 +27,7 @@
>
<image :src="item.images" />
<text class="book-text">{{ item.name }}</text>
<text v-if="formatPrice(item)" class="book-price">{{
formatPrice(item)
}}</text>
<text v-if="formatStats(item)" class="book-flag">{{
formatStats(item)
}}</text>
<BookPrice :data="item" class="book-price-container" />
</view>
</view>
<view v-else-if="isEmpty" class="empty-wrapper">
@@ -47,6 +42,7 @@ import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { homeApi } from '@/api/modules/book_home'
import BookPrice from '@/components/book/BookPrice.vue'
import type { IBookWithStats, IVipInfo } from '@/types/home'
const { t } = useI18n()
@@ -260,21 +256,9 @@ onMounted(async () => {
overflow: hidden;
}
.book-price {
position: absolute;
font-size: 28rpx;
color: #ff4703;
left: 30rpx;
bottom: 20rpx;
}
.book-flag {
display: block;
font-size: 26rpx;
color: #999;
position: absolute;
right: 6%;
bottom: 20rpx;
.book-price-container {
width: 80%;
margin: 15rpx auto 0;
}
}
}

2
pages/course/details/chapter.vue
View File

@@ -31,7 +31,7 @@
<view v-if="videoList.length > 0" class="video-list-section">
<view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
<wd-radio-group v-model="currentVideoIndex" shape="button" >
<wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index">
<wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index" class="mb-2!">
【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
</wd-radio>
</wd-radio-group>

450
pages/course/details/components/CatalogueList.vue Normal file
View File

@@ -0,0 +1,450 @@
<template>
<view class="course-content-wrapper">
<view
v-if="catalogues.length > 1"
:class="['catalogue-list', userVip ? 'vip-style' : '']"
>
<view
v-for="(catalogue, index) in catalogues"
:key="catalogue.id"
:class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
@click="handleSelect(index)"
>
<text class="catalogue-title">{{ catalogue.title }}</text>
</view>
</view>
<view class="chapter-list">
<!-- 目录状态信息 -->
<view class="catalogue-status">
<view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
<view class="info-row">
<text v-if="userVip">
VIP畅学权益有效期截止到：{{ userVip.endTime }}
</text>
<template v-else>
<text v-if="!currentCatalogue.startTime">
当前目录还未开始学习
</text>
<text v-else>
课程有效期截止到：{{ currentCatalogue.endTime }}
</text>
<!-- <wd-button
v-if="currentCatalogue.startTime"
size="small"
@click="handleRenew"
>
续费
</wd-button> -->
</template>
</view>
</view>
<!-- 未购买状态 -->
<view v-else-if="currentCatalogue?.type === 0" class="free-course">
<wd-button type="success" @click="handleGetFreeCourse">
{{ $t('courseDetails.free') }}
</wd-button>
</view>
<view v-else class="unpurchased-info">
<text class="tip-text">
{{ $t('courseDetails.unpurchasedTip') }}
</text>
<view class="action-btns">
<wd-button size="small" type="warning" @click="handlePurchase">
{{ $t('courseDetails.purchase') }}
</wd-button>
<wd-button
v-if="showRenewBtn"
size="small"
type="success"
@click="handleRenew"
>
{{ $t('courseDetails.relearn') }}
</wd-button>
<wd-button size="small" type="primary" @click="goToVip">
{{ $t('courseDetails.openVip') }}
</wd-button>
</view>
</view>
</view>
<view v-if="chapterList.length > 0" class="chapter-content">
<!-- VIP标识 -->
<view v-if="userVip" class="vip-badge">
<text>VIP畅学权益生效中</text>
</view>
<!-- 章节列表 -->
<view
v-for="(chapter, index) in chapterList"
:key="chapter.id"
class="chapter-item"
@click="handleChapterClick(chapter)"
>
<view class="chapter-content-wrapper">
<view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
<text class="chapter-title">{{ chapter.title }}</text>
<!-- 试听标签 -->
<wd-tag
v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
type="success"
plain
size="small"
custom-class="chapter-tag"
>
试听
</wd-tag>
<!-- 学习状态标签 -->
<template v-if="isPurchased || userVip">
<wd-tag
v-if="chapter.isLearned === 0"
type="primary"
plain
size="small"
custom-class="chapter-tag"
>
未学
</wd-tag>
<wd-tag
v-else
type="success"
plain
size="small"
custom-class="chapter-tag"
>
已学
</wd-tag>
</template>
</view>
<!-- 锁定图标 -->
<view v-if="!canAccess(chapter)" class="lock-icon">
<wd-icon name="lock-on" size="24px" color="#258feb" />
</view>
</view>
</view>
</view>
<!-- 暂无章节 -->
<view v-else class="no-chapters">
<text>暂无章节内容</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { courseApi } from '@/api/modules/course'
import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
interface Props {
catalogues: ICatalogue[]
userVip: IVipInfo | null
showRenewBtn?: boolean
}
const props = defineProps<Props>()
const emit = defineEmits<{
click: [chapter: IChapter],
purchase: [catalogue: ICatalogue],
renew: [catalogue: ICatalogue],
toVip: [catalogue: ICatalogue],
change: [index: number]
}>()
// 当前目录索引
const currentCatalogueIndex = ref<number>(0)
// 当前目录
const currentCatalogue = computed(() => {
return props.catalogues[currentCatalogueIndex.value]
})
// 当前目录的章节
const chapterList = ref<IChapter[]>([])
// 显示续费按钮
const showRenewBtn = ref<boolean>(false)
// 判断目录是否已购买
const isPurchased = computed(() => {
return currentCatalogue.value.isBuy === 1
})
/**
* 选择目录
*/
const handleSelect = (index: number) => {
if (index === currentCatalogueIndex.value) return
currentCatalogueIndex.value = index
getChapters() // 获取章节列表
checkRenewPayment() // 检查是否支持复读
}
/**
* 获取当前目录的章节
*/
const getChapters = async () => {
const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
chapterList.value = res.chapterList || []
}
/**
* 检查目录是否支持复读
*/
const checkRenewPayment = async () => {
if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
showRenewBtn.value = renewRes.canRelearn || false
} else {
showRenewBtn.value = false
}
}
/**
* 监听目录变化
*/
watch(() => props.catalogues, (newVal: ICatalogue[]) => {
if (newVal.length > 0) {
currentCatalogueIndex.value = 0
getChapters()
checkRenewPayment()
}
}, { immediate: true, deep: true })
// 购买
const handlePurchase = () => {
emit('purchase', currentCatalogue.value)
}
// 去开通vip
const goToVip = () => {
emit('toVip', currentCatalogue.value)
}
// 续费/复读
const handleRenew = () => {
emit('renew', currentCatalogue.value)
}
// 领取免费课程
const handleGetFreeCourse = async () => {
emit('getFreeCourse', currentCatalogue.value)
}
/**
* 判断章节是否可以访问
*/
const canAccess = (chapter: IChapter): boolean => {
// VIP用户可以访问所有章节
if (props.userVip) return true
// 已购买目录可以访问所有章节
if (isPurchased.value) return true
// 试听章节可以访问
if (chapter.isAudition === 1) return true
// 免费课程可以访问
if (currentCatalogue.value.type === 0) return true
return false
}
/**
* 点击章节
*/
const handleChapterClick = (chapter: IChapter, catalogue: ICatalogue) => {
if (!isPurchased.value && currentCatalogue.value.type === 0) {
uni.showToast({
title: '请先领取课程',
icon: 'none'
})
return
}
if (!canAccess(chapter)) {
uni.showToast({
title: '请先购买课程',
icon: 'none'
})
return
}
emit('toDetail', chapter, currentCatalogue.value)
}
</script>
<style lang="scss" scoped>
.course-content-wrapper {
background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
}
.catalogue-list {
display: flex;
align-items: flex-end;
padding: 20rpx;
padding-bottom: 0;
border-radius: 20rpx 20rpx 0 0;
margin-top: 20rpx;
&.vip-style {
background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
.catalogue-item {
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
border-color: #fff;
&.active {
background-color: #258feb;
color: #fff;
}
}
}
.catalogue-item {
flex: 1;
text-align: center;
padding: 16rpx 0;
margin-right: 10rpx;
border-radius: 20rpx 20rpx 0 0;
border: 1px solid #fff;
border-bottom: none;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
transition: all 0.3s;
&:last-child {
margin-right: 0;
}
&.active {
background-color: #258feb;
padding: 20rpx 0;
.catalogue-title {
font-size: 36rpx;
font-weight: bold;
}
}
.catalogue-title {
font-size: 30rpx;
}
}
}
.chapter-list {
padding: 20rpx;
}
.catalogue-status {
padding: 20rpx;
margin-bottom: 20rpx;
background-color: #fff;
.purchased-info {
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
line-height: 50rpx;
}
}
.free-course {
text-align: center;
}
.unpurchased-info {
.tip-text {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 20rpx;
line-height: 1.6;
}
.action-btns {
display: flex;
gap: 20rpx;
justify-content: center;
}
}
}
.chapter-content {
position: relative;
padding: 20rpx;
border: 4rpx solid #fffffc;
background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
box-shadow: 0px 0px 10px 0px #89c8e9;
border-top-right-radius: 40rpx;
border-bottom-left-radius: 40rpx;
.vip-badge {
display: inline-block;
font-size: 24rpx;
background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
color: #fff;
padding: 10rpx 20rpx;
border-radius: 0 50rpx 50rpx 0;
z-index: 1;
}
.chapter-item {
padding: 20rpx 0;
border-bottom: 1px solid #fff;
&:last-child {
border-bottom: none;
}
.chapter-content-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
.chapter-info {
flex: 1;
display: flex;
align-items: center;
gap: 10rpx;
&.locked {
opacity: 0.6;
}
.chapter-title {
flex: 1;
font-size: 28rpx;
color: #1e2f3e;
line-height: 1.5;
}
.chapter-tag {
flex-shrink: 0;
}
}
.lock-icon {
margin-left: 20rpx;
flex-shrink: 0;
}
}
}
}
.no-chapters {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 28rpx;
}
</style>

0
components/course/CourseInfo.vue → pages/course/details/components/CourseInfo.vue
View File

155
pages/course/details/course.vue
View File

@@ -16,40 +16,23 @@
<CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
<!-- 课程内容包装器 -->
<view class="course-content-wrapper">
<!-- 目录列表 -->
<CatalogueList
v-if="catalogueList.length > 0"
:catalogues="catalogueList"
:currentIndex="currentCatalogueIndex"
:userVip="userVip"
@change="handleCatalogueChange"
/>
<!-- 章节列表 -->
<ChapterList
v-if="chapterList.length > 0"
:chapters="chapterList"
:catalogue="currentCatalogue"
:userVip="userVip"
:showRenewBtn="showRenewBtn"
@purchase="handlePurchase"
@toVip="goToVip"
@renew="handleRenew"
@click="handleChapterClick"
/>
</view>
<CatalogueList
v-if="catalogueList.length > 0"
:catalogues="catalogueList"
:userVip="userVip"
@getFreeCourse="handleGetFreeCourse"
@purchase="handlePurchase"
@toVip="goToVip"
@renew="handleRenew"
@toDetail="handleToDetail"
/>
<!-- 学习进度 -->
<view class="learning-progress">
<view class="progress-title">
<text>{{ $t('courseDetails.progress') }}</text>
</view>
<wd-progress
:percentage="learningProgress"
show-text
stroke-width="6"
/>
<wd-progress :percentage="learningProgress" show-text stroke-width="6" />
</view>
<!-- 相关书籍 -->
@@ -166,30 +149,24 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { useCourseStore } from '@/stores/course'
import { useUserStore } from '@/stores/user'
import { courseApi } from '@/api/modules/course'
import CourseInfo from '@/components/course/CourseInfo.vue'
import CatalogueList from '@/components/course/CatalogueList.vue'
import ChapterList from '@/components/course/ChapterList.vue'
import CourseInfo from './components/CourseInfo.vue'
import CatalogueList from './components/CatalogueList.vue'
import GoodsSelector from '@/components/order/GoodsSelector.vue'
import CommentList from '@/components/comment/CommentList.vue'
import CommentEditor from '@/components/comment/CommentEditor.vue'
import NavBar from '@/components/nav-bar/nav-bar.vue'
import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
import type { IGoods } from '@/types/order'
import type { IComment } from '@/types/comment'
// Stores
const courseStore = useCourseStore()
const userStore = useUserStore()
// 页面数据
const courseId = ref<number>(0)
const courseDetail = ref<ICourseDetail | null>(null)
const catalogueList = ref<ICatalogue[]>([])
const currentCatalogueIndex = ref(0)
const chapterList = ref<IChapter[]>([])
const userVip = ref<IVipInfo | null>(null)
const vipModuleList = ref<string[]>([])
const learningProgress = ref(0)
@@ -202,7 +179,6 @@ const selectedGoods = ref<IGoods | null>(null)
const showProtocol = ref(false)
const isFudu = ref(false)
const fuduCatalogueId = ref<number>(0)
const showRenewBtn = ref(false)
// 评论相关
const commentList = ref<IComment[]>([])
@@ -215,14 +191,6 @@ const replyComment = ref<IComment | undefined>(undefined)
// UI状态
const scrollTop = ref(0)
/**
* 当前目录
*/
const currentCatalogue = computed(() => {
if (catalogueList.value.length === 0) return null
return catalogueList.value[currentCatalogueIndex.value] || null
})
/**
* VIP提示文案
*/
@@ -286,11 +254,6 @@ const loadPageData = async () => {
const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
}
// 默认选择第一个目录
if (catalogueList.value.length > 0) {
await switchCatalogue(0)
}
}
// 检查VIP权益
@@ -318,69 +281,50 @@ const checkVipStatus = async () => {
}
}
/**
* 切换目录
*/
const switchCatalogue = async (index: number) => {
currentCatalogueIndex.value = index
const catalogue = catalogueList.value[index]
// 获取章节列表
const res = await courseApi.getCatalogueChapterList(catalogue.id)
if (res.code === 0) {
chapterList.value = res.chapterList || []
}
// 检查是否支持复读
if (catalogue.isBuy === 0 && !userVip.value) {
const renewRes = await courseApi.checkRenewPayment(catalogue.id)
showRenewBtn.value = renewRes.canRelearn || false
} else {
showRenewBtn.value = false
}
}
/**
* 目录切换事件
*/
const handleCatalogueChange = (index: number) => {
switchCatalogue(index)
}
/**
* 点击章节
*/
const handleChapterClick = (chapter: IChapter) => {
const noRecored = chapter.isAudition === 1 && currentCatalogue.value?.isBuy === 0 && !userVip.value
const handleToDetail = (chapter: IChapter, catalogue: ICatalogue) => {
const noRecored = chapter.isAudition === 1 && catalogue.isBuy === 0 && !userVip.value
uni.navigateTo({
url: `/pages/course/details/chapter?id=${chapter.id}&courseId=${courseId.value}&courseTitle=${courseDetail.value?.title}&title=${chapter.title}&noRecored=${noRecored}`
})
}
/**
* 去开通vip
*/
const goToVip = () => {
uni.navigateTo({
url: '/pages/vip/course'
})
}
/**
* 领取免费课程
*/
const handleGetFreeCourse = async () => {
if (!currentCatalogue.value) return
const handleGetFreeCourse = async (catalogue: ICatalogue) => {
if (!catalogue) return
uni.showLoading({ title: '领取中...' })
const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
const res = await courseApi.startStudyForMF(catalogue.id)
if (res.code === 0) {
uni.showToast({ title: '领取成功', icon: 'success' })
// 刷新页面数据
await loadPageData()
loadPageData()
} else {
uni.showToast({ title: res.msg || '领取失败', icon: 'none' })
}
}
/**
* 购买课程
*/
const handlePurchase = async () => {
if (!currentCatalogue.value) return
const handlePurchase = async (catalogue: ICatalogue) => {
if (!catalogue) return
isFudu.value = false
const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
const res = await courseApi.getProductListForCourse(catalogue.id)
if (res.code === 0 && res.productList.length > 0) {
goodsList.value = res.productList
showGoodsSelector.value = true
@@ -393,17 +337,17 @@ const handlePurchase = async () => {
* 续费/复读
*/
const handleRenew = async () => {
if (!currentCatalogue.value) return
// if (!currentCatalogue.value) return
isFudu.value = true
fuduCatalogueId.value = currentCatalogue.value.id
const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
if (res.code === 0 && res.productList.length > 0) {
goodsList.value = res.productList
showGoodsSelector.value = true
} else {
uni.showToast({ title: '暂无复读方案', icon: 'none' })
}
// isFudu.value = true
// fuduCatalogueId.value = currentCatalogue.value.id
// const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
// if (res.code === 0 && res.productList.length > 0) {
// goodsList.value = res.productList
// showGoodsSelector.value = true
// } else {
// uni.showToast({ title: '暂无复读方案', icon: 'none' })
// }
}
/**
@@ -443,15 +387,6 @@ const confirmPurchase = () => {
})
}
/**
* 跳转到VIP页面
*/
const goToVip = () => {
uni.navigateTo({
url: '/pages/vip/course'
})
}
/**
* 跳转到书籍详情
*/
@@ -698,10 +633,6 @@ onReachBottom(() => {
}
}
.course-content-wrapper {
background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
}
.learning-progress {
padding: 20rpx;
background-color: #fff;

18
pages/course/index.vue
View File

@@ -326,10 +326,6 @@ const getSociologyCateList = async () => {
* 终极分类点击处理
*/
const curseClickJump = (item: IMedicalTag) => {
// uni.showToast({
// title: '课程分类列表正在开发中，现在还不能跳转',
// icon: 'none'
// })
uni.navigateTo({
url: `/pages/course/list/category?id=${item.id}&title=${item.title}&pid=${item.pid}&subject=${selectedFirstLevel.value}`
})
@@ -385,15 +381,9 @@ const getNewsList = async () => {
* 新闻点击处理
*/
const newsClick = (item: INews) => {
if (item.type === 1 && item.url) {
uni.navigateTo({
url: `/pages/news/newsForwebview?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
} else {
uni.navigateTo({
url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
}
uni.navigateTo({
url: `/pages/news/details?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
}
// 精彩试听
@@ -846,7 +836,7 @@ $border-color: #eeeeee;
// 观看记录和试听样式
.learnBox {
background-color: #fff;
margin: 10px 5px 20px;
margin: 10px 5px;
border-radius: 20rpx;
padding: 10px;
box-shadow: 0px 0px 10px 0px rgba(167, 187, 228, 0.3);

BIN
static/nobg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

142
stores/course.ts
View File

@@ -1,142 +0,0 @@
// stores/course.ts
import { defineStore } from 'pinia'
import { courseApi } from '@/api/modules/course'
import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
interface CourseState {
currentCourse: ICourseDetail | null
catalogueList: ICatalogue[]
currentCatalogueIndex: number
chapterList: IChapter[]
userVip: IVipInfo | null
learningProgress: number
}
export const useCourseStore = defineStore('course', {
state: (): CourseState => ({
currentCourse: null,
catalogueList: [],
currentCatalogueIndex: 0,
chapterList: [],
userVip: null,
learningProgress: 0,
}),
getters: {
/**
* 获取当前选中的目录
*/
currentCatalogue: (state): ICatalogue | null => {
if (state.catalogueList.length === 0) return null
return state.catalogueList[state.currentCatalogueIndex] || null
},
/**
* 判断当前目录是否已购买
*/
isCurrentCataloguePurchased: (state): boolean => {
const catalogue = state.catalogueList[state.currentCatalogueIndex]
return catalogue ? catalogue.isBuy === 1 : false
},
/**
* 判断用户是否为VIP
*/
isVip: (state): boolean => {
return state.userVip !== null
},
},
actions: {
/**
* 获取课程详情
* @param courseId 课程ID
*/
async fetchCourseDetail(courseId: number) {
try {
const res = await courseApi.getCourseDetail(courseId)
if (res.code === 0 && res.data) {
this.currentCourse = res.data.course
this.catalogueList = res.data.catalogues || []
// 计算学习进度
if (this.catalogueList.length > 0) {
const totalProgress = this.catalogueList.reduce((sum, cat) => sum + cat.completion, 0)
this.learningProgress = Number((totalProgress / this.catalogueList.length).toFixed(2))
} else {
this.learningProgress = 0
}
}
return res
} catch (error) {
console.error('获取课程详情失败:', error)
throw error
}
},
/**
* 切换目录
* @param index 目录索引
*/
async switchCatalogue(index: number) {
if (index < 0 || index >= this.catalogueList.length) {
console.warn('目录索引超出范围')
return
}
this.currentCatalogueIndex = index
const catalogue = this.catalogueList[index]
// 获取该目录的章节列表
await this.fetchChapterList(catalogue.id)
},
/**
* 获取章节列表
* @param catalogueId 目录ID
*/
async fetchChapterList(catalogueId: number) {
try {
const res = await courseApi.getCatalogueChapterList(catalogueId)
if (res.code === 0) {
this.chapterList = res.chapterList || []
}
return res
} catch (error) {
console.error('获取章节列表失败:', error)
this.chapterList = []
throw error
}
},
/**
* 检查用户VIP权益
* @param courseId 课程ID
*/
async checkVipStatus(courseId: number) {
try {
const res = await courseApi.checkCourseVip(courseId)
if (res.code === 0) {
this.userVip = res.userVip || null
}
return res
} catch (error) {
console.error('检查VIP权益失败:', error)
this.userVip = null
throw error
}
},
/**
* 重置课程状态
*/
resetCourseState() {
this.currentCourse = null
this.catalogueList = []
this.currentCatalogueIndex = 0
this.chapterList = []
this.userVip = null
this.learningProgress = 0
},
},
})

92
style/tailwind.css
View File

@@ -8,7 +8,6 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-white: #fff;
--spacing: 0.25rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
@@ -212,18 +211,12 @@
max-width: 96rem;
}
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
.mb-2\! {
margin-bottom: calc(var(--spacing) * 2) !important;
}
.ml-1\! {
margin-left: calc(var(--spacing) * 1) !important;
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-2\.5\! {
margin-left: calc(var(--spacing) * 2.5) !important;
}
@@ -251,24 +244,6 @@
.table {
display: table;
}
.h-20 {
height: calc(var(--spacing) * 20);
}
.h-\[80px\] {
height: 80px;
}
.h-\[80rpx\] {
height: 80rpx;
}
.w-20 {
width: calc(var(--spacing) * 20);
}
.w-\[80px\] {
width: 80px;
}
.w-\[80rpx\] {
width: 80rpx;
}
.w-\[100px\] {
width: 100px;
}
@@ -278,9 +253,6 @@
.flex-shrink {
flex-shrink: 1;
}
.border-collapse {
border-collapse: collapse;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
@@ -290,34 +262,10 @@
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.bg-\[blue\] {
background-color: blue;
}
.bg-\[red\] {
background-color: red;
}
.bg-\[transparent\] {
background-color: transparent;
}
.bg-white {
background-color: var(--color-white);
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-0\! {
padding: calc(var(--spacing) * 0) !important;
}
@@ -327,12 +275,6 @@
.pt-10 {
padding-top: calc(var(--spacing) * 10);
}
.pt-\[40px\] {
padding-top: 40px;
}
.pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
.pb-0\! {
padding-bottom: calc(var(--spacing) * 0) !important;
}
@@ -354,32 +296,13 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-\[26rpx\] {
--tw-font-weight: 26rpx;
font-weight: 26rpx;
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.text-\[\#000\] {
color: #000;
}
.text-\[\#7dc1f0\] {
color: #7dc1f0;
}
.text-\[\#fff\] {
color: #fff;
}
.text-\[\'10px\'\] {
color: '10px';
}
.text-\[\'12px\'\] {
color: '12px';
}
.text-\[26rpx\] {
color: 26rpx;
}
.text-\[cadetblue\] {
color: cadetblue;
}
@@ -399,17 +322,6 @@
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.underline {
text-decoration-line: underline;
}
.shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.1\)\] {
--tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.05\)\] {
--tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(0,0,0,0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);