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-08 18:06:39 +08:00
parent 7b9044f4df
commit b0cc2b8663
62 changed files with 5075 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
pages/clock/clock.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="container">
<view :class="['container', currentDay == linshiDay ? 'mb50':'']">
<z-nav-bar title="读书打卡"></z-nav-bar>
<!-- 仿钉钉打卡日历组件 -->
<view class="calendar_container">
@@ -15,24 +15,40 @@
<text>今天已签到</text>
</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">
<!-- <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="['item', signList.indexOf(index+1) != -1 ? 'havSign' : '',
currentDay == index+1 && signList.indexOf(index+1) == -1 ? 'current' : '',
linshiDay == index+1 ? 'linshiDay':'']" @click="getInfo(index+1)">
<span class="day">第 <em>{{index+1}}</em> 天</span>
<span class="day"><em>{{index+1}}</em> 天</span>
<u-icon v-if="signList.indexOf(index+1) != -1" name="checkbox-mark" color="#fff" size="28" style="margin: 0 auto; width: 28px; text-align: center;"></u-icon>
<span v-if="signList.indexOf(index+1) == -1 && currentDay > index+1" class="buka">未签</span>
<span v-if="currentDay < index+1" class="weidaka">未开始</span>
<span v-if="currentDay == index+1 && signList.indexOf(index+1) == -1" class="daka" @click="kuickSign()">签到</span>
</view>
</view>
</scroll-view>
</scroll-view> -->
<swiper class="swiper scroll-view_H" :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> -->
<view v-for="(item1,index1) in item" :key="index1"
: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>
<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>
<span v-if="currentDay == item1 && signList.indexOf(item1) == -1" class="daka" @click="kuickSign()">签到</span>
</view>
</swiper-item>
</swiper>
</view>
<view class="container1">
<view class="task" v-if="taskInfo !== {}">
<view class="title" v-if="taskInfo.heading">
<view class="task" v-if="taskInfo.id" >
<view class="title" >
{{taskInfo.heading}}
</view>
<view class="video " v-if="taskInfo.video">
@@ -46,49 +62,36 @@
<view class="image " v-if="taskInfo.images">
<!-- 图片形式的任务 -->
<image :src="taskInfo.images" style="width: 100%;" mode="aspectFit"></image>
</view>
<!-- <view class="voice ">
音频形式的任务
<audio style="text-align: center; width: 100%;" :src="currentAudio.src"
:poster="currentAudio.poster" :name="currentAudio.name" :author="currentAudio.author"
:action="audioAction" controls></audio>
</view> -->
</view>
<view class="txt" v-if="taskInfo.content" v-html="taskInfo.content"></view>
</view>
<view class="subContent">
<view v-else>
<u-divider text="今天未发布打卡任务"></u-divider>
</view>
<view :class="['subContent']" v-if="myword.length > 0">
<text class="clockTitle">-- 我的签到 --</text>
<!-- 未打卡 -->
<!-- 已打卡 -->
<view class="had" v-if="show">
<view class="item">
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<view class="had" >
<view class="item" v-for="(item, index) in myword" :key="index">
<h3>#{{item.TaskHeading}}#</h3>
<view class="content" v-html="item.phtml">
</view>
<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 class="pjimgs flexbox">
<view class="item" v-for="(item1,index) in item.clockinimages">
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1" mode="aspectFill" style="width:100%; height: 50px;"></image>
</view>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23 14:01</span>
</view>
</view>
</view>
</view>
</view>
<!-- 他人的打卡记录 -->
<view class="" v-if="commentsList && commentsList.length > 0">
<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
<view class="allComments" v-if="commentsList && commentsList.length > 0">
<text class="clockTitle">-- 更多签到记录 --</text>
<view :class="['pingjiaBox']" v-for="(item, index) in commentsList" :key="index">
<view class="flexbox">
<view class="touxiang">
<image :src="item.avatar" mode="aspectFit"></image>
@@ -96,7 +99,7 @@
</view>
<view class="contentBox">
<div class="pjimgs flexbox">
<view class="item" v-for="(item1,index) in item.images">
<view class="item" v-for="(item1,index) in item.images">
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1" mode="aspectFill" style="width:100%; height: 50px;"></image>
</view>
@@ -106,7 +109,7 @@
</view>
</view>
<!-- 显示追平 -->
<view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 50px;">
<!-- <view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 50px;">
<h5 style="color: #dbdbdb; margin:10px;">追评内容：</h5>
<view class="flexbox">
<view class="contentBox">
@@ -114,12 +117,12 @@
<text class="time">{{item.followUpdate}}</text>
</view>
</view>
</view>
</view> -->
</view>
</view>
<view class="quesheng" v-else>
<!-- <view class="quesheng" v-else>
<text>暂无评价~</text>
</view>
</view> -->
</view>
<u-popup mode="bottom" :show="addTextShow" :round="10" @close="addTextShow=false">
<view class="tanchu">
@@ -154,7 +157,7 @@
</view>
</u-popup>
<view class="leaveBtn" v-if="!addTextShow">
<view class="leaveBtn" v-if="!addTextShow && currentDay == linshiDay">
<button type="primary" plain="true" @click="addTextShow = true">说点什么</button>
</view>
<music-play :playData="playData"></music-play>
@@ -163,6 +166,7 @@
</template>
<script>
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import $http from '@/config/requestConfig.js';
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
@@ -174,17 +178,25 @@
export default {
data() {
return {
currentIndex:0,
dayList:[],
indicatorDots: false,
autoplay: false,
interval: 2000,
duration: 500,
commentsList:[], // 他人的打卡列表
addTextShow: false, // 说点什么弹出层
show: false,
scrollLeft: 0, // 距离左侧的距离
currentDay:1, // 当前打卡位置
currentDay:0, // 当前打卡位置
currentTid:null, // 今天的任务id
emojiIcon: 'cuIcon-emoji',
windowWidth: 0,
taskInfo:{
id:null,
heading:''
},
list3:[], // 时间日期
emoji: [],
signList:[], // 已打卡天
linshiDay:null,
@@ -196,10 +208,12 @@
videoContext: null,
innerAudioContext: null, // 音频对象
poster: '',
myword:[], // 我的打卡内容
formData: {
// 打卡表单
content: '',
images: []
images: [],
imagesStr: []
},
currentAudio: {
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
@@ -223,8 +237,10 @@
},
onLoad(e) {
this.bookid = e.bookid
this.windowWidth = uni.getSystemInfoSync().windowWidth;
this.getmySign()
this.windowWidth = uni.getSystemInfoSync().windowWidth;
this.initDay()
this.getmySign()
},
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
@@ -235,6 +251,26 @@
...mapState(['userInfo'])
},
methods: {
group(array, subGroupLength) {
let index = 0;
let newArray = [];
while(index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
},
// 初始化day
initDay(){
var listint = 1
var arr = []
var arr1 = []
for (var i= 1; i<=365; i++) {
arr.push(i)
}
arr1 = this.group(arr, 5)
this.dayList = arr1
// console.log(arr1,'+++++++++++++')
},
// 放大图片
previewImage(url){
console.log(url)
@@ -252,10 +288,12 @@
.post('book/clockinPunch/clockindays', data)
.then(res => {
if (res.code == 0) {
this.currentDay = res.daysBetween
this.currentDay = res.daysBetween
this.linshiDay = res.daysBetween
this.signList = res.dayslist
console.log(res, '打卡参数')
let zheng = Math.floor(this.currentDay / 5)
this.currentIndex = zheng
let yu = this.currentDay % 5
if(this.currentDay <=5){this.scrollLeft = 0}
@@ -265,14 +303,44 @@
}
if(zheng > 1 && yu == 0){
this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
this.currentIndex -= 1
}
// console.log(zheng, yu, this.scrollLeft, this.windowWidth, 'this.scrollLeft')
this.getTask(this.currentDay)
this.getAllSign(this.currentDay)
}
});
},
// 获取当天我的发布内容
getmyWord(){
this.$http
.post('book/clockin/myinfolist?userid='+this.userInfo.id+'&taskid='+ this.taskInfo.id + '&bookid='+this.bookid)
.then(res => {
console.log(res,'当天我的打卡内容')
if(res.code == 0 && res.productlist.length > 0 ){
var arr = []
res.productlist.forEach((item1)=>{
var pjstr = ''
var imgs = []
imgs = item1.clockinimages.split(',')
pjstr = this.getHtmlComment(item1.content)
item1.clockinimages = imgs
item1.phtml = pjstr
arr.push(item1)
})
this.myword = arr
// console.log(this.myword,'this.myword')
}else{
this.myword = []
}
})
.catch(e => {
console.log(e)
})
},
// 获取签到详情
getInfo(index){
if(this.currentDay < index){
@@ -281,32 +349,52 @@
icon: 'none'
})
}else{
this.linshiDay = index
this.getTask(index)
this.getAllSign(index)
this.linshiDay = index
this.getTask(index)
}
},
// 获取某天的签到列表信息
getAllSign(index){
getAllSign(val){
console.log(val,'-----------')
let data = {
'bookid': this.bookid,
'limit': 5,
'page': this.page,
'taskid': index
'taskid': val.id
}
console.log(data)
this.$http
.post('book/clockin/applist', data)
.then(res => {
if (res.code == 0) {
console.log(res, '所有人打卡信息')
this.commentsList = res.page.list
if(res.list.length > 0){
var arr = res.list
for (var i=0; i<arr.length; i++) {
var arr1 = []
var pjstr = ''
// console.log(arr[i].content,'arr[i].content')
pjstr = this.getHtmlComment(arr[i].content)
// console.log(pjstr,'pjstr')
arr1 = arr[i].images.split(',')
arr[i].images = arr1
arr[i].phtml = pjstr
// console.log(arr1,'arr1')
}
// console.log(arr,'res.page.list')
this.commentsList = arr
}else{
this.commentsList = []
}
}
});
},
// 获取对应签到内容
getTask(index){
uni.showLoading()
let data = {
'bookid': this.bookid,
'days': index
@@ -317,22 +405,32 @@
.then(res => {
if (res.code == 0) {
console.log(res, '任务信息')
if(res.page.list.length > 0){
this.taskInfo = res.page.list[0]
this.taskInfo.video != ''? this.poster = this.taskInfo.video + "?x-oss-process=video/snapshot,t_0,f_jpg" : ''
this.getmyWord()
this.getAllSign(this.taskInfo)
}else{
this.taskInfo = {}
this.poster = ''
}
}
uni.hideLoading()
});
}).catch(e => {
uni.hideLoading()
})
},
// 快捷签到
kuickSign(){
console.log()
let data = {
"bookId": this.bookid,
"userId": this.userInfo.id,
"tid": this.taskInfo.id,
"days":this.currentDay
}
// console.log(data,'data')
$http.request({
url : 'book/clockinPunch/save',
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
@@ -344,13 +442,13 @@
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title:res.msg
title:'签到成功'
})
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.getmySign()
this.getAllSign(this.currentDay)
this.getAllSign(this.taskInfo)
}
});
@@ -360,20 +458,16 @@
let data = {
'bookId': this.bookid,
"userId": this.userInfo.id,
"taskId": this.currentDay,
"taskId": this.taskInfo.id,
"dayId": this.currentDay,
"content": this.formData.content,
"images": this.formData.images.join(),
}
// console.log(data,'data')
var surl = ''
if(this.signList.indexOf(this.currentDay) != -1){
surl='book/clockin/update'
}else{
surl = 'book/clockin/save'
}
// "images": this.formData.imagesStr.join(),
"imageeStrings": this.formData.images,
}
console.log(data,'data')
$http.request({
url : surl,
url : 'book/clockin/save',
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
@@ -383,13 +477,15 @@
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title:res.msg
title:'发布成功'
})
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.formData.imagesStr = []
this.getmySign()
this.getAllSign(this.currentDay)
this.getTask()
}
});
@@ -450,7 +546,7 @@
// 处理格式
getHtmlComment(comment) {
// 格式化html
// 这里处理 链接 换行符
// 这里处理 链接 换行符
let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
// console.log(item, index)
var indexss = emojiList1.findIndex(item1 => item1.alt === item)
@@ -491,7 +587,8 @@
success: (res) => {
that.formData.images.push({
url: JSON.parse(res.data).url
})
})
console.log(that.formData.images,'that.formData.images')
}
});
}
@@ -518,6 +615,21 @@
</script>
<style lang="scss" scoped>
.pjimgs{ margin: 10px 0;flex-wrap: wrap; display: flex;
.item{width: 23%; margin-right: 10px;
image{ }
}
}
.contentBox{width: calc(100% - 50px);box-sizing: border-box; padding-left: 20rpx;
.content{font-size: 28rpx; line-height: 40rpx;}
.time{font-size: 24rpx; color: #999; margin-top: 6rpx; float: right;}
}
.touxiang{width:50px; overflow: hidden; text-align: center;
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; }
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
.haveSignText{color: #999 ;}
.calendar_info {
@@ -537,11 +649,13 @@
.scroll-view_H {
white-space: nowrap;
margin: 20px 0;
margin: 20px 0; height: 120rpx !important;
width: 100%;
.item {
.swiperPage{ justify-content: space-between; height: 120rpx !important;}
.item { box-sizing: border-box;
width: calc(20% - 12rpx) !important;
border: 1px dashed #999;
height: 120rpx;
width: calc(100% - 6rpx);
// margin: 0 6rpx;
text-align: center;
@@ -555,7 +669,7 @@
color: #999;
em {
font-size: 36rpx;
font-size: 30rpx;
font-style: normal;
font-weight: bold;
padding-right: 2px;
@@ -567,6 +681,7 @@
}
.buka {
font-size: 24rpx;
display: inline-block; padding: 0 6rpx;
color: #888;
// border: 1px solid #888;
@@ -577,12 +692,13 @@
.weidaka {
color: #A3B4B5;
margin: 10px 0; font-size: 24;
margin: 10px 0; font-size: 24rpx;
border-radius: 20rpx;
margin-bottom: 0;
display: block;
}
.daka{
font-size: 24rpx;
display: inline-block; padding: 0 6rpx;
border: 1px solid #55aaff;
color: #55aaff;
@@ -600,13 +716,13 @@
display: inline-block;
background-color: #55aa7f;
border-radius: 20rpx;
padding: 6px 6px;
padding: 6px 3px;
.day {
font-size: 26rpx;
color: #fff;
em {
font-size: 32rpx;
font-size: 30rpx;
font-style: normal;
font-weight: bold;
padding-right: 2px;
@@ -625,11 +741,12 @@
background-color: #edf9ff;
border-radius: 20rpx;
padding: 6px 6px;
.day {
font-size: 26rpx;
color: #55aaff;
em {
font-size: 32rpx;
font-size: 30rpx;
font-style: normal;
font-weight: bold;
padding-right: 2px;
@@ -637,6 +754,9 @@
}
}
.item.linshiDay{
.daka{
color: #fff; border-color:#fff;
}
border: 1px solid #55aaff;
text-align: center;
@@ -714,15 +834,15 @@
background-color: #fff;
overflow: hidden;
.clockTitle {
}
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx;
margin-top: 30rpx; margin-bottom: 30rpx;
}
}
.container1 {
.margin-top {
margin-top: 30rpx;
@@ -841,4 +961,5 @@
.flexbox {
display: flex;
}
.mb50{margin-bottom: 50rpx;}
</style>