1382 lines
35 KiB
Vue
1382 lines
35 KiB
Vue
<template>
|
||
<view :class="['container', currentDay == linshiDay && taskInfo.id && myword.length == 0 ? 'pb100':'']">
|
||
<z-nav-bar title="读书打卡"></z-nav-bar>
|
||
<!-- 仿钉钉打卡日历组件 -->
|
||
<view class=""
|
||
style="padding: 10rpx 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; background-color: #fff; font-size: 24rpx;">
|
||
<text>正在参与<em @click="gotoDetail"
|
||
style="font-style: normal; font-weight: bold; color: #55aa7f; padding: 10rpx;">{{bookInfo.name}}</em>的打卡任务</text>
|
||
</view>
|
||
<view class="calendar_container">
|
||
<!-- <zsy-calendar @change="change" /> -->
|
||
<!-- <clock-date></clock-date> -->
|
||
<view class="calendar_info">
|
||
<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="buSign()"
|
||
v-if="signList.indexOf(currentDay) == -1 && currentDay > linshiDay">
|
||
<text style="font-size: 24rpx;">补卡</text>
|
||
</view>
|
||
<view class="dakaBtn" @tap="kuickSign()"
|
||
v-if="signList.indexOf(currentDay) == -1 && currentDay == linshiDay">
|
||
<text style="font-size: 24rpx;">签到</text>
|
||
</view>
|
||
<!-- <view v-else class="dakaBtn" style="border-color: #fff;">
|
||
<text style=" color:#a3a3a3;">今天已签到</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<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> -->
|
||
<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.stop="kuickSign()">签到</span>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="container1">
|
||
<view class="task" v-if="taskInfo.id">
|
||
<view class="title">
|
||
{{taskInfo.title}}
|
||
</view>
|
||
<view class="video " v-if="taskInfo.video">
|
||
<!-- 视频形式的任务 -->
|
||
<view class="taskinfo">
|
||
<video id="myVideo" :poster="poster" v-show="!addTextShow" :src="taskInfo.video"
|
||
@error="videoErrorCallback" controls></video>
|
||
</view>
|
||
</view>
|
||
<view class="image " v-if="taskInfo.image">
|
||
<!-- 图片形式的任务 -->
|
||
<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>
|
||
</view>
|
||
<view v-else>
|
||
<u-divider text="今天未发布打卡任务"></u-divider>
|
||
</view>
|
||
<view :class="['subContent']" v-if="myword.length > 0">
|
||
<text class="clockTitle">-- 我的签到 --</text>
|
||
<!-- 已打卡 -->
|
||
<view class="had">
|
||
<view class="item" v-for="(item, index) in myword" :key="index">
|
||
<!-- <h3>#{{item.TaskHeading}}#</h3> -->
|
||
<view class="pjimgs flexbox">
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 他人的打卡记录 -->
|
||
<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" style="margin-bottom: 20rpx;">
|
||
<view class="touxiang">
|
||
<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.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(item)">
|
||
<view class="" v-html="item.phtml"></view>
|
||
</view>
|
||
<view class="flexbox" style="text-align: right; align-items: center; justify-content: space-between;">
|
||
<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.subCommentList.length > 0" style="padding-left: 50px;">
|
||
<view class="subPItem" v-for="item2 in item.subCommentList" :key="item2.key">
|
||
<view class="touxiang zhuipingTX flexbox">
|
||
<view class="left">
|
||
<image v-if="!item2.avatar || item2.avatar == ''" src="../../static/icon/morenAvavter.png"
|
||
mode="aspectFit"></image>
|
||
<image v-else :src="item2.avatar" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="neirong" style="text-align: left;">
|
||
<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 class="contentBox" style="width: 100% !important; padding-left: 3px;">
|
||
<!-- <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; justify-content: space-between;">
|
||
<view class="flexbox" @click="showPingLun(item2)" style="align-items: center;justify-content: space-between; ">
|
||
<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>
|
||
<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 ? 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>
|
||
<!-- <view class="flexbox">
|
||
<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;">
|
||
<view class="mb30">
|
||
<!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
|
||
<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="goToSign">提交</u-button>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view style="position: relative;">
|
||
<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth">
|
||
</emotion>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</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>
|
||
</view>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<music-play :playData="playData"></music-play>
|
||
<!-- <z-navigation></z-navigation> -->
|
||
</view>
|
||
</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'
|
||
import clockDate from '@/components/clockDate.vue'
|
||
import musicPlay from '@/components/music.vue'
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
import {
|
||
param
|
||
} from 'jquery';
|
||
export default {
|
||
data() {
|
||
return {
|
||
opPinglun:{}, // 针对的评论对象
|
||
pinglunShow:false,
|
||
placeholder: '开始输入...',
|
||
dayCurrent: 0, // 载入页面时的显示页数
|
||
showBack: false,
|
||
currentIndex: 0,
|
||
dayList: [],
|
||
indicatorDots: false,
|
||
autoplay: false,
|
||
interval: 2000,
|
||
duration: 500,
|
||
commentsList: [], // 他人的打卡列表
|
||
addTextShow: false, // 说点什么弹出层
|
||
show: false,
|
||
scrollLeft: 0, // 距离左侧的距离
|
||
currentDay: 0, // 当前打卡位置
|
||
currentTid: null, // 今天的任务id
|
||
emojiIcon: 'cuIcon-emoji',
|
||
windowWidth: 0,
|
||
taskInfo: {
|
||
id: null,
|
||
heading: ''
|
||
},
|
||
list3: [], // 时间日期
|
||
emoji: [],
|
||
signList: [], // 已打卡天
|
||
linshiDay: null,
|
||
page: 1,
|
||
bookid: null,
|
||
windowHeight: 500,
|
||
isShowEmj: false,
|
||
playData: {},
|
||
bookInfo: {}, // 书籍信息
|
||
videoContext: null,
|
||
innerAudioContext: null, // 音频对象
|
||
poster: '',
|
||
myword: [], // 我的打卡内容
|
||
formData: {
|
||
// 打卡表单
|
||
content: '',
|
||
images: [],
|
||
imagesStr: []
|
||
},
|
||
currentAudio: {
|
||
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
|
||
name: '致爱丽丝',
|
||
author: '暂无',
|
||
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
|
||
},
|
||
audioAction: {
|
||
method: 'pause'
|
||
},
|
||
// 校验规则
|
||
rules: {
|
||
content: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '内容不能为空'
|
||
}]
|
||
},
|
||
},
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
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()
|
||
this.getmySign()
|
||
},
|
||
onReady() {
|
||
this.videoContext = uni.createVideoContext('myVideo')
|
||
this.innerAudioContext = uni.createInnerAudioContext();
|
||
this.innerAudioContext.autoplay = false;
|
||
},
|
||
computed: {
|
||
...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');
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS || H5 ||MP-WEIXIN
|
||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||
this.editorCtx = res.context
|
||
}).exec()
|
||
// #endif
|
||
},
|
||
// 获取书籍信息
|
||
getBookInfo() {
|
||
this.$http
|
||
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
console.log(res, 'res')
|
||
this.bookInfo = res.book
|
||
} else {
|
||
console.log(res.msg)
|
||
}
|
||
console.log(res, '书籍基本信息息')
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
gotoDetail() {
|
||
uni.navigateTo({
|
||
url: '../eBook/bookContent?Id=' + this.bookInfo.id
|
||
});
|
||
},
|
||
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 = [];
|
||
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)
|
||
uni.previewImage({
|
||
urls: [url]
|
||
});
|
||
},
|
||
// 获取打卡参数
|
||
getmySign() {
|
||
let data = {
|
||
'bookId': this.bookid,
|
||
'userId': this.userInfo.id
|
||
}
|
||
this.$http
|
||
// .post('book/clockinPunch/clockindays', data)
|
||
.get('book/userClockIn/clockInDays', data)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
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
|
||
let yu = this.currentDay % 5
|
||
//if(this.currentDay <=5){this.scrollLeft = 0}
|
||
|
||
if (zheng >= 1 && yu > 0) {
|
||
// 不是前五个，并且不能整除
|
||
// this.scrollLeft = (this.windowWidth - 30) * zheng
|
||
}
|
||
if (zheng > 1 && yu == 0) {
|
||
// this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
|
||
this.currentIndex -= 1
|
||
}
|
||
this.dayCurrent = this.currentIndex
|
||
console.log(this.currentIndex, 'this.scrollLeft')
|
||
this.getTask(this.currentDay)
|
||
|
||
|
||
}
|
||
|
||
});
|
||
},
|
||
|
||
// 获取当天我的发布内容
|
||
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)
|
||
.get('book/clockInForum/getChatList', data)
|
||
.then(res => {
|
||
console.log(res, '当天我的打卡内容')
|
||
if (res.code == 0 && res.chatList.length > 0) {
|
||
var arr = []
|
||
res.chatList.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) {
|
||
uni.showToast({
|
||
title: '未来日期不可签到',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.getTask(index)
|
||
}
|
||
},
|
||
// 获取某天的签到列表信息
|
||
getAllSign(val) {
|
||
console.log(val, '-----------')
|
||
let data = {
|
||
'entryId': val.id
|
||
// 'bookid': this.bookid,
|
||
// 'limit': 5,
|
||
// 'page': this.page,
|
||
// 'taskid': val.id
|
||
}
|
||
this.$http
|
||
// .post('book/clockin/applist', data)
|
||
.get('book/clockInForum/getChatList', data)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
console.log(res, '所有人打卡信息')
|
||
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
|
||
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,'评论处理后的数据结构')
|
||
this.commentsList = arr
|
||
} else {
|
||
this.commentsList = []
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
},
|
||
// 获取对应签到内容
|
||
getTask(index) {
|
||
uni.showLoading()
|
||
let data = {
|
||
'bookId': this.bookid,
|
||
'day': index
|
||
}
|
||
console.log(data)
|
||
this.linshiDay = index
|
||
this.$http
|
||
// .post('book/task/applist', data)
|
||
.get('book/clockInForum/getPostingInfo', data)
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
console.log(res, '任务信息')
|
||
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()
|
||
this.getAllSign(this.taskInfo)
|
||
} else {
|
||
this.taskInfo = {}
|
||
this.poster = ''
|
||
}
|
||
}
|
||
uni.hideLoading()
|
||
|
||
}).catch(e => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 补卡
|
||
buSign(day) {
|
||
console.log('正在补卡', this.taskInfo)
|
||
if (!this.taskInfo.id) {
|
||
uni.showToast({
|
||
title: '当天未发布打卡任务，不可补卡哦',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
"bookId": this.bookid,
|
||
"userId": this.userInfo.id,
|
||
"tid": this.taskInfo.id,
|
||
"days": this.linshiDay
|
||
}
|
||
console.log(data, 'data')
|
||
$http.request({
|
||
url: 'book/clockinPunch/save',
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
//console.log(res, '快捷签到')
|
||
uni.showToast({
|
||
title: '签到成功'
|
||
})
|
||
this.addTextShow = false
|
||
this.formData.content = ''
|
||
this.formData.images = []
|
||
this.getmySign()
|
||
this.getAllSign(this.taskInfo)
|
||
}
|
||
|
||
});
|
||
},
|
||
// 快捷签到
|
||
kuickSign() {
|
||
|
||
if (!this.taskInfo.id) {
|
||
uni.showToast({
|
||
title: '当天未发布打卡任务,不可签到哦',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
let data = {
|
||
"bookId": this.bookid,
|
||
"userId": this.userInfo.id,
|
||
// "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/clockInForum/addChat",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
|
||
if (res.code == 0) {
|
||
this.pinglunShow = false
|
||
this.opPinglun = {}
|
||
this.formData.content = ''
|
||
this.formData.images = []
|
||
this.formData.imagesStr = []
|
||
uni.showToast({
|
||
title: '回复成功',
|
||
icon: 'success'
|
||
})
|
||
setTimeout(() => {
|
||
this.getmySign()
|
||
this.getTask(this.currentDay)
|
||
},2000)
|
||
}
|
||
|
||
});
|
||
},
|
||
// 说点什么
|
||
goToSign() {
|
||
// 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/clockInForum/addChat",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
//console.log(res, '快捷签到')
|
||
this.addTextShow = false
|
||
this.formData.content = ''
|
||
this.formData.images = []
|
||
this.formData.imagesStr = []
|
||
uni.showToast({
|
||
title: '发布成功',
|
||
icon: 'success'
|
||
})
|
||
setTimeout(() => {
|
||
this.getmySign()
|
||
this.getTask(this.currentDay)
|
||
},2000)
|
||
|
||
}
|
||
|
||
});
|
||
},
|
||
scroll(e) {
|
||
|
||
},
|
||
// 获得输入的表情数组
|
||
handleEmj(i) {
|
||
console.log(i, 'i---------');
|
||
// this.inputValue = i
|
||
// console.log(this.inputValue);
|
||
if (i.emotioni == '[em_98]') {
|
||
//匹配最后一个表情符号并删除11。
|
||
this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
|
||
if (this.emoji.length > 0) {
|
||
this.emoji = this.emoji.slice(0, -1)
|
||
}
|
||
} else {
|
||
this.emoji.push({
|
||
'tag': i.emotion,
|
||
'name': i.emotioni
|
||
})
|
||
// console.log(this.emoji,'this.emoji')
|
||
this.formData.content += i.emotioni;
|
||
/// this.Pform.html += i.emotion
|
||
}
|
||
},
|
||
// 放大图片
|
||
previewImage(url) {
|
||
console.log(url)
|
||
uni.previewImage({
|
||
urls: [url]
|
||
});
|
||
},
|
||
showEmj() {
|
||
let bool = !this.isShowEmj;
|
||
if (bool) {
|
||
this.emojiIcon = 'cuIcon-keyboard';
|
||
} else {
|
||
this.emojiIcon = 'cuIcon-emoji';
|
||
}
|
||
|
||
this.isShowEmj = bool;
|
||
this.$emit('show')
|
||
},
|
||
textareaBInput(e) {
|
||
this.formData.comment = e.detail.value
|
||
},
|
||
InputBlur(e) {
|
||
|
||
},
|
||
InputFocus(e) {
|
||
this.isShowEmj = false;
|
||
this.emojiIcon = 'cuIcon-emoji';
|
||
this.$emit('foc')
|
||
},
|
||
// 处理格式
|
||
getHtmlComment(comment) {
|
||
// 格式化html
|
||
// 这里处理 链接 换行符
|
||
let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
|
||
// console.log(item, index)
|
||
var indexss = emojiList1.findIndex(item1 => item1.alt === item)
|
||
// console.log(indexss, 'indexss')
|
||
return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
|
||
'" width="18rpx">';
|
||
});
|
||
// console.log(replacedStr,'replacedStr')
|
||
return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
|
||
},
|
||
// 提交打卡
|
||
submit() {
|
||
this.$refs['formData'].validate().then(res => {
|
||
console.log('success', res);
|
||
uni.showToast({
|
||
title: `校验通过`
|
||
})
|
||
}).catch(err => {
|
||
console.log('err', err);
|
||
})
|
||
},
|
||
deletePic() {
|
||
let that = this
|
||
that.formData.images.splice(0, 1)
|
||
//console.log(that.Pform.img)
|
||
},
|
||
afterRead(e) {
|
||
//console.log(e)
|
||
let that = this
|
||
for (var i = 0; i < e.file.length; i++) {
|
||
//console.log(i,e.file[i].url)
|
||
uni.uploadFile({
|
||
url: this.$baseUrl + 'oss/fileoss',
|
||
filePath: e.file[i].url,
|
||
//files:e.file,
|
||
name: 'file',
|
||
formData: {},
|
||
success: (res) => {
|
||
that.formData.images.push({
|
||
url: JSON.parse(res.data).url
|
||
})
|
||
console.log(that.formData.images, 'that.formData.images')
|
||
}
|
||
});
|
||
}
|
||
},
|
||
videoErrorCallback: function(e) {
|
||
uni.showModal({
|
||
content: e.target.errMsg,
|
||
showCancel: false
|
||
})
|
||
},
|
||
|
||
// 日历选中日期改变事件回调
|
||
change(e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
components: {
|
||
musicPlay,
|
||
zsyCalendar,
|
||
emotion,
|
||
clockDate
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.pjimgs {
|
||
margin: 10rpx 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;
|
||
margin: 10rpx 0;
|
||
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;
|
||
}
|
||
}
|
||
.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;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.quesheng {
|
||
text-align: center;
|
||
margin-top: 100rpx;
|
||
color: #8b8a91;
|
||
}
|
||
|
||
.haveSignText {
|
||
color: #999;
|
||
}
|
||
|
||
.calendar_info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
|
||
.dakaBtn {
|
||
|
||
// 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: #a3a3a3 1px solid;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.gzicon {
|
||
width: 10px !important;
|
||
height: 10px !important;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
margin: 8rpx 0;
|
||
height: 120rpx !important;
|
||
width: 100%;
|
||
|
||
.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;
|
||
display: inline-block;
|
||
background-color: #F0FDFF;
|
||
border-radius: 20rpx;
|
||
padding: 12rpx;
|
||
|
||
.day {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
|
||
em {
|
||
font-size: 30rpx;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
padding-right: 2px;
|
||
}
|
||
}
|
||
|
||
.checkbox-mark {
|
||
display: none;
|
||
}
|
||
|
||
.buka {
|
||
font-size: 24rpx;
|
||
display: inline-block;
|
||
padding: 0 12rpx;
|
||
color: #888;
|
||
// border: 1px solid #888;
|
||
|
||
margin: 10px 0;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 0;
|
||
;
|
||
}
|
||
|
||
.weidaka {
|
||
color: #A3B4B5;
|
||
margin-top: 12rpx;
|
||
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;
|
||
margin: 10px 0;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 0;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.item.havSign {
|
||
border: 1px solid #55aa7f;
|
||
|
||
text-align: center;
|
||
display: inline-block;
|
||
background-color: #55aa7f;
|
||
border-radius: 20rpx;
|
||
padding: 6px 3px;
|
||
|
||
.day {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
|
||
em {
|
||
font-size: 30rpx;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
padding-right: 2px;
|
||
}
|
||
}
|
||
|
||
.checkbox-mark {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.item.current {
|
||
border: 1px solid #55aaff;
|
||
|
||
text-align: center;
|
||
display: inline-block;
|
||
background-color: #edf9ff;
|
||
border-radius: 20rpx;
|
||
padding: 6px 6px;
|
||
|
||
.day {
|
||
font-size: 26rpx;
|
||
color: #55aaff;
|
||
|
||
em {
|
||
font-size: 30rpx;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
padding-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item.linshiDay {
|
||
.daka {
|
||
color: #fff;
|
||
border-color: #fff;
|
||
}
|
||
|
||
border: 1px solid #55aaff;
|
||
|
||
text-align: center;
|
||
display: inline-block;
|
||
background-color: #55aaff;
|
||
border-radius: 20rpx;
|
||
padding: 6px 6px;
|
||
|
||
.day {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
|
||
em {
|
||
font-size: 32rpx;
|
||
font-style: normal;
|
||
font-weight: bold;
|
||
padding-right: 2px;
|
||
}
|
||
}
|
||
|
||
.buka {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dp_title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 50rpx;
|
||
color: #555;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.mb30 {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.tanchu {
|
||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.cuIcon-emoji {
|
||
background: url(../../static/biaoqing.png) no-repeat;
|
||
background-size: contain;
|
||
display: block;
|
||
margin-right: 20rpx;
|
||
width: 30px;
|
||
}
|
||
|
||
.cuIcon-keyboard {
|
||
background: url(../../static/biaoqing.png) no-repeat;
|
||
background-size: contain;
|
||
display: block;
|
||
width: 30px;
|
||
}
|
||
|
||
.leaveBtn {
|
||
position: fixed;
|
||
width: calc(100% - 4px);
|
||
background: #fff;
|
||
bottom: 1rpx;
|
||
left: 1px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.task {
|
||
margin-top: 40rpx 20rpx;
|
||
|
||
.taskinfo {
|
||
video {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.subContent {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
|
||
|
||
}
|
||
|
||
.clockTitle {
|
||
color: #55aa7f;
|
||
font-size: 38rpx;
|
||
text-align: center;
|
||
display: block;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.container1 {
|
||
.margin-top {
|
||
margin-top: 30rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.calendar_container {
|
||
//min-height: calc(60vh);
|
||
background-color: #fff;
|
||
padding: 10rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.task {
|
||
padding: 30rpx 20rpx;
|
||
background-color: #f5f5f5;
|
||
background-color: #fff;
|
||
padding-bottom: 50rpx;
|
||
|
||
.title {
|
||
color: #002968;
|
||
background-color: #fff;
|
||
font-size: 46rpx;
|
||
padding: 20rpx;
|
||
padding-top: 0;
|
||
}
|
||
|
||
.item {}
|
||
|
||
.video {
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
}
|
||
|
||
.txt {
|
||
font-size: 24rpx;
|
||
margin-top: 30rpx;
|
||
color: #666;
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.haveNo {
|
||
background: #fff;
|
||
|
||
.box {
|
||
height: 20vh;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
button {
|
||
width: 50%;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.subform {
|
||
padding: 0 20rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.btns {
|
||
width: 400rpx;
|
||
margin: 0 auto;
|
||
margin-bottom: 40rpx;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.had {
|
||
padding: 20rpx;
|
||
// margin-top: 30rpx;
|
||
background-color: #fff;
|
||
|
||
h3 {
|
||
color: #8c9a92;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.content {
|
||
line-height: 60rpx;
|
||
margin-top: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #0e0e15;
|
||
}
|
||
|
||
.images {
|
||
height: 150rpx;
|
||
overflow: hidden;
|
||
margin-top: 30rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
margin: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.opBtns {
|
||
margin-top: 10rpx;
|
||
|
||
span {
|
||
color: #b3b3b3;
|
||
// padding-left: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.mb50 {
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.pb100 {
|
||
padding-bottom: 100rpx;
|
||
}
|
||
</style> |