|
|
@ -4,8 +4,7 @@ |
|
|
|
<navbar title="书城" |
|
|
|
leftClick |
|
|
|
@leftClick="$utils.navigateBack" |
|
|
|
bgColor="#E3441A" |
|
|
|
color="#fff" /> |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 分类商品列表 --> |
|
|
|
<view class="category" |
|
|
@ -14,20 +13,23 @@ |
|
|
|
<view class="tabs"> |
|
|
|
<uv-tabs |
|
|
|
:list="category" |
|
|
|
:activeStyle="{color : '#f00', fontWeight : 600}" |
|
|
|
lineColor="#f00" |
|
|
|
:activeStyle="{color : '#0A2463', fontWeight : 600}" |
|
|
|
lineColor="#0A2463" |
|
|
|
:inactiveStyle="{color: 'rgba(0,0,0,.8)'}" |
|
|
|
lineHeight="8rpx" |
|
|
|
lineWidth="50rpx" |
|
|
|
:current="current" |
|
|
|
keyName="title" |
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-vtabs |
|
|
|
:list="category[current].children" |
|
|
|
:list="categoryList" |
|
|
|
:current="currentChildren" |
|
|
|
keyName="name" |
|
|
|
keyName="title" |
|
|
|
:chain="false" |
|
|
|
:barItemActiveLineStyle="{background : '#0A2463'}" |
|
|
|
:barItemActiveStyle="{color : '#0A2463', fontWeight : 600}" |
|
|
|
@change="change"> |
|
|
|
<uv-vtabs-item> |
|
|
|
<view class="category-item"> |
|
|
@ -55,8 +57,9 @@ |
|
|
|
} from 'vuex' |
|
|
|
import tabber from '@/components/base/tabbar.vue' |
|
|
|
import novelItem from '@/components/novel/novelItem.vue' |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
export default { |
|
|
|
// mixins: [mixinsList], |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
tabber, |
|
|
|
novelItem |
|
|
@ -66,76 +69,8 @@ |
|
|
|
mixinsListApi: '', |
|
|
|
current : 0, |
|
|
|
currentChildren : 0, |
|
|
|
categoryList: { |
|
|
|
shopList: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
title: '我是半妖', |
|
|
|
cover: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=400&h=400', |
|
|
|
author: '东方不败', |
|
|
|
desc: '这是一部关于半妖少年成长的玄幻小说,讲述了主角在人妖两界的冒险故事。', |
|
|
|
tags: ['玄幻', '冒险', '热血'], |
|
|
|
status: '连载中' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
title: '兽王进化', |
|
|
|
cover: 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=facearea&w=400&h=400', |
|
|
|
author: '天下霸唱', |
|
|
|
desc: '一场意外让主角获得兽王血脉,开始了进化之路...', |
|
|
|
tags: ['奇幻', '冒险'], |
|
|
|
status: '连载中' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
title: '魔法少女纯爷们', |
|
|
|
cover: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=facearea&w=400&h=400', |
|
|
|
author: '南派三叔', |
|
|
|
desc: '一个普通男孩意外获得魔法少女的力量,开始了奇妙冒险...', |
|
|
|
tags: ['搞笑', '奇幻'], |
|
|
|
status: '已完结' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
category: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '男生', |
|
|
|
children: [ |
|
|
|
{ id: '101', name: '玄幻' }, |
|
|
|
{ id: '102', name: '奇幻' }, |
|
|
|
{ id: '103', name: '武侠' }, |
|
|
|
{ id: '104', name: '仙侠' }, |
|
|
|
{ id: '105', name: '都市' }, |
|
|
|
{ id: '106', name: '历史' }, |
|
|
|
{ id: '107', name: '军事' }, |
|
|
|
{ id: '108', name: '游戏' }, |
|
|
|
{ id: '109', name: '体育' } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '女生', |
|
|
|
children: [ |
|
|
|
{ id: '201', name: '古代言情' }, |
|
|
|
{ id: '202', name: '现代言情' }, |
|
|
|
{ id: '203', name: '幻想言情' }, |
|
|
|
{ id: '204', name: '青春校园' }, |
|
|
|
{ id: '205', name: '纯爱' } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '出版', |
|
|
|
children: [ |
|
|
|
{ id: '301', name: '文学' }, |
|
|
|
{ id: '302', name: '传记' }, |
|
|
|
{ id: '303', name: '励志' }, |
|
|
|
{ id: '304', name: '名著' }, |
|
|
|
{ id: '305', name: '经管' } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
categoryList: [], |
|
|
|
category: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
@ -184,49 +119,34 @@ |
|
|
|
// // this.queryParams.classId = this.category[0].id |
|
|
|
// } |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.getCategoryList() |
|
|
|
this.getBookAreaList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
change(e) { |
|
|
|
// this.queryParams.classId = this.category[e].id |
|
|
|
this.currentChildren = e |
|
|
|
// 更新对应分类的书籍列表 |
|
|
|
this.updateBookList(this.category[this.current].children[e].id) |
|
|
|
this.getData(this.category[this.current].children[e].id) |
|
|
|
}, |
|
|
|
clickTabs({index}){ |
|
|
|
this.current = index |
|
|
|
this.currentChildren = 0 |
|
|
|
// 更新对应分类的书籍列表 |
|
|
|
this.updateBookList(this.category[index].children[0].id) |
|
|
|
}, |
|
|
|
updateBookList(categoryId) { |
|
|
|
// 模拟获取不同分类的书籍数据 |
|
|
|
// 实际项目中应该调用API获取数据 |
|
|
|
console.log('获取分类ID为: ' + categoryId + ' 的书籍') |
|
|
|
|
|
|
|
// 这里只是简单模拟不同分类有不同数量的书 |
|
|
|
const bookCount = Math.floor(Math.random() * 3) + 1 |
|
|
|
const tempList = [] |
|
|
|
|
|
|
|
for (let i = 0; i < bookCount; i++) { |
|
|
|
tempList.push({ |
|
|
|
id: categoryId + '-' + i, |
|
|
|
title: '分类' + categoryId + '的书' + i, |
|
|
|
cover: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=400&h=400', |
|
|
|
author: '作者' + categoryId, |
|
|
|
desc: '这是分类' + categoryId + '的第' + i + '本书...', |
|
|
|
tags: ['分类' + categoryId, '热门'], |
|
|
|
status: i % 2 === 0 ? '连载中' : '已完结' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
this.categoryList.shopList = tempList |
|
|
|
this.getData(this.category[index].children[0].id) |
|
|
|
}, |
|
|
|
search(){ |
|
|
|
for(let i = 0;i < 10;i++){ |
|
|
|
delete this.queryParams[i] |
|
|
|
} |
|
|
|
this.queryParams.pageSize = 10 |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
async getCategoryList() { |
|
|
|
const data = await this.$fetch('getCategoryList') |
|
|
|
this.category = data |
|
|
|
}, |
|
|
|
async getBookAreaList() { |
|
|
|
const data = await this.$fetch('getBookAreaList') |
|
|
|
this.categoryList = data |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|