打卡、书集加已购图书、推荐图书tab

pages/comments/commentsList.vue

@@ -83,6 +83,16 @@
             </view>
         </view>
         <view v-if="commentsListTab == 3">
+			<view class="" style="padding:40rpx 20rpx;">
+				<view class="mytabs flexbox">
+					<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
+						已购图书
+					</view>
+					<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
+						推荐图书
+					</view>
+				</view>
+			</view>
             <view v-if="bookList.length > 0">
                 <view class="bookInfo3" v-for="(item,index) in bookList" :key="index">
                     <view class="mainContent3">
@@ -173,6 +183,7 @@ import { data } from 'jquery';
                 newList:[],
                 hotList:[],
                 bookList:[],
+				contentShow: 1,
 
 			}
 		},
@@ -186,25 +197,29 @@ import { data } from 'jquery';
             this.newList = []
             this.hotList = []
             this.bookList = []
-            this.getBookList(this.commentsListTab, true)
+            this.getBookList(this.commentsListTab, false)
 			   
 		},
 		onReachBottom() {
             this.newestpage++
             this.hotestpage++
             this.booksetpage++
-            this.getBookList(this.commentsListTab, true)
+            this.getBookList(this.commentsListTab, false)
 		},
 		onLoad(e) {
 			this.windowWidth = uni.getSystemInfoSync().windowWidth;
 			console.log(e,'onload')
 			// this.bookid = e.bookid
-			this.getBookList(1, true)
+			this.getBookList(1, false)
 		},
 		computed:{
 			...mapState(['userInfo']),
 		},
 		methods: {
+			setData(e) {
+				this.contentShow = e
+				this.getBookList(this.commentsListTab, true)
+			},
             formatTimeDifferenceFromT(dateTimeT) {
                 const now = new Date();
                 const t = new Date(dateTimeT);
@@ -243,7 +258,7 @@ import { data } from 'jquery';
                 this.newList = []
                 this.hotList = []
                 this.bookList = []
-				this.getBookList(this.commentsListTab, true)
+				this.getBookList(this.commentsListTab, false)
 			},
 			// 查看本书更多书评
 			toMore(val){
@@ -275,7 +290,7 @@ import { data } from 'jquery';
 						console.log(e,'e')
 					})
             },
-			getBookList(flag, clear){
+			getBookList(flag, tushuflag){
 				// 根据tab不同，获取最新书评、最热书评、书集列表
 				uni.showLoading({
 					title: '加载中'
@@ -286,7 +301,15 @@ import { data } from 'jquery';
                 }else if(flag == 2){
                     httpurl = "forum/articles/getForumsHot?page=" + this.hotestpage + '&limit=10'
                 }else{
-                    httpurl = "forum/articles/getForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' + this.userInfo.id
+					if(tushuflag){ // 点击切换已购和推荐
+                		this.booksetpage = 1
+                		this.bookList = []
+					}
+					if(this.contentShow == 1){
+                    	httpurl = "forum/articles/getHasForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' + this.userInfo.id
+					} else {
+						httpurl = "forum/articles/getBestForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' + this.userInfo.id
+					}
                 }
 				this.$http
 					.post(httpurl)
@@ -509,7 +532,7 @@ import { data } from 'jquery';
             border:1rpx solid #e9e9e9;
         }
 		.title{font-size: 30rpx; font-weight: 700; color: #000; overflow: hidden;}
-		.description{
+		/deep/.description{
 			overflow: hidden;
 			color: #666;
 			text-overflow: -o-ellipsis-lastline;
@@ -523,6 +546,9 @@ import { data } from 'jquery';
 			margin-bottom: 20rpx;
 			margin-top:10rpx;
 			height: 172rpx;
+			img{
+				width: 100% !important;
+			}
 		}
 		.btns{
 			font-size: 22rpx;
@@ -590,7 +616,7 @@ import { data } from 'jquery';
             .shupingList{
                 min-height: 212rpx;
             }
-            .description{
+            /deep/.description{
                 overflow: hidden;
                 color: #666;
                 text-overflow: -o-ellipsis-lastline;
@@ -603,6 +629,9 @@ import { data } from 'jquery';
                 font-size: 26rpx;
                 margin-bottom: 20rpx;
                 margin-top:10rpx;
+				img{
+					width: 100% !important;
+				}
             }
             .btns{
                 font-size: 22rpx;
@@ -632,4 +661,30 @@ import { data } from 'jquery';
             }
         }
     }
+		
+	.mytabs {
+		// background: url('@/static/icon/bgtushu.png') no-repeat left top;
+		height: 80rpx;
+		// margin-bottom: 30rpx;
+
+		.item {
+			border-radius: 10rpx;
+			background-color: #c6ead0;
+			width: 48%;
+			// margin: 0 10rpx;
+			text-align: center;
+			color: #3c7f56;
+			font-size: 36rpx;
+			line-height: 80rpx;
+		}
+
+		.item.active {
+			background-color: #3c7f56;
+			color: #fff;
+		}
+
+		.item1 {
+			margin-right: 20rpx;
+		}
+	}
 </style>