first commit

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

@@ -0,0 +1,89 @@
+<template>
+	<view class="type">
+	  <view class="type_left">
+		  <ul>
+		  	<li :class="index == currentIndex ? 'active' : '' "  
+				v-for="(item,index ) in leftData" :key="index"
+				@click="renderRight(index)">{{item.title}}</li>
+		  </ul>
+	  </view>
+	  <view class="type_right">
+		  <ul>
+		  	<li v-for="(item,index) in rightData" :key="index" @click="turnToclassify(item.cid)">{{item.text}}</li>
+		  </ul>
+	  </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				leftData: [],
+				rightData: [],
+				pid:''
+			} 
+		},
+		onLoad() {},
+		created(){
+			this.getData()
+		},
+		methods: {
+			async getData () {
+				let Data = await this.$http.getClass({ data:{} });
+				// console.log(Data)
+				this.leftData = Data
+				this.renderRight(0)
+			},
+			renderRight(index) {
+				this.currentIndex = index;
+				this.rightData = this.leftData[index].child;
+				this.pid = this.leftData[index].pid
+				// console.log(this.pid)
+			},
+			turnToclassify(cid){
+				uni.navigateTo({
+					url: `./classify?pid=${this.pid}&cid=${cid}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.type {
+		.active {
+			color: red;
+		}
+		.type_left {
+			float: left;
+			width: 20%;
+			position: fixed;
+			height: 100%;
+			border-right: 1px solid #e6e6e6;
+			overflow-y: scroll;
+			ul {
+				padding-bottom: 88px;
+				li {
+					text-align: center;
+					padding: 10px 0;
+				}
+			}
+		}
+		.type_right {
+			float: left;
+			width: 80%;
+			position: relative;
+			left: 20%;
+			
+			ul {
+				li {
+					float: left;
+					margin: 10px;
+				}
+			}
+		
+		}
+	}
+</style>

历届学生/苏琪/项目练习/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>