From 46a66c8884f27343688dc1109fc10ff04312449d Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Thu, 14 Sep 2023 15:20:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=A1=E9=83=A8=E5=88=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/clock/clock.vue | 106 +++++++++++++++++++++++++++++-------------
 1 file changed, 73 insertions(+), 33 deletions(-)

diff --git a/pages/clock/clock.vue b/pages/clock/clock.vue
index 6e731a9..1587d06 100644
--- a/pages/clock/clock.vue
+++ b/pages/clock/clock.vue
@@ -1,19 +1,25 @@
 <template>
-	<view :class="['container', currentDay == linshiDay ? 'mb50':'']">
+	<view :class="['container', currentDay == linshiDay && taskInfo.id && myword.length == 0 ? 'pb100':'']">
 		<z-nav-bar title="读书打卡"></z-nav-bar>
 		<!-- 仿钉钉打卡日历组件 -->
 		<view class="calendar_container">
 			<!-- <zsy-calendar @change="change" /> -->
 			<!-- <clock-date></clock-date> -->
 			<view class="calendar_info">
-				<text class="title">读书打卡</text>
-				<view class="dakaBtn" @tap="kuickSign()" v-if="signList.indexOf(currentDay) == -1">
-					<u-icon name="checkbox-mark" color="#55aa7f" size="24" style="display: inline;"></u-icon>
-					<text>签到</text>
-				</view>
-				<view v-else class="haveSignText">
-					<text>今天已签到</text>
+				<text class="title" style="font-size: 32rpx;">读书打卡</text>
+				<view class="right flexbox">
+					<view class="fanhuiDay" @tap="backTo()" v-if="showBack">
+						<text>返回今天</text>
+					</view>
+					<!-- <u-icon name="checkbox-mark" color="#55aa7f" size="14" style="display: inline;"></u-icon> -->
+					<view class="dakaBtn"  @tap="kuickSign()" v-if="signList.indexOf(currentDay) == -1">
+						<text style="font-size: 24rpx;">签到</text>
+					</view>
+					<view v-else class="dakaBtn" style="border-color: #fff;">
+						<text  style=" color:#a3a3a3;">今天已签到</text>
+					</view>
 				</view>
+				
 			</view>
 			<!-- <scroll-view class="scroll-view_H flexbox" scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft">
 				<view class="" style="padding: 0 6rpx; display: inline-block; width: 20%;  box-sizing: border-box; " v-for="(item,index) in 365">
@@ -29,7 +35,7 @@
 				</view>
 				</view>
 			</scroll-view> -->
-			<swiper class="swiper scroll-view_H" :current='currentIndex'  :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+			<swiper class="swiper scroll-view_H" @animationfinish="animationfinish" @change="swiperChange" :current='currentIndex'  :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
 				:duration="duration">
 				<swiper-item v-for="(item,index) in dayList" :key="index"  class="flexbox swiperPage">
 					<!-- <view class="swiper-item item" v-for="(item1,index1) in item" :key=""><span class="day">第 <em>{{item1}}</em> 天</span></view> -->
@@ -37,7 +43,7 @@
 					:class="['item','swiper-item', signList.indexOf(item1) != -1 ? 'havSign' : '',
 					currentDay == item1 && signList.indexOf(item1) == -1 ? 'current' : '',
 					 linshiDay == item1 ? 'linshiDay':'']"  @click="getInfo(item1)">
-						<span class="day">第 <em>{{item1}}</em> 天</span>
+						<span class="day">第<em>{{item1}}</em> 天</span>
 						<u-icon v-if="signList.indexOf(item1) != -1" name="checkbox-mark" color="#fff" size="28" style="margin: 0 auto; width: 28px;  text-align: center;"></u-icon>
 						<span v-if="signList.indexOf(item1) == -1 && currentDay > item1" class="buka">未签</span>
 						<span v-if="currentDay < item1" class="weidaka">未开始</span>
@@ -61,7 +67,7 @@
 				</view>
 				<view class="image " v-if="taskInfo.images">
 					<!-- 图片形式的任务 -->
-					<image :src="taskInfo.images" style="width: 100%;" mode="aspectFit"></image>
+					<image :src="taskInfo.images" @click="previewImage(taskInfo.images)"  style="width: 100%;" mode="aspectFit"></image>
 				</view>				
 				<view class="txt" v-if="taskInfo.content" v-html="taskInfo.content"></view>
 			</view>
@@ -89,8 +95,9 @@
 				</view>				
 			</view>
 			<!-- 他人的打卡记录 -->
-			<view class="allComments" v-if="commentsList && commentsList.length > 0">
+			<view class="allComments" >
 						<text class="clockTitle">-- 更多签到记录 --</text>
+						<view class="" v-if="commentsList && commentsList.length > 0">
 			<view :class="['pingjiaBox']" v-for="(item, index) in commentsList" :key="index">
 				<view class="flexbox">
 					<view class="touxiang">
@@ -120,9 +127,9 @@
 				</view> -->
 			</view>
 			</view>
-			<!-- <view class="quesheng" v-else>
-				<text>暂无评价~</text>
-			</view> -->
+			<u-divider v-else text="暂无更多签到记录"></u-divider>
+			</view>
+			
 		</view>
 		<u-popup mode="bottom" :show="addTextShow" :round="10" @close="addTextShow=false">
 			<view class="tanchu">
@@ -157,8 +164,8 @@
 
 			</view>
 		</u-popup>
