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-11-14 15:13:21 +08:00
parent e7e0597026
commit 21b03635a2
25 changed files with 4958 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
api/modules/course.ts
View File

@@ -1,12 +1,19 @@
// api/modules/course.ts
import { createRequestClient } from '../request'
import { SERVICE_MAP } from '../config'
import type { IApiResponse } from '../types'
import type {
ICourseMedicalTreeResponse,
IUserLateCourseListResponse,
IMarketCourseListResponse
IMarketCourseListResponse,
ICourseDetailResponse,
IChapterListResponse,
IChapterDetailResponse,
IProductListResponse,
IVipInfo
} from '@/types/course'
import type { ISearchRequest, ISearchResponse } from '@/types/search'
import type { ICommentListResponse, IAddCommentResponse, IComment } from '@/types/comment'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
@@ -64,5 +71,175 @@ export const courseApi = {
method: 'POST',
data
})
},
/**
* 获取课程详情
* @param id 课程ID
*/
getCourseDetail(id: number) {
return client.request<ICourseDetailResponse>({
url: 'sociology/course/getCourseDetail',
method: 'POST',
data: { id }
})
},
/**
* 获取目录章节列表
* @param id 目录ID
*/
getCatalogueChapterList(id: number) {
return client.request<IChapterListResponse>({
url: 'sociology/course/getCourseCatalogueChapterList',
method: 'POST',
data: { id }
})
},
/**
* 获取章节详情
* @param id 章节ID
*/
getChapterDetail(id: number) {
return client.request<IChapterDetailResponse>({
url: 'sociology/course/getCourseCatalogueChapterDetail',
method: 'POST',
data: { id, load: false }
})
},
/**
* 开始学习免费课程
* @param catalogueId 目录ID
*/
startStudyForMF(catalogueId: number) {
return client.request<IApiResponse>({
url: 'sociology/course/startStudyForMF',
method: 'POST',
data: { catalogueId }
})
},
/**
* 获取课程商品列表
* @param id 目录ID
*/
getProductListForCourse(id: number) {
return client.request<IProductListResponse>({
url: 'sociology/product/getProductListForCourse',
method: 'POST',
data: { id }
})
},
/**
* 检查目录是否支持复读
* @param courseCatalogueId 目录ID
*/
checkRenewPayment(courseCatalogueId: number) {
return client.request<IApiResponse<{ canRelearn: boolean }>>({
url: 'common/courseRelearn/courseCatalogueCanRelearn',
method: 'POST',
data: { courseCatalogueId }
})
},
/**
* 获取复读商品列表
* @param catalogueId 目录ID
*/
getRenewProductList(catalogueId: number) {
return client.request<IProductListResponse>({
url: 'common/courseRelearn/relearnShopProductList',
method: 'POST',
data: { catalogueId }
})
},
/**
* 获取课程留言列表
* @param courseId 课程ID
* @param page 页码
* @param limit 每页数量
* @param userId 用户ID
*/
getCourseComments(courseId: number, page: number, limit: number, userId: number) {
return client.request<ICommentListResponse>({
url: 'common/courseGuestbook/getCourseGuestbookList',
method: 'POST',
data: { courseId, page, limit, userId, chapterId: '' }
})
},
/**
* 添加课程留言
* @param data 留言数据
*/
addCourseComment(data: {
type: number
courseId: number
chapterId: string
pid: number
userId: number
forUserId: number
content: string
images: string
}) {
return client.request<IAddCommentResponse>({
url: 'common/courseGuestbook/addCourseGuestbook',
method: 'POST',
data
})
},
/**
* 点赞留言
* @param userId 用户ID
* @param guestbookId 留言ID
*/
likeComment(userId: number, guestbookId: number) {
return client.request<IApiResponse>({
url: 'common/courseGuestbook/addCourseGuestbookSupport',
method: 'POST',
data: { userId, guestbookId }
})
},
/**
* 取消点赞
* @param userId 用户ID
* @param guestbookId 留言ID
*/
unlikeComment(userId: number, guestbookId: number) {
return client.request<IApiResponse>({
url: 'common/courseGuestbook/cancelCourseGuestbookSupport',
method: 'POST',
data: { userId, guestbookId }
})
},
/**
* 检查用户VIP权益
* @param courseId 课程ID
*/
checkCourseVip(courseId: number) {
return client.request<IApiResponse<{ userVip: IVipInfo | null }>>({
url: 'common/userVip/ownCourseCatalogueByVip',
method: 'POST',
data: { courseId }
})
},
/**
* 获取课程需要的VIP类型
* @param courseId 课程ID
*/
getCourseVipModule(courseId: number) {
return client.request<IApiResponse<{ list: string[] }>>({
url: 'common/userVip/getCourseVipModule',
method: 'POST',
data: { courseId }
})
}
}

12
components/bkhumor-emojiplus/index.vue
View File

@@ -1,7 +1,13 @@
<template>
<view
class="emotion-box"
style="display: flex; flex-direction: row; flex-wrap: wrap; height: 275px; overflow-y: scroll;"
:style="{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
height: props.height + 'px',
overflowY: 'scroll',
}"
>
<block v-for="(list, index) in emojilist" :key="index">
<view style="width: 10%; margin: 10px 3.3%;">
@@ -24,6 +30,10 @@ const props = defineProps({
type: Number,
default: 320,
},
height: {
type: Number,
default: 275,
}
})
const emit = defineEmits(['emotion'])

491
components/comment/CommentEditor.vue Normal file
View File

