You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 lines
7.0 KiB
271 lines
7.0 KiB
<template>
|
|
<view class="detail-container">
|
|
<!-- 书籍头部信息 -->
|
|
<view class="article-detail-container">
|
|
<view class="article-detail-left">
|
|
<view class="article-detail-title">名侦探柯南</view>
|
|
<view class="article-detail-info">
|
|
<view class="article-detail-author">（日）青山刚昌 著</view>
|
|
<view class="article-detail-time">长春出版社</view>
|
|
<view class="article-detail-time">ISBN：7-80664-373-7</view>
|
|
<view class="article-detail-time">出版时间：2023年</view>
|
|
</view>
|
|
</view>
|
|
<view class="article-detail-right">
|
|
<image
|
|
src="https://qiniu.aiyxlib.com/1606124577077"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 馆藏信息 -->
|
|
<view class="book-store-info">
|
|
<view class="book-store-info-item">
|
|
<text class="store-txt1">39</text>
|
|
<text class="store-txt2">总馆藏量</text>
|
|
</view>
|
|
<view class="book-store-info-item">
|
|
<text class="store-txt1">38</text>
|
|
<text class="store-txt2">在馆（本）</text>
|
|
</view>
|
|
<view class="book-store-info-item">
|
|
<text class="store-txt1">1</text>
|
|
<text class="store-txt2">借出（本）</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 索书号/条码号 -->
|
|
<view class="store-info-list">
|
|
<view class="store-info-item">
|
|
<view>
|
|
<text>索书号</text>
|
|
<text>J238.7/5</text>
|
|
</view>
|
|
<view>
|
|
<text>条码号</text>
|
|
<text>14018019711</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- TAB 选项卡 -->
|
|
<view class="content-tab">
|
|
<view class="tab-item" :class="{active: currentTab === 0}" @click="currentTab = 0">
|
|
内容简介
|
|
</view>
|
|
<view class="tab-item" :class="{active: currentTab === 1}" @click="currentTab = 1">
|
|
作者简介
|
|
</view>
|
|
</view>
|
|
|
|
<!-- TAB 内容 -->
|
|
<view class="content-item" v-if="currentTab === 0">
|
|
《名侦探柯南》是日本漫画家青山刚昌创作的著名侦探漫画作品，讲述了高中生侦探工藤新一被灌下毒药后身体缩小，化名为江户川柯南，秘密调查黑暗组织，并解决无数离奇案件的故事。作品兼具推理、冒险、情感与幽默元素，是全球极具影响力的经典漫画。
|
|
</view>
|
|
<view class="content-item" v-if="currentTab === 1">
|
|
青山刚昌，日本著名漫画家，1963 年生于鸟取县。代表作包括《名侦探柯南》《魔术快斗》等。他擅长推理题材与人物塑造，画风细腻，剧情严谨，作品在全球多个国家出版，深受各年龄层读者喜爱。
|
|
</view>
|
|
|
|
<view class="detail-bottom">
|
|
<view class="detail-left">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button open-type="share" class="handle-btn">
|
|
<uni-icons custom-prefix="iconfont" type="icon-fenxiang01" size="20"></uni-icons>
|
|
<text class="share-text">分享</text>
|
|
</button>
|
|
<!-- #endif -->
|
|
<button class="handle-btn" @click="toggleCollect">
|
|
<!-- 已收藏 / 未收藏 自动切换图标 -->
|
|
<uni-icons :type="isCollected ? 'heart-filled' : 'heart'" size="20" color="#ff4444"></uni-icons>
|
|
<text class="share-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
|
|
</button>
|
|
</view>
|
|
<button class="join-btn">
|
|
<text>我要借书</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: 0, // 0=内容简介 1=作者简介
|
|
isCollected: false, // 收藏状态
|
|
bookIsbn: "" // 图书唯一标识 ISBN
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 接收从上一页传来的 ISBN
|
|
this.bookIsbn = options.isbn || "7-80664-373-7";
|
|
// 检查是否已收藏
|
|
this.checkCollectStatus();
|
|
},
|
|
methods: {
|
|
// 检查收藏状态
|
|
checkCollectStatus() {
|
|
const collectList = uni.getStorageSync("collectList") || [];
|
|
this.isCollected = collectList.includes(this.bookIsbn);
|
|
},
|
|
|
|
// 切换收藏 / 取消收藏
|
|
toggleCollect() {
|
|
let collectList = uni.getStorageSync("collectList") || [];
|
|
|
|
if (this.isCollected) {
|
|
// 取消收藏
|
|
collectList = collectList.filter((item) => item !== this.bookIsbn);
|
|
uni.showToast({ title: "取消收藏成功", icon: "success" });
|
|
} else {
|
|
// 添加收藏
|
|
collectList.push(this.bookIsbn);
|
|
uni.showToast({ title: "收藏成功", icon: "success" });
|
|
}
|
|
|
|
// 保存到本地
|
|
uni.setStorageSync("collectList", collectList);
|
|
// 更新状态
|
|
this.isCollected = !this.isCollected;
|
|
}
|
|
},
|
|
// 微信分享
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '名侦探柯南',
|
|
path: '/subpkg/pages/book-detail/book-detail?isbn=7-80664-373-7',
|
|
imageUrl: 'https://qiniu.aiyxlib.com/1606124577077'
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail-container {
|
|
padding: 15px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
/* 书籍信息 */
|
|
.article-detail-container {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.article-detail-left {
|
|
flex: 1;
|
|
}
|
|
.article-detail-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.article-detail-info {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
.article-detail-right {
|
|
width: 110px;
|
|
height: 150px;
|
|
margin-left: 15px;
|
|
}
|
|
.article-detail-right image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* 馆藏统计 */
|
|
.book-store-info {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 12px;
|
|
}
|
|
.book-store-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.store-txt1 {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #2b85e4;
|
|
}
|
|
.store-txt2 {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 索书号 */
|
|
.store-info-list {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.store-info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
.store-info-item view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* TAB */
|
|
.content-tab {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 12px;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 15px 0;
|
|
font-size: 15px;
|
|
color: #666;
|
|
position: relative;
|
|
}
|
|
.tab-item.active {
|
|
color: #2b85e4;
|
|
font-weight: bold;
|
|
}
|
|
.tab-item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 30px;
|
|
height: 3px;
|
|
background-color: #2b85e4;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content-item {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
font-size: 15px;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|