-		<view class="leaveBtn" v-if="!addTextShow && currentDay == linshiDay">
-			<button type="primary" plain="true" @click="addTextShow = true">说点什么</button>
+		<view class="leaveBtn" v-if="!addTextShow && currentDay == linshiDay && taskInfo.id && myword.length == 0">
+			<button style="height: 70rpx; font-size: 28rpx; line-height: 70rpx;" type="primary" plain="true" @click="addTextShow = true">说点什么</button>
 		</view>
 		<music-play :playData="playData"></music-play>
 		<!-- <z-navigation></z-navigation> -->
@@ -178,6 +185,8 @@
 	export default {
 		data() {
 			return {
+				dayCurrent:0,     // 载入页面时的显示页数
+				showBack:false,
 				currentIndex:0,
 				dayList:[],
 				indicatorDots: false,
@@ -251,6 +260,20 @@
 			...mapState(['userInfo'])
 		},
 		methods: {
+			swiperChange(e){
+				console.log(e,'change')
+			},
+			backTo(){
+			//	console.log('')
+			   // this.currentIndex++
+				 this.currentIndex = this.dayCurrent
+				console.log(this.currentIndex,'点击了')
+			},
+			animationfinish(e){
+				//console.log(e.detail.current,e)
+				this.currentIndex = e.detail.current
+				e.detail.current != this.dayCurrent ? this.showBack = true : this.showBack = false
+			},
 			group(array, subGroupLength) {
 			      let index = 0;
 			      let newArray = [];
@@ -295,17 +318,18 @@
 							let zheng = Math.floor(this.currentDay / 5)
 							this.currentIndex = zheng
 							let yu = this.currentDay % 5
-							if(this.currentDay <=5){this.scrollLeft = 0}
+							//if(this.currentDay <=5){this.scrollLeft = 0}
 							
 							if(zheng >= 1 && yu > 0){
 								// 不是前五个，并且不能整除
-								this.scrollLeft = (this.windowWidth - 30) * zheng 
+								// this.scrollLeft = (this.windowWidth - 30) * zheng 
 							}
 							if(zheng > 1 && yu == 0){
-								this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
+							//	this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
 								this.currentIndex -= 1
 							}
-							// console.log(zheng, yu, this.scrollLeft, this.windowWidth, 'this.scrollLeft')
+							this.dayCurrent = this.currentIndex
+							console.log(this.currentIndex, 'this.scrollLeft')
 							this.getTask(this.currentDay)
 							
 							
@@ -630,7 +654,7 @@
 		image{width:50px !important; padding: 3px; height: 50px !important; border:  1px solid #eee;  border-radius: 64px; overflow: hidden;;}
 		.username{font-size: 24rpx; color: #999; margin-top: 6rpx; }
 	}
-	.allComments{ background-color: #fff; margin-top: 20rpx; padding: 20rpx; margin-bottom: 40rpx; }
+	.allComments{ background-color: #fff; margin-top: 20rpx; padding: 20rpx; }
 	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
 	.haveSignText{color: #999 ;}
 	.calendar_info {
@@ -640,17 +664,31 @@
 		 padding: 20rpx;
 
 		.dakaBtn {
-			color: #55aa7f;
-			display: flex;
+			
+				// height: 52rpx; 
+				font-size: 24rpx; 
+				// line-height: 52rpx;
+				color: #55aa7f;
+				//display: flex;
+				padding: 3rpx 5rpx;
+				border: #55aa7f 1px solid;
+				border-radius: 10rpx;
+		}
+		.fanhuiDay{ margin-right: 20rpx;
+			// height: 52rpx; 
+			font-size: 24rpx; 
+			// line-height: 52rpx;
+			color: #a3a3a3;
+			//display: flex;
 			padding: 3rpx 5rpx;
-			border: #55aa7f 1px solid;
+			border: #a3a3a3 1px solid;
 			border-radius: 10rpx;
 		}
 	}
 
 	.scroll-view_H {
 		white-space: nowrap;
-		margin: 20px 0; height: 120rpx !important;
+		margin: 8rpx 0; height: 120rpx !important;
 		width: 100%;
 		.swiperPage{ justify-content: space-between;  height: 120rpx !important;}
 		.item { box-sizing: border-box;
@@ -663,7 +701,7 @@
 			display: inline-block;
 			background-color: #F0FDFF;
 			border-radius: 20rpx;
-			padding: 6rpx 3rpx;
+			padding: 12rpx;
 
 			.day {display: block;
 				font-size: 26rpx;
@@ -693,7 +731,8 @@
 
 			.weidaka {
 				color: #A3B4B5;
-				margin: 10px 0; font-size: 24rpx;
+				margin-top: 12rpx;
+				font-size: 24rpx;
 				border-radius: 20rpx;
 				margin-bottom: 0;
 				display: block;
@@ -852,13 +891,13 @@
 	}
 
 	.container {
-		padding: 30rpx;
+		padding: 20rpx;
 	}
 
 	.calendar_container {
 		//min-height: calc(60vh);
-		background-color: #fff;
-		//padding: 30rpx;
+		 background-color: #fff;
+		padding: 10rpx;
 		box-sizing: border-box;
 		padding-bottom: 20rpx;
 		border-radius: 20rpx;
@@ -872,12 +911,11 @@
 		padding-bottom: 50rpx;
 
 		.title {
-			margin-top: 30rpx;
-			padding: 30rpx;
 			color: #002968;
 			background-color: #fff;
 			font-size: 46rpx;
 			padding: 20rpx;
+			padding-top: 0;
 		}
 
 		.item {}
@@ -887,6 +925,7 @@
 		}
 
 		.txt {
+			font-size: 24rpx;
 			margin-top: 30rpx;
 			color: #666;
 			line-height: 50rpx;
@@ -963,4 +1002,5 @@
 		display: flex;
 	}
 	.mb50{margin-bottom: 50rpx;}
+	.pb100{padding-bottom: 100rpx;}
 </style>
\ No newline at end of file