@@ -0,0 +1,491 @@
<template>
<wd-popup
v-model="visible"
position="bottom"
lock-scroll
:close-on-click-modal="false"
@close="handleClose"
>
<view class="comment-editor">
<view class="editor-header">
<text class="title">{{ parentComment ? '回复留言' : '发布留言' }}</text>
<wd-icon name="close" @click="handleClose" />
</view>
<!-- 回复对象 -->
<view v-if="parentComment" class="reply-to">
<text>回复@：{{ parentComment.user.name }} 的留言</text>
</view>
<!-- 富文本编辑器 -->
<view class="editor-container">
<view class="editor-wrapper">
<editor
id="editor"
class="ql-container"
placeholder="~ 和谐社会 友善发言 ~"
show-img-size
show-img-toolbar
show-img-resize
:read-only="readOnly"
@statuschange="onStatusChange"
@ready="onEditorReady"
/>
</view>
</view>
<!-- 工具栏 -->
<view class="tools-panel">
<view class="tool-item" @click="showEmojiPicker">
<image src="/static/biaoqing.png" class="tool-icon" mode="aspectFit" />
<text class="tool-text">表情</text>
</view>
<!-- <view class="tool-item" @click="chooseImage">
<wd-icon name="picture" size="18px" color="#a9a9a9" />
<text class="tool-text">图片</text>
</view> -->
</view>
<!-- 已上传的图片 -->
<view v-if="uploadedImages.length > 0" class="uploaded-images">
<view class="image-tip">
<text>最多可上传3张图片</text>
</view>
<view class="image-list">
<view
v-for="(img, index) in uploadedImages"
:key="index"
class="image-item"
>
<image :src="img.url" mode="aspectFill" class="preview-image" />
<view class="delete-btn" @click="deleteImage(index)">
<wd-icon name="close" size="16px" color="#fff" />
</view>
</view>
</view>
</view>
<!-- 表情选择器 -->
<view v-if="showEmoji" class="emoji-picker">
<bkhumor-emojiplus
@emotion="handleEmojiSelect"
:height="230"
:windowWidth="windowWidth"
/>
</view>
<!-- 操作按钮 -->
<view class="editor-actions">
<wd-button type="primary" block :loading="submitting" @click="handleSubmit">发 布</wd-button>
<!-- <wd-button type="info" block plain custom-style="margin-top: 20rpx" @click="handleClose">取 消</wd-button> -->
</view>
</view>
</wd-popup>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { IComment } from '@/types/comment'
import BkhumorEmojiplus from '@/components/bkhumor-emojiplus/index.vue'
interface Props {
show: boolean
parentComment?: IComment
type: 'course' | 'book'
}
const props = defineProps<Props>()
const emit = defineEmits<{
submit: [content: string, images: string[]]
close: []
}>()
const visible = computed({
get: () => props.show,
set: (val) => {
if (!val) emit('close')
}
})
const editorCtx = ref<any>(null)
const readOnly = ref(false)
const showEdit = ref(false)
const showTools = ref(false)
const showEmoji = ref(false)
const uploadedImages = ref<Array<{ url: string }>>([])
const submitting = ref(false)
const windowWidth = ref(0)
// 获取窗口宽度
windowWidth.value = uni.getSystemInfoSync().windowWidth
/**
* 编辑器准备完成
*/
const onEditorReady = () => {
uni.createSelectorQuery()
.select('#editor')
.context((res: any) => {
editorCtx.value = res.context
editorCtx.value.clear()
})
.exec()
}
/**
* 编辑器状态变化
*/
const onStatusChange = (e: any) => {
// 可以在这里处理编辑器状态变化
}
/**
* 切换工具栏
*/
const toggleTools = () => {
showTools.value = true
showEdit.value = true
uni.hideKeyboard()
}
/**
* 隐藏工具栏
*/
const hideTools = () => {
showTools.value = false
showEdit.value = false
showEmoji.value = false
}
/**
* 显示表情选择器
*/
const showEmojiPicker = () => {
showEmoji.value = !showEmoji.value
showTools.value = false
}
/**
* 选择表情
*/
const handleEmojiSelect = (emoji: any) => {
if (editorCtx.value) {
editorCtx.value.insertImage({
src: emoji.emotion,
alt: '表情',
success: () => {
console.log('插入表情成功')
}
})
}
}
/**
* 选择图片
*/
const chooseImage = () => {
if (uploadedImages.value.length >= 3) {
uni.showToast({
title: '最多只能上传3张图片',
icon: 'none'
})
return
}
uni.chooseImage({
count: 3 - uploadedImages.value.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
uploadImages(res.tempFilePaths)
}
})
}
/**
* 上传图片
*/
const uploadImages = (filePaths: string[]) => {
filePaths.forEach((filePath) => {
uni.uploadFile({
url: uni.getStorageSync('baseURL') + 'oss/fileoss',
filePath,
name: 'file',
success: (res) => {
try {
const data = JSON.parse(res.data)
if (data.url) {
uploadedImages.value.push({ url: data.url })
}
} catch (error) {
console.error('解析上传结果失败:', error)
uni.showToast({
title: '上传失败',
icon: 'none'
})
}
},
fail: () => {
uni.showToast({
title: '上传失败',
icon: 'none'
})
}
})
})
}
/**
* 删除图片
*/
const deleteImage = (index: number) => {
uploadedImages.value.splice(index, 1)
}
/**
* 获取编辑器内容
*/
const getEditorContent = (): Promise<string> => {
return new Promise((resolve, reject) => {
if (!editorCtx.value) {
reject('编辑器未初始化')
return
}
editorCtx.value.getContents({
success: (res: any) => {
resolve(res.html || '')
},
fail: (error: any) => {
reject(error)
}
})
})
}
/**
* 提交评论
*/
const handleSubmit = async () => {
try {
submitting.value = true
// 获取编辑器内容
const content = await getEditorContent()
// 去除HTML标签检查是否为空
const textContent = content.replace(/<(?!img\s*\/?)[^>]*>/g, '').trim()
if (!textContent && uploadedImages.value.length === 0) {
uni.showToast({
title: '请输入内容',
icon: 'none'
})
return
}
// 获取图片URL列表
const images = uploadedImages.value.map(img => img.url)
// 提交
emit('submit', content, images)
// 清空编辑器和图片
if (editorCtx.value) {
editorCtx.value.clear()
}
uploadedImages.value = []
showTools.value = false
showEmoji.value = false
showEdit.value = false
} catch (error) {
console.error('提交评论失败:', error)
uni.showToast({
title: '提交失败',
icon: 'none'
})
} finally {
submitting.value = false
}
}
/**
* 关闭编辑器
*/
const handleClose = () => {
// 清空状态
if (editorCtx.value) {
editorCtx.value.clear()
}
uploadedImages.value = []
showTools.value = false
showEmoji.value = false
showEdit.value = false
emit('close')
}
// 监听显示状态，重置编辑器
watch(() => props.show, (newVal) => {
if (newVal) {
// 延迟初始化编辑器
setTimeout(() => {
onEditorReady()
}, 300)
}
})
</script>
<style lang="scss" scoped>
.comment-editor {
padding: 30rpx;
background-color: #fff;
max-height: 80vh;
overflow-y: auto;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
}
.reply-to {
padding: 20rpx;
margin-bottom: 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
text {
font-size: 26rpx;
color: #666;
}
}
.editor-container {
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
.editor-wrapper {
flex: 1;
.ql-container {
min-height: 100rpx;
max-height: 400rpx;
height: auto;
padding: 20rpx;
border: 1px solid #e5e5e5;
border-radius: 8rpx;
font-size: 28rpx;
line-height: 1.2;
box-sizing: border-box;
:deep(.ql-editor) img {
width: 20px;
}
}
}
.editor-tools {
height: 100rpx;
width: 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
border: 1px solid #e5e5e5;
border-radius: 8rpx;
cursor: pointer;
}
}
.tools-panel {
display: flex;
gap: 10px;
margin-bottom: 20rpx;
border-radius: 8rpx;
.tool-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background-color: #f7f8f9;
width: 120rpx;
height: 120rpx;
border-radius: 10px;
.tool-icon {
width: 40rpx;
height: 40rpx;
}
.tool-text {
font-size: 24rpx;
color: #666;
}
}
}
.uploaded-images {
margin-bottom: 20rpx;
.image-tip {
margin-bottom: 15rpx;
text {
font-size: 24rpx;
color: #999;
}
}
.image-list {
display: flex;
flex-wrap: wrap;
gap: 15rpx;
.image-item {
position: relative;
width: 200rpx;
height: 200rpx;
.preview-image {
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.delete-btn {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 40rpx;
height: 40rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.emoji-picker {
margin-bottom: 20rpx;
}
.editor-actions {
margin-top: 30rpx;
}
</style>

406
components/comment/CommentList.vue Normal file
View File

@@ -0,0 +1,406 @@
<template>
<view class="comment-list">
<!-- 评论列表 -->
<view v-for="comment in comments" :key="comment.id" class="comment-item">
<!-- 一级评论 -->
<view class="comment-main">
<view class="user-info">
<image
:src="comment.user.avatar || defaultAvatar"
class="avatar"
mode="aspectFill"
/>
<text class="username">{{ comment.user.name }}</text>
</view>
<view class="comment-content">
<view class="content-html" v-html="comment.content"></view>
<!-- 图片列表 -->
<view v-if="comment.imgList && comment.imgList.length > 0" class="image-list">
<image
v-for="(img, imgIndex) in comment.imgList"
:key="imgIndex"
:src="img"
class="comment-image"
mode="aspectFill"
@click="previewImage(img, comment.imgList)"
/>
</view>
</view>
<view class="comment-actions">
<text class="time">{{ comment.createTime }}</text>
<view class="action-btns">
<wd-button
size="small"
custom-class="action-btn"
:type="comment.support ? 'primary' : 'default'"
@click="handleLike(comment.id)"
>
<wd-icon name="thumb-up" />
<text class="btn-text">{{ comment.supportCount || 0 }}</text>
</wd-button>
<wd-button
size="small"
custom-class="action-btn"
@click="handleReply(comment)"
>
<wd-icon name="chat" />
<text class="btn-text">回复</text>
</wd-button>
</view>
</view>
</view>
<!-- 子评论列表 -->
<view v-if="comment.Bchildren && comment.Bchildren.length > 0" class="sub-comments">
<view v-for="subComment in comment.Bchildren" :key="subComment.id" class="sub-comment-item">
<view class="sub-user-info">
<image
:src="subComment.user.avatar || defaultAvatar"
class="sub-avatar"
mode="aspectFill"
/>
<text class="sub-username">{{ subComment.user.name }}</text>
</view>
<view class="sub-comment-content">
<view class="content-html" v-html="subComment.content"></view>
<!-- 子评论图片 -->
<view v-if="subComment.imgList && subComment.imgList.length > 0" class="image-list">
<image
v-for="(img, imgIndex) in subComment.imgList"
:key="imgIndex"
:src="img"
class="comment-image"
mode="aspectFill"
@click="previewImage(img, subComment.imgList)"
/>
</view>
</view>
<view class="sub-comment-actions">
<text class="time">{{ subComment.createTime }}</text>
<view class="action-btns">
<wd-button
size="small"
custom-class="action-btn"
:type="subComment.support ? 'primary' : 'default'"
@click="handleLike(subComment.id)"
>
<wd-icon name="thumb-up" />
<text class="btn-text">{{ subComment.supportCount || 0 }}</text>
</wd-button>
<wd-button
size="small"
custom-class="action-btn"
@click="handleReply(subComment)"
>
<wd-icon name="chat" />
<text class="btn-text">回复</text>
</wd-button>
</view>
</view>
</view>
<!-- 查看更多回复 -->
<view
v-if="comment.children && comment.children.length > comment.Bchildren.length"
class="load-more-replies"
@click="loadMoreReplies(comment)"
>
<text>查看更多回复 ({{ comment.children.length - comment.Bchildren.length }})</text>
</view>
</view>
</view>
<!-- 加载更多 -->
<view v-if="hasMore" class="load-more-btn">
<wd-button
@click="handleLoadMore"
:loading="loading"
block
>
加载更多
</wd-button>
</view>
<!-- 已加载全部 -->
<view v-else-if="comments.length > 0" class="no-more">
<wd-divider>已加载全部</wd-divider>
</view>
<!-- 暂无评论 -->
<view v-else-if="!loading" class="no-comments">
<text>暂无留言数据</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { IComment } from '@/types/comment'
interface Props {
comments: IComment[]
loading: boolean
hasMore: boolean
type: 'course' | 'book'
}
const props = defineProps<Props>()
const emit = defineEmits<{
like: [commentId: number]
reply: [comment: IComment]
loadMore: []
}>()
const defaultAvatar = '/static/icon/default-avatar.png'
/**
* 预览图片
*/
const previewImage = (current: string, urls: string[]) => {
uni.previewImage({
current,
urls,
longPressActions: {
itemList: ['很抱歉，暂不支持保存图片到本地'],
},
})
}
/**
* 点赞
*/
const handleLike = (commentId: number) => {
emit('like', commentId)
}
/**
* 回复
*/
const handleReply = (comment: IComment) => {
emit('reply', comment)
}
/**
* 加载更多
*/
const handleLoadMore = () => {
emit('loadMore')
}
/**
* 加载更多回复
*/
const loadMoreReplies = (comment: IComment) => {
// 显示所有子评论
comment.Bchildren = [...comment.children]
}
</script>
<style lang="scss" scoped>
.comment-list {
padding: 20rpx;
background-color: #fff;
}
.comment-item {
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
}
.comment-main {
.user-info {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.username {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
.comment-content {
margin-left: 80rpx;
margin-bottom: 20rpx;
.content-html {
font-size: 28rpx;
line-height: 1.6;
color: #666;
word-break: break-all;
}
.image-list {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
gap: 10rpx;
.comment-image {
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
}
}
}
.comment-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 80rpx;
.time {
font-size: 24rpx;
color: #999;
}
.action-btns {
display: flex;
gap: 20rpx;
.action-btn {
display: flex;
align-items: center;
gap: 8rpx;
.btn-text {
font-size: 24rpx;
}
}
}
}
}
.sub-comments {
margin-left: 80rpx;
margin-top: 20rpx;
padding: 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
.sub-comment-item {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.sub-user-info {
display: flex;
align-items: center;
margin-bottom: 15rpx;
.sub-avatar {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.sub-username {
font-size: 24rpx;
color: #666;
}
}
.sub-comment-content {
margin-left: 55rpx;
margin-bottom: 15rpx;
.content-html {
font-size: 26rpx;
line-height: 1.5;
color: #666;
word-break: break-all;
}
.image-list {
display: flex;
flex-wrap: wrap;
margin-top: 15rpx;
gap: 10rpx;
.comment-image {
width: 150rpx;
height: 150rpx;
border-radius: 8rpx;
}
}
}
.sub-comment-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 55rpx;
.time {
font-size: 22rpx;
color: #999;
}
.action-btns {
display: flex;
gap: 15rpx;
.action-btn {
display: flex;
align-items: center;
gap: 6rpx;
.btn-text {
font-size: 22rpx;
}
}
}
}
}
.load-more-replies {
text-align: center;
padding: 15rpx 0;
margin-top: 15rpx;
text {
font-size: 24rpx;
color: #2979ff;
}
}
}
.load-more-btn {
margin-top: 30rpx;
}
.no-more {
margin-top: 30rpx;
}
.no-comments {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 28rpx;
}
</style>

96
components/course/CatalogueList.vue Normal file
View File

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

308
components/course/ChapterList.vue Normal file
View File

@@ -0,0 +1,308 @@
<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
}
const props = defineProps<Props>()
const emit = defineEmits<{
click: [chapter: IChapter]
}>()
/**
* 判断目录是否已购买
*/
const isPurchased = computed(() => {
return props.catalogue.isBuy === 1
})
// 购买
const handlePurchase = () => {
emit('purchase', props.catalogue)
}
// 去开通vip
const goToVip = () => {
emit('toVip', 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 {
position: absolute;
left: 0;
top: 0;
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>

237
components/course/GoodsSelector.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<wd-popup
v-model="visible"
position="bottom"
:close-on-click-modal="true"
@close="handleClose"
>
<view class="goods-selector">
<view class="selector-header">
<text class="title">{{ isFudu ? '选择复读方案' : '选择购买方案' }}</text>
<wd-icon name="close" @click="handleClose" />
</view>
<!-- 商品列表 -->
<view class="goods-list">
<view
v-for="(item, index) in goods"
:key="item.productId"
:class="['goods-item', selectedIndex === index ? 'selected' : '']"
@click="selectGoods(index)"
>
<view class="goods-info">
<text class="goods-name">{{ item.productName }}</text>
<!-- VIP优惠价 -->
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
<text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
<text class="vip-label">VIP到手价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 活动价 -->
<view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
<text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
<text class="activity-label">活动价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 普通价格 -->
<view v-else class="price-info">
<text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
</view>
</view>
<!-- 选中标记 -->
<view v-if="selectedIndex === index" class="selected-mark">
<wd-icon name="check" color="#fff" size="20px" />
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="selector-actions">
<wd-button
type="primary"
block
@click="handleConfirm"
:disabled="selectedIndex === -1"
>
立即购买
</wd-button>
</view>
</view>
</wd-popup>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { IGoods } from '@/types/course'
interface Props {
show: boolean
goods: IGoods[]
isFudu?: boolean // 是否为复读
}
const props = defineProps<Props>()
const emit = defineEmits<{
select: [goods: IGoods]
confirm: [goods: IGoods]
close: []
}>()
const visible = computed({
get: () => props.show,
set: (val) => {
if (!val) emit('close')
}
})
const selectedIndex = ref(-1)
/**
* 选择商品
*/
const selectGoods = (index: number) => {
selectedIndex.value = index
emit('select', props.goods[index])
}
/**
* 确认购买
*/
const handleConfirm = () => {
if (selectedIndex.value === -1) {
uni.showToast({
title: '请选择购买方案',
icon: 'none'
})
return
}
emit('confirm', props.goods[selectedIndex.value])
}
/**
* 关闭选择器
*/
const handleClose = () => {
emit('close')
}
// 监听显示状态，重置选择
watch(() => props.show, (newVal) => {
if (newVal && props.goods.length > 0) {
// 默认选中第一个
selectedIndex.value = 0
emit('select', props.goods[0])
} else {
selectedIndex.value = -1
}
})
</script>
<style lang="scss" scoped>
.goods-selector {
padding: 30rpx;
background-color: #fff;
max-height: 80vh;
overflow-y: auto;
}
.selector-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
}
.goods-list {
margin-bottom: 30rpx;
.goods-item {
position: relative;
padding: 30rpx;
margin-bottom: 20rpx;
border: 2rpx solid #e5e5e5;
border-radius: 12rpx;
transition: all 0.3s;
&.selected {
border-color: #258feb;
background-color: #f0f8ff;
}
.goods-info {
.goods-name {
display: block;
font-size: 30rpx;
color: #333;
margin-bottom: 15rpx;
line-height: 1.4;
}
.price-info {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price {
font-size: 36rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.vip-label {
font-size: 24rpx;
color: #fa2d12;
}
.activity-label {
font-size: 24rpx;
color: #613804;
}
.original-price {
font-size: 24rpx;
color: #8a8a8a;
text-decoration: line-through;
}
}
}
.selected-mark {
position: absolute;
top: 0;
right: 0;
width: 50rpx;
height: 50rpx;
background-color: #258feb;
border-radius: 0 12rpx 0 12rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.selector-actions {
padding-top: 20rpx;
border-top: 1px solid #f0f0f0;
}
</style>

242
components/course/VideoPlayer.vue Normal file
View File

@@ -0,0 +1,242 @@
<template>
<view class="video-player">
<!-- 视频播放器 -->
<video
v-if="currentVideo"
:id="videoId"
:src="currentVideo.url"
:title="currentVideo.title"
:controls="true"
:show-fullscreen-btn="true"
:show-play-btn="true"
:enable-progress-gesture="true"
:object-fit="objectFit"
class="video-element"
@fullscreenchange="handleFullscreenChange"
@ended="handleVideoEnd"
@error="handleVideoError"
/>
<!-- 自动播放下一个提示 -->
<view v-if="showCountDown && hasNext" class="countdown-overlay">
<view class="countdown-content">
<text class="countdown-text">{{ countDownSeconds }}秒后自动播放下一个</text>
<wd-button size="small" @click="cancelAutoPlay">
取消自动播放
</wd-button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import type { IVideo } from '@/types/course'
interface Props {
videoList: IVideo[]
currentIndex: number
noRecored?: boolean // 是否为试听（不记录进度）
}
const props = defineProps<Props>()
const emit = defineEmits<{
end: []
fullscreen: [isFullScreen: boolean]
change: [index: number]
}>()
const videoId = 'course-video-player'
const videoContext = ref<any>(null)
const objectFit = ref<'contain' | 'fill' | 'cover'>('contain')
const showCountDown = ref(false)
const countDownSeconds = ref(10)
const countDownTimer = ref<any>(null)
/**
* 当前视频
*/
const currentVideo = computed(() => {
if (props.videoList.length === 0) return null
return props.videoList[props.currentIndex] || null
})
/**
* 是否有下一个视频
*/
const hasNext = computed(() => {
return props.currentIndex < props.videoList.length - 1
})
/**
* 初始化视频上下文
*/
const initVideoContext = () => {
videoContext.value = uni.createVideoContext(videoId)
}
/**
* 视频播放结束
*/
const handleVideoEnd = () => {
emit('end')
// 如果有下一个视频，开始倒计时
if (hasNext.value) {
startCountDown()
}
}
/**
* 开始倒计时
*/
const startCountDown = () => {
showCountDown.value = true
countDownSeconds.value = 10
countDownTimer.value = setInterval(() => {
countDownSeconds.value--
if (countDownSeconds.value <= 0) {
stopCountDown()
playNext()
}
}, 1000)
}
/**
* 停止倒计时
*/
const stopCountDown = () => {
if (countDownTimer.value) {
clearInterval(countDownTimer.value)
countDownTimer.value = null
}
showCountDown.value = false
}
/**
* 取消自动播放
*/
const cancelAutoPlay = () => {
stopCountDown()
}
/**
* 播放下一个视频
*/
const playNext = () => {
if (hasNext.value) {
emit('change', props.currentIndex + 1)
}
}
/**
* 全屏变化
*/
const handleFullscreenChange = (e: any) => {
const isFullScreen = e.detail.fullScreen
emit('fullscreen', isFullScreen)
// 全屏时使用 cover 模式
objectFit.value = isFullScreen ? 'cover' : 'contain'
}
/**
* 视频错误
*/
const handleVideoError = (e: any) => {
console.error('视频播放错误:', e)
uni.showToast({
title: '视频加载失败',
icon: 'none'
})
}
/**
* 播放视频
*/
const play = () => {
if (videoContext.value) {
videoContext.value.play()
}
}
/**
* 暂停视频
*/
const pause = () => {
if (videoContext.value) {
videoContext.value.pause()
}
}
/**
* 停止视频
*/
const stop = () => {
if (videoContext.value) {
videoContext.value.stop()
}
}
// 监听视频变化，重新播放
watch(() => props.currentIndex, () => {
stopCountDown()
// 延迟播放，确保视频元素已更新
setTimeout(() => {
play()
}, 300)
})
onMounted(() => {
initVideoContext()
})
onUnmounted(() => {
stopCountDown()
stop()
})
// 暴露方法给父组件
defineExpose({
play,
pause,
stop,
cancelAutoPlay: stopCountDown
})
</script>
<style lang="scss" scoped>
.video-player {
position: relative;
width: 100%;
background-color: #000;
.video-element {
width: 100%;
height: 400rpx;
}
.countdown-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
padding: 20rpx;
.countdown-content {
display: flex;
justify-content: space-between;
align-items: center;
.countdown-text {
color: #fff;
font-size: 28rpx;
}
}
}
}
</style>

191
hooks/useComment.ts Normal file
View File

@@ -0,0 +1,191 @@
// hooks/useComment.ts
/**
* 评论相关的可复用逻辑
*/
import { ref } from 'vue'
import { courseApi } from '@/api/modules/course'
import { bookApi } from '@/api/modules/book'
import type { IComment } from '@/types/comment'
export function useComment(type: 'course' | 'book') {
const commentList = ref<IComment[]>([])
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(0)
/**
* 加载评论列表
*/
const loadComments = async (relationId: number, userId: number, limit: number = 15) => {
if (loading.value) return
try {
loading.value = true
currentPage.value++
let res: any
if (type === 'course') {
res = await courseApi.getCourseComments(relationId, currentPage.value, limit, userId)
} else {
res = await bookApi.getBookComments(relationId, currentPage.value, limit)
}
if (res.code === 0 && res.page) {
const newComments = res.page.records.map((comment: IComment) => {
// 处理图片
if (comment.images) {
comment.imgList = comment.images.split(',')
} else {
comment.imgList = []
}
// 处理子评论
if (comment.children && comment.children.length > 0) {
comment.Bchildren = comment.children.slice(0, 5)
} else {
comment.Bchildren = []
}
return comment
})
commentList.value = [...commentList.value, ...newComments]
hasMore.value = res.page.pages > currentPage.value
}
} catch (error) {
console.error('加载评论失败:', error)
} finally {
loading.value = false
}
}
/**
* 添加评论
*/
const addComment = async (
relationId: number,
userId: number,
content: string,
images: string[],
parentComment?: IComment
) => {
try {
let res: any
if (type === 'course') {
res = await courseApi.addCourseComment({
type: 0,
courseId: relationId,
chapterId: '',
pid: parentComment?.id || 0,
userId,
forUserId: parentComment?.user.id || userId,
content,
images: images.join(',')
})
} else {
res = await bookApi.insertComment(relationId, content, parentComment?.id || 0)
}
if (res.code === 0) {
const newComment = type === 'course' ? res.courseGuestbook : res.bookComment
if (newComment) {
newComment.imgList = newComment.images ? newComment.images.split(',') : []
newComment.children = []
newComment.Bchildren = []
if (parentComment) {
// 回复评论
const parentIndex = commentList.value.findIndex(c => c.id === parentComment.id)
if (parentIndex !== -1) {
commentList.value[parentIndex].children.unshift(newComment)
commentList.value[parentIndex].Bchildren.unshift(newComment)
}
} else {
// 一级评论
commentList.value.unshift(newComment)
}
}
uni.showToast({ title: '发布成功', icon: 'success' })
return true
}
return false
} catch (error) {
console.error('添加评论失败:', error)
uni.showToast({ title: '发布失败', icon: 'none' })
return false
}
}
/**
* 点赞/取消点赞
*/
const toggleLike = async (commentId: number, userId: number) => {
try {
// 查找评论
let targetComment: IComment | null = null
for (const comment of commentList.value) {
if (comment.id === commentId) {
targetComment = comment
break
}
for (const child of comment.children) {
if (child.id === commentId) {
targetComment = child
break
}
}
if (targetComment) break
}
if (!targetComment) return
// 调用API
if (type === 'course') {
if (targetComment.support) {
await courseApi.unlikeComment(userId, commentId)
targetComment.support = false
targetComment.supportCount--
} else {
await courseApi.likeComment(userId, commentId)
targetComment.support = true
targetComment.supportCount++
}
} else {
if (targetComment.support) {
await bookApi.unlikeComment(commentId)
targetComment.support = false
targetComment.supportCount--
} else {
await bookApi.likeComment(commentId)
targetComment.support = true
targetComment.supportCount++
}
}
} catch (error) {
console.error('点赞失败:', error)
}
}
/**
* 重置评论列表
*/
const resetComments = () => {
commentList.value = []
currentPage.value = 0
hasMore.value = true
}
return {
commentList,
loading,
hasMore,
loadComments,
addComment,
toggleLike,
resetComments
}
}

98
hooks/useCourse.ts Normal file
View File

@@ -0,0 +1,98 @@
// hooks/useCourse.ts
/**
* 课程相关的可复用逻辑
*/
import { ref } from 'vue'
import { courseApi } from '@/api/modules/course'
import type { ICourseDetail, ICatalogue, IChapter, IVipInfo } from '@/types/course'
export function useCourse() {
const loading = ref(false)
const courseDetail = ref<ICourseDetail | null>(null)
const catalogueList = ref<ICatalogue[]>([])
const chapterList = ref<IChapter[]>([])
const userVip = ref<IVipInfo | null>(null)
/**
* 获取课程详情
*/
const fetchCourseDetail = async (courseId: number) => {
try {
loading.value = true
const res = await courseApi.getCourseDetail(courseId)
if (res.code === 0 && res.data) {
courseDetail.value = res.data.course
catalogueList.value = res.data.catalogues || []
return res.data
}
} catch (error) {
console.error('获取课程详情失败:', error)
throw error
} finally {
loading.value = false
}
}
/**
* 获取章节列表
*/
const fetchChapterList = async (catalogueId: number) => {
try {
const res = await courseApi.getCatalogueChapterList(catalogueId)
if (res.code === 0) {
chapterList.value = res.chapterList || []
return res.chapterList
}
} catch (error) {
console.error('获取章节列表失败:', error)
chapterList.value = []
throw error
}
}
/**
* 检查VIP状态
*/
const checkVipStatus = async (courseId: number) => {
try {
const res = await courseApi.checkCourseVip(courseId)
if (res.code === 0) {
userVip.value = res.userVip || null
return res.userVip
}
} catch (error) {
console.error('检查VIP状态失败:', error)
userVip.value = null
throw error
}
}
/**
* 领取免费课程
*/
const getFreeCourse = async (catalogueId: number) => {
try {
const res = await courseApi.startStudyForMF(catalogueId)
if (res.code === 0) {
uni.showToast({ title: '领取成功', icon: 'success' })
return true
}
return false
} catch (error) {
console.error('领取免费课程失败:', error)
throw error
}
}
return {
loading,
courseDetail,
catalogueList,
chapterList,
userVip,
fetchCourseDetail,
fetchChapterList,
checkVipStatus,
getFreeCourse
}
}

87
locale/en.json
View File

@@ -322,5 +322,92 @@
"required": "Required",
"elective": "Elective",
"each": "Each"
},
"courseDetails": {
"detail": "Course Details",
"chapter": "Chapter Content",
"catalogue": "Catalogue",
"chapterList": "Chapters",
"trial": "Trial",
"learned": "Learned",
"notLearned": "Not Learned",
"locked": "Locked",
"purchase": "Buy Now",
"renew": "Renew",
"relearn": "Relearn",
"free": "Get Free",
"vipOnly": "VIP Only",
"openVip": "Get VIP",
"progress": "Learning Progress",
"relatedBooks": "Related Books",
"comments": "Comments",
"publishComment": "Post Comment",
"reply": "Reply",
"like": "Like",
"chapterIntro": "Chapter Introduction",
"thinkingQuestion": "Thinking Question",
"noQuestion": "No question available",
"videoTeaching": "Video Teaching",
"autoPlayNext": "s to auto play next",
"cancelAutoPlay": "Cancel Auto Play",
"vipTip": "Get VIP to enjoy more exclusive benefits",
"vipExpireTime": "VIP expires on",
"courseExpireTime": "Course expires on",
"notStarted": "Not started yet",
"unpurchasedTip": "You haven't purchased this catalogue or it has expired. Purchase or get VIP to access",
"pleaseGetCourse": "Please get the course first",
"pleasePurchase": "Please purchase first",
"getSuccess": "Get successfully",
"noChapters": "No chapters available",
"totalChapters": "Total {count} catalogues",
"expand": "Expand",
"collapse": "Collapse",
"selectPlan": "Select Plan",
"selectRenewPlan": "Select Renew Plan",
"noPurchaseOption": "No purchase option available",
"noRenewOption": "No renew option available",
"purchaseAgreement": "Notice",
"agreementContent": "Dear user, this software only allows one device to log in with one username and password. Using the same username on multiple devices is a violation. A warning will be issued for the first violation, and your account will be banned for repeated violations. We apologize for any inconvenience.",
"agree": "Agree",
"disagree": "Disagree",
"commentPlaceholder": "~ Be friendly and respectful ~",
"commentSubmit": "Submit",
"commentCancel": "Cancel",
"replyTo": "Reply to @",
"addEmoji": "Emoji",
"addImage": "Image",
"maxImages": "Maximum 3 images",
"publishSuccess": "Published successfully",
"publishFailed": "Failed to publish",
"pleaseInputContent": "Please enter content",
"loadMoreComments": "Load More",
"allLoaded": "All Loaded",
"noComments": "No comments yet",
"viewMoreReplies": "View more replies",
"copyright": "Copyright © Tianjin Zhongmiao Zhimen Technology Co., Ltd. All rights reserved!",
"courseInfo": "Course",
"chapterInfo": "Chapter",
"videoLoadFailed": "Video load failed",
"vipBenefit": "VIP benefit active"
},
"courseOrder": {
"orderTitle": "Order Confirmation",
"goodsInfo": "Product Information",
"shippingAddress": "Shipping Address",
"addAddress": "Add Address",
"goodsAmount": "Subtotal",
"freight": "Shipping",
"availablePoints": "Available Points",
"pointsDiscount": " points (deduct",
"orderTotal": "Total",
"total": "Total",
"submitOrder": "Submit Order",
"submitting": "Submitting...",
"quantity": "Quantity",
"vipPrice": "VIP Price",
"activityPrice": "Sale Price",
"pleaseSelectAddress": "Please select address",
"orderCreateSuccess": "Order created successfully",
"orderCreateFailed": "Failed to create order"
}
}

87
locale/zh-Hans.json
View File

@@ -323,5 +323,92 @@
"required": "必修",
"elective": "选修",
"each": "各"
},
"courseDetails": {
"detail": "课程介绍",
"chapter": "教学内容",
"catalogue": "目录",
"chapterList": "章节",
"trial": "试听",
"learned": "已学",
"notLearned": "未学",
"locked": "未购买",
"purchase": "立即购买",
"renew": "续费",
"relearn": "复读",
"free": "领取课程",
"vipOnly": "VIP专享",
"openVip": "开通VIP",
"progress": "学习进度",
"relatedBooks": "相关书籍",
"comments": "留言板",
"publishComment": "发布留言",
"reply": "回复",
"like": "点赞",
"chapterIntro": "章节介绍",
"thinkingQuestion": "思考题",
"noQuestion": "暂无思考题",
"videoTeaching": "视频教学",
"autoPlayNext": "秒后自动播放下一个",
"cancelAutoPlay": "取消自动播放",
"vipTip": "购买VIP，即可畅享更多专属权益",
"vipExpireTime": "VIP畅学权益有效期截止到",
"courseExpireTime": "课程有效期截止到",
"notStarted": "当前目录还未开始学习",
"unpurchasedTip": "您未购买此目录课程或已到期，购买后或开通VIP即可学习本目录课程",
"pleaseGetCourse": "请先领取课程",
"pleasePurchase": "请先购买课程",
"getSuccess": "领取成功",
"noChapters": "暂无章节内容",
"totalChapters": "共{count}个目录",
"expand": "展开",
"collapse": "收起",
"selectPlan": "选择购买方案",
"selectRenewPlan": "选择复读方案",
"noPurchaseOption": "此课程暂无购买方式",
"noRenewOption": "暂无复读方案",
"purchaseAgreement": "温馨提示",
"agreementContent": "用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。",
"agree": "同意",
"disagree": "不同意",
"commentPlaceholder": "~ 和谐社会 友善发言 ~",
"commentSubmit": "发 布",
"commentCancel": "取 消",
"replyTo": "回复@",
"addEmoji": "表情",
"addImage": "图片",
"maxImages": "最多可上传3张图片",
"publishSuccess": "发布成功",
"publishFailed": "发布失败",
"pleaseInputContent": "请输入内容",
"loadMoreComments": "加载更多",
"allLoaded": "已加载全部",
"noComments": "暂无留言数据",
"viewMoreReplies": "查看更多回复",
"copyright": "本课程版权归天津众妙之门科技有限公司所有，翻版必究!",
"courseInfo": "课程",
"chapterInfo": "章节",
"videoLoadFailed": "视频加载失败",
"vipBenefit": "VIP畅学权益生效中"
},
"courseOrder": {
"orderTitle": "确认订单",
"goodsInfo": "商品信息",
"shippingAddress": "收货地址",
"addAddress": "添加收货地址",
"goodsAmount": "商品金额",
"freight": "运费",
"availablePoints": "可用积分",
"pointsDiscount": "分（可抵扣",
"orderTotal": "订单总价",
"total": "合计",
"submitOrder": "提交订单",
"submitting": "提交中...",
"quantity": "数量",
"vipPrice": "VIP到手价",
"activityPrice": "活动价",
"pleaseSelectAddress": "请选择收货地址",
"orderCreateSuccess": "订单创建成功",
"orderCreateFailed": "订单创建失败"
}
}

18
pages.json
View File

@@ -133,6 +133,24 @@
"navigationStyle": "custom",
"navigationBarTitleText": "%courseHome.tryListen%"
}
}, {
"path": "pages/course/details/course",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "%courseDetails.detail%"
}
}, {
"path": "pages/course/details/chapter",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "%courseDetails.chapter%"
}
}, {
"path": "pages/course/order",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "%courseOrder.orderTitle%"
}
}
],
"tabBar": {

466
pages/course/details/chapter.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<view class="chapter-detail-page">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('courseDetails.chapter')" />
<!-- 页面内容 -->
<view class="page-content" :style="{ height: contentHeight }">
<!-- 视频播放器 -->
<view v-if="videoList.length > 0" class="video-section">
<VideoPlayer
ref="videoPlayerRef"
:videoList="videoList"
:currentIndex="currentVideoIndex"
:noRecored="noRecored"
@end="handleVideoEnd"
@fullscreen="handleFullscreen"
@change="handleVideoChange"
/>
</view>
<!-- 课程和章节信息 -->
<view class="info-section">
<view class="info-item">
<text class="label">{{ $t('courseDetails.courseInfo') }}：</text>
<text class="value">{{ navTitle }}</text>
</view>
<view class="info-item">
<text class="label">{{ $t('courseDetails.chapterInfo') }}：</text>
<text class="value">{{ chapterTitle }}</text>
</view>
</view>
<!-- 视频列表 -->
<view v-if="videoList.length > 0" class="video-list-section">
<view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
<view class="video-list">
<view
v-for="(video, index) in videoList"
:key="video.id"
:class="['video-item', currentVideoIndex === index ? 'active' : '']"
@click="selectVideo(index)"
>
<view class="video-info">
<text class="video-title">【{{ video.type == "2" ? "音频" : "视频" }}】{{ index + 1 }}</text>
<!-- <wd-icon
v-if="currentVideoIndex === index"
name="play-circle"
color="#258feb"
size="14px"
/> -->
</view>
</view>
</view>
</view>
<!-- 选项卡 -->
<view v-if="tabList.length > 0" class="tabs-section">
<view class="tabs">
<view
v-for="(tab, index) in tabList"
:key="tab.id"
:class="['tab-item', currentTab === index ? 'active' : '']"
@click="switchTab(index)"
>
<text>{{ tab.name }}</text>
</view>
</view>
</view>
<!-- 选项卡内容 -->
<view class="tab-content">
<!-- 章节介绍 -->
<view v-show="currentTab === 0" class="intro-content">
<view class="section-title">{{ $t('courseDetails.chapterIntro') }}</view>
<view class="intro-wrapper">
<!-- 章节封面 -->
<image
v-if="chapterDetail?.imgUrl"
:src="chapterDetail.imgUrl"
mode="widthFix"
class="chapter-image"
@click="previewImage(chapterDetail.imgUrl)"
/>
<!-- 章节内容 -->
<view v-if="chapterDetail?.content" class="chapter-content" v-html="chapterDetail.content"></view>
</view>
<view class="copyright">
<text>{{ $t('courseDetails.copyright') }}</text>
</view>
</view>
<!-- 思考题 -->
<view v-show="currentTab === 1" class="question-content">
<view class="section-title">{{ $t('courseDetails.thinkingQuestion') }}</view>
<view v-if="chapterDetail?.questions" class="question-wrapper">
<view class="question-html" v-html="chapterDetail.questions"></view>
</view>
<view v-else class="no-question">
<wd-divider>{{ $t('courseDetails.noQuestion') }}</wd-divider>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
import { courseApi } from '@/api/modules/course'
import VideoPlayer from '@/components/course/VideoPlayer.vue'
import NavBar from '@/components/nav-bar/nav-bar.vue'
import type { IChapterDetail, IVideo } from '@/types/course'
// 页面参数
const chapterId = ref<number>(0)
const courseId = ref<number>(0)
const navTitle = ref('')
const chapterTitle = ref('')
const noRecored = ref(false)
// 页面数据
const chapterDetail = ref<IChapterDetail | null>(null)
const videoList = ref<IVideo[]>([])
const currentVideoIndex = ref(0)
const currentTab = ref(0)
const isFullScreen = ref(false)
// 视频播放器引用
const videoPlayerRef = ref<any>(null)
// 选项卡列表
const tabList = computed(() => {
const tabs = [
{ id: '0', name: '章节介绍' }
]
// 如果有思考题，添加思考题选项卡
if (chapterDetail.value?.questions) {
tabs.push({ id: '1', name: '思考题' })
}
return tabs
})
// 内容高度（全屏时调整）
const contentHeight = computed(() => {
return isFullScreen.value ? '100vh' : 'auto'
})
/**
* 页面加载
*/
onLoad((options: any) => {
chapterId.value = parseInt(options.id)
courseId.value = parseInt(options.courseId)
navTitle.value = options.navTitle || ''
chapterTitle.value = options.title || ''
noRecored.value = options.noRecored === 'true'
loadChapterDetail()
})
/**
* 加载章节详情
*/
const loadChapterDetail = async () => {
try {
uni.showLoading({ title: '加载中...' })
const res = await courseApi.getChapterDetail(chapterId.value)
if (res.code === 0 && res.data) {
chapterDetail.value = res.data.detail
videoList.value = res.data.videos || []
// 如果有历史播放记录，定位到对应视频
if (res.data.current) {
const index = videoList.value.findIndex(v => v.id === res.data.current)
if (index !== -1) {
currentVideoIndex.value = index
}
}
}
} catch (error) {
console.error('加载章节详情失败:', error)
} finally {
uni.hideLoading()
}
}
/**
* 选择视频
*/
const selectVideo = (index: number) => {
if (index === currentVideoIndex.value) return
currentVideoIndex.value = index
}
/**
* 视频切换
*/
const handleVideoChange = (index: number) => {
currentVideoIndex.value = index
}
/**
* 视频播放结束
*/
const handleVideoEnd = () => {
// 视频播放结束的处理已在 VideoPlayer 组件中完成
}
/**
* 全屏变化
*/
const handleFullscreen = (fullscreen: boolean) => {
isFullScreen.value = fullscreen
// 全屏时锁定屏幕方向
// #ifdef APP-PLUS
if (fullscreen) {
plus.screen.unlockOrientation()
plus.screen.lockOrientation('landscape-primary')
} else {
plus.screen.unlockOrientation()
plus.screen.lockOrientation('portrait-primary')
}
// #endif
}
/**
* 切换选项卡
*/
const switchTab = (index: number) => {
currentTab.value = index
}
/**
* 预览图片
*/
const previewImage = (url: string) => {
uni.previewImage({
urls: [url],
current: url
})
}
/**
* 页面显示
*/
onShow(() => {
// 锁定竖屏
// #ifdef APP-PLUS
plus.screen.unlockOrientation()
plus.screen.lockOrientation('portrait-primary')
// #endif
})
/**
* 页面隐藏
*/
onHide(() => {
// 暂停视频
if (videoPlayerRef.value) {
videoPlayerRef.value.pause()
}
})
/**
* 页面卸载
*/
onUnload(() => {
// 停止视频
if (videoPlayerRef.value) {
videoPlayerRef.value.stop()
}
// 解锁屏幕方向
// #ifdef APP-PLUS
plus.screen.unlockOrientation()
// #endif
})
</script>
<style lang="scss" scoped>
.chapter-detail-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.page-content {
padding-bottom: 100rpx;
}
.video-section {
background-color: #000;
}
.info-section {
padding: 20rpx;
background-color: #fff;
.info-item {
margin-bottom: 15rpx;
font-size: 26rpx;
color: #666;
&:last-child {
margin-bottom: 0;
}
.label {
color: #999;
}
.value {
color: #333;
}
}
}
.video-list-section {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
.section-title {
font-size: 32rpx;
font-weight: 500;
color: #2979ff;
margin-bottom: 20rpx;
}
.video-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10rpx;
.video-item {
padding: 20rpx;
margin-bottom: 10rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
border: 2rpx solid transparent;
transition: all 0.3s;
&.active {
background-color: #e8f4ff;
border-color: #258feb;
}
.video-info {
display: flex;
justify-content: space-between;
align-items: center;
.video-title {
flex: 1;
font-size: 28rpx;
color: #333;
}
}
}
}
}
.tabs-section {
background-color: #fff;
margin-top: 20rpx;
border-bottom: 2rpx solid #2979ff;
.tabs {
display: flex;
.tab-item {
flex: 1;
text-align: center;
padding: 25rpx 0;
font-size: 30rpx;
color: #666;
position: relative;
transition: all 0.3s;
&.active {
color: #2979ff;
font-weight: 500;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background-color: #2979ff;
border-radius: 2rpx;
}
}
}
}
}
.tab-content {
background-color: #fff;
padding: 20rpx;
.section-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.intro-content {
.intro-wrapper {
.chapter-image {
width: 100%;
display: block;
margin-bottom: 20rpx;
border-radius: 8rpx;
}
.chapter-content {
font-size: 28rpx;
line-height: 1.8;
color: #666;
text-align: justify;
word-break: break-all;
}
}
.copyright {
margin-top: 40rpx;
padding-top: 20rpx;
border-top: 1px solid #f0f0f0;
text-align: center;
text {
font-size: 24rpx;
color: #ff4444;
}
}
}
.question-content {
.question-wrapper {
.question-html {
font-size: 28rpx;
line-height: 1.8;
color: #666;
word-break: break-all;
}
}
.no-question {
padding: 80rpx 0;
text-align: center;
}
}
}
</style>

