更新：课程详情的初步代码
This commit is contained in:
@@ -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
491
components/comment/CommentEditor.vue
Normal 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
406
components/comment/CommentList.vue
Normal 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
96
components/course/CatalogueList.vue
Normal 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
308
components/course/ChapterList.vue
Normal 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
237
components/course/GoodsSelector.vue
Normal 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
242
components/course/VideoPlayer.vue
Normal 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>
|
||||
Reference in New Issue
Block a user