zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打卡部分部分修改

Browse Source
This commit is contained in:
@fawn-nine
2023-09-14 15:20:22 +08:00
parent 099735e846
commit 46a66c8884
1 changed files with 73 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
pages/clock/clock.vue
View File

@@ -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>