507 lines
12 KiB
Vue
507 lines
12 KiB
Vue
<template>
|
|
<view class="book-detail-page">
|
|
<!-- 导航栏 -->
|
|
<nav-bar :title="$t('bookDetails.title')"></nav-bar>
|
|
|
|
<Skeleton
|
|
ref="bookInfoSkeleton"
|
|
theme="book-info"
|
|
class="p-3"
|
|
:request="[getBookInfo, getBookReadCount]"
|
|
@success="getBookInfoSuccess"
|
|
>
|
|
<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>
|
|
</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 v-if="bookInfoLoading" class="action-bar">
|
|
<template v-if="bookInfo.isBuy || hasVip">
|
|
<view class="action-btn read" @click="goToReader">
|
|
<text>{{ $t('bookDetails.startReading') }}</text>
|
|
</view>
|
|
<!-- <view class="action-btn purchased">
|
|
<wd-button disabled custom-class="purchased-btn">
|
|
{{ $t('bookDetails.buttonText2') }}
|
|
</wd-button>
|
|
</view> -->
|
|
<view class="action-btn listen" @click="goToListen">
|
|
<text>{{ $t('bookDetails.startListening') }}</text>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view v-if="bookInfo.freeChapterCount > 0" class="action-btn read" @click="goToReader">
|
|
<text>{{ $t('bookDetails.tryRead') }}</text>
|
|
</view>
|
|
<view class="action-btn buy" :class="{ 'buy-full': bookInfo.freeChapterCount === 0 }">
|
|
<wd-button type="primary" @click="showPurchasePopup">
|
|
{{ $t('bookDetails.buttonText1') }}
|
|
</wd-button>
|
|
</view>
|
|
<view v-if="bookInfo.freeChapterCount > 0" class="action-btn listen" @click="goToListen">
|
|
<text>{{ $t('bookDetails.tryListen') }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 购买弹窗 -->
|
|
<GoodsSelector
|
|
:show="purchaseVisible"
|
|
:goods="goodsList"
|
|
@confirm="handlePurchase"
|
|
@close="closePurchasePopup"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import { bookApi } from '@/api/modules/book'
|
|
import { useUserStore } from '@/stores/user'
|
|
import type { IBookDetail } from '@/types/book'
|
|
import type { IGoods } from '@/types/order'
|
|
import GoodsSelector from '@/components/order/GoodsSelector.vue'
|
|
import Skeleton from '@/components/Skeleton/Skeleton.vue'
|
|
|
|
const userStore = useUserStore()
|
|
|
|
// 路由参数
|
|
const bookId = ref(0)
|
|
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: '',
|
|
images: '',
|
|
author: { authorName: '', introduction: '' },
|
|
isBuy: false,
|
|
freeChapterCount: 0
|
|
})
|
|
const goodsList = ref<IGoods[]>([])
|
|
const purchaseVisible = ref(false)
|
|
|
|
// 生命周期
|
|
onLoad((options: any) => {
|
|
if (options.id) {
|
|
bookId.value = Number(options.id)
|
|
}
|
|
if (options.page) {
|
|
pageFrom.value = options.page
|
|
}
|
|
})
|
|
|
|
onShow(() => {
|
|
bookInfoSkeleton.value?.reload()
|
|
})
|
|
|
|
|
|
// 加载书籍详情
|
|
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() {
|
|
const res = await bookApi.getBookGoods(bookId.value)
|
|
goodsList.value = res.productList || []
|
|
}
|
|
|
|
// 显示购买弹窗
|
|
async function showPurchasePopup() {
|
|
await loadGoodsInfo()
|
|
purchaseVisible.value = true
|
|
}
|
|
|
|
// 关闭购买弹窗
|
|
function closePurchasePopup() {
|
|
purchaseVisible.value = false
|
|
}
|
|
|
|
// 处理购买
|
|
function handlePurchase(goods: IGoods) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/goodsConfirm?goods=${goods.productId}`
|
|
})
|
|
}
|
|
|
|
// 页面跳转
|
|
function goToReader() {
|
|
const isBuy = bookInfo.value.isBuy ? 1 : 0
|
|
const count = bookInfo.value.freeChapterCount || 0
|
|
uni.navigateTo({
|
|
url: `/pages/book/reader?isBuy=${isBuy}&bookId=${bookId.value}&count=${count}`
|
|
})
|
|
}
|
|
|
|
function goToListen() {
|
|
uni.navigateTo({
|
|
url: `/pages/book/listen/index?bookId=${bookId.value}`
|
|
})
|
|
}
|
|
|
|
function goToDetail(id: number) {
|
|
uni.navigateTo({
|
|
url: `/pages/book/detail?id=${id}`
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.book-detail-page {
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
|
|
.book-info {
|
|
text-align: center;
|
|
padding-bottom: 40rpx;
|
|
|
|
.cover {
|
|
width: 300rpx;
|
|
height: 400rpx;
|
|
border-radius: 10rpx;
|
|
margin: 0 auto 20rpx;
|
|
}
|
|
|
|
.title {
|
|
display: block;
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
padding: 20rpx 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.author {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
line-height: 34rpx;
|
|
padding: 10rpx 0;
|
|
color: #666;
|
|
}
|
|
|
|
.stats {
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
.stat-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: block;
|
|
margin: 0 auto 10rpx;
|
|
}
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
width: 1rpx;
|
|
height: 45rpx;
|
|
background: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.introduction {
|
|
.section-title {
|
|
display: block;
|
|
font-size: 34rpx;
|
|
line-height: 50rpx;
|
|
padding-bottom: 10rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.content {
|
|
font-size: 30rpx;
|
|
line-height: 46rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.comments-section {
|
|
padding: 40rpx 30rpx 0;
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
|
|
.section-title {
|
|
font-size: 34rpx;
|
|
line-height: 50rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.more-link {
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.comment-wrapper {
|
|
background: #f7faf9;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
|
|
.related-books {
|
|
padding: 0rpx 30rpx calc(40rpx + 110rpx);
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 34rpx;
|
|
line-height: 50rpx;
|
|
margin-bottom: 20rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.book-scroll {
|
|
white-space: nowrap;
|
|
|
|
.book-list {
|
|
display: inline-flex;
|
|
gap: 25rpx;
|
|
|
|
.book-item {
|
|
display: inline-block;
|
|
|
|
image {
|
|
width: 150rpx;
|
|
height: 190rpx;
|
|
border-radius: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
text {
|
|
display: block;
|
|
width: 150rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
padding-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-text {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 50rpx 0;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.bottom-placeholder {
|
|
height: 110rpx;
|
|
}
|
|
|
|
.action-bar {
|
|
width: 100%;
|
|
height: 110rpx;
|
|
background: #f7faf9;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 0 30rpx;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.action-btn {
|
|
&.read, &.listen {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
&.read text {
|
|
color: #6bba6b;
|
|
}
|
|
|
|
&.listen text {
|
|
color: #f7cb5e;
|
|
}
|
|
|
|
&.purchased, &.buy {
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
&.buy-full {
|
|
flex: 1;
|
|
padding: 0 30rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.purchase-popup {
|
|
padding: 60rpx 30rpx 40rpx;
|
|
|
|
.book-info-mini {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 160rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 40rpx;
|
|
|
|
.name {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
line-height: 38rpx;
|
|
color: #333;
|
|
max-height: 76rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.price {
|
|
display: block;
|
|
padding-top: 20rpx;
|
|
font-size: 36rpx;
|
|
color: #ff4703;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.spec-section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.spec-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.spec-item {
|
|
border: 1rpx solid #ddd;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&.active {
|
|
border-color: #54a966;
|
|
|
|
text {
|
|
color: #54a966;
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
line-height: 34rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|