更新：增加“我的书单”功能
This commit is contained in:
620
pages/book/detail.vue
Normal file
620
pages/book/detail.vue
Normal file
@@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<view class="book-detail-page">
|
||||
<!-- 导航栏 -->
|
||||
<nav-bar :title="$t('bookDetails.title')"></nav-bar>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="detail-scroll"
|
||||
:style="{ height: scrollHeight + 'px' }"
|
||||
>
|
||||
<!-- 书籍信息 -->
|
||||
<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('home.readingCount') }}</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-item">
|
||||
<image src="@/static/icon/icon_listen_c.png" mode="aspectFit" />
|
||||
<text>{{ listenCount }}{{ $t('home.listenCount') }}</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-item">
|
||||
<image src="@/static/icon/icon_bug_c.png" mode="aspectFit" />
|
||||
<text>{{ buyCount }}{{ $t('home.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>
|
||||
<text v-if="commentList.length > 0" class="more-link" @click="goToReview">
|
||||
{{ $t('bookDetails.more') }}
|
||||
<wd-icon name="arrow-right" size="14px" />
|
||||
</text>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<text v-else class="empty-text">{{ nullBookText }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar">
|
||||
<template v-if="bookInfo.isBuy">
|
||||
<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>
|
||||
|
||||
<!-- 购买弹窗 -->
|
||||
<wd-popup v-model="purchaseVisible" position="bottom">
|
||||
<view class="purchase-popup">
|
||||
<view class="book-info-mini">
|
||||
<image :src="bookInfo.images" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<text class="name">{{ bookInfo.name }}</text>
|
||||
<text v-if="bookInfo.priceData" class="price">
|
||||
$ {{ bookInfo.priceData.dictValue }} NZD
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="spec-section">
|
||||
<text class="spec-title">{{ $t('bookDetails.list') }}</text>
|
||||
<view class="spec-item active">
|
||||
<text>{{ bookInfo.name }}</text>
|
||||
<text v-if="bookInfo.priceData" class="spec-price">
|
||||
${{ bookInfo.priceData.dictValue }} NZD
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<wd-button type="primary" custom-class="buy-btn" @click="handlePurchase">
|
||||
{{ $t('bookDetails.buy') }}
|
||||
</wd-button>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { bookApi } from '@/api/modules/book'
|
||||
import type { IBookDetail, IBook, IComment } from '@/types/book'
|
||||
import CustomNavbar from '@/components/book/CustomNavbar.vue'
|
||||
import CommentList from '@/components/book/CommentList.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 路由参数
|
||||
const bookId = ref(0)
|
||||
const pageFrom = ref('')
|
||||
|
||||
// 数据状态
|
||||
const bookInfo = ref<IBookDetail>({
|
||||
id: 0,
|
||||
name: '',
|
||||
images: '',
|
||||
author: { authorName: '', introduction: '' },
|
||||
isBuy: false,
|
||||
freeChapterCount: 0
|
||||
})
|
||||
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) => {
|
||||
if (options.id) {
|
||||
bookId.value = Number(options.id)
|
||||
}
|
||||
if (options.page) {
|
||||
pageFrom.value = options.page
|
||||
}
|
||||
|
||||
initScrollHeight()
|
||||
loadBookCount()
|
||||
loadRecommendBooks()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
loadBookInfo()
|
||||
if (!isIOS.value) {
|
||||
loadComments()
|
||||
}
|
||||
})
|
||||
|
||||
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() {
|
||||
try {
|
||||
uni.showLoading({ title: t('global.loading') })
|
||||
const res = await bookApi.getBookInfo(bookId.value)
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.bookInfo) {
|
||||
bookInfo.value = res.bookInfo
|
||||
}
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
console.error('Failed to load book info:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
async function loadBookCount() {
|
||||
try {
|
||||
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
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load book count:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载评论
|
||||
async function loadComments() {
|
||||
try {
|
||||
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')
|
||||
}
|
||||
} catch (error) {
|
||||
nullText.value = t('common.data_null')
|
||||
console.error('Failed to load comments:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载推荐书籍
|
||||
async function loadRecommendBooks() {
|
||||
try {
|
||||
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')
|
||||
}
|
||||
} catch (error) {
|
||||
nullBookText.value = t('common.data_null')
|
||||
console.error('Failed to load recommend books:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示购买弹窗
|
||||
function showPurchasePopup() {
|
||||
purchaseVisible.value = true
|
||||
}
|
||||
|
||||
// 处理购买
|
||||
function handlePurchase() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/book/order?id=${bookId.value}`
|
||||
})
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
function goToReader() {
|
||||
const isBuy = bookInfo.value.isBuy ? 0 : 1
|
||||
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 goToReview() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/book/review?bookId=${bookId.value}&page=0`
|
||||
})
|
||||
}
|
||||
|
||||
function goToDetail(id: number) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/book/detail?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
if (pageFrom.value === 'order') {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.book-detail-page {
|
||||
background: #fff;
|
||||
min-height: 100vh;
|
||||
|
||||
.book-info {
|
||||
text-align: center;
|
||||
padding: 40rpx 30rpx;
|
||||
|
||||
.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 {
|
||||
padding: 40rpx 30rpx 0;
|
||||
|
||||
.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: 40rpx 30rpx 40rpx;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user