nuttyreading-html/pages/clock/clockList - 副本.vue

<template>
	<view class="container">
		<z-nav-bar title="打卡记录"></z-nav-bar>
		<view class="calendar_container">
			<zsy-calendar :mode="mode" @change="change" />
		</view>
		<view class="container1">
			<view class="subContent">
				<!-- 已打卡 -->
				<view class="had">
					<view class="item flexbox">
						<view class="dateName flexbox">
							<span>第<em>365</em>天</span>
						</view>
						<view class="bookinfo">
							<view class="case">
								<view class="book flexbox">
									<image src="../../static/icon/home_icon_0.png" mode="aspectFill"></image>
									<view class="clockInfo">
										<span>中医免疫学</span>
										<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
									</view>
								</view>
								
								<view class="content">
									借我一个暮年，借我碎片，
									借我瞻前与顾后，借我执拗如少年。
									借我后天长成的先天，借我变如不曾改变。
									借我素淡的世故和明白的愚，借我可预知的险。
									借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
									借我最初与最终的不敢，借我不言而喻的不见。
									借我一场秋啊，可你说这已是冬天。
									<view class="images flexbox">
										<image @click="previewImage()"
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
										<image
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
									</view>
									<view class="opBtns flexbox">
										<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
											14:01</span>
									</view>
									<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
											color="#409eff"></u-icon>查看全部</span>
								
								</view>
								
							</view>
							
							<view class="case">
								<view class="book flexbox">
									<image src="../../static/icon/home_icon_0.png" mode="aspectFill"></image>
									<view class="clockInfo">
										<span>中医免疫学</span>
										<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
									</view>
								</view>
								
								<view class="content">
									借我一个暮年，借我碎片，
									借我瞻前与顾后，借我执拗如少年。
									借我后天长成的先天，借我变如不曾改变。
									借我素淡的世故和明白的愚，借我可预知的险。
									借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
									借我最初与最终的不敢，借我不言而喻的不见。
									借我一场秋啊，可你说这已是冬天。
									<view class="images flexbox">
										<image @click="previewImage()"
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
										<image
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
									</view>
									<view class="opBtns flexbox">
										<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
											14:01</span>
									</view>
									<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
											color="#409eff"></u-icon>查看全部</span>
								
								</view>
								
							</view>
						</view>
					</view>
					<view class="item flexbox">
						<view class="dateName flexbox">
							<span>第<em>36</em>天</span>
						</view>
						<view class="bookinfo">
							<view class="case">
								<view class="book flexbox">
									<image src="../../static/icon/home_icon_0.png" mode="aspectFill"></image>
									<view class="clockInfo">
										<span>中医免疫学</span>
										<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
									</view>
								</view>
								
								<view class="content">
									借我一个暮年，借我碎片，
									借我瞻前与顾后，借我执拗如少年。
									借我后天长成的先天，借我变如不曾改变。
									借我素淡的世故和明白的愚，借我可预知的险。
									借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
									借我最初与最终的不敢，借我不言而喻的不见。
									借我一场秋啊，可你说这已是冬天。
									<view class="images flexbox">
										<image @click="previewImage()"
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
										<image
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
									</view>
									<view class="opBtns flexbox">
										<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
											14:01</span>
									</view>
									<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
											color="#409eff"></u-icon>查看全部</span>
								
								</view>
								
							</view>
							
							<view class="case">
								<view class="book flexbox">
									<image src="../../static/icon/home_icon_0.png" mode="aspectFill"></image>
									<view class="clockInfo">
										<span>中医免疫学</span>
										<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
									</view>
								</view>
								
								<view class="content">
									借我一个暮年，借我碎片，
									借我瞻前与顾后，借我执拗如少年。
									借我后天长成的先天，借我变如不曾改变。
									借我素淡的世故和明白的愚，借我可预知的险。
									借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
									借我最初与最终的不敢，借我不言而喻的不见。
									借我一场秋啊，可你说这已是冬天。
									<view class="images flexbox">
										<image @click="previewImage()"
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
										<image
											src="https://picx.zhimg.com/70/v2-92392172531ba8e252e3f9afaa4232d2_1440w.awebp?source=172ae18b&biz_tag=Post"
											mode="aspectFill"></image>
									</view>
									<view class="opBtns flexbox">
										<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
											14:01</span>
									</view>
									<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
											color="#409eff"></u-icon>查看全部</span>
								
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
	import musicPlay from '@/components/music.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				mode: 'open',
				status : 0
			}
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 下拉刷新
		onReachBottom() {
			this.status = 0
			if (this.bookScreen.page < this.totalPage) {
				this.bookScreen.page = this.bookScreen.page + 1
				setTimeout(() => {
					this.$http
						// .post('book/book/list', this.bookScreen)
						.post('book/shopproduct/selectList?limit=8&page=1&key='+this.bookScreen.bookName)
						.then(res => {
							this.totalPage = res.page.totalPage
							for (let i in res.page.list) {
								this.bookList.push(res.page.list[i])
							}
						});
				}, 1000)
			} else {
				this.status = 1
			}
		
		},
		onLoad() {
			this.getmyWord()
		},
		methods: {
			change(e) {
				console.log(e)
			},
			getmyWord(){
				this.$http
					.post('book/clockin/myinfo?userid='+this.userInfo.id)
					.then(res => {
						console.log(res,'我的打卡内容')
					})
					.catch(e => {
						console.log(e)
					})
			},
		},
		components: {
			musicPlay,
			zsyCalendar
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.listenList{
		.wrap{width: 150rpx;}
	}
	.task {
		margin-top: 40rpx 20rpx;

		.taskinfo {
			video {
				width: 100%;
			}
		}
	}
	.subContent {
		overflow: hidden;

		.clockTitle {
			color: #55aa7f;
			font-size: 38rpx;
			text-align: center;
			display: block;
			margin-top: 30rpx;
		}
	}

	.container1 {
		.margin-top {
			margin-top: 30rpx;
			overflow: hidden;
		}
	}

	.container {
		 padding: 30rpx;
	}

	.calendar_container {
		//min-height: calc(60vh);
		background-color: #f5f5f5;
		//padding: 30rpx;
		box-sizing: border-box;
	}

	.had {
		margin-top: 30rpx;

		h3 {
			color: #8c9a92;
			font-size: 34rpx;
		}

		.content {
			line-height: 60rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
			color: #0e0e15;
		}

		.images {
			height: 150rpx;
			overflow: hidden;
			margin-top: 30rpx;

			image {
				width: 150rpx;
				margin: 0 10rpx;
			}
		}

		.opBtns {
			margin-top: 30rpx;

			span {
				color: #b3b3b3;
				padding-left: 20rpx;
				font-size: 24rpx;
			}
		}

		.item {
			padding-left: 20rpx;
			margin-bottom: 40rpx;
			background-color: #fff;
			justify-content: space-between;

			.dateName {
			
				color: #444;
				text-align: center;
				align-items: center;
				width: 80rpx;
				padding-right: 20rpx;
				 border-right: 1px solid #eee;
				span {
					display: inline-block;
					height: 120rpx;
					padding: 20rpx 0;
					border-radius: 50rpx;
					width: 100%;
					background-color: #d9e8f7;
					text-align: center;

					em {
						font-weight: bold;
						font-style: normal;
					}
				}
			}


			.bookinfo {
				text-align: center;
				// width: 100%;				
				// padding: 20rpx;
				margin-left: 20rpx;
				.case{ margin-top:60rpx; background-color: #fff; padding: 20rpx;}
				.content {
					position: relative; padding-bottom: 60rpx;  height: 60px; overflow: hidden;

				}

				.book { 
					image {
						width:200rpx;
						height: 150rpx;
						margin: 0 auto;						
					}
					.clockInfo{text-align: left; margin-left: 20rpx;}
					span {
						color: #444;
						display: block; 
						font-weight: bold;						
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}

	.viewMore {
		position: absolute;		
		bottom: 5rpx; 
		right: 0; color: #409eff;
		z-index: 1; text-align: right;
		width: 200rpx; background-image: url('@/static/icon/zuotouming.png'); background-position: right; background-size: cover; background-repeat: no-repeat;
	}

	.flexbox {

		display: flex;
	}
</style>