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