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

pages/clock/index.vue

@@ -1,6 +1,16 @@
 <template>
 	<view>
 		<z-nav-bar title="读书打卡"></z-nav-bar>
+		<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 class="tip">
 			<text>请选择要打卡的书籍：</text>
 		</view>
@@ -36,12 +46,17 @@
 				playData:{},
 				bookList:[],
 				page:1, // 页码
+				contentShow: 1,
 			}
 		},
 		onLoad() {			
 			this.getfreeBook()
 		},
 		methods: {
+			setData(e) {
+				this.contentShow = e
+				this.getfreeBook()
+			},
 			// 跳转到打卡页面
 			goToClock(val){
 				if(val.clockIn != 1){
@@ -65,20 +80,33 @@
 			
 			// 获取打卡图书
 			getfreeBook(){
-				this.$http
+				if(this.contentShow == 1){
-						.post('book/userebookbuy/getUserClockBookList', { // 磊哥新写
+					this.$http.post('book/clockinPunch/myClockBooks', {			
-				    // .post('book/userebookbuy/appbooklist', {  原接口					
 						'userId': this.userInfo.id,	
-					})
+						limit: 100,
-					.then(res => {						
+						page:1,
+					}).then(res => {						
 						if(res.code == 0){
 							//this.ygtotalPage = res.resultlist.totalCount
-							this.bookList = res.books
+							this.bookList = res.page.records
 							console.log(this.bookList,'打卡列表')
 							// this.status = 3
 						}
-						
 					});
+				} else {
+					this.$http.post('book/clockinPunch/getBestClockBooks', {			
+						'userId': this.userInfo.id,	
+						limit: 100,
+						page:1,					
+					}).then(res => {						
+						if(res.code == 0){
+							//this.ygtotalPage = res.resultlist.totalCount
+							this.bookList = res.page.records
+							console.log(this.bookList,'打卡列表')
+							// this.status = 3
+						}
+					});
+				}
 			},
 			// 跳转
 			onPageJump(url) {
@@ -98,6 +126,33 @@
 
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
+
+	.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;
+		}
+	}
+
 	.tip{
 		padding: 20rpx; background-color: #fff;
 		text{ font-size: 36rpx;}

pages/comments/commentsDetail.vue

@@ -37,7 +37,8 @@
 						</span> -->											
 					</span>
 				</view>
-				<view class="zhengwen" v-html="commentInfo.content"></view>
+				<view class="zhengwen" v-html="commentInfo.content">
+				</view>
 				<view class="btns flexbox">
 					<span class="left"></span>
 					<span class="right flexbox opbtns" style="color:#C0C4CC;">
@@ -646,7 +647,14 @@
 		
 	}
 	// .mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
-	.zhengwen{line-height: 50rpx; font-size: 28rpx;margin-top: 20rpx;}
+	/deep/.zhengwen{
+		line-height: 50rpx;
+		font-size: 28rpx;
+		margin-top: 20rpx;
+		img{
+			width: 100% !important;
+		}
+	}
 	.flexbox{display: flex;}
 	.container{padding: 10px;}
 	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}

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>