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

pages/clock/index.vue

@@ -1,6 +1,16 @@
 <template>
 	<view>
-		<z-nav-bar title="读书打卡"></z-nav-bar>				
+		<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
-						.post('book/userebookbuy/getUserClockBookList', { // 磊哥新写
-				    // .post('book/userebookbuy/appbooklist', {  原接口					
-						'userId': this.userInfo.id,						
-					})
-					.then(res => {						
+				if(this.contentShow == 1){
+					this.$http.post('book/clockinPunch/myClockBooks', {			
+						'userId': this.userInfo.id,	
+						limit: 100,
+						page:1,
+					}).then(res => {						
 						if(res.code == 0){
 							//this.ygtotalPage = res.resultlist.totalCount
-							this.bookList = res.books
-							 console.log(this.bookList,'打卡列表')
+							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;}