187
pages/course/details/components/course-info.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<view class="course-info">
<!-- 课程封面 -->
<view class="course-cover">
<image
:src="course.image || '/static/nobg.jpg'"
mode="widthFix"
class="cover-image"
/>
</view>
<!-- 课程标题 -->
<view class="course-title">
<text class="title-text">{{ course.title }}</text>
</view>
<!-- 课程简介 -->
<view v-if="course.content && course.content !== ''" class="course-content">
<view class="content-wrapper">
<view
:class="['content-html', isCollapsed ? 'collapsed' : '']"
v-html="parsedContent"
/>
<!-- 图片列表 -->
<view v-if="images.length > 0" class="content-images">
<image
v-for="(img, index) in images"
:key="index"
:src="img"
mode="widthFix"
class="content-image"
@click="previewImage(img, index)"
/>
</view>
<!-- 展开/收起按钮 -->
<view class="toggle-btn" @click="toggleContent">
<text>{{ isCollapsed ? '展开' : '收起' }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { ICourseDetail } from '@/types/course'
interface Props {
course: ICourseDetail
}
const props = defineProps<Props>()
const isCollapsed = ref(true)
const parsedContent = ref('')
const images = ref<string[]>([])
/**
* 解析课程内容，分离文本和图片
*/
const parseContent = () => {
if (!props.course.content) {
parsedContent.value = ''
images.value = []
return
}
// 提取图片URL
const imgRegex = /<img[^>]+src="([^"]+)"[^>]*>/g
const imgUrls: string[] = []
let match
while ((match = imgRegex.exec(props.course.content)) !== null) {
imgUrls.push(match[1])
}
// 移除图片标签，保留文本内容
const cleanText = props.course.content.replace(/<img[^>]*>/g, '')
parsedContent.value = cleanText
images.value = imgUrls
}
/**
* 切换展开/收起
*/
const toggleContent = () => {
isCollapsed.value = !isCollapsed.value
}
/**
* 预览图片
*/
const previewImage = (current: string, index: number) => {
uni.previewImage({
current,
urls: images.value,
currentIndex: index
})
}
// 监听课程变化，重新解析内容
watch(() => props.course, () => {
parseContent()
}, { immediate: true, deep: true })
</script>
<style lang="scss" scoped>
.course-info {
background-color: #fff;
}
.course-cover {
width: 100%;
.cover-image {
width: 100%;
display: block;
}
}
.course-title {
padding: 30rpx 20rpx;
.title-text {
font-size: 36rpx;
font-weight: bold;
color: #333;
line-height: 1.4;
}
}
.course-content {
padding: 0 20rpx 20rpx;
.content-wrapper {
position: relative;
.content-html {
font-size: 28rpx;
line-height: 1.8;
color: #666;
text-align: justify;
word-break: break-all;
&.collapsed {
max-height: 200rpx;
overflow: hidden;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60rpx;
background: linear-gradient(to bottom, transparent, #fff);
}
}
}
.content-images {
margin-top: 20rpx;
.content-image {
width: 100%;
display: block;
margin-bottom: 20rpx;
border-radius: 8rpx;
}
}
.toggle-btn {
text-align: right;
padding: 20rpx 0 0;
text {
color: #838588;
font-size: 26rpx;
}
}
}
}
</style>

