|
|
|
@ -31,7 +31,7 @@ |
|
|
|
:class="{ active: activeTab === index }" |
|
|
|
@click="switchTab(index)" |
|
|
|
> |
|
|
|
{{ tab }} |
|
|
|
{{ tab.title }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
@ -53,93 +53,90 @@ |
|
|
|
></uv-swiper> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 今日更新 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">今日更新</text> |
|
|
|
<!-- 根据labelBooksData动态渲染书籍区块 --> |
|
|
|
<view |
|
|
|
v-for="(labelData, labelIndex) in labelBooksData" |
|
|
|
:key="labelIndex" |
|
|
|
class="section" |
|
|
|
> |
|
|
|
<view class="section-header" @click="goLabel(labelData.labelInfo)"> |
|
|
|
<text class="section-title">{{ labelData.labelInfo.title }}</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#888"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" > |
|
|
|
|
|
|
|
<!-- 第一个label：今日更新样式 --> |
|
|
|
<scroll-view |
|
|
|
v-if="labelIndex === 0" |
|
|
|
show-scrollbar="false" |
|
|
|
class="content-scroll" |
|
|
|
scroll-x="true" |
|
|
|
> |
|
|
|
<view class="content-list"> |
|
|
|
<view |
|
|
|
v-for="(item, index) in todayUpdates" |
|
|
|
v-for="(item, index) in labelData.books" |
|
|
|
:key="index" |
|
|
|
class="content-item" |
|
|
|
> |
|
|
|
<view class="item-cover"> |
|
|
|
<image :src="item.cover" mode="aspectFill"></image> |
|
|
|
<image :src="item.booksImg || '/static/默认图片.png'" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="item-info"> |
|
|
|
<text class="item-title">{{ item.title }}</text> |
|
|
|
<text class="item-author">{{ item.author }}</text> |
|
|
|
<view class="item-duration"><image src="/static/播放图标.png" class="item-icon" /><text>{{ item.duration }}</text></view> |
|
|
|
<text class="item-title">{{ item.booksName }}</text> |
|
|
|
<text class="item-author">{{ item.booksAuthor }}</text> |
|
|
|
<view class="item-duration"> |
|
|
|
<image src="/static/播放图标.png" class="item-icon" /> |
|
|
|
<text>{{ item.duration }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 推荐书籍 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">推荐书籍</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#999"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" > |
|
|
|
|
|
|
|
<!-- 第二个label：推荐书籍样式 --> |
|
|
|
<scroll-view |
|
|
|
v-else-if="labelIndex === 1" |
|
|
|
show-scrollbar="false" |
|
|
|
class="content-scroll" |
|
|
|
scroll-x="true" |
|
|
|
> |
|
|
|
<view class="book-list"> |
|
|
|
<view |
|
|
|
v-for="(book, index) in recommendBooks" |
|
|
|
v-for="(book, index) in labelData.books" |
|
|
|
:key="index" |
|
|
|
class="book-item" |
|
|
|
@click="goBook" |
|
|
|
@click="goBook(book)" |
|
|
|
> |
|
|
|
<view class="book-cover"> |
|
|
|
<image :src="book.cover" mode="aspectFill"></image> |
|
|
|
<!-- <view class="book-duration"> |
|
|
|
<uv-icon name="time" size="10" color="#fff"></uv-icon> |
|
|
|
<text>{{ book.duration }}</text> |
|
|
|
</view> --> |
|
|
|
<image :src="book.booksImg || '/static/默认图片.png'" mode="aspectFill"></image> |
|
|
|
<view class="book-overlay"> |
|
|
|
<view class="book-duration"> |
|
|
|
<image src="/static/闹钟图标.png" class="book-duration-icon" /> |
|
|
|
<text class="book-duration-text">{{ book.duration }}</text> |
|
|
|
</view> |
|
|
|
<view class="book-title">{{ book.title }}</view> |
|
|
|
<view class="book-title">{{ book.booksName }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 四级精讲短文合集书 --> |
|
|
|
<view class="section"> |
|
|
|
<view class="section-header"> |
|
|
|
<text class="section-title">四级精讲短文合集书</text> |
|
|
|
<view class="section-more"> |
|
|
|
<text>更多</text> |
|
|
|
<uv-icon name="arrow-right" size="14" color="#999"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="book-grid"> |
|
|
|
|
|
|
|
<!-- 第三个及以后的label：网格样式 --> |
|
|
|
<view v-else class="book-grid"> |
|
|
|
<view |
|
|
|
v-for="(book, index) in bookGridList" |
|
|
|
v-for="(book, index) in labelData.books" |
|
|
|
:key="index" |
|
|
|
class="book-grid-item" |
|
|
|
> |
|
|
|
<view class="book-grid-cover"> |
|
|
|
<image :src="book.cover" mode="aspectFill"></image> |
|
|
|
<image :src="book.booksImg || '/static/默认图片.png'" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="book-grid-info"> |
|
|
|
<text class="book-grid-title">{{ book.title }}</text> |
|
|
|
<text class="book-grid-title">{{ book.booksName }}</text> |
|
|
|
<view class="book-grid-meta"> |
|
|
|
<text class="book-grid-grade">{{ book.grade }}/</text> |
|
|
|
<text class="book-grid-grade">{{ book.categoryName }}/</text> |
|
|
|
<image src="/static/播放图标.png" class="book-grid-duration-icon" /> |
|
|
|
<text class="book-grid-duration">{{ book.duration }}</text> |
|
|
|
</view> |
|
|
|
@ -169,7 +166,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// Tab数据 |
|
|
|
tabs: ['为你推荐', '精选', '短文', '专栏', '初中', '四六级'], |
|
|
|
tabs: [ ], |
|
|
|
activeTab: 0, |
|
|
|
|
|
|
|
// 轮播图数据 |
|
|
|
@ -177,97 +174,15 @@ export default { |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 今日更新数据 |
|
|
|
todayUpdates: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '全脑孩子：12项革命性策略...', |
|
|
|
author: 'Daniel J. Siegel / Tina Payne Bryso...', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
// 书籍分类 |
|
|
|
labels: [ |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
// 推荐书籍数据 |
|
|
|
recommendBooks: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'The Power of Now 擦拭才:The Power of Now :The Power of Now :', |
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'Dealing in Desire 擦擦:The Power of Now :The Power of Now :', |
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: 'A New Earth擦超2 :The Power of Now :The Power of Now :', |
|
|
|
// 根据label获取的书籍数据（二维数组） |
|
|
|
labelBooksData: [], |
|
|
|
|
|
|
|
|
|
|
|
duration: '03:24' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
// 书籍网格数据 |
|
|
|
bookGridList: [ |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
}, |
|
|
|
{ |
|
|
|
cover: '/static/默认图片.png', |
|
|
|
title: '精讲短文', |
|
|
|
grade: '四级', |
|
|
|
duration: '03:24' |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
// 推荐列表数据 |
|
|
|
recommendList: [ |
|
|
|
@ -278,8 +193,9 @@ export default { |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 切换Tab |
|
|
|
switchTab(index) { |
|
|
|
async switchTab(index) { |
|
|
|
this.activeTab = index |
|
|
|
await this.getBooksByLabels() |
|
|
|
}, |
|
|
|
|
|
|
|
// 轮播图点击事件 |
|
|
|
@ -298,9 +214,9 @@ export default { |
|
|
|
url: '/subPages/home/search' |
|
|
|
}) |
|
|
|
}, |
|
|
|
goBook() { |
|
|
|
goBook(book) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPages/home/directory' |
|
|
|
url: '/subPages/home/directory?id=' + book.id |
|
|
|
}) |
|
|
|
}, |
|
|
|
async getBanner() { |
|
|
|
@ -321,11 +237,85 @@ export default { |
|
|
|
type: item.type |
|
|
|
})) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取书籍分类 |
|
|
|
async getCategory() { |
|
|
|
const categoryRes = await this.$api.book.category() |
|
|
|
if (categoryRes.code === 200){ |
|
|
|
this.tabs = categoryRes.result.map(item => ({ |
|
|
|
title:item.title, |
|
|
|
id: item.id |
|
|
|
})) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取书籍标签 |
|
|
|
async getLabel() { |
|
|
|
const labelRes = await this.$api.book.label() |
|
|
|
if (labelRes.code === 200){ |
|
|
|
this.labels = labelRes.result.map(item => ({ |
|
|
|
title:item.lable, |
|
|
|
id: item.id |
|
|
|
})) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 根据label数组获取书籍数据 |
|
|
|
async getBooksByLabels() { |
|
|
|
if (!this.labels || this.labels.length === 0) { |
|
|
|
console.log('labels数据为空，无法获取书籍') |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
// 创建请求数组，每个label发起一次请求 |
|
|
|
const requests = this.labels.map(label => |
|
|
|
this.$api.book.list({ |
|
|
|
label: label.id, |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 6, |
|
|
|
category: this.tabs[this.activeTab].id |
|
|
|
}, false) |
|
|
|
) |
|
|
|
|
|
|
|
// 并发执行所有请求 |
|
|
|
const responses = await Promise.all(requests) |
|
|
|
|
|
|
|
// 创建二维数组存储结果 |
|
|
|
this.labelBooksData = responses.map((response, index) => { |
|
|
|
if (response.code === 200) { |
|
|
|
return { |
|
|
|
labelInfo: this.labels[index], |
|
|
|
books: response.result.records || [] |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.error(`获取label ${this.labels[index].title} 的书籍失败:`, response) |
|
|
|
return { |
|
|
|
labelInfo: this.labels[index], |
|
|
|
books: [] |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
console.log('根据label获取的书籍数据:', this.labelBooksData) |
|
|
|
} catch (error) { |
|
|
|
console.error('获取书籍数据失败:', error) |
|
|
|
this.labelBooksData = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
goLabel(label){ |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPages/home/search?label=' + label.id |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
async onShow() { |
|
|
|
Promise.all([this.getBanner(), this.getSignup()]) |
|
|
|
// 先获取基础数据 |
|
|
|
await Promise.all([this.getBanner(), this.getSignup(), this.getCategory(), this.getLabel()]) |
|
|
|
|
|
|
|
// 根据label数据获取对应的书籍 |
|
|
|
await this.getBooksByLabels() |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
hflllll
2 months ago