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

352
pages/clock/clock.vue
View File

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