876
pages/course/details/course.vue Normal file
View File

@@ -0,0 +1,876 @@
<template>
<view class="course-detail-page">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('courseDetails.detail')" />
<!-- VIP权益提示条 -->
<view v-if="vipTip" class="vip-tip">
<view class="tip-content">
<wd-icon name="info-circle" color="#fff" size="16"></wd-icon>
<text>{{ vipTip }}</text>
</view>
<wd-button v-if="!userVip" type="error" size="small" custom-class="vip-btn" @click="goToVip">{{ $t('courseDetails.purchase') }}</wd-button>
</view>
<!-- 课程信息 -->
<CourseInfo v-if="courseDetail" :course="courseDetail" class="pt-[40px]" />
<!-- 课程内容包装器 -->
<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"
@purchase="handlePurchase"
@toVip="goToVip"
@click="handleChapterClick"
/>
</view>
<!-- 学习进度 -->
<view class="learning-progress">
<view class="progress-title">
<text>{{ $t('courseDetails.progress') }}</text>
</view>
<wd-progress
:percentage="learningProgress"
show-text
stroke-width="6"
/>
</view>
<!-- 相关书籍 -->
<!-- <view v-if="relatedBooks.length > 0" class="related-books">
<view class="section-title">
<text>{{ $t('courseDetails.relatedBooks') }}</text>
</view>
<scroll-view class="books-scroll" scroll-x>
<view
v-for="book in relatedBooks"
:key="book.productId"
class="book-item"
@click="goToBookDetail(book)"
>
<view class="book-cover">
<view v-if="book.isVipPrice === 1 && book.vipPrice" class="vip-badge">
VIP优惠
</view>
<image :src="book.productImages" mode="aspectFit" />
</view>
<view class="book-name">{{ book.productName }}</view>
<view class="book-price">
<text v-if="book.isVipPrice === 1 && book.vipPrice" class="vip-price">
￥{{ book.vipPrice.toFixed(2) }}
</text>
<text v-else-if="book.activityPrice" class="activity-price">
￥{{ book.activityPrice.toFixed(2) }}
</text>
<text v-else class="normal-price">
￥{{ book.price.toFixed(2) }}
</text>
</view>
</view>
</scroll-view>
</view> -->
<!-- 留言板 -->
<!-- <view class="comments-section">
<view class="section-header">
<text class="section-title">{{ $t('courseDetails.comments') }}</text>
<wd-button size="small" type="primary" @click="showCommentEditor">
{{ $t('courseDetails.publishComment') }}
</wd-button>
</view>
<CommentList
:comments="commentList"
:loading="commentsLoading"
:hasMore="hasMoreComments"
type="course"
@like="handleCommentLike"
@reply="handleCommentReply"
@loadMore="loadMoreComments"
/>
</view> -->
<!-- 商品选择器 -->
<GoodsSelector
:show="showGoodsSelector"
:goods="goodsList"
:isFudu="isFudu"
@select="handleGoodsSelect"
@confirm="handleGoodsConfirm"
@close="closeGoodsSelector"
/>
<!-- 购买协议弹窗 -->
<wd-popup v-model="showProtocol" position="center">
<view class="protocol-popup">
<view class="protocol-title">温馨提示</view>
<view class="protocol-content">
<text>
用户您好，本软件对于一个用户名及密码仅允许一部电子设备登陆，多部设备使用同一用户名操作软件的行为属于违规操作，发现违规一次将提出警告，再次违规您的用户名将被封号，无法正常登陆，如因此对您使用带来不便，敬请谅解。
</text>
<text>
课程购买之后一年内不打开，此一年内不会计算有效学习时间，一年后会自动开始计算有效学习时间。
</text>
<text>
本课程一经购买，暂不支持退款，敬请谅解。
</text>
</view>
<view class="protocol-actions">
<wd-button type="info" plain @click="showProtocol = false">不同意</wd-button>
<wd-button type="primary" @click="confirmPurchase">同意</wd-button>
</view>
</view>
</wd-popup>
<!-- 评论编辑器 -->
<CommentEditor
:show="showEditor"
:parentComment="replyComment"
type="course"
@submit="handleCommentSubmit"
@close="closeCommentEditor"
/>
<!-- 返回顶部 -->
<wd-backtop :scrollTop="scrollTop" custom-class="back-top">
<wd-icon name="arrow-up" size="24px" color="#258feb" />
</wd-backtop>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } 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-info.vue'
import CatalogueList from '@/components/course/CatalogueList.vue'
import ChapterList from '@/components/course/ChapterList.vue'
import GoodsSelector from '@/components/course/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, IGoods, IVipInfo } from '@/types/course'
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)
const relatedBooks = ref<IGoods[]>([])
// 商品选择
const showGoodsSelector = ref(false)
const goodsList = ref<IGoods[]>([])
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[]>([])
const commentsLoading = ref(false)
const hasMoreComments = ref(true)
const commentPage = ref(0)
const showEditor = ref(false)
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提示文案
*/
const vipTip = computed(() => {
if (userVip.value) {
const vipTypeMap: Record<number, string> = {
4: '中医学',
5: '针灸学',
6: '肿瘤学',
7: '国学',
8: '心理学',
9: '中西汇通学'
}
const typeName = vipTypeMap[userVip.value.type] || ''
return `尊贵的${typeName}VIP，您的有效期到${userVip.value.endTime}`
}
if (vipModuleList.value.length > 0) {
const typeMap: Record<string, string> = {
'4': '中医学',
'5': '针灸学',
'6': '肿瘤学',
'7': '国学',
'8': '心理学',
'9': '中西汇通学'
}
const typeNames = vipModuleList.value.map(type => typeMap[type]).filter(Boolean)
return `购买${typeNames.join('/')}VIP，即可畅享更多专属权益`
}
return ''
})
/**
* 页面加载
*/
onLoad(async (options: any) => {
courseId.value = parseInt(options.id)
await loadPageData()
})
/**
* 加载页面数据
*/
const loadPageData = async () => {
try {
uni.showLoading({ title: '加载中...' })
// 获取课程详情
const res = await courseApi.getCourseDetail(courseId.value)
if (res.code === 0 && res.data) {
courseDetail.value = res.data.course
catalogueList.value = res.data.catalogues || []
relatedBooks.value = res.data.shopProductList || []
// 计算学习进度
if (catalogueList.value.length > 0) {
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权益
await checkVipStatus()
// 加载评论
await loadComments()
} catch (error) {
console.error('加载页面数据失败:', error)
} finally {
uni.hideLoading()
}
}
/**
* 检查VIP状态
*/
const checkVipStatus = async () => {
try {
const res = await courseApi.checkCourseVip(courseId.value)
if (res.code === 0) {
userVip.value = res.userVip || null
// 如果不是VIP，获取需要的VIP类型
if (!userVip.value) {
const moduleRes = await courseApi.getCourseVipModule(courseId.value)
if (moduleRes.code === 0) {
vipModuleList.value = moduleRes.list || []
}
}
}
} catch (error) {
console.error('检查VIP状态失败:', error)
}
}
/**
* 切换目录
*/
const switchCatalogue = async (index: number) => {
currentCatalogueIndex.value = index
const catalogue = catalogueList.value[index]
// 获取章节列表
try {
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
}
} catch (error) {
console.error('切换目录失败:', error)
}
}
/**
* 目录切换事件
*/
const handleCatalogueChange = (index: number) => {
switchCatalogue(index)
}
/**
* 点击章节
*/
const handleChapterClick = (chapter: IChapter) => {
const noRecored = chapter.isAudition === 1 && currentCatalogue.value?.isBuy === 0 && !userVip.value
uni.navigateTo({
url: `/pages/course/details/chapter?id=${chapter.id}&courseId=${courseId.value}&navTitle=${courseDetail.value?.title}&title=${chapter.title}&noRecored=${noRecored}`
})
}
/**
* 领取免费课程
*/
const handleGetFreeCourse = async () => {
if (!currentCatalogue.value) return
try {
uni.showLoading({ title: '领取中...' })
const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
if (res.code === 0) {
uni.showToast({ title: '领取成功', icon: 'success' })
// 刷新页面数据
await loadPageData()
}
} catch (error) {
console.error('领取免费课程失败:', error)
} finally {
uni.hideLoading()
}
}
/**
* 购买课程
*/
const handlePurchase = async () => {
if (!currentCatalogue.value) return
try {
isFudu.value = false
const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
if (res.code === 0 && res.productList.length > 0) {
goodsList.value = res.productList
showGoodsSelector.value = true
} else {
uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
}
} catch (error) {
console.error('获取商品列表失败:', error)
}
}
/**
* 续费/复读
*/
const handleRenew = async () => {
if (!currentCatalogue.value) return
try {
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' })
}
} catch (error) {
console.error('获取复读商品列表失败:', error)
}
}
/**
* 选择商品
*/
const handleGoodsSelect = (goods: IGoods) => {
selectedGoods.value = goods
}
/**
* 确认购买
*/
const handleGoodsConfirm = () => {
showGoodsSelector.value = false
showProtocol.value = true
}
/**
* 关闭商品选择器
*/
const closeGoodsSelector = () => {
showGoodsSelector.value = false
}
/**
* 确认购买协议
*/
const confirmPurchase = () => {
showProtocol.value = false
uni.showToast({ icon: 'none', title: '订单及支付功能开发中' })
return false
if (!selectedGoods.value) return
showProtocol.value = false
// 跳转到确认订单页
const orderData = {
goods: [{ ...selectedGoods.value, productAmount: 1 }],
typeId: 0,
navTitle: courseDetail.value?.title,
title: courseDetail.value?.title,
isFudu: isFudu.value,
fuduId: isFudu.value ? fuduCatalogueId.value : undefined
}
uni.navigateTo({
url: `/pages/course/order?data=${encodeURIComponent(JSON.stringify(orderData))}`
})
}
/**
* 跳转到VIP页面
*/
const goToVip = () => {
uni.showToast({ icon: 'none', title: 'VIP功能开发中' })
return false
uni.navigateTo({
url: '/pages/user/wallet/index'
})
}
/**
* 跳转到书籍详情
*/
const goToBookDetail = (book: IGoods) => {
if (book.delFlag === -1) {
uni.showToast({ title: '商品已下架', icon: 'none' })
return
}
uni.navigateTo({
url: `/pages/book/detail?id=${book.productId}`
})
}
/**
* 加载评论
*/
const loadComments = async () => {
if (commentsLoading.value) return
try {
commentsLoading.value = true
commentPage.value++
const res = await courseApi.getCourseComments(
courseId.value,
commentPage.value,
15,
userStore.userInfo.id
)
if (res.code === 0 && res.page) {
const newComments = res.page.records.map(comment => {
// 处理图片
if (comment.images) {
comment.imgList = comment.images.split(',')
} else {
comment.imgList = []
}
// 处理子评论
if (comment.children && comment.children.length > 0) {
comment.Bchildren = comment.children.slice(0, 5)
} else {
comment.Bchildren = []
}
return comment
})
commentList.value = [...commentList.value, ...newComments]
hasMoreComments.value = res.page.pages > commentPage.value
}
} catch (error) {
console.error('加载评论失败:', error)
} finally {
commentsLoading.value = false
}
}
/**
* 加载更多评论
*/
const loadMoreComments = () => {
loadComments()
}
/**
* 显示评论编辑器
*/
const showCommentEditor = () => {
replyComment.value = undefined
showEditor.value = true
}
/**
* 回复评论
*/
const handleCommentReply = (comment: IComment) => {
replyComment.value = comment
showEditor.value = true
}
/**
* 提交评论
*/
const handleCommentSubmit = async (content: string, images: string[]) => {
try {
const data = {
type: 0,
courseId: courseId.value,
chapterId: '',
pid: replyComment.value?.id || 0,
userId: userStore.userInfo.id,
forUserId: replyComment.value?.user.id || userStore.userInfo.id,
content,
images: images.join(',')
}
const res = await courseApi.addCourseComment(data)
if (res.code === 0 && res.courseGuestbook) {
uni.showToast({ title: '发布成功', icon: 'success' })
// 处理新评论
const newComment = res.courseGuestbook
newComment.imgList = newComment.images ? newComment.images.split(',') : []
newComment.children = []
newComment.Bchildren = []
if (replyComment.value) {
// 回复评论，添加到父评论的子评论列表
const parentIndex = commentList.value.findIndex(c => c.id === replyComment.value!.id)
if (parentIndex !== -1) {
commentList.value[parentIndex].children.unshift(newComment)
commentList.value[parentIndex].Bchildren.unshift(newComment)
}
} else {
// 一级评论，添加到列表顶部
commentList.value.unshift(newComment)
}
closeCommentEditor()
}
} catch (error) {
console.error('提交评论失败:', error)
uni.showToast({ title: '发布失败', icon: 'none' })
}
}
/**
* 关闭评论编辑器
*/
const closeCommentEditor = () => {
showEditor.value = false
replyComment.value = undefined
}
/**
* 点赞评论
*/
const handleCommentLike = async (commentId: number) => {
try {
// 查找评论
let targetComment: IComment | null = null
let parentComment: IComment | null = null
for (const comment of commentList.value) {
if (comment.id === commentId) {
targetComment = comment
break
}
for (const child of comment.children) {
if (child.id === commentId) {
targetComment = child
parentComment = comment
break
}
}
if (targetComment) break
}
if (!targetComment) return
// 调用API
if (targetComment.support) {
await courseApi.unlikeComment(userStore.userInfo.id, commentId)
targetComment.support = false
targetComment.supportCount--
} else {
await courseApi.likeComment(userStore.userInfo.id, commentId)
targetComment.support = true
targetComment.supportCount++
}
} catch (error) {
console.error('点赞失败:', error)
}
}
/**
* 页面滚动
*/
onPageScroll((e: any) => {
scrollTop.value = e.scrollTop
})
/**
* 下拉刷新
*/
onPullDownRefresh(async () => {
commentPage.value = 0
commentList.value = []
await loadPageData()
uni.stopPullDownRefresh()
})
/**
* 触底加载
*/
onReachBottom(() => {
if (hasMoreComments.value && !commentsLoading.value) {
loadComments()
}
})
</script>
<style lang="scss" scoped>
.course-detail-page {
min-height: 100vh;
background-color: #f5f5f5;
}
.page-content {
padding-bottom: 100rpx;
}
.vip-tip {
position: fixed;
left: 0;
right: 0;
z-index: 9;
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
padding: 5px 10px;
box-sizing: content-box;
background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
color: #fff;
.tip-content {
flex: 1;
display: flex;
align-items: center;
gap: 10rpx;
font-size: 26rpx;
}
.vip-btn {
flex-shrink: 0;
font-size: 12px;
padding: 0px 5px;
border-radius: 4px;
}
}
.course-content-wrapper {
background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
}
.learning-progress {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
.progress-title {
margin-bottom: 20rpx;
font-size: 28rpx;
color: #666;
}
}
.related-books {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
.section-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.books-scroll {
white-space: nowrap;
.book-item {
display: inline-block;
width: 210rpx;
margin-right: 20rpx;
vertical-align: top;
.book-cover {
position: relative;
width: 100%;
height: 260rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
.vip-badge {
position: absolute;
top: 10rpx;
left: 10rpx;
padding: 4rpx 10rpx;
background-color: #f94f04;
color: #fff;
font-size: 22rpx;
border-radius: 4rpx;
z-index: 1;
}
image {
width: 100%;
height: 100%;
}
}
.book-name {
margin-top: 10rpx;
font-size: 24rpx;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.book-price {
margin-top: 5rpx;
.vip-price,
.activity-price {
font-size: 26rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 26rpx;
font-weight: bold;
color: #333;
}
}
}
}
}
.comments-section {
padding: 20rpx;
background-color: #fff;
margin-top: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.section-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
}
}
}
.protocol-popup {
width: 600rpx;
padding: 40rpx;
background-color: #fff;
border-radius: 12rpx;
.protocol-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
text-align: center;
margin-bottom: 30rpx;
}
.protocol-content {
max-height: 500rpx;
overflow-y: auto;
font-size: 26rpx;
line-height: 1.8;
color: #666;
margin-bottom: 30rpx;
text {
display: block;
margin-bottom: 20rpx;
}
}
.protocol-actions {
display: flex;
gap: 20rpx;
}
}
:deep(.back-top) {
background-color: #fff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>

2
pages/course/index.vue
View File

@@ -173,7 +173,7 @@
class="item"
v-for="(item, index) in tryListenList"
:key="item.id"
@click="onPageJump('/pages/course/courseDetail', item.id, item.title)"
@click="onPageJump('/pages/course/details/course', item.id, item.title)"
>
<view class="imgcontainer">
<image

2
pages/course/list/components/list-item.vue
View File

@@ -94,7 +94,7 @@ const formatCatalogueTitle = (title: string): string => {
*/
const goCourseDetail = (courseId: number) => {
uni.navigateTo({
url: `/pages/course/courseDetail?id=${courseId}`
url: `/pages/course/details/course?id=${courseId}`
})
}
</script>

672
pages/course/order.vue Normal file
View File

@@ -0,0 +1,672 @@
<template>
<view class="course-order-page">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('courseOrder.orderTitle')" />
<!-- 页面内容 -->
<view class="page-content">
<!-- 商品列表 -->
<view class="goods-section">
<view class="section-title">商品信息</view>
<view
v-for="(item, index) in goodsList"
:key="index"
class="goods-item"
>
<view class="goods-image">
<!-- VIP优惠标签 -->
<view
v-if="item.isVipPrice === 1 && item.vipPrice"
class="vip-badge"
>
VIP优惠
</view>
<image
:src="item.productImages || '/static/nobg.jpg'"
mode="aspectFit"
/>
</view>
<view class="goods-info">
<text class="goods-name">{{ item.productName }}</text>
<!-- 价格信息 -->
<view class="price-info">
<!-- VIP优惠价 -->
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-row">
<text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
<text class="vip-label">VIP到手价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 活动价 -->
<view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-row">
<text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
<text class="activity-label">活动价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 普通价格 -->
<view v-else class="price-row">
<text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<text>数量：{{ item.productAmount || 1 }}</text>
</view>
</view>
</view>
</view>
<!-- 收货地址（仅实体商品显示） -->
<view v-if="!isHideAddress" class="address-section">
<view class="section-title">收货地址</view>
<view v-if="selectedAddress" class="address-info" @click="selectAddress">
<view class="address-row">
<text class="name">{{ selectedAddress.name }}</text>
<text class="phone">{{ selectedAddress.phone }}</text>
</view>
<view class="address-detail">
{{ selectedAddress.province }} {{ selectedAddress.city }} {{ selectedAddress.district }} {{ selectedAddress.detail }}
</view>
</view>
<view v-else class="no-address" @click="selectAddress">
<wd-icon name="add-circle" size="24px" />
<text>添加收货地址</text>
</view>
</view>
<!-- 订单信息 -->
<view class="order-info-section">
<view class="info-row">
<text class="label">商品金额</text>
<text class="value">￥{{ goodsAmount.toFixed(2) }}</text>
</view>
<view v-if="!isHideAddress" class="info-row">
<text class="label">运费</text>
<text class="value">￥{{ freight.toFixed(2) }}</text>
</view>
<view v-if="availablePoints > 0" class="info-row">
<text class="label">可用积分</text>
<text class="value">{{ availablePoints }} 分（可抵扣 ￥{{ pointsDiscount.toFixed(2) }}）</text>
</view>
</view>
<!-- 订单总价 -->
<view class="total-section">
<view class="total-row">
<text class="label">订单总价</text>
<text class="value">￥{{ totalAmount.toFixed(2) }}</text>
</view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-bar">
<view class="total-info">
<text class="label">合计：</text>
<text class="amount">￥{{ totalAmount.toFixed(2) }}</text>
</view>
<wd-button
type="primary"
:loading="submitting"
@click="submitOrder"
>
提交订单
</wd-button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import NavBar from '@/components/nav-bar/nav-bar.vue'
import type { IOrderGoods, IOrderInitData } from '@/types/course'
interface OrderData {
goods: IOrderGoods[]
typeId?: number
navTitle?: string
title?: string
isFudu?: boolean
fuduId?: number
isVip?: boolean
}
// Stores
const userStore = useUserStore()
// 页面数据
const orderData = ref<OrderData>({
goods: []
})
const goodsList = ref<IOrderGoods[]>([])
const initData = ref<IOrderInitData | null>(null)
const selectedAddress = ref<any>(null)
const isHideAddress = ref(false)
const availablePoints = ref(0)
const freight = ref(0)
const submitting = ref(false)
/**
* 商品金额
*/
const goodsAmount = computed(() => {
return goodsList.value.reduce((sum, item) => {
const price = item.isVipPrice === 1 && item.vipPrice
? item.vipPrice
: item.activityPrice || item.price
return sum + price * (item.productAmount || 1)
}, 0)
})
/**
* 积分抵扣金额
*/
const pointsDiscount = computed(() => {
// 假设100积分可抵扣1元
return Math.min(availablePoints.value / 100, goodsAmount.value * 0.1)
})
/**
* 订单总价
*/
const totalAmount = computed(() => {
return Math.max(0, goodsAmount.value + freight.value - pointsDiscount.value)
})
/**
* 页面加载
*/
onLoad(async (options: any) => {
if (options.data) {
try {
orderData.value = JSON.parse(decodeURIComponent(options.data))
goodsList.value = orderData.value.goods || []
await initOrder()
} catch (error) {
console.error('解析订单数据失败:', error)
uni.showToast({
title: '订单数据错误',
icon: 'none'
})
}
}
})
/**
* 初始化订单
*/
const initOrder = async () => {
try {
uni.showLoading({ title: '加载中...' })
// 根据订单类型调用不同的初始化接口
if (orderData.value.isVip) {
// VIP订单
await initVipOrder()
} else if (orderData.value.isFudu) {
// 复读订单
await initFuduOrder()
} else {
// 普通订单
await initNormalOrder()
}
} catch (error) {
console.error('初始化订单失败:', error)
} finally {
uni.hideLoading()
}
}
/**
* 初始化普通订单
*/
const initNormalOrder = async () => {
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/buyOrder/initPrepareOrder',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {
uid: userStore.userInfo.id,
productList: goodsList.value.map(item => ({
productId: item.productId,
quantity: item.productAmount || 1
}))
}
})
const data = res.data as any
if (data.code === 0 && data.data) {
initData.value = data.data
isHideAddress.value = data.data.is_course || false
availablePoints.value = data.data.user?.jf || 0
// 如果有默认地址，设置为选中地址
if (data.data.addressList && data.data.addressList.length > 0) {
selectedAddress.value = data.data.addressList.find((addr: any) => addr.isDefault === 1)
|| data.data.addressList[0]
}
}
} catch (error) {
console.error('初始化普通订单失败:', error)
}
}
/**
* 初始化复读订单
*/
const initFuduOrder = async () => {
// 复读订单不需要地址
isHideAddress.value = true
// 获取用户信息
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {}
})
const data = res.data as any
if (data.code === 0 && data.result) {
initData.value = {
user: data.result,
is_course: true
}
availablePoints.value = data.result.jf || 0
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
/**
* 初始化VIP订单
*/
const initVipOrder = async () => {
// VIP订单不需要地址
isHideAddress.value = true
// 获取用户信息
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {}
})
const data = res.data as any
if (data.code === 0 && data.result) {
initData.value = {
user: data.result,
is_course: true
}
// VIP订单不使用积分
availablePoints.value = 0
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
/**
* 选择地址
*/
const selectAddress = () => {
// 跳转到地址选择页面
uni.navigateTo({
url: '/pages/user/address/list'
})
}
/**
* 提交订单
*/
const submitOrder = async () => {
// 验证
if (!isHideAddress.value && !selectedAddress.value) {
uni.showToast({
title: '请选择收货地址',
icon: 'none'
})
return
}
try {
submitting.value = true
let orderUrl = ''
let orderParams: any = {}
if (orderData.value.isVip) {
// VIP订单
orderUrl = 'common/userVip/placeVipOrder'
orderParams = {
vipConfigId: goodsList.value[0].productId,
payType: 1 // 默认支付方式
}
} else if (orderData.value.isFudu) {
// 复读订单
orderUrl = 'common/courseRelearn/relearnSave'
orderParams = {
catalogueId: orderData.value.fuduId,
productId: goodsList.value[0].productId,
quantity: 1
}
} else {
// 普通订单
orderUrl = 'book/buyOrder/placeOrder'
orderParams = {
uid: userStore.userInfo.id,
addressId: selectedAddress.value?.id,
productList: goodsList.value.map(item => ({
productId: item.productId,
quantity: item.productAmount || 1
})),
usePoints: pointsDiscount.value > 0
}
}
const res = await uni.request({
url: uni.getStorageSync('baseURL') + orderUrl,
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: orderParams
})
const data = res.data as any
if (data.code === 0) {
uni.showToast({
title: '订单创建成功',
icon: 'success'
})
// 跳转到支付页面或订单详情
setTimeout(() => {
uni.redirectTo({
url: `/pages/user/order/index`
})
}, 1500)
} else {
uni.showToast({
title: data.errMsg || '订单创建失败',
icon: 'none'
})
}
} catch (error) {
console.error('提交订单失败:', error)
uni.showToast({
title: '提交失败',
icon: 'none'
})
} finally {
submitting.value = false
}
}
</script>
<style lang="scss" scoped>
.course-order-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.page-content {
padding: 20rpx;
}
.section-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.goods-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.goods-item {
display: flex;
padding: 20rpx 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.goods-image {
position: relative;
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
margin-right: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
.vip-badge {
position: absolute;
top: 0;
left: 0;
padding: 4rpx 10rpx;
background-color: #f94f04;
color: #fff;
font-size: 20rpx;
border-radius: 8rpx 0 8rpx 0;
z-index: 1;
}
image {
width: 100%;
height: 100%;
}
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
margin-bottom: 10rpx;
}
.price-info {
.price-row {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price {
font-size: 32rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.vip-label {
font-size: 22rpx;
color: #fa2d12;
}
.activity-label {
font-size: 22rpx;
color: #613804;
}
.original-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
}
}
.quantity {
font-size: 24rpx;
color: #999;
}
}
}
}
.address-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.address-info {
padding: 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
.address-row {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
.name {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.phone {
font-size: 28rpx;
color: #666;
}
}
.address-detail {
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
}
.no-address {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
padding: 40rpx 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
color: #999;
font-size: 28rpx;
}
}
.order-info-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.info-row {
display: flex;
justify-content: space-between;
padding: 15rpx 0;
font-size: 28rpx;
.label {
color: #666;
}
.value {
color: #333;
font-weight: 500;
}
}
}
.total-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: 30rpx;
color: #333;
font-weight: 500;
}
.value {
font-size: 36rpx;
color: #ff4444;
font-weight: bold;
}
}
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #fff;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
z-index: 999;
.total-info {
flex: 1;
.label {
font-size: 28rpx;
color: #666;
}
.amount {
font-size: 36rpx;
color: #ff4444;
font-weight: bold;
margin-left: 10rpx;
}
}
}
</style>

