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

Merge branch 'main' of https://git.nuttyreading.com/zm/taimed-international-app

Browse Source
This commit is contained in:
fuchao
2025-12-11 17:30:53 +08:00
parent d98e1ef024 b8dd0584aa
commit 3ce5e07573
27 changed files with 897 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
api/clients/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { skeletonClient } from './skeleton'
import { mainClient } from './main'
import { paymentClient } from './payment'
export {
skeletonClient,
mainClient,
paymentClient
}

2
api/clients/main.ts
View File

@@ -3,5 +3,5 @@ import { createRequestClient } from '../request';
import { SERVICE_MAP } from '../config';
export const mainClient = createRequestClient({
baseURL: SERVICE_MAP.MAIN,
baseURL: SERVICE_MAP.MAIN
});

8
api/clients/skeleton.ts Normal file
View File

@@ -0,0 +1,8 @@
// api/clients/main.ts
import { createRequestClient } from '../request';
import { SERVICE_MAP } from '../config';
export const skeletonClient = createRequestClient({
baseURL: SERVICE_MAP.MAIN,
loading: false
})

37
api/modules/book.ts
View File

@@ -1,6 +1,5 @@
// api/modules/book.ts
import { createRequestClient } from '../request'
import { SERVICE_MAP } from '../config'
import { mainClient, skeletonClient } from '@/api/clients'
import type { IApiResponse } from '../types'
import type {
IBook,
@@ -13,8 +12,6 @@ import type {
} from '@/types/book'
import type { IGoods } from '@/types/order'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
/**
* 书籍相关API
*/
@@ -25,7 +22,7 @@ export const bookApi = {
* @param limit 每页数量
*/
getMyBooks(current: number, limit: number) {
return client.request<IApiResponse<{ page: IPageData<IBook> }>>({
return mainClient.request<IApiResponse<{ page: IPageData<IBook> }>>({
url: 'bookAbroad/home/getMyBooks',
method: 'POST',
data: { current, limit }
@@ -37,7 +34,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getBookInfo(bookId: number) {
return client.request<IApiResponse<{ bookInfo: IBookDetail }>>({
return skeletonClient.request<IApiResponse<{ bookInfo: IBookDetail }>>({
url: 'bookAbroad/home/getBookInfo',
method: 'POST',
data: { bookId }
@@ -49,7 +46,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getBookReadCount(bookId: number) {
return client.request<IApiResponse<{
return skeletonClient.request<IApiResponse<{
readCount: number
listenCount: number
buyCount: number
@@ -65,7 +62,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getRecommendBook(bookId: number) {
return client.request<IApiResponse<{ bookList: IBook[] }>>({
return skeletonClient.request<IApiResponse<{ bookList: IBook[] }>>({
url: 'bookAbroad/home/getRecommendBook',
method: 'POST',
data: { bookId }
@@ -79,7 +76,7 @@ export const bookApi = {
* @param limit 每页数量
*/
getBookComments(bookId: number, current: number, limit: number) {
return client.request<IApiResponse<{
return mainClient.request<IApiResponse<{
commentsTree: IComment[]
commentsCount: number
}>>({
@@ -96,7 +93,7 @@ export const bookApi = {
* @param pid 父评论ID，默认为0表示顶级评论
*/
insertComment(bookId: number, content: string, pid: number = 0) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/insertBookAbroadComment',
method: 'POST',
data: { bookId, content, pid }
@@ -108,7 +105,7 @@ export const bookApi = {
* @param commentId 评论ID
*/
likeComment(commentId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/insertBookAbroadCommentLike',
method: 'POST',
data: { commentId }
@@ -120,7 +117,7 @@ export const bookApi = {
* @param commentId 评论ID
*/
unlikeComment(commentId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/delBookAbroadCommentLike',
method: 'POST',
data: { commentId }
@@ -132,7 +129,7 @@ export const bookApi = {
* @param commentId 评论ID
*/
deleteComment(commentId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/delBookAbroadComment',
method: 'POST',
data: { commentId }
@@ -144,7 +141,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getBookChapter(data: { bookId: number; language: string }) {
return client.request<IApiResponse<{ chapterList: IChapter[] }>>({
return mainClient.request<IApiResponse<{ chapterList: IChapter[] }>>({
url: 'bookAbroad/home/getBookChapter',
method: 'POST',
data
@@ -156,7 +153,7 @@ export const bookApi = {
* @param chapterId 章节ID
*/
getChapterContent(chapterId: number) {
return client.request<IApiResponse<{ contentPage: IChapterContent[] }>>({
return mainClient.request<IApiResponse<{ contentPage: IChapterContent[] }>>({
url: 'bookAbroad/home/getBookChapterContent',
method: 'POST',
data: { chapterId }
@@ -168,7 +165,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getReadProgress(bookId: number) {
return client.request<IApiResponse<{ bookReadRate: IReadProgress | null }>>({
return mainClient.request<IApiResponse<{ bookReadRate: IReadProgress | null }>>({
url: 'bookAbroad/home/getBookReadRate',
method: 'POST',
data: { bookId }
@@ -182,7 +179,7 @@ export const bookApi = {
* @param contentId 内容ID
*/
saveReadProgress(bookId: number, chapterId: number, contentId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/home/insertBookReadRate',
method: 'POST',
data: { bookId, chapterId, contentId }
@@ -196,7 +193,7 @@ export const bookApi = {
* @param contentId 内容ID
*/
getBookLanguages(bookId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'bookAbroad/home/getBookLanguage',
method: 'POST',
data: { bookId }
@@ -208,7 +205,7 @@ export const bookApi = {
* @param chapterId 章节ID
*/
getChapterContentListen(chapterId: number) {
return client.request<IApiResponse<{ bookChapterContents: any[] }>>({
return mainClient.request<IApiResponse<{ bookChapterContents: any[] }>>({
url: 'bookAbroad/home/getBookChapterContentListen',
method: 'POST',
data: { chapterId }
@@ -220,7 +217,7 @@ export const bookApi = {
* @param bookId 书籍ID
*/
getBookGoods(bookId: number) {
return client.request<IApiResponse<{ goodsList: IGoods[] }>>({
return mainClient.request<IApiResponse<{ goodsList: IGoods[] }>>({
url: 'bookAbroad/home/getProductListForBook',
method: 'POST',
data: { bookId }

21
api/modules/book_home.ts
View File

@@ -1,6 +1,5 @@
// api/modules/home.ts
import { createRequestClient } from '../request'
import { SERVICE_MAP } from '../config'
import { mainClient, skeletonClient } from '@/api/clients'
import type {
IMyBooksResponse,
IRecommendBooksResponse,
@@ -10,17 +9,15 @@ import type {
ISearchResponse
} from '@/types/book'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
/**
* 首页相关API
*/
export const homeApi = {
export const bookHomeApi = {
/**
* 获取VIP信息
*/
getVipInfo() {
return client.request<IVipInfoResponse>({
return mainClient.request<IVipInfoResponse>({
url: 'bookAbroad/home/getVipInfo',
method: 'POST',
data: {}
@@ -33,7 +30,7 @@ export const homeApi = {
* @param limit 每页数量
*/
getMyBooks(current: number, limit: number) {
return client.request<IMyBooksResponse>({
return skeletonClient.request<IMyBooksResponse>({
url: 'bookAbroad/home/getMyBooks',
method: 'POST',
data: { current, limit }
@@ -44,7 +41,7 @@ export const homeApi = {
* 获取推荐图书
*/
getRecommendBooks() {
return client.request<IRecommendBooksResponse>({
return skeletonClient.request<IRecommendBooksResponse>({
url: 'bookAbroad/home/getRecommendBooks',
method: 'POST',
data: {}
@@ -56,7 +53,7 @@ export const homeApi = {
* @param type 0: 分类标签, 1: 活动标签
*/
getBookLabelList(type: number) {
return client.request<ILabelListResponse>({
return skeletonClient.request<ILabelListResponse>({
url: 'bookAbroad/home/getBookAbroadLableList',
method: 'POST',
data: { type }
@@ -68,7 +65,7 @@ export const homeApi = {
* @param pid 父级标签ID
*/
getSubLabelList(pid: number) {
return client.request<ILabelListResponse>({
return skeletonClient.request<ILabelListResponse>({
url: 'bookAbroad/home/getBookAbroadLableListByPid',
method: 'POST',
data: { pid }
@@ -80,7 +77,7 @@ export const homeApi = {
* @param lableId 标签ID（注意：原接口参数名为 lableId）
*/
getBooksByLabel(lableId: number) {
return client.request<IBookListResponse>({
return skeletonClient.request<IBookListResponse>({
url: 'bookAbroad/home/getAbroadBookListByLable',
method: 'POST',
data: { lableId }
@@ -96,7 +93,7 @@ export const homeApi = {
page: number,
limit: number,
}) {
return client.request<ISearchResponse>({
return mainClient.request<ISearchResponse>({
url: 'bookAbroad/home/searchBook',
method: 'POST',
data

43
api/modules/course.ts
View File

@@ -1,9 +1,8 @@
// api/modules/course.ts
import { createRequestClient } from '../request'
import { SERVICE_MAP } from '../config'
import { skeletonClient, mainClient } from '@/api/clients/index'
import type { IApiResponse } from '../types'
import type {
ICourseMedicalTreeResponse,
ICourseCategoryResponse,
IUserLateCourseListResponse,
IMarketCourseListResponse,
ICourseDetailResponse,
@@ -16,10 +15,6 @@ import type { ISearchRequest, ISearchResponse } from '@/types/search'
import type { ICommentListResponse, IAddCommentResponse, IComment } from '@/types/comment'
import { useUserStore } from '@/stores/user'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
/**
* 课程相关API
*/
@@ -29,7 +24,7 @@ export const courseApi = {
* @returns 分类数据
*/
getCourseMedicalTree() {
return client.request<ICourseMedicalTreeResponse>({
return mainClient.request<ICourseCategoryResponse>({
url: 'medical/home/getCourseMedicalTree',
method: 'POST',
data: {}
@@ -41,7 +36,7 @@ export const courseApi = {
* @returns 观看记录列表
*/
getUserLateCourseList() {
return client.request<IUserLateCourseListResponse>({
return mainClient.request<IUserLateCourseListResponse>({
url: 'medical/home/getUserLateCourseList',
method: 'POST',
data: {}
@@ -61,7 +56,7 @@ export const courseApi = {
limit: number
}) {
const userStore = useUserStore()
return client.request<IMarketCourseListResponse>({
return mainClient.request<IMarketCourseListResponse>({
url: userStore.token ? 'medical/home/getMarketCourseList' : 'visitor/getMarketCourseList',
method: 'POST',
data
@@ -74,7 +69,7 @@ export const courseApi = {
* @returns 搜索结果
*/
searchData(data: ISearchRequest) {
return client.request<ISearchResponse>({
return mainClient.request<ISearchResponse>({
url: 'bookAbroad/home/searchCourse',
method: 'POST',
data
@@ -86,7 +81,7 @@ export const courseApi = {
* @param id 课程ID
*/
getCourseDetail(id: number) {
return client.request<ICourseDetailResponse>({
return skeletonClient.request<ICourseDetailResponse>({
url: 'sociology/course/getCourseDetail',
method: 'POST',
data: { id }
@@ -98,7 +93,7 @@ export const courseApi = {
* @param id 目录ID
*/
getCatalogueChapterList(id: number) {
return client.request<IChapterListResponse>({
return skeletonClient.request<IChapterListResponse>({
url: 'sociology/course/getCourseCatalogueChapterList',
method: 'POST',
data: { id }
@@ -110,7 +105,7 @@ export const courseApi = {
* @param id 章节ID
*/
getChapterDetail(id: number) {
return client.request<IChapterDetailResponse>({
return skeletonClient.request<IChapterDetailResponse>({
url: 'sociology/course/getCourseCatalogueChapterDetail',
method: 'POST',
data: { id, load: false }
@@ -122,7 +117,7 @@ export const courseApi = {
* @param catalogueId 目录ID
*/
startStudyForMF(catalogueId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'sociology/course/startStudyForMF',
method: 'POST',
data: { catalogueId }
@@ -134,7 +129,7 @@ export const courseApi = {
* @param id 目录ID
*/
getProductListForCourse(id: number) {
return client.request<IProductListResponse>({
return mainClient.request<IProductListResponse>({
url: 'sociology/product/getProductListForCourse',
method: 'POST',
data: { id }
@@ -146,7 +141,7 @@ export const courseApi = {
* @param courseCatalogueId 目录ID
*/
checkRenewPayment(courseCatalogueId: number) {
return client.request<IApiResponse<{ canRelearn: boolean }>>({
return skeletonClient.request<IApiResponse<{ canRelearn: boolean }>>({
url: 'common/courseRelearn/courseCatalogueCanRelearn',
method: 'POST',
data: { courseCatalogueId }
@@ -158,7 +153,7 @@ export const courseApi = {
* @param catalogueId 目录ID
*/
getRenewProductList(catalogueId: number) {
return client.request<IProductListResponse>({
return mainClient.request<IProductListResponse>({
url: 'common/courseRelearn/relearnShopProductList',
method: 'POST',
data: { catalogueId }
@@ -173,7 +168,7 @@ export const courseApi = {
* @param userId 用户ID
*/
getCourseComments(courseId: number, page: number, limit: number, userId: number) {
return client.request<ICommentListResponse>({
return mainClient.request<ICommentListResponse>({
url: 'common/courseGuestbook/getCourseGuestbookList',
method: 'POST',
data: { courseId, page, limit, userId, chapterId: '' }
@@ -194,7 +189,7 @@ export const courseApi = {
content: string
images: string
}) {
return client.request<IAddCommentResponse>({
return mainClient.request<IAddCommentResponse>({
url: 'common/courseGuestbook/addCourseGuestbook',
method: 'POST',
data
@@ -207,7 +202,7 @@ export const courseApi = {
* @param guestbookId 留言ID
*/
likeComment(userId: number, guestbookId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'common/courseGuestbook/addCourseGuestbookSupport',
method: 'POST',
data: { userId, guestbookId }
@@ -220,7 +215,7 @@ export const courseApi = {
* @param guestbookId 留言ID
*/
unlikeComment(userId: number, guestbookId: number) {
return client.request<IApiResponse>({
return mainClient.request<IApiResponse>({
url: 'common/courseGuestbook/cancelCourseGuestbookSupport',
method: 'POST',
data: { userId, guestbookId }
@@ -232,7 +227,7 @@ export const courseApi = {
* @param courseId 课程ID
*/
checkCourseVip(courseId: number) {
return client.request<IApiResponse<{ userVip: IVipInfo | null }>>({
return skeletonClient.request<IApiResponse<{ userVip: IVipInfo | null }>>({
url: 'common/userVip/ownCourseCatalogueByVip',
method: 'POST',
data: { courseId }
@@ -244,7 +239,7 @@ export const courseApi = {
* @param courseId 课程ID
*/
getCourseVipModule(courseId: number) {
return client.request<IApiResponse<{ list: string[] }>>({
return skeletonClient.request<IApiResponse<{ list: string[] }>>({
url: 'common/userVip/getCourseVipModule',
method: 'POST',
data: { courseId }

9
api/modules/video.ts
View File

@@ -3,8 +3,7 @@ import { createRequestClient } from '../request'
import { SERVICE_MAP } from '../config'
import type { IApiResponse } from '../types'
import type { IVideoCheckResponse } from '@/types/video'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
import { skeletonClient } from '@/api/clients'
/**
* 视频相关API
@@ -18,7 +17,7 @@ export const videoApi = {
checkVideo(data: {
id: number
}) {
return client.request<IVideoCheckResponse>({
return skeletonClient.request<IVideoCheckResponse>({
url: 'sociology/course/checkVideo',
method: 'POST',
data
@@ -34,7 +33,7 @@ export const videoApi = {
videoId: number
position: number
}) {
return client.request<IApiResponse>({
return skeletonClient.request<IApiResponse>({
url: 'sociology/course/saveCoursePosition',
method: 'POST',
data
@@ -51,7 +50,7 @@ export const videoApi = {
videoId: number
sort: number
}) {
return client.request<IApiResponse>({
return skeletonClient.request<IApiResponse>({
url: 'medical/course/addErrorCourse',
method: 'POST',
data

1
api/types.d.ts vendored
View File

@@ -15,6 +15,7 @@ export interface IApiResponse<T = any> {
*/
export interface IRequestOptions extends UniApp.RequestOptions {
// 允许扩展额外字段（例如 FILE 上传专用等）
headers?: Record<string, string>;
maxSize?: number;
files?: Array<{ name: string; uri: string; fileType?: string }>;
}

103
components/Skeleton/Skeleton.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<view>
<template v-if="loading">
<slot name="loading-top" />
<component v-if="theme" :is="components[theme]" :size="size" :count="count" />
<slot name="loading-bottom" />
</template>
<template v-else>
<slot v-if="data" name="content" :data="data" />
<slot v-else name="error" />
</template>
</view>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import ImageText from './templates/ImageText.vue'
import LineList from './templates/LineList.vue'
import BookCard from './templates/BookCard.vue'
import ImageCard from './templates/ImageCard.vue'
import BookInfo from './templates/BookInfo.vue'
// 注册组件
const components = {
'none': () => null,
'image-text': ImageText,
'line-list': LineList,
'image-card': ImageCard,
'book-card': BookCard,
'book-info': BookInfo,
}
type RequestFn = () => Promise<any>
type ThemeType = keyof typeof components
const props = withDefaults(defineProps<{
theme?: ThemeType
request: RequestFn | RequestFn[]
auto?: boolean,
size?: 'small' | 'medium' | 'large' | any[]
count?: number
}>(), {
theme: 'none',
auto: true,
count: 1
})
const emit = defineEmits(['success', 'error', 'complete'])
const requestFnType = ref('single')
const requestList = computed<RequestFn[]>(() => {
if (Array.isArray(props.request)) {
requestFnType.value = 'multi'
return props.request
}
requestFnType.value = 'single'
return [props.request]
})
const loading = ref(true)
const data = ref<any>(null)
const run = async (methods?: RequestFn[]) => {
loading.value = true
const reqMethods = methods || requestList.value
try {
// await new Promise(resolve => setTimeout(resolve, 3000))
const results = await Promise.all(
reqMethods.map(fn => fn())
)
// 将每个请求的结果处理成 key-value 格式
const resolvedData: Record<string, any> = {}
reqMethods.forEach((fn, index) => {
const key = fn.name || `request_${index}`
resolvedData[key] = results[index]
})
data.value = requestFnType.value === 'single' ? results[0] : resolvedData
emit('success', data.value)
} catch (err) {
emit('error', err)
} finally {
loading.value = false
}
}
const reload = (methods?: RequestFn[]) => {
run(methods)
}
onMounted(() => {
if (props.auto) {
run()
}
})
defineExpose({
reload,
loading
})
</script>
<style lang="scss" scoped>
</style>

15
components/Skeleton/templates/BookCard.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<view>
<wd-skeleton :row-col="info" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const count = 10
const info = Array.from({ length: count }, (_, index) => ({ height: '20px' }))
</script>
<style lang="scss" scoped>
</style>

31
components/Skeleton/templates/BookInfo.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<view>
<wd-skeleton :row-col="info" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const info = [
{ width: '300rpx', height: '400rpx' },
{ width: '600rpx', height: '60rpx' },
{ width: '180rpx', height: '40rpx' },
[{ width: '180rpx', height: '120rpx' }, { width: '180rpx', height: '120rpx' }, { width: '180rpx', height: '120rpx' }],
{ width: '700rpx', height: '40rpx' },
{ width: '700rpx', height: '40rpx' },
{ width: '700rpx', height: '40rpx' },
{ width: '700rpx', height: '40rpx' }
]
</script>
<style lang="scss" scoped>
:deep(.wd-skeleton__content) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.wd-skeleton__row {
gap: 20rpx;
}
}
</style>

16
components/Skeleton/templates/ImageCard.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<view>
<wd-skeleton theme="image" :row-col="list" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const props = defineProps<{
size?: any[],
count: number
}>()
const list = Array.from({ length: props.count }, (_, index) => (props.size || []))
</script>
<style lang="scss" scoped>
</style>

17
components/Skeleton/templates/ImageText.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<view>
<wd-skeleton :row-col="info" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const info = [
{ height: '220px' }, 1, 1,
[{ width: '93px' }]
]
</script>
<style lang="scss" scoped>
</style>

15
components/Skeleton/templates/LineList.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<view>
<wd-skeleton :row-col="info" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const count = 10
const info = Array.from({ length: count }, (_, index) => ({ height: '20px' }))
</script>
<style lang="scss" scoped>
</style>

2
components/video-player/composables/useVideoAPI.ts
View File

@@ -31,7 +31,7 @@ export function useVideoAPI() {
} catch (err: any) {
console.error('Failed to fetch video info:', err)
error.value = {
type: 'API_ERROR',
type: 'API_ERROR' as VideoErrorType,
message: err.message || '获取视频信息失败，请稍后重试'
}
return null

248
pages/book/detail.vue
View File

@@ -3,82 +3,76 @@
<!-- 导航栏 -->
<nav-bar :title="$t('bookDetails.title')"></nav-bar>
<scroll-view
scroll-y
class="detail-scroll"
:style="{ height: scrollHeight + 'px' }"
<Skeleton
ref="bookInfoSkeleton"
theme="book-info"
class="p-3"
:request="[getBookInfo, getBookReadCount]"
@success="getBookInfoSuccess"
>
<!-- 书籍信息 -->
<view class="book-info">
<image :src="bookInfo.images" class="cover" mode="aspectFill" />
<text class="title">{{ bookInfo.name }}</text>
<text class="author">{{ $t('bookDetails.authorName') }}{{ bookInfo.author?.authorName }}</text>
<!-- 统计信息 -->
<view class="stats">
<view class="stat-item">
<image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
<text>{{ readCount }}{{ $t('bookHome.readingCount') }}</text>
</view>
<view class="divider" />
<view class="stat-item">
<image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
<text>{{ listenCount }}{{ $t('bookHome.listenCount') }}</text>
</view>
<view class="divider" />
<view class="stat-item">
<image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
<text>{{ buyCount }}{{ $t('bookHome.purchased') }}</text>
</view>
</view>
</view>
<!-- 简介 -->
<view class="introduction">
<text class="section-title">{{ $t('bookDetails.introduction') }}</text>
<text class="content">{{ bookInfo.author?.introduction }}</text>
</view>
<!-- 书评列表 (非iOS) -->
<!-- <view v-if="!isIOS" class="comments-section">
<view class="section-header">
<text class="section-title">{{ $t('bookDetails.message') }}</text>
<view v-if="commentList.length > 0" class="more-link" @click="goToReview">
<text>{{ $t('bookDetails.more') }}</text>
<wd-icon name="arrow-right" size="14px" />
</view>
</view>
<view class="comment-wrapper">
<CommentList
v-if="commentList.length > 0"
:comments="commentList.slice(0, 2)"
/>
<text v-else class="empty-text">{{ nullText }}</text>
</view>
</view> -->
<!-- 相关推荐 -->
<view class="related-books">
<text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
<scroll-view v-if="relatedBooks.length > 0" scroll-x class="book-scroll">
<view class="book-list">
<view
class="book-item"
v-for="item in relatedBooks"
:key="item.id"
@click="goToDetail(item.id)"
>
<image :src="item.images" mode="aspectFill" />
<text>{{ item.name }}</text>
<template #content="{ data }">
<!-- 书籍信息 -->
<view class="book-info">
<image :src="data.getBookInfo.bookInfo.images" class="cover" mode="aspectFill" />
<text class="title">{{ data.getBookInfo.bookInfo.name }}</text>
<text class="author">{{ $t('bookDetails.authorName') }}{{ data.getBookInfo.bookInfo.author?.authorName }}</text>
<!-- 统计信息 -->
<view class="stats">
<view class="stat-item">
<image src="@/static/icon/icon_look_c.png" mode="aspectFit" />
<text>{{ data.getBookReadCount.readCount }}{{ $t('bookHome.readingCount') }}</text>
</view>
<view class="divider" />
<view class="stat-item">
<image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
<text>{{ data.getBookReadCount.listenCount }}{{ $t('bookHome.listenCount') }}</text>
</view>
<view class="divider" />
<view class="stat-item">
<image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
<text>{{ data.getBookReadCount.buyCount }}{{ $t('bookHome.purchased') }}</text>
</view>
</view>
</scroll-view>
<text v-else class="empty-text">{{ nullBookText }}</text>
</view>
</scroll-view>
</view>
<!-- 简介 -->
<view class="introduction">
<text class="section-title">{{ $t('bookDetails.introduction') }}</text>
<text class="content">{{ data.getBookInfo.bookInfo.author?.introduction }}</text>
</view>
</template>
</Skeleton>
<!-- 相关推荐 -->
<view class="related-books">
<text class="section-title">{{ $t('bookDetails.relatedBooks') }}</text>
<Skeleton
theme="image-card"
:size="Array(4).fill({ height: '100px', width: '23%' })"
:request="getRecommendBook"
>
<template #content="{ data }">
<scroll-view v-if="data.bookList.length > 0" scroll-x class="book-scroll">
<view class="book-list">
<view
class="book-item"
v-for="item in data.bookList"
:key="item.id"
@click="goToDetail(item.id)"
>
<image :src="item.images" mode="aspectFill" />
<text>{{ item.name }}</text>
</view>
</view>
</scroll-view>
<text v-else class="empty-text">{{ $t('common.data_null') }}</text>
</template>
</Skeleton>
</view>
<!-- 底部操作栏 -->
<view class="action-bar">
<view v-if="bookInfoLoading" class="action-bar">
<template v-if="bookInfo.isBuy || hasVip">
<view class="action-btn read" @click="goToReader">
<text>{{ $t('bookDetails.startReading') }}</text>
@@ -120,13 +114,12 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { t } from '@/utils/i18n'
import { bookApi } from '@/api/modules/book'
import { useUserStore } from '@/stores/user'
import type { IBookDetail, IBook, IComment } from '@/types/book'
import type { IBookDetail } from '@/types/book'
import type { IGoods } from '@/types/order'
import GoodsSelector from '@/components/order/GoodsSelector.vue'
import CommentList from '@/components/book/CommentList.vue'
import Skeleton from '@/components/Skeleton/Skeleton.vue'
const userStore = useUserStore()
@@ -138,6 +131,8 @@ const pageFrom = ref('')
const hasVip = computed(() => userStore.userInfo?.userEbookVip?.length > 0 || false)
// 数据状态
const bookInfoSkeleton = ref()
const bookInfoLoading = ref(false)
const bookInfo = ref<IBookDetail>({
id: 0,
name: '',
@@ -147,23 +142,7 @@ const bookInfo = ref<IBookDetail>({
freeChapterCount: 0
})
const goodsList = ref<IGoods[]>([])
const readCount = ref(0)
const listenCount = ref(0)
const buyCount = ref(0)
const commentList = ref<IComment[]>([])
const relatedBooks = ref<IBook[]>([])
const nullText = ref('')
const nullBookText = ref('')
const purchaseVisible = ref(false)
const scrollHeight = ref(0)
// 计算属性
const isIOS = computed(() => {
// #ifdef APP-PLUS
return uni.getSystemInfoSync().platform === 'ios'
// #endif
return false
})
// 生命周期
onLoad((options: any) => {
@@ -173,45 +152,23 @@ onLoad((options: any) => {
if (options.page) {
pageFrom.value = options.page
}
initScrollHeight()
loadBookCount()
loadRecommendBooks()
})
onShow(() => {
loadBookInfo()
loadGoodsInfo()
if (!isIOS.value) {
loadComments()
}
bookInfoSkeleton.value?.reload()
})
onMounted(() => {
initScrollHeight()
})
// 初始化滚动区域高度
function initScrollHeight() {
const systemInfo = uni.getSystemInfoSync()
const statusBarHeight = systemInfo.statusBarHeight || 0
let navBarHeight = 44
if (systemInfo.model.includes('iPhone')) {
const modelNumber = parseInt(systemInfo.model.match(/\d+/)?.[0] || '0')
if (modelNumber >= 11) {
navBarHeight = 48
}
}
const totalNavHeight = statusBarHeight + navBarHeight
const actionBarHeight = 110 // rpx转px约55
scrollHeight.value = systemInfo.windowHeight - totalNavHeight - actionBarHeight / 2
}
// 加载书籍详情
async function loadBookInfo() {
const res = await bookApi.getBookInfo(bookId.value)
bookInfo.value = res.bookInfo
const getBookInfo = () => bookApi.getBookInfo(bookId.value)
const getBookInfoSuccess = (res: any) => {
bookInfoLoading.value = true
bookInfo.value = res.getBookInfo.bookInfo || {}
}
// 加载统计数据
const getBookReadCount = () => bookApi.getBookReadCount(bookId.value)
// 加载推荐书籍
const getRecommendBook = () => bookApi.getRecommendBook(bookId.value)
// 加载购买商品信息
async function loadGoodsInfo() {
@@ -219,38 +176,9 @@ async function loadGoodsInfo() {
goodsList.value = res.productList || []
}
// 加载统计数据
async function loadBookCount() {
const res = await bookApi.getBookReadCount(bookId.value)
if (res.code === 0) {
readCount.value = res.readCount || 0
listenCount.value = res.listenCount || 0
buyCount.value = res.buyCount || 0
}
}
// 加载评论
async function loadComments() {
const res = await bookApi.getBookComments(bookId.value, 1, 10)
if (res.commentsTree && res.commentsTree.length > 0) {
commentList.value = res.commentsTree
} else {
nullText.value = t('common.data_null')
}
}
// 加载推荐书籍
async function loadRecommendBooks() {
const res = await bookApi.getRecommendBook(bookId.value)
if (res.bookList && res.bookList.length > 0) {
relatedBooks.value = res.bookList
} else {
nullBookText.value = t('common.data_null')
}
}
// 显示购买弹窗
function showPurchasePopup() {
async function showPurchasePopup() {
await loadGoodsInfo()
purchaseVisible.value = true
}
@@ -281,12 +209,6 @@ function goToListen() {
})
}
function goToReview() {
uni.navigateTo({
url: `/pages/book/review?bookId=${bookId.value}&page=0`
})
}
function goToDetail(id: number) {
uni.navigateTo({
url: `/pages/book/detail?id=${id}`
@@ -301,7 +223,7 @@ function goToDetail(id: number) {
.book-info {
text-align: center;
padding: 40rpx 30rpx;
padding-bottom: 40rpx;
.cover {
width: 300rpx;
@@ -359,9 +281,7 @@ function goToDetail(id: number) {
}
}
.introduction {
padding: 40rpx 30rpx 0;
.introduction {
.section-title {
display: block;
font-size: 34rpx;
@@ -410,7 +330,7 @@ function goToDetail(id: number) {
}
.related-books {
padding: 40rpx 30rpx 40rpx;
padding: 0rpx 30rpx calc(40rpx + 110rpx);
.section-title {
display: block;

494
pages/book/index.vue
View File

@@ -24,189 +24,257 @@
<!-- 我的书单 & 推荐图书模块 -->
<view class="mine-block">
<!-- 我的书单 -->
<view class="mine-1">
<text class="mine-title">{{ $t('bookHome.block1') }}</text>
<view
v-if="myBooksList.length > 0"
class="mine-more"
@click="handleMoreClick"
>
{{ $t('bookHome.more') }}
<image src="@/static/icon/icon_right.png" />
</view>
<view v-if="myBooksList.length > 0" class="mine-1-list">
<view
v-for="(item, index) in myBooksList"
:key="index"
class="mine-item"
@click="handleMyBookClick(item.id)"
>
<image :src="item.images" />
<text>{{ item.name }}</text>
<Skeleton
ref="myBookSkeleton"
theme="image-card"
:request="getMyBooks"
:size="[{ height:'140px' }]"
class="flex-1 w-[50%]"
>
<template #content="{ data }" >
<view class="mine-1">
<text class="mine-title">{{ $t('bookHome.block1') }}</text>
<view
v-if="data.page.records.length > 0"
class="mine-more"
@click="handleMoreClick"
>
{{ $t('bookHome.more') }}
<image src="@/static/icon/icon_right.png" />
</view>
<view v-if="data.page.records.length > 0" class="mine-1-list">
<view
v-for="(item, index) in data.page.records"
:key="index"
class="mine-item"
@click="handleMyBookClick(item.id)"
>
<image :src="item.images" />
<text>{{ item.name }}</text>
</view>
</view>
<text v-else class="zanwu">{{ $t('common.data_null') }}</text>
</view>
</view>
<text v-else class="zanwu">{{ $t('common.data_null') }}</text>
</view>
</template>
</Skeleton>
<!-- 推荐图书 -->
<view class="mine-2">
<text class="mine-title">{{ $t('bookHome.block2') }}</text>
<swiper
v-if="recommendBooksList.length > 0"
autoplay
:interval="3000"
:duration="500"
class="recommend-list"
>
<swiper-item
v-for="(item, index) in recommendBooksList"
:key="index"
class="recommend-item"
@click="handleBookClick(item.id)"
>
<image :src="item.images" width="100%" height="100%" />
<text>{{ item.name }}</text>
</swiper-item>
</swiper>
</view>
<Skeleton
ref="recommendBooksSkeleton"
theme="image-card"
:request="getRecommendBooks"
:size="[{ height:'140px' }]"
class="flex-1 w-[50%]"
>
<template #content="{ data }" >
<view class="mine-2">
<text class="mine-title">{{ $t('bookHome.block2') }}</text>
<swiper
v-if="data.books.length > 0"
autoplay
:interval="3000"
:duration="500"
class="recommend-list"
>
<swiper-item
v-for="(item, index) in data.books"
:key="index"
class="recommend-item"
@click="handleBookClick(item.id)"
>
<image :src="item.images" width="100%" height="100%" />
<text>{{ item.name }}</text>
</swiper-item>
</swiper>
</view>
</template>
</Skeleton>
</view>
<!-- 活动图书模块 -->
<view v-if="showActivity" class="activity-block">
<text class="activity-title">{{ $t('bookHome.activityTitle') }}</text>
<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
<view class="activity-label-list">
<view
v-for="(item, index) in activityLabelList"
:key="index"
:class="[
'activity-label-item',
currentActivityIndex === index ? 'active-label' : ''
]"
@click="handleActivityLabelClick(item.id, index)"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
<scroll-view
v-if="activityList.length > 0"
class="scroll-view"
scroll-x
:show-scrollbar="false"
<view class="activity-block">
<Skeleton
theme="image-card"
:size="Array(5).fill({ height:'28px', width: '18%' })"
:request="getActivityLabels"
@success="getActivityLabelsSuccess"
>
<view class="activity-list">
<view
v-for="(item, index) in activityList"
:key="index"
class="activity-item"
@click="handleBookClick(item.bookId)"
<template #loading-top>
<wd-skeleton :row-col="[{ width: '45%', height: '35px' }]" animation="gradient" class="mb-2.5!" />
</template>
<template #content>
<text class="activity-title">{{ $t('bookHome.activityTitle') }}</text>
<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
<view class="activity-label-list">
<view
v-for="(item, index) in activityLabelList"
:key="index"
:class="[
'activity-label-item',
currentActivityIndex === index ? 'active-label' : ''
]"
@click="handleActivityLabelClick(item.id, index)"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
</template>
</Skeleton>
<Skeleton
ref="activityBooksSkeleton"
theme="image-card"
:auto="false"
:size="Array(4).fill({ height:'100px', width: '23%' })"
class="mt-[20rpx]!"
:request="getActivityBooks"
>
<template #content="{ data }">
<scroll-view
v-if="data.bookList.length > 0"
class="scroll-view"
scroll-x
:show-scrollbar="false"
>
<image :src="item.images" />
<text class="activity-text">{{ item.name }}</text>
</view>
</view>
</scroll-view>
<text v-else class="zanwu" style="padding: 80rpx 0">{{ $t('global.dataNull') }}</text>
<view class="activity-list">
<view
v-for="(item, index) in data.bookList"
:key="index"
class="activity-item"
@click="handleBookClick(item.bookId)"
>
<image :src="item.images" />
<text class="activity-text">{{ item.name }}</text>
</view>
</view>
</scroll-view>
<text v-else class="zanwu" style="padding: 80rpx 0">{{ $t('global.dataNull') }}</text>
</template>
</Skeleton>
</view>
<!-- 分类图书模块 -->
<view v-if="showCategory" class="book-block">
<!-- 一级分类标签 -->
<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
<view class="book-tab-one">
<view
v-for="(item, index) in categoryLevel1List"
:key="index"
:class="[
'tab-one-item',
currentLevel1Index === index ? 'tab-one-active' : ''
]"
@click="handleCategoryLevel1Click(item.id, index)"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
<!-- 二级分类标签 -->
<scroll-view
v-if="categoryLevel2List.length > 0"
class="scroll-view"
scroll-x
:show-scrollbar="false"
style="background: #fff; margin-top: 15rpx"
<view class="book-block">
<Skeleton
ref="categoryLevel1LabelSkeleton"
theme="image-card"
:size="Array(3).fill({ height:'75px', width: '32%' })"
:request="getCategoryLabels"
@success="getCategoryLabelsSuccess"
>
<view class="book-tab-two">
<view
v-for="(item, index) in categoryLevel2List"
:key="index"
:class="[
'tab-two-item',
currentLevel2Index === index ? 'tab-two-active' : ''
]"
@click="handleCategoryLevel2Click(item.id, index)"
<template #content>
<!-- 一级分类标签 -->
<scroll-view class="scroll-view" scroll-x :show-scrollbar="false">
<view class="book-tab-one">
<view
v-for="(item, index) in categoryLevel1List"
:key="index"
:class="[
'tab-one-item',
currentLevel1Index === index ? 'tab-one-active' : ''
]"
@click="handleCategoryLevel1Click(item.id, index)"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
</template>
</Skeleton>
<Skeleton
ref="categoryLevel2LabelSkeleton"
theme="image-card"
:auto="false"
:size="Array(4).fill({ height:'30px', width: '24%' })"
class="mt-[20rpx]!"
:request="getSubLabels"
@success="getSubLabelsSuccess"
>
<template #content>
<!-- 二级分类标签 -->
<scroll-view
v-if="categoryLevel2List.length > 0"
class="scroll-view"
scroll-x
:show-scrollbar="false"
style="background: #fff; margin-top: 15rpx"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
<view class="book-tab-two">
<view
v-for="(item, index) in categoryLevel2List"
:key="index"
:class="[
'tab-two-item',
currentLevel2Index === index ? 'tab-two-active' : ''
]"
@click="handleCategoryLevel2Click(item.id, index)"
>
<text>{{ item.title }}</text>
</view>
</view>
</scroll-view>
</template>
</Skeleton>
<!-- 分类图书列表 -->
<view v-if="categoryBookList.length > 0" class="book-list">
<view
v-for="(item, index) in categoryBookList"
:key="index"
class="book-item"
@click="handleBookClick(item.bookId)"
>
<image :src="item.images" />
<text class="book-text">{{ item.name }}</text>
<BookPrice :data="item" class="book-price-container" />
</view>
</view>
<text v-else class="zanwu" style="padding: 100rpx 0">{{ $t('global.dataNull') }}</text>
<Skeleton
ref="categoryBooksSkeleton"
theme="image-card"
:auto="false"
:size="Array(2).fill({ height:'240px', width: '49%' })"
:count="3"
class="mt-[20rpx]!"
:request="getBooksByLabel"
>
<template #content="{ data }">
<view v-if="data.bookList.length > 0" class="book-list">
<view
v-for="(item, index) in data.bookList"
:key="index"
class="book-item"
@click="handleBookClick(item.bookId)"
>
<image :src="item.images" />
<text class="book-text">{{ item.name }}</text>
<BookPrice :data="item" class="book-price-container" />
</view>
</view>
<text v-else class="zanwu" style="padding: 100rpx 0">{{ $t('global.dataNull') }}</text>
</template>
</Skeleton>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { homeApi } from '@/api/modules/book_home'
import { bookHomeApi } from '@/api/modules/book_home'
import { getNotchHeight } from '@/utils/system'
import { useUserStore } from '@/stores/user'
import BookPrice from '@/components/book/BookPrice.vue'
import type {
IBook,
IBookWithStats,
ILabel,
IVipInfo
} from '@/types/book'
import type { ILabel } from '@/types/book'
const userStore = useUserStore()
// 状态定义
const showMyBooks = ref(false)
const showActivity = ref(false)
const showCategory = ref(false)
// 我的书单
const myBooksList = ref<IBook[]>([])
const myBookSkeleton = ref()
// 推荐图书
const recommendBooksList = ref<IBook[]>([])
const recommendBooksSkeleton = ref()
// 活动图书
const activityBooksSkeleton = ref()
const activityLabelList = ref<ILabel[]>([])
const activityList = ref<IBookWithStats[]>([])
const currentActivityIndex = ref(0)
// 分类图书
const categoryLevel1LabelSkeleton = ref()
const categoryLevel2LabelSkeleton = ref()
const categoryBooksSkeleton = ref()
const categoryLevel1List = ref<ILabel[]>([])
const categoryLevel2List = ref<ILabel[]>([])
const categoryBookList = ref<IBookWithStats[]>([])
const currentLevel1Index = ref(0)
const currentLevel2Index = ref(0)
@@ -216,96 +284,62 @@ const vipInfo = computed(() => userStore.userInfo?.userEbookVip?.[0] || null)
/**
* 获取我的书单
*/
const getMyBooks = async () => {
const res = await homeApi.getMyBooks(1, 10)
if (res && res.code === 0) {
showMyBooks.value = true
if (res.page.records && res.page.records.length > 0) {
myBooksList.value = res.page.records
}
} else {
// 未登录，跳转到登录页
uni.navigateTo({
url: '/pages/login/login'
})
}
}
const getMyBooks = () => bookHomeApi.getMyBooks(1, 10)
/**
* 获取推荐图书
*/
const getRecommendBooks = async () => {
const res = await homeApi.getRecommendBooks()
if (res.books && res.books.length > 0) {
recommendBooksList.value = res.books
}
}
const getRecommendBooks = () => bookHomeApi.getRecommendBooks()
/**
* 获取活动标签列表
* 获取活动图书
*/
const getActivityLabels = async () => {
const res = await homeApi.getBookLabelList(1)
showActivity.value = true
if (res.lableList && res.lableList.length > 0) {
activityLabelList.value = res.lableList
// 默认加载第一个标签的图书列表
await getBooksByLabel(res.lableList[0].id, 'activity')
}
// 获取活动图书标签列表
const getActivityLabels = () => bookHomeApi.getBookLabelList(1)
const getActivityLabelsSuccess = (res: any) => {
activityLabelList.value = res.lableList || []
activityBooksSkeleton.value.reload()
}
// 获取活动图书列表
const getActivityBooks = () => {
// 获取活动标签列表
const index = currentActivityIndex.value || 0
return bookHomeApi.getBooksByLabel(activityLabelList.value[index].id)
}
/**
* 获取分类标签列表
*/
const getCategoryLabels = async () => {
const res = await homeApi.getBookLabelList(0)
showCategory.value = true
if (res.lableList && res.lableList.length > 0) {
categoryLevel1List.value = res.lableList
// 默认加载第一个标签的二级标签
await getSubLabels(res.lableList[0].id, 0)
}
const getCategoryLabels = () => bookHomeApi.getBookLabelList(0)
const getCategoryLabelsSuccess = (res: any) => {
categoryLevel1List.value = res.lableList || []
currentLevel2Index.value = 0
categoryLevel2LabelSkeleton.value.reload()
}
/**
* 获取二级标签列表
*/
const getSubLabels = async (pid: number, index: number) => {
const res = await homeApi.getSubLabelList(pid)
currentLevel1Index.value = index
if (res.lableList && res.lableList.length > 0) {
categoryLevel2List.value = res.lableList
currentLevel2Index.value = 0
// 加载第一个二级标签的图书列表
await getBooksByLabel(res.lableList[0].id, 'category')
} else {
// 没有二级标签，直接加载一级标签的图书列表
categoryLevel2List.value = []
await getBooksByLabel(pid, 'category')
}
const getSubLabels = async () => {
await getCategoryLabels()
const pid = categoryLevel1List.value[currentLevel1Index.value]?.id || 0
return bookHomeApi.getSubLabelList(pid)
}
const getSubLabelsSuccess = (res: any) => {
categoryLevel2List.value = res.lableList || []
categoryBooksSkeleton.value.reload()
}
/**
* 根据标签获取图书列表
* 获取分类标签图书列表
*/
const getBooksByLabel = async (
labelId: number,
type: 'activity' | 'category'
) => {
const res = await homeApi.getBooksByLabel(labelId)
if (type === 'activity') {
if (res.bookList && res.bookList.length > 0) {
activityList.value = res.bookList
} else {
activityList.value = []
}
} else {
if (res.bookList && res.bookList.length > 0) {
categoryBookList.value = res.bookList
} else {
categoryBookList.value = []
}
}
const getBooksByLabel = () => {
// 获取当前需要加载的标签id
// 判断是否有一级标签当前选中值
const level1Id = categoryLevel1List.value[currentLevel1Index.value]?.id
// 判断是否有二级标签当前选中值
const level2Id = categoryLevel2List.value[currentLevel2Index.value]?.id
const labelId = level2Id || level1Id || 0
return bookHomeApi.getBooksByLabel(labelId)
}
/**
@@ -349,14 +383,17 @@ const handleMoreClick = () => {
*/
const handleActivityLabelClick = async (labelId: number, index: number) => {
currentActivityIndex.value = index
await getBooksByLabel(labelId, 'activity')
activityBooksSkeleton.value.reload()
}
/**
* 处理一级分类标签点击
*/
const handleCategoryLevel1Click = async (labelId: number, index: number) => {
await getSubLabels(labelId, index)
currentLevel1Index.value = index
currentLevel2Index.value = 0
categoryBooksSkeleton.value.loading = true
categoryLevel2LabelSkeleton.value.reload()
}
/**
@@ -364,27 +401,15 @@ const handleCategoryLevel1Click = async (labelId: number, index: number) => {
*/
const handleCategoryLevel2Click = async (labelId: number, index: number) => {
currentLevel2Index.value = index
await getBooksByLabel(labelId, 'category')
categoryBooksSkeleton.value.reload()
}
/**
* 页面加载
*/
onMounted(() => {
// 重置活动标签选中状态
currentActivityIndex.value = 0
showActivity.value = false
})
/**
* 页面显示
*/
onShow(() => {
// 刷新数据
getMyBooks()
getRecommendBooks()
getActivityLabels()
getCategoryLabels()
myBookSkeleton.value?.reload()
})
</script>
@@ -426,12 +451,12 @@ onShow(() => {
.mine-block {
padding: 20rpx;
display: flex;
gap: 20rpx;
align-items: center;
justify-content: space-between;
.mine-1,
.mine-2 {
width: 49%;
height: 290rpx;
border-radius: 15rpx;
padding: 30rpx;
@@ -584,7 +609,6 @@ onShow(() => {
.activity-list {
width: 100%;
margin-top: 20rpx;
padding-left: 10rpx;
display: flex;
align-items: center;
@@ -617,7 +641,6 @@ onShow(() => {
.book-block {
padding: 20rpx 20rpx 0;
.book-tab-one {
display: flex;
align-items: center;
@@ -700,7 +723,6 @@ onShow(() => {
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20rpx;
.book-item {
width: 49%;

6
pages/book/search.vue
View File

@@ -41,7 +41,7 @@
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { homeApi } from '@/api/modules/book_home'
import { bookHomeApi } from '@/api/modules/book_home'
import BookPrice from '@/components/book/BookPrice.vue'
import type { IBookWithStats, IVipInfo } from '@/types/home'
@@ -66,7 +66,7 @@ onLoad((options: any) => {
* 获取VIP信息
*/
const getVipInfo = async () => {
const res = await homeApi.getVipInfo()
const res = await bookHomeApi.getVipInfo()
vipInfo.value = res.vipInfo
}
@@ -81,7 +81,7 @@ const handleSearch = async () => {
loading.value = true
isEmpty.value = false
const res = await homeApi.searchBooks({
const res = await bookHomeApi.searchBooks({
title: keyword.value.trim(),
page: 1,
limit: 10,

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

@@ -6,8 +6,9 @@
<!-- 页面内容 -->
<view class="page-content">
<!-- 视频播放器 -->
<view v-if="videoList.length > 0" class="video-section">
<view class="video-section">
<VideoPlayer
v-if="videoList.length > 0"
ref="videoPlayerRef"
v-model:current-index="currentVideoIndex"
:video-list="videoList"
@@ -32,7 +33,7 @@
<view class="section-title">{{ $t('courseDetails.videoTeaching') }}</view>
<wd-radio-group v-model="currentVideoIndex" shape="button" >
<wd-radio v-for="(video, index) in videoList" :key="video.id" :value="index" class="mb-2!">
【{{ video.type == "2" ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
【{{ video.type == 2 ? $t('courseDetails.audio') : $t('courseDetails.video') }}】{{ index + 1 }}
</wd-radio>
</wd-radio-group>
</view>
@@ -74,7 +75,8 @@ import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { courseApi } from '@/api/modules/course'
import VideoPlayer from '@/components/video-player/index.vue'
import type { IChapterDetail, IVideo } from '@/types/course'
import type { IChapterDetail } from '@/types/course'
import type { IVideoInfo } from '@/types/video'
// 页面参数
const chapterId = ref<number>(0)
@@ -83,7 +85,7 @@ const chapterTitle = ref('')
// 页面数据
const chapterDetail = ref<IChapterDetail | null>(null)
const videoList = ref<IVideo[]>([])
const videoList = ref<IVideoInfo[]>([])
const currentVideoIndex = ref(0)
const activeVideoIndex = ref(0)
const currentTab = ref('chapterIntro')
@@ -141,6 +143,7 @@ const previewImage = (url: string) => {
.video-section {
background-color: #000;
height: 400rpx;
}
.info-section {

287
pages/course/details/components/CatalogueList.vue
View File

@@ -1,135 +1,147 @@
<template>
<view class="course-content-wrapper">
<view
v-if="catalogues.length > 1"
:class="['catalogue-list', userVip ? 'vip-style' : '']"
>
<view
v-for="(catalogue, index) in catalogues"
:key="catalogue.id"
:class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
@click="handleSelect(index)"
>
<text class="catalogue-title">{{ catalogue.title }}</text>
</view>
</view>
<view class="chapter-list">
<!-- 目录状态信息 -->
<view class="catalogue-status">
<view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
<view class="info-row">
<text v-if="userVip">
VIP畅学权益有效期截止到：{{ userVip.endTime }}
</text>
<template v-else>
<text v-if="!currentCatalogue.startTime">
当前目录还未开始学习
</text>
<text v-else>
课程有效期截止到：{{ currentCatalogue.endTime }}
</text>
<!-- <wd-button
v-if="currentCatalogue.startTime"
size="small"
@click="handleRenew"
>
续费
</wd-button> -->
</template>
<view>
<Skeleton ref="skeleton" theme="line-list" :request="[getChapters, checkRenewPayment]" :auto="false" @success="getDataSuccess">
<template #loading-top>
<wd-skeleton :row-col="[
[{ width: '45%', height: '35px' }, { width: '45%', height: '35px' }],
[{ width: '100%', height: '90px' }]
]" animation="gradient" class="mb-2.5! mt-5!" />
</template>
<template #content>
<view class="course-content-wrapper">
<view
v-if="catalogues.length > 1"
:class="['catalogue-list', userVip ? 'vip-style' : '']"
>
<view
v-for="(catalogue, index) in catalogues"
:key="catalogue.id"
:class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
@click="handleSelect(index)"
>
<text class="catalogue-title">{{ catalogue.title }}</text>
</view>
</view>
</view>
<!-- 未购买状态 -->
<view v-else-if="currentCatalogue?.type === 0" class="free-course">
<wd-button type="success" @click="handleGetFreeCourse">
{{ $t('courseDetails.free') }}
</wd-button>
</view>
<view v-else class="unpurchased-info">
<text class="tip-text">
{{ $t('courseDetails.unpurchasedTip') }}
</text>
<view class="action-btns">
<wd-button size="small" type="warning" @click="handlePurchase">
{{ $t('courseDetails.purchase') }}
</wd-button>
<!-- 如果是复读显示复读按钮 -->
<wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
{{ $t('courseDetails.relearn') }}
</wd-button>
<wd-button size="small" type="primary" @click="goToVip">
{{ $t('courseDetails.openVip') }}
</wd-button>
</view>
</view>
</view>
<view v-if="chapterList.length > 0" class="chapter-content">
<!-- VIP标识 -->
<view v-if="userVip" class="vip-badge">
<text>VIP畅学权益生效中</text>
</view>
<!-- 章节列表 -->
<view
v-for="(chapter, index) in chapterList"
:key="chapter.id"
class="chapter-item"
@click="handleChapterClick(chapter)"
>
<view class="chapter-content-wrapper">
<view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
<text class="chapter-title">{{ chapter.title }}</text>
<view class="chapter-list">
<!-- 目录状态信息 -->
<view class="catalogue-status">
<view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
<view class="info-row">
<text v-if="userVip">
VIP畅学权益有效期截止到：{{ userVip.endTime }}
</text>
<template v-else>
<text v-if="!currentCatalogue.startTime">
当前目录还未开始学习
</text>
<text v-else>
课程有效期截止到：{{ currentCatalogue.endTime }}
</text>
<!-- <wd-button
v-if="currentCatalogue.startTime"
size="small"
@click="handleRenew"
>
续费
</wd-button> -->
</template>
</view>
</view>
<!-- 试听标签 -->
<wd-tag
v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
type="success"
plain
size="small"
custom-class="chapter-tag"
<!-- 未购买状态 -->
<view v-else-if="currentCatalogue?.type === 0" class="free-course">
<wd-button type="success" @click="handleGetFreeCourse">
{{ $t('courseDetails.free') }}
</wd-button>
</view>
<view v-else class="unpurchased-info">
<text class="tip-text">
{{ $t('courseDetails.unpurchasedTip') }}
</text>
<view class="action-btns">
<wd-button size="small" type="warning" @click="handlePurchase">
{{ $t('courseDetails.purchase') }}
</wd-button>
<!-- 如果是复读显示复读按钮 -->
<wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
{{ $t('courseDetails.relearn') }}
</wd-button>
<wd-button size="small" type="primary" @click="goToVip">
{{ $t('courseDetails.openVip') }}
</wd-button>
</view>
</view>
</view>
<view v-if="chapterList.length > 0" class="chapter-content">
<!-- VIP标识 -->
<view v-if="userVip" class="vip-badge">
<text>VIP畅学权益生效中</text>
</view>
<!-- 章节列表 -->
<view
v-for="(chapter, index) in chapterList"
:key="chapter.id"
class="chapter-item"
@click="handleChapterClick(chapter)"
>
试听
</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 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) && currentCatalogue.type != 0" class="lock-icon">
<wd-icon name="lock-on" size="24px" color="#258feb" />
</view>
</view>
</view>
</view>
<!-- 锁定图标 -->
<view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
<wd-icon name="lock-on" size="24px" color="#258feb" />
<!-- 暂无章节 -->
<view v-else class="no-chapters">
<text>暂无章节内容</text>
</view>
</view>
</view>
</view>
<!-- 暂无章节 -->
<view v-else class="no-chapters">
<text>暂无章节内容</text>
</view>
</view>
</template>
</Skeleton>
<!-- 商品选择器 -->
<GoodsSelector
@@ -147,12 +159,15 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { courseApi } from '@/api/modules/course'
import GoodsSelector from '@/components/order/GoodsSelector.vue'
import Protocol from './Protocol.vue'
import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
import type { IGoods } from '@/types/order'
const skeleton = ref()
interface Props {
catalogues: ICatalogue[]
userVip: IVipInfo | null
@@ -207,33 +222,43 @@ const handleSelect = (index: number) => {
/**
* 获取当前目录的章节
*/
const getChapters = async () => {
const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
chapterList.value = res.chapterList || []
}
const getChapters = () => courseApi.getCatalogueChapterList(currentCatalogue.value.id)
/**
* 检查目录是否支持复读
*/
const checkRenewPayment = async () => {
if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
canRenlearn.value = renewRes.canRelearn || false
return courseApi.checkRenewPayment(currentCatalogue.value.id)
} else {
canRenlearn.value = false
return null
}
}
/**
* 获取数据完成后处理
*/
const getDataSuccess = (res: any) => {
const { getChapters, checkRenewPayment } = res
chapterList.value = getChapters.chapterList || []
canRenlearn.value = checkRenewPayment.canRelearn || false
}
/**
* 监听目录变化
*/
watch(() => props.catalogues, (newVal: ICatalogue[]) => {
if (newVal.length > 0) {
currentCatalogueIndex.value = 0
getChapters()
checkRenewPayment()
skeleton.value.reload()
}
}, { immediate: true, deep: true })
/**
* 刷新章节数据
*/
onShow(async () => {
skeleton.value && skeleton.value.reload()
})
// 购买
const handlePurchase = async () => {

2
pages/course/details/components/Protocol.vue
View File

@@ -37,8 +37,6 @@ const props = defineProps<{
visible: boolean
}>()
console.log(props.visible)
const showProtocol = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val)

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

@@ -13,11 +13,14 @@
</view>
<!-- 课程信息 -->
<CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
<Skeleton theme="image-text" :request="getCourseDetail" @success="getCourseDetailSuccess">
<template #content>
<CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
</template>
</Skeleton>
<!-- 课程内容包装器 -->
<CatalogueList
v-if="catalogueList.length > 0"
:catalogues="catalogueList"
:userVip="userVip"
@toVip="goToVip"
@@ -177,38 +180,29 @@ const vipTip = computed(() => {
*/
onLoad(async (options: any) => {
courseId.value = parseInt(options.id)
})
/**
* 页面显示
*/
onShow(async () => {
await loadPageData()
loadPageData()
})
/**
* 加载页面数据
*/
const loadPageData = async () => {
// 获取课程详情
const res = await courseApi.getCourseDetail(courseId.value)
const getCourseDetail = () => courseApi.getCourseDetail(courseId.value)
const getCourseDetailSuccess = async (res: any) => {
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))
}
}
}
const loadPageData = async () => {
// 检查VIP权益
await checkVipStatus()
// 加载评论
await loadComments()
}
/**
@@ -448,11 +442,11 @@ onPullDownRefresh(async () => {
/**
* 触底加载
*/
onReachBottom(() => {
if (hasMoreComments.value && !commentsLoading.value) {
loadComments()
}
})
// onReachBottom(() => {
// if (hasMoreComments.value && !commentsLoading.value) {
// loadComments()
// }
// })
</script>
<style lang="scss" scoped>

8
pages/user/index.vue
View File

@@ -72,7 +72,7 @@
<wd-cell-group border class="menu-list">
<wd-cell v-for="item in menuItems" :key="item.id" :title="item.name" :label="item.desc" is-link
@click="handleMenuClick(item)">
<text v-if="item.hufenState" class="menu-list-hufen">{{hufenData.total ?? 0}}<text
<text v-if="item.hufenState" class="menu-list-hufen">{{hufenData?.total ?? 0}}<text
style="margin-left: 6rpx;">湖分</text></text>
</wd-cell>
</wd-cell-group>
@@ -85,8 +85,7 @@
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useSysStore } from '@/stores/sys'
import { getUserInfo, getVipInfo, getUserContributionData } from '@/api/modules/user'
import type { IVipInfo } from '@/types/user'
import { getUserInfo, getUserContributionData } from '@/api/modules/user'
import { getNotchHeight } from '@/utils/system'
import { parseTime } from '@/utils/index'
import { t } from '@/utils/i18n'
@@ -165,7 +164,7 @@
},
])
// 湖分
const hufenData = ref('')
const hufenData = ref()
/**
* 获取平台信息
@@ -191,6 +190,7 @@
*/
const getHufen = async () => {
hufenData.value = await getUserContributionData()
hufenData.value = await getUserContributionData()
}
/**

98
style/tailwind.css
View File

@@ -8,6 +8,8 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-white: #fff;
--spacing: 0.25rem;
--text-xs: 0.75rem;
@@ -212,18 +214,81 @@
max-width: 96rem;
}
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-2\! {
margin-top: calc(var(--spacing) * 2) !important;
}
.mt-2\.5\! {
margin-top: calc(var(--spacing) * 2.5) !important;
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-3\! {
margin-top: calc(var(--spacing) * 3) !important;
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
.mt-5\! {
margin-top: calc(var(--spacing) * 5) !important;
}
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-20\! {
margin-top: calc(var(--spacing) * 20) !important;
}
.mt-\[20rpx\]\! {
margin-top: 20rpx !important;
}
.mr-\[20rpx\] {
margin-right: 20rpx;
}
.mr-\[20rpx\]\! {
margin-right: 20rpx !important;
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
.mb-1\! {
margin-bottom: calc(var(--spacing) * 1) !important;
}
.mb-1\.5\! {
margin-bottom: calc(var(--spacing) * 1.5) !important;
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-2\! {
margin-bottom: calc(var(--spacing) * 2) !important;
}
.mb-2\.5\! {
margin-bottom: calc(var(--spacing) * 2.5) !important;
}
.mb-\[20rpx\]\! {
margin-bottom: 20rpx !important;
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
}
.ml-1\! {
margin-left: calc(var(--spacing) * 1) !important;
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-2\.5\! {
margin-left: calc(var(--spacing) * 2.5) !important;
}
.ml-\[20rpx\] {
margin-left: 20rpx;
}
.ml-\[20rpx\]\! {
margin-left: 20rpx !important;
}
.block {
display: block;
}
@@ -248,6 +313,9 @@
.table {
display: table;
}
.w-\[50\%\] {
width: 50%;
}
.w-\[100px\] {
width: 100px;
}
@@ -257,6 +325,9 @@
.flex-shrink {
flex-shrink: 1;
}
.border-collapse {
border-collapse: collapse;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
@@ -273,18 +344,39 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.bg-white {
background-color: var(--color-white);
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-0\! {
padding: calc(var(--spacing) * 0) !important;
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-\[10rpx\] {
padding: 10rpx;
}
.p-\[20rpx\] {
padding: 20rpx;
}
.p-\[20rpx\]\! {
padding: 20rpx !important;
}
.p-\[30rpx\] {
padding: 30rpx;
}
@@ -297,6 +389,9 @@
.pt-\[10rpx\] {
padding-top: 10rpx;
}
.pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
.pb-0\! {
padding-bottom: calc(var(--spacing) * 0) !important;
}
@@ -347,6 +442,9 @@
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.underline {
text-decoration-line: underline;
}
.shadow-\[0_4rpx_12rpx_rgba\(0\,0\,0\,0\.05\)\] {
--tw-shadow: 0 4rpx 12rpx var(--tw-shadow-color, rgba(0,0,0,0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

1
types/book.d.ts vendored
View File

@@ -129,7 +129,6 @@ export interface IPageData<T> {
export interface IApiResponse<T = any> {
code: number
msg?: string
info?: string
[key: string]: any
}

13
types/course.d.ts vendored
View File

@@ -3,7 +3,8 @@
* 课程相关类型定义
*/
import type { IApiResponse } from './book'
import type { IApiResponse } from '@/api/types'
import type { IVideoInfo } from './video'
import type { IGoods } from './order'
/** 医学标签（课程分类） */
@@ -93,14 +94,6 @@ export interface IChapterDetail {
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-中西汇通学
@@ -140,7 +133,7 @@ export interface IChapterListResponse extends IApiResponse {
export interface IChapterDetailResponse extends IApiResponse {
data: {
detail: IChapterDetail
videos: IVideo[]
videos: IVideoInfo[]
current?: number // 当前播放视频ID
}
}

11
types/video.d.ts vendored
View File

@@ -6,7 +6,7 @@
export interface IVideoInfo {
id: number
chapterId: number
type: 0 | 1 // 0: MP4, 1: M3U8
type: 0 | 1 | 2 // 0: MP4, 1: M3U8, 2: 音频
video: string // 视频ID
sort: number
duration: number // 视频时长（秒）
@@ -46,14 +46,7 @@ export interface IVideoCheckResponse {
* 视频播放器组件 Props
*/
export interface IVideoPlayerProps {
videoList: Array<{
id: number
chapterId: number
video: string
sort: number
type?: 0 | 1
duration?: number
}>
videoList: Array<IVideoInfo>
currentIndex: number
countdownSeconds?: number
showWatermark?: boolean