nuttyreading-html/pages/clock/index.vue

<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> -->
		<view class="listenList" v-if="bookList.length > 0">
			<view class="wrap" >				 
					<u-row gutter="16" justify="flex-start">
						<u-col span="4" v-for="(item,index) in bookList" :key="index">
							<view class="videoBox demo-layout bg-purple" @click="goToClock(item)">								
								<image v-if="item.images != ''" :src="item.images" mode="scaleToFill" ></image>
								<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>								
							</view>
							<text class="bookName">{{item.name}}</text>							
						</u-col>						
					</u-row>					
				</view>		
		</view>
		<view v-else>
			<u-divider text="当前无可打卡书籍~"></u-divider>
		</view>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import musicPlay from '@/components/music.vue'	
	export default {
		data() {
			return {
				playData:{},
				bookList:[],
				page:1, // 页码
				contentShow: 1,
			}
		},
		onLoad() {			
			this.getfreeBook()
		},
		methods: {
			setData(e) {
				this.contentShow = e
				this.getfreeBook()
			},
			// 跳转到打卡页面
			goToClock(val){
				console.log(val,'val')
				if(this.contentShow == 1){						
					this.onPageJump('../clock/clock?bookid='+val.id)
				}else{
					uni.navigateTo({
						url: '../eBook/bookContent?Id=' + val.id
					});
				}
				
			},
			
			// 获取打卡图书
			getfreeBook(){
				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.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) {
				uni.navigateTo({
					url: url
				});
			},
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			musicPlay,
		}
	}
</script>

<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;}
	}
	.contentButton{margin: 20rpx 0;}
	.btns{margin-top: 15rpx; background-color: #f1f1f1; border-radius: 10rpx; font-size: 28rpx; justify-content: space-between;
		
	}
	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
	.bookName{		
		white-space: nowrap;					
		overflow-x: hidden;
		text-overflow: ellipsis;
				font-size: 30rpx; color: #333; padding: 10rpx 0;
	}
	.videoBox{position: relative;}
	
	.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px;  padding: 5px; border-radius: 100%;  }
	uni-image {
	    width:auto !important;
	    height: 350rpx;
	}
	.u-row{flex-wrap: wrap;}
	.u-col{overflow: hidden;  margin-bottom: 30rpx; }
	.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
	.flexbox{display: flex;}
	.scroll-Y {
			height: 300rpx;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 60%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
	.head_line {
		margin: 50rpx 0;
	
	
		b {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background-color: #54a966;
			vertical-align: bottom;
			margin: 0 20rpx 0 0;
		}
	
		text {
			font-size: 32rpx;
			font-weight: bold;
		}
	
		i {
			float: right;
			font-style: normal;
			color: #8b8a91;
			font-size: 24rpx;
			margin: 5rpx 35rpx 0 0;
		}
	}
	.home_bg {
		background-image: url('@/static/icon/home_bg.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 100rpx 0 40rpx 0;
		position: relative;
	
		.icon_hua_1 {
			margin: 0 auto;
			width: 150rpx;
			height: 150rpx;
		}
	
		.search_box {
			width: 90%;
			height: 64upx;
			background-color: #fff;
			border-radius: 32upx;
			display: flex;
			align-items: center;
			padding: 0upx 40upx;
			position: absolute;
			margin-left: -46%;
			left: 50%;
			bottom: -30rpx;
			box-shadow: 0 0px 10px 1px #54a96633;
	
			.prompt {
				color: #cccccc;
	
			}
	
			.icon_search {
				background-image: url('@/static/icon/map_ic_search.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				width: 29upx;
				height: 28upx;
				margin-right: 20upx;
			}
		}
	}
</style>