142
stores/course.ts Normal file
View File

@@ -0,0 +1,142 @@
// 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
},
},
})

5
style/tailwind.css
View File

@@ -258,6 +258,9 @@
.bg-\[transparent\] {
background-color: transparent;
}
.pt-\[40px\] {
padding-top: 40px;
}
.text-center {
text-align: center;
}
@@ -324,7 +327,7 @@
display: inline-block;
}
button {
line-height: inherit;
line-height: inherit !important;
}
}
@property --tw-rotate-x {

12
style/ui.scss
View File

@@ -108,12 +108,12 @@ uni-textarea {
}
// popup
// .wd-popup {
// z-index: 9999 !important;
// }
// .wd-overlay {
// z-index: 9998 !important;
// }
.wd-popup {
z-index: 9999 !important;
}
.wd-overlay {
z-index: 9998 !important;
}
// uni-ui form
// .uni-forms-item {

2
tailwind-input.css
View File

@@ -8,6 +8,6 @@
display: inline-block;
}
button {
line-height: inherit;
line-height: inherit !important;
}
}

43
types/comment.d.ts vendored Normal file
View File

@@ -0,0 +1,43 @@
// types/comment.d.ts
/**
* 通用评论类型定义
* 用于课程和图书的评论功能
*/
import type { IApiResponse } from './book'
/** 用户信息（评论中使用） */
export interface ICommentUser {
id: number
name: string
avatar?: string
}
/** 通用评论数据结构 */
export interface IComment {
id: number
user: ICommentUser
content: string
images: string // 图片URL，逗号分隔
imgList: string[] // 图片URL数组
createTime: string
support: boolean // 当前用户是否已点赞
supportCount: number // 点赞数
children: IComment[] // 所有子评论
Bchildren: IComment[] // 显示的子评论（最多5条）
}
/** 评论列表响应 */
export interface ICommentListResponse extends IApiResponse {
page: {
records: IComment[]
total: number
pages: number
}
}
/** 添加评论响应 */
export interface IAddCommentResponse extends IApiResponse {
courseGuestbook?: IComment // 课程评论
bookComment?: IComment // 图书评论
}

