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-10-12 16:39:55 +08:00
parent 9a5afe03d3
commit 84a2505e2a
1 changed files with 276 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
pages/clock/clock.vue
View File

@@ -52,7 +52,7 @@
<view class="container1">
<view class="task" v-if="taskInfo.id">
<view class="title">
{{taskInfo.heading}}
{{taskInfo.title}}
</view>
<view class="video " v-if="taskInfo.video">
<!-- 视频形式的任务 -->
@@ -61,9 +61,9 @@
@error="videoErrorCallback" controls></video>
</view>
</view>
<view class="image " v-if="taskInfo.images">
<view class="image " v-if="taskInfo.image">
<!-- 图片形式的任务 -->
<image :src="taskInfo.images" @click="previewImage(taskInfo.images)" style="width: 100%;"
<image :src="taskInfo.image" @click="previewImage(taskInfo.image)" style="width: 100%;"
mode="aspectFit"></image>
</view>
<view class="txt" v-if="taskInfo.content" v-html="taskInfo.content"></view>
@@ -76,16 +76,14 @@
<!-- 已打卡 -->
<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>
<!-- <h3>#{{item.TaskHeading}}#</h3> -->
<view class="pjimgs flexbox">
<view class="item" v-for="(item1,index) in item.clockinimages">
<view class="item" v-for="(item1,index) in item.imageList">
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1"
mode="aspectFill" style="width:100%; height: 50px;"></image>
</view>
</view>
<view class="content" v-html="item.phtml"></view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock"
color="#b3b3b3"></u-icon>{{item.createTime}}</span>
@@ -98,39 +96,108 @@
<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="flexbox" style="margin-bottom: 20rpx;">
<view class="touxiang">
<image :src="item.avatar" mode="aspectFit"></image>
<text class="username nowrap ">{{item.name}}</text>
<image v-if="!item.avatar || item.avatar == ''" src="../../static/icon/morenAvavter.png"
mode="aspectFit"></image>
<image v-else :src="item.avatar" mode="aspectFit"></image>
<text class="username nowrap ">{{item.nickName?item.nickName:'匿名用户'}}</text>
</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.imageList">
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1"
mode="aspectFill" style="width:100%; height: 50px;"></image>
</view>
</div>
<view class="content" v-html="item.phtml"></view>
<text class="time">{{item.createdate}}</text>
<view class="content" style="width: 100%;" @click="showPingLun(item)">
<view class="" v-html="item.phtml"></view>
</view>
<view class="flexbox" style="text-align: right; align-items: center;">
<view class="flexbox" @click="showPingLun(item)" style="align-items: center; ">
<u-icon style="display: inline ;margin-left: 10rpx; " name="chat" color="#999"
size="18" ></u-icon>
<text class="time" style="display: inline ;margin-right: 20rpx; ">回复</text>
</view>
<text class="time">{{item.createTime}}</text>
</view>
</view>
</view>
<!-- 显示追平 -->
<!-- <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">
<view class="content" v-html="item.zphtml"></view>
<text class="time">{{item.followUpdate}}</text>
</view>
</view>
</view> -->
<view class="zhuiping item" v-if="item.subCommentList.length > 0" style="padding-left: 50px;">
<view class="subPItem" v-for="item2 in item.subCommentList" :key="item2.key">
<view class="touxiang zhuipingTX flexbox">
<image v-if="!item2.avatar || item2.avatar == ''" src="../../static/icon/morenAvavter.png"
mode="aspectFit"></image>
<image v-else :src="item2.avatar" mode="aspectFit"></image>
<text class="username nowrap subPName">{{item2.nickName?item2.nickName:'匿名用户'}}</text>
<text class="username nowrap" style="padding: 0 10rpx; color: #c7c7c7;">回复了</text>
<text class="username nowrap">{{item2.puserNickName?item2.puserNickName:'匿名用户'}}</text>
</view>
<view class="contentBox">
<!-- <div class="pjimgs flexbox">
<view class="item" v-for="(item1,index) in item2.imageList">
<image v-if="item1.length > 10" @click="previewImage(item1)" :src="item1"
mode="aspectFill" style="width:100%; height: 50px;"></image>
</view>
</div> -->
<view class="content" style="width: 100%;" @click="showPingLun(item2)">
<view class="" v-html="item2.phtml"></view>
<!-- <view class="" v-html="item2.content"></view> -->
</view>
<view class="flexbox" style="text-align: right; align-items: center;">
<view class="flexbox" @click="showPingLun(item2)" style="align-items: center; ">
<u-icon style="display: inline ;margin-left: 10rpx; " name="chat" color="#999"
size="18" ></u-icon>
<text class="time" style="display: inline ;margin-right: 20rpx; ">回复</text>
</view>
<text class="time">{{item2.createTime}}</text>
</view>
</view>
</view>
</view>
</view>
<u-divider text="已加载全部"></u-divider>
</view>
<u-divider v-else text="暂无更多签到记录"></u-divider>
</view>
</view>
<!-- 回复评论弹窗 -->
<u-popup mode="bottom" :show="pinglunShow" :round="10" @close="pinglunShow=false">
<view class="tanchu">
<view class="dp_title">回复 {{opPinglun.nickName}}</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<!-- 提交 -->
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
<!-- <view class="mb30">
<u-upload :fileList="formData.images" @afterRead="afterRead" @delete="deletePic" multiple
:maxCount="4" width="80" height="80" :previewFullImage="true">
</u-upload>
</view> -->
<view class="flex-sub flexbox mb30">
<i @click="showEmj()" :class="emojiIcon"></i>
<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容"></input> -->
<textarea style="border: 1px solid #EEEEEE;" class="textarea" v-model="formData.content"
@focus="InputFocus" @blur="InputBlur" @input="textareaBInput"
placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入回复内容"></textarea>
</view>
<view>
<u-button type="success" @click="goToHuiFu">提交</u-button>
</view>
</view>
<view style="position: relative;">
<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth">
</emotion>
</view>
</view>
</view>
</u-popup>
<!-- 发布评论弹窗 -->
<u-popup mode="bottom" :show="addTextShow" :round="10" @close="addTextShow=false">
<view class="tanchu">
<view class="dp_title">今日签到随想</view>
@@ -138,7 +205,7 @@
<i @click="showEmj()" :class="emojiIcon"></i>
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
</view> -->
<view style="max-height: 1000rpx;overflow-y: scroll;">
<!-- 提交 -->
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
@@ -171,8 +238,10 @@
</u-popup>
<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>
@click="addTextShow = true">说点什么</button>
</view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<music-play :playData="playData"></music-play>
<!-- <z-navigation></z-navigation> -->
</view>
@@ -188,9 +257,14 @@
import {
mapState
} from 'vuex';
import {
param
} from 'jquery';
export default {
data() {
return {
opPinglun:{}, // 针对的评论对象
pinglunShow:false,
placeholder: '开始输入...',
dayCurrent: 0, // 载入页面时的显示页数
showBack: false,
@@ -256,6 +330,13 @@
this.bookid = e.bookid
this.windowWidth = uni.getSystemInfoSync().windowWidth;
},
onPullDownRefresh() {
console.log('下拉刷新了')
this.getBookInfo()
this.initDay()
this.getmySign()
uni.stopPullDownRefresh();
},
onShow() {
this.getBookInfo()
this.initDay()
@@ -270,6 +351,12 @@
...mapState(['userInfo'])
},
methods: {
showPingLun(item) {
// 回复评论
this.opPinglun = item
this.pinglunShow = true
console.log('item45456', this.opPinglun)
},
onEditorReady() {
// #ifdef MP-BAIDU
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
@@ -292,7 +379,7 @@
} else {
console.log(res.msg)
}
console.log(res, 'res基本信息')
console.log(res, '书籍基本信息息')
}).catch((error) => {
console.log(error)
})
@@ -350,12 +437,13 @@
'userId': this.userInfo.id
}
this.$http
.post('book/clockinPunch/clockindays', data)
// .post('book/clockinPunch/clockindays', data)
.get('book/userClockIn/clockInDays', data)
.then(res => {
if (res.code == 0) {
this.currentDay = res.daysBetween
this.linshiDay = res.daysBetween
this.signList = res.dayslist
this.currentDay = res.currentDay
this.linshiDay = res.currentDay
this.signList = res.clockInDayList
console.log(res, '打卡参数')
let zheng = Math.floor(this.currentDay / 5)
this.currentIndex = zheng
@@ -382,19 +470,24 @@
// 获取当天我的发布内容
getmyWord() {
let data = {
'userId': this.userInfo.id,
'entryId': this.taskInfo.id
}
this.$http
.post('book/clockin/myinfolist?userid=' + this.userInfo.id + '&taskid=' + this.taskInfo.id +
'&bookid=' + this.bookid)
// .post('book/clockin/myinfolist?userid=' + this.userInfo.id + '&taskid=' + this.taskInfo.id +
// '&bookid=' + this.bookid)
.get('book/clockInForum/getChatList', data)
.then(res => {
console.log(res, '当天我的打卡内容')
if (res.code == 0 && res.productlist.length > 0) {
if (res.code == 0 && res.chatList.length > 0) {
var arr = []
res.productlist.forEach((item1) => {
res.chatList.forEach((item1) => {
var pjstr = ''
var imgs = []
imgs = item1.clockinimages.split(',')
//imgs = item1.clockinimages.split(',')
pjstr = this.getHtmlComment(item1.content)
item1.clockinimages = imgs
// item1.clockinimages = imgs
item1.phtml = pjstr
arr.push(item1)
})
@@ -423,32 +516,36 @@
getAllSign(val) {
console.log(val, '-----------')
let data = {
'bookid': this.bookid,
'limit': 5,
'page': this.page,
'taskid': val.id
'entryId': val.id
// 'bookid': this.bookid,
// 'limit': 5,
// 'page': this.page,
// 'taskid': val.id
}
this.$http
.post('book/clockin/applist', data)
// .post('book/clockin/applist', data)
.get('book/clockInForum/getChatList', data)
.then(res => {
if (res.code == 0) {
console.log(res, '所有人打卡信息')
if (res.list.length > 0) {
var arr = res.list
if (res.chatList.length > 0) {
var arr = res.chatList
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')
//arr1 = arr[i].images.split(',')
// arr[i].images = arr1
arr[i].phtml = pjstr
for (var j = 0; j < arr[i].subCommentList.length; j++) {
var subpjstr = ''
subpjstr = this.getHtmlComment(arr[i].subCommentList[j].content)
arr[i].subCommentList[j].phtml = subpjstr
}
}
// console.log(arr,'res.page.list')
console.log(arr,'评论处理后的数据结构')
this.commentsList = arr
} else {
this.commentsList = []
@@ -462,18 +559,19 @@
getTask(index) {
uni.showLoading()
let data = {
'bookid': this.bookid,
'days': index
'bookId': this.bookid,
'day': index
}
console.log(data)
this.linshiDay = index
this.$http
.post('book/task/applist', data)
// .post('book/task/applist', data)
.get('book/clockInForum/getPostingInfo', data)
.then(res => {
if (res.code == 0) {
console.log(res, '任务信息')
if (res.page.list.length > 0) {
this.taskInfo = res.page.list[0]
if (res.result != {}) {
this.taskInfo = res.result
this.taskInfo.video != '' ? this.poster = this.taskInfo.video +
"?x-oss-process=video/snapshot,t_0,f_jpg" : ''
this.getmyWord()
@@ -541,49 +639,107 @@
let data = {
"bookId": this.bookid,
"userId": this.userInfo.id,
"tid": this.taskInfo.id,
"days": this.currentDay
// "tid": this.taskInfo.id,
// "days": this.currentDay
}
this.$http
// .post('book/clockinPunch/clockindays', data)
.get('book/userClockIn/clockIn', data)
.then(res => {
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title: '签到成功',
icon: 'success'
})
setTimeout(() => {
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.getmySign()
this.getAllSign(this.taskInfo)
}, 1000)
}
});
},
// 提交回复评论
goToHuiFu(){
let myFid = null
if(this.opPinglun.fid == 0){
myFid = this.opPinglun.id
}else if (this.opPinglun.fid != 0){
myFid = this.opPinglun.fid
}
let data = {
// 'bookId': this.bookid,
"userId": this.userInfo.id,
"entryId": this.taskInfo.id,
'fid': myFid,
'puserId': this.opPinglun.userId,
// "dayId": this.currentDay,
"content": this.formData.content,
"pchatId": this.opPinglun.id,
// "imageList": imgs,
}
console.log(data, 'data回复提交数据')
// url: 'book/clockin/save',
// this.$http
// .post('book/clockInForum/addChat', data)
$http.request({
url: 'book/clockinPunch/save',
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
url: "book/clockInForum/addChat",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title: '签到成功',
icon: 'success'
})
this.addTextShow = false
this.pinglunShow = false
this.opPinglun = {}
this.formData.content = ''
this.formData.images = []
this.getmySign()
this.getAllSign(this.taskInfo)
this.formData.imagesStr = []
uni.showToast({
title: '回复成功',
icon: 'success'
})
setTimeout(() => {
this.getmySign()
this.getTask(this.currentDay)
},2000)
}
});
},
// 说点什么
goToSign() {
let data = {
'bookId': this.bookid,
"userId": this.userInfo.id,
"taskId": this.taskInfo.id,
"dayId": this.currentDay,
"content": this.formData.content,
// "images": this.formData.imagesStr.join(),
"imageeStrings": this.formData.images,
}
// images数据处理
var imgs = []
imgs = this.formData.images.map(item => {
return item.url
})
let data = {
// 'bookId': this.bookid,
"userId": this.userInfo.id,
"entryId": this.taskInfo.id,
'fid': 0,
'puserId': 0,
// "dayId": this.currentDay,
"content": this.formData.content,
"pchatId": 0,
"imageList": imgs,
}
console.log(data, 'data')
// url: 'book/clockin/save',
// this.$http
// .post('book/clockInForum/addChat', data)
$http.request({
url: 'book/clockin/save',
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
url: "book/clockInForum/addChat",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
@@ -591,16 +747,18 @@
}).then(res => {
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title: '发布成功',
icon: 'success'
})
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.formData.imagesStr = []
this.getmySign()
this.getTask()
uni.showToast({
title: '发布成功',
icon: 'success'
})
setTimeout(() => {
this.getmySign()
this.getTask(this.currentDay)
},2000)
}
@@ -731,20 +889,24 @@
</script>
<style lang="scss" scoped>
.ql-editor{min-height: 50rpx;}
.pingjiaBox{margin-bottom: 20rpx;}
.ql-editor {
min-height: 50rpx;
}
.ql-container {
width: calc(100% - 30rpx);
min-height: 50rpx !important;
height: auto !important;
font-style: normal;
font-size: 30rpx;
margin: 0 auto;
border: 1px solid #ddd;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 20rpx;
}
.pjimgs {
margin: 10px 0;
margin: 10rpx 0;
flex-wrap: wrap;
display: flex;
@@ -774,7 +936,7 @@
float: right;
}
}
.touxiang {
width: 50px;
overflow: hidden;
@@ -796,7 +958,20 @@
margin-top: 6rpx;
}
}
.subPItem{margin-bottom: 40rpx;}
.subPName{padding-left: 10rpx;}
.zhuipingTX{
width: 100%;
image {
width: 30px !important;
padding: 3px;
height: 30px !important;
border: 1px solid #eee;
border-radius: 64px;
overflow: hidden;
;
}
}
.allComments {
background-color: #fff;
margin-top: 20rpx;
@@ -844,6 +1019,11 @@
}
}
.gzicon {
width: 10px !important;
height: 10px !important;
}
.scroll-view_H {
white-space: nowrap;
margin: 8rpx 0;
@@ -1145,8 +1325,8 @@
}
.had {
padding: 60rpx;
margin-top: 30rpx;
padding: 20rpx;
// margin-top: 30rpx;
background-color: #fff;
h3 {
@@ -1156,7 +1336,7 @@
.content {
line-height: 60rpx;
margin-top: 30rpx;
margin-top: 10rpx;
font-size: 30rpx;
color: #0e0e15;
}
@@ -1173,7 +1353,7 @@
}
.opBtns {
margin-top: 30rpx;
margin-top: 10rpx;
span {
color: #b3b3b3;