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.
244 lines
7.5 KiB
244 lines
7.5 KiB
<template>
|
|
<view class="collection-page">
|
|
<view class="tab-box">
|
|
<view class="tab-item" :class="activeTab === 1 ? 'active' : ''" @click="switchTab(1)"> 图书 </view>
|
|
<view class="tab-item" :class="activeTab === 2 ? 'active' : ''" @click="switchTab(2)"> 活动 </view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-box">
|
|
<!-- 图书收藏 -->
|
|
<view v-if="activeTab === 1" class="tab-content">
|
|
<view class="empty" v-if="bookCollectList.length === 0">
|
|
暂无收藏的图书
|
|
</view>
|
|
<view class="recommendation-list" v-else>
|
|
<view
|
|
class="book-item"
|
|
v-for="(item, index) in bookCollectList"
|
|
@click="goToBookDetail(item)"
|
|
:key="index"
|
|
>
|
|
<image class="book-cover" :src="item.cover"></image>
|
|
<view class="book-title">{{ item.title }}</view>
|
|
</view>
|
|
</view>
|
|
<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
|
|
<view class="no-more" v-if="noMore && bookCollectList.length > 0">
|
|
没有更多数据了
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 活动收藏 -->
|
|
<view v-if="activeTab === 2" class="tab-content">
|
|
<view class="empty" v-if="activityCollectList.length === 0">
|
|
暂无收藏的活动
|
|
</view>
|
|
<view class="activity-list" v-else>
|
|
<view
|
|
class="activity-item"
|
|
v-for="(item, index) in activityCollectList"
|
|
@click="toActivityDetail(item)"
|
|
:key="index"
|
|
>
|
|
<image class="activity-img" :src="item.imgUrl"></image>
|
|
<view class="activity-info">
|
|
<view class="activity-info-left">
|
|
<text class="title">{{ item.title }}</text>
|
|
<view class="time">
|
|
<uni-icons class="time-icon" type="time" size="15"></uni-icons>
|
|
<text>{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
<button
|
|
class="activity-btn"
|
|
:class="item.status === 0 ? 'disabled-btn' : ''"
|
|
type="primary"
|
|
:disabled="item.status === 0"
|
|
>
|
|
{{ item.status === 1 ? '立即参加' : '活动结束' }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
|
|
<view class="no-more" v-if="noMore && activityCollectList.length > 0">
|
|
没有更多数据了
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeTab: 1,
|
|
isLoading: false,
|
|
noMore: false,
|
|
pageNum: 1,
|
|
pageSize: 5,
|
|
|
|
bookCollectList: [
|
|
{ isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
|
|
{ isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
|
|
{ isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
|
|
],
|
|
|
|
allActivityList: [
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '读书分享会', time: "2025-11-03 ~2025-11-09", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '作者见面会', time: "2025-11-03 ~2025-11-09", status: 0 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '新书签售会', time: "2025-11-05 ~2025-11-10", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '文学讲座', time: "2025-11-06 ~2025-11-12", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '亲子阅读日', time: "2025-11-07 ~2025-11-13", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '书法展览', time: "2025-11-08 ~2025-11-14", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '诗词大会', time: "2025-11-09 ~2025-11-15", status: 0 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '绘本故事', time: "2025-11-10 ~2025-11-16", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '读书打卡', time: "2025-11-11 ~2025-11-17", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '作家访谈', time: "2025-11-12 ~2025-11-18", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '文化沙龙', time: "2025-11-13 ~2025-11-19", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '手工创作', time: "2025-11-14 ~2025-11-20", status: 0 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '经典诵读', time: "2025-11-15 ~2025-11-21", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '图书交换', time: "2025-11-16 ~2025-11-22", status: 1 },
|
|
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: '阅读竞赛', time: "2025-11-17 ~2025-11-23", status: 1 },
|
|
],
|
|
activityCollectList: [],
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.initActivityList() // 只初始化一次活动列表
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
this.refreshData()
|
|
},
|
|
|
|
onReachBottom() {
|
|
if (this.noMore || this.isLoading) return
|
|
this.loadMore() // 这里只调用“追加”，不刷新
|
|
},
|
|
|
|
methods: {
|
|
switchTab(tab) {
|
|
this.activeTab = tab
|
|
// 切Tab不重置活动列表，避免闪屏
|
|
},
|
|
|
|
// 初始化第一页（进入页面/下拉刷新用）
|
|
initActivityList() {
|
|
this.pageNum = 1
|
|
this.noMore = false
|
|
this.activityCollectList = this.allActivityList.slice(0, this.pageSize)
|
|
this.noMore = this.allActivityList.length <= this.pageSize
|
|
},
|
|
|
|
refreshData() {
|
|
this.isLoading = true
|
|
setTimeout(() => {
|
|
// 图书重置
|
|
this.bookCollectList = [
|
|
{ isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
|
|
{ isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
|
|
{ isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
|
|
]
|
|
// 活动回到第一页
|
|
this.initActivityList()
|
|
this.isLoading = false
|
|
uni.stopPullDownRefresh()
|
|
}, 500)
|
|
},
|
|
|
|
// 上拉加载
|
|
loadMore() {
|
|
this.isLoading = true
|
|
this.pageNum++
|
|
setTimeout(() => {
|
|
const start = (this.pageNum - 1) * this.pageSize
|
|
const end = this.pageNum * this.pageSize
|
|
const newArr = this.allActivityList.slice(start, end)
|
|
|
|
if (newArr.length) {
|
|
this.activityCollectList = [...this.activityCollectList, ...newArr]
|
|
}
|
|
this.noMore = this.allActivityList.length <= end
|
|
this.isLoading = false
|
|
}, 500)
|
|
},
|
|
|
|
goToBookDetail(item) {
|
|
uni.navigateTo({ url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn })
|
|
},
|
|
toActivityDetail(item) {
|
|
uni.navigateTo({ url: "/subpkg/pages/activity-detail/activity-detail?title=" + item.title })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.collection-page {
|
|
background-color: #f7f8fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.tab-box {
|
|
display: flex;
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
font-size: 15px;
|
|
color: #333;
|
|
position: relative;
|
|
}
|
|
.tab-item.active {
|
|
color: #01a4fe;
|
|
font-weight: bold;
|
|
}
|
|
.tab-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 2px;
|
|
background-color: #01a4fe;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.content-box {
|
|
padding: 0 10px;
|
|
}
|
|
.tab-content {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
.no-more {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.recommendation-list{
|
|
flex-wrap: wrap;
|
|
.book-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
</style>
|