109
types/course.d.ts vendored
View File

@@ -51,3 +51,112 @@ export interface IMarketCourseListResponse extends IApiResponse {
export interface IMessageListResponse extends IApiResponse {
messages: INews[] // 消息列表
}
/** 课程详情 */
export interface ICourseDetail {
id: number
title: string
image: string
content: string
canzk: string // 是否支持自考 0-否 1-是
}
/** 课程目录 */
export interface ICatalogue {
id: number
title: string
type: number // 0-免费 1-付费 2-VIP专享
isBuy: number // 是否已购买 0-否 1-是
startTime: string | null // 开始学习时间
endTime: string | null // 到期时间
completion: number // 学习进度百分比
}
/** 章节信息 */
export interface IChapter {
id: number
title: string
isAudition: number // 是否试听 0-否 1-是
isLearned: number // 是否已学 0-否 1-是
conditions: string
imgUrl?: string
}
/** 章节详情 */
export interface IChapterDetail {
id: number
title: string
imgUrl: string
content: string
questions: string // 思考题内容
}
/** 视频信息 */
export interface IVideo {
id: number
title: string
url: string
duration?: number
}
/** VIP信息 */
export interface IVipInfo {
type: number // VIP类型 4-中医学 5-针灸学 6-肿瘤学 7-国学 8-心理学 9-中西汇通学
endTime: string // 到期时间
}
/** 商品信息 */
export interface IGoods {
productId: number
productName: string
productImages: string
price: number
vipPrice: number | null
activityPrice: number | null
isVipPrice: number // 是否有VIP优惠 0-否 1-是
productAmount: number // 购买数量
delFlag?: number // 删除标记 -1-已下架
}
/** 订单商品 */
export interface IOrderGoods extends IGoods {
// 继承商品信息
}
/** 订单初始化数据 */
export interface IOrderInitData {
user: {
id: number
name: string
jf: number // 积分
}
is_course: boolean // 是否为课程订单
}
/** 课程详情响应 */
export interface ICourseDetailResponse extends IApiResponse {
data: {
course: ICourseDetail
catalogues: ICatalogue[]
shopProductList?: IGoods[] // 相关书籍
}
}
/** 章节列表响应 */
export interface IChapterListResponse extends IApiResponse {
chapterList: IChapter[]
}
/** 章节详情响应 */
export interface IChapterDetailResponse extends IApiResponse {
data: {
detail: IChapterDetail
videos: IVideo[]
current?: number // 当前播放视频ID
}
}
/** 商品列表响应 */
export interface IProductListResponse extends IApiResponse {
productList: IGoods[]
}