first commit

历届学生/苏琪/项目练习/newApp/appFont/pages/class/classify.vue

@@ -0,0 +1,108 @@
+<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>