图书分类

pages/library/library.vue

@@ -29,7 +29,7 @@
 		<!-- <view class="contentButton">
 			<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266" bar-height="10" :list="contentButtonList" @click="contentButtonClick" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
 		</view> -->
-		<view class="" style="padding:40rpx 20rpx;">
+		<view class="" style="padding:20rpx 20rpx;">
 			<view class="mytabs flexbox">
 				<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
 					已购图书
@@ -39,6 +39,11 @@
 				</view>
 			</view>
 		</view>
+		<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="0">
+			<view class="ProTabs">
+				<text v-for="item in tagList" :key="item.splId" :class="[tabsid == item.splId ? 'cur' :'']" @click="tabsChange(item)">{{item.labelName}}</text>			
+			</view>
+		</scroll-view>
 		<view class="listenList">
 			<view class="wrap" v-if="contentShow == 1">
 				<view class="" v-if="bookList.length > 0">
@@ -202,6 +207,16 @@
 						name: '推荐图书'
 					}
 				],
+				tagList:[
+					{splId:"",labelName:"全部"},
+					{splId:"2",labelName:"中医经典"},
+					{splId:"1",labelName:"中医基础"},
+					{splId:"3",labelName:"各家学说"},
+					{splId:"4",labelName:"中医临床"},
+					{splId:"5",labelName:"文学"},
+					{splId:"6",labelName:"哲学"},
+				] ,// 推荐标签列表
+				tabsid: ''
 			}
 		},
 		onLoad() {
@@ -282,6 +297,13 @@
 			contentButtonClick(e) {
 				this.contentShow = e.index
 			},
+			tabsChange(item){
+				this.bookList = []
+				this.tabsid = item.splId
+				this.page = 1
+				// 获取推荐数据
+				this.getfreeBook()
+			},
 			// 获取已购买书籍
 			getfreeBook() {
 				this.$http
@@ -289,7 +311,8 @@
 						// .post('book/buyorderdetail/querybuy', {
 						'userId': this.userInfo.id,
 						'page': this.page,
-						'limit': 10
+						'limit': 10,
+						'type':this.tabsid
 					})
 					.then(res => {
 
@@ -539,9 +562,33 @@
 		height: 300rpx;
 	}
 
-	.scroll-view_H {
+	// .scroll-view_H {
-		white-space: nowrap;
+	// 	white-space: nowrap;
-		width: 100%;
+	// 	width: 100%;
+	// }
+	.scroll-view_H{background-color: #fff;white-space: nowrap;
+		 padding:10rpx ; margin-top: 12rpx;}
+	.scroll-view_H{ 
+		.item { padding: 10rpx; overflow: hidden; display: inline-block; padding-bottom: 0;
+			width: 180rpx !important; margin-right: 20rpx;  border-radius: 10rpx;
+			.videoBox{ 
+				image{display: block; width:150rpx; 
+				height: 170rpx; 
+				}
+			}
+			.bookName{display: block; margin-top: 6rpx;   color: #666; font-size: 24rpx; white-space: nowrap;					
+		overflow-x: hidden; overflow: hidden;
+		text-overflow: ellipsis;}
+		}
+		// .item.active{margin-right: 20rpx; border: 1px solid #55aa00;  border-radius: 10rpx;}
+	}
+	.ProTabs{
+		// margin: 20rpx 0; 
+		padding:0 20rpx;
+		text{padding: 8rpx 14rpx; font-size: 32rpx; display: inline-block; border-radius: 10rpx; overflow: hidden; 
+		// background-color: #eee;
+		 color: #55aa7f; margin-right: 10rpx;}
+		text.cur{background-color:#55aa7f ; color: #fff;}
 	}
 
 	.scroll-view-item {

pages/peanut/home.vue

@@ -231,6 +231,11 @@
 				<text v-for="item in tagList" :key="item.splId" :class="[tabsid == item.splId ? 'cur' :'']" @click="tabsChange(item)">{{item.labelName}}</text>			
 			</view>
 		</scroll-view>
+		<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="0" v-if="tabsid == 16">
+			<view class="wzProTabs">
+				<text v-for="item in wztaglist" :key="item.splId" :class="[wztabsid == item.splId ? 'cur' :'']" @click="wztabsChange(item)">{{item.labelName}}</text>			
+			</view>
+		</scroll-view>
 		<!-- 商品展示 -->
 		<view class="goods">
 			<!-- 精选 -->
@@ -325,6 +330,12 @@
 					color: '#54a966',
 				},
 				tagList:[] ,// 推荐标签列表
+				wztaglist:[
+					{splId:"",labelName:"全部"},
+					{splId:"5",labelName:"文学"},
+					{splId:"6",labelName:"哲学"},
+				],
+				wztabsid: '',
 				pageSize:10,
 				page:1,
 				totalPage:0,
@@ -438,11 +449,19 @@
 					});
 			    },
 			tabsChange(item){
-				    this.tjProList = []
+				this.tjProList = []
-					this.tabsid = item.splId
+				this.tabsid = item.splId
-					this.page = 1
+				this.wztabsid = ''
-					// 获取推荐数据
+				this.page = 1
-					this.getJtData()
+				// 获取推荐数据
+				this.getJtData()
+			},
+			wztabsChange(item){
+				this.tjProList = []
+				this.wztabsid = item.splId
+				this.page = 1
+				// 获取推荐数据
+				this.getJtData()
 			},
 			getJtData(){				
 				this.$http
@@ -450,7 +469,8 @@
 				.post('book/label/getProductsByLabel',{	
 					'splId': this.tabsid,
 					'limit': this.pageSize,
-					'page': this.page
+					'page': this.page,
+					'type': this.wztabsid
 				})
 				.then(res => {
 					
@@ -774,6 +794,15 @@
 		 color: #55aa7f; margin-right: 10rpx;}
 		text.cur{background-color:#55aa7f ; color: #fff;}
 	}
+	.wzProTabs{
+		display: flex;
+		justify-content: center;
+		padding:0 20rpx;
+		text{padding: 8rpx 14rpx; font-size: 32rpx; display: inline-block; border-radius: 10rpx; overflow: hidden; 
+		// background-color: #eee;
+		 color: #55aa7f; margin-right: 10rpx;}
+		text.cur{background-color:#55aa7f ; color: #fff;}
+	}
 	// .newBook{margin-top: 10rpx;}
 	.scroll-view_H{background-color: #fff;white-space: nowrap;
 		 padding:10rpx ; margin-top: 12rpx;}