109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<template>
|
||
<view class="classify">
|
||
<view class="classify_title">
|
||
<p>奇幻玄幻--东方玄幻</p>
|
||
</view>
|
||
<ul>
|
||
<li v-for="(item,index) in classifyList" :key="index" @click="enterInfo( item.bookId)">
|
||
<view class="bookList">
|
||
<img :src="item.coverUrl">
|
||
<view class="message">
|
||
<h3 class="title">{{ item.bookName }}</h3>
|
||
<p>作者：{{ item.authorName }}</p>
|
||
<p>更新至：{{ item.updteChapterName }}</p>
|
||
<p class="introduction">简介：{{ item.description }}</p>
|
||
</view>
|
||
</view>
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data() {
|
||
return {
|
||
cid: null,
|
||
cPid: null,
|
||
pageNum: 1,
|
||
classifyList:[],
|
||
categoryName:'',//大分类
|
||
subCateName:''//小分类
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.cid = option.cid
|
||
this.cPid = option.pid
|
||
this.getClassifyData()
|
||
},
|
||
onReachBottom() {
|
||
this.pageNum++;
|
||
this.getClassifyData();
|
||
},
|
||
methods:{
|
||
async getClassifyData () {
|
||
let Data = await this.$http.getClassify({ data:{ cPid:this.cPid, cid:this.cid ,pageNum: this.pageNum} });
|
||
this.classifyList = [...this.classifyList, ...Data.ranklist]
|
||
this.categoryName = this.classifyList[0].categoryName
|
||
this.subCateName =this.classifyList[0].subCateName
|
||
|
||
uni.setNavigationBarTitle({
|
||
title: this.classifyList[0].subCateName
|
||
});
|
||
|
||
},
|
||
enterInfo(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/bookinfo/bookinfo?id=${id}`
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.classify{
|
||
.classify_title{
|
||
height: 60upx;
|
||
background-color: #f2f2f2;
|
||
font-size: 28upx;
|
||
border-bottom: 1upx solid #dfdfdf;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 20upx;
|
||
}
|
||
ul{
|
||
width: 100%;
|
||
height: 100%;
|
||
li{
|
||
height: 90px;
|
||
padding: 20upx;
|
||
position: relative;
|
||
border-bottom: 1upx solid #dfdfdf;
|
||
.bookList{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: row;
|
||
justify-content: flex-start;
|
||
img{width:140upx;height: 160upx}
|
||
.message{
|
||
margin-left: 20upx;
|
||
.title{
|
||
font-size: 32upx;
|
||
}
|
||
p{font-size: 24upx; color: #8f8f8f}
|
||
.introduction{
|
||
width: 580upx;
|
||
font-size: 24upx; color: #8f8f8f;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|