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>

393
pages/clock/clockList - 副本.vue Normal file
View File

@@ -0,0 +1,393 @@
<template>
<view class="container">
<z-nav-bar title="打卡记录"></z-nav-bar>
<view class="calendar_container">
<zsy-calendar :mode="mode" @change="change" />
</view>
<view class="container1">
<view class="subContent">
<!-- 已打卡 -->
<view class="had">
<view class="item flexbox">
<view class="dateName flexbox">
<span>第<em>365</em>天</span>
</view>
<view class="bookinfo">
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<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>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<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>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
</view>
</view>
<view class="item flexbox">
<view class="dateName flexbox">
<span>第<em>36</em>天</span>
</view>
<view class="bookinfo">
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<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>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
<view class="case">
<view class="book flexbox">
<image src="../../static/icon/x1.jpg" mode="aspectFill"></image>
<view class="clockInfo">
<span>中医免疫学</span>
<h3>#第三课：专业变现：你的专业 = 超级杠杆！ 第一笔只是财富#</h3>
</view>
</view>
<view class="content">
借我一个暮年，借我碎片，
借我瞻前与顾后，借我执拗如少年。
借我后天长成的先天，借我变如不曾改变。
借我素淡的世故和明白的愚，借我可预知的险。
借我悲怆的磊落，借我温软的鲁莽和玩笑的庄严。
借我最初与最终的不敢，借我不言而喻的不见。
借我一场秋啊，可你说这已是冬天。
<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>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>2023-08-23
14:01</span>
</view>
<span class="viewMore"><u-icon style="display: inline-block;" name="arrow-down"
color="#409eff"></u-icon>查看全部</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
import musicPlay from '@/components/music.vue'
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
mode: 'open',
status : 0
}
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.bookScreen.page < this.totalPage) {
this.bookScreen.page = this.bookScreen.page + 1
setTimeout(() => {
this.$http
// .post('book/book/list', this.bookScreen)
.post('book/shopproduct/selectList?limit=8&page=1&key='+this.bookScreen.bookName)
.then(res => {
this.totalPage = res.page.totalPage
for (let i in res.page.list) {
this.bookList.push(res.page.list[i])
}
});
}, 1000)
} else {
this.status = 1
}
},
onLoad() {
this.getmyWord()
},
methods: {
change(e) {
console.log(e)
},
getmyWord(){
this.$http
.post('book/clockin/myinfo?userid='+this.userInfo.id)
.then(res => {
console.log(res,'我的打卡内容')
})
.catch(e => {
console.log(e)
})
},
},
components: {
musicPlay,
zsyCalendar
},
computed:{
...mapState(['userInfo'])
}
}
</script>
<style lang="scss" scoped>
.listenList{
.wrap{width: 150rpx;}
}
.task {
margin-top: 40rpx 20rpx;
.taskinfo {
video {
width: 100%;
}
}
}
.subContent {
overflow: hidden;
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx;
}
}
.container1 {
.margin-top {
margin-top: 30rpx;
overflow: hidden;
}
}
.container {
padding: 30rpx;
}
.calendar_container {
//min-height: calc(60vh);
background-color: #f5f5f5;
//padding: 30rpx;
box-sizing: border-box;
}
.had {
margin-top: 30rpx;
h3 {
color: #8c9a92;
font-size: 34rpx;
}
.content {
line-height: 60rpx;
margin-top: 30rpx;
font-size: 30rpx;
color: #0e0e15;
}
.images {
height: 150rpx;
overflow: hidden;
margin-top: 30rpx;
image {
width: 150rpx;
margin: 0 10rpx;
}
}
.opBtns {
margin-top: 30rpx;
span {
color: #b3b3b3;
padding-left: 20rpx;
font-size: 24rpx;
}
}
.item {
padding-left: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
justify-content: space-between;
.dateName {
color: #444;
text-align: center;
align-items: center;
width: 80rpx;
padding-right: 20rpx;
border-right: 1px solid #eee;
span {
display: inline-block;
height: 120rpx;
padding: 20rpx 0;
border-radius: 50rpx;
width: 100%;
background-color: #d9e8f7;
text-align: center;
em {
font-weight: bold;
font-style: normal;
}
}
}
.bookinfo {
text-align: center;
// width: 100%;
// padding: 20rpx;
margin-left: 20rpx;
.case{ margin-top:60rpx; background-color: #fff; padding: 20rpx;}
.content {
position: relative; padding-bottom: 60rpx; height: 60px; overflow: hidden;
}
.book {
image {
width:200rpx;
height: 150rpx;
margin: 0 auto;
}
.clockInfo{text-align: left; margin-left: 20rpx;}
span {
color: #444;
display: block;
font-weight: bold;
margin-bottom: 20rpx;
}
}
}
}
}
.viewMore {
position: absolute;
bottom: 5rpx;
right: 0; color: #409eff;
z-index: 1; text-align: right;
width: 200rpx; background-image: url('@/static/icon/zuotouming.png'); background-position: right; background-size: cover; background-repeat: no-repeat;
}
.flexbox {
display: flex;
}
</style>

413
pages/clock/clockList.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<view class="container">
<z-nav-bar title="我的打卡签到记录"></z-nav-bar>
<!-- <view class="calendar_container">
<zsy-calendar :mode="mode" @change="change" />
</view> -->
<view class="books">
<view class="" style="background-color: #fff; padding: 10rpx;">
<text style="font-size: 24rpx; color: #888;" v-if="bookList.length > 0">我的打卡书籍</text>
<text style="font-size: 24rpx; color: #888;" v-else>暂无可打卡书籍</text>
</view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" :scroll-left="scrollLeft">
<view class="listenList flexbox" v-if="bookList.length > 0">
<view :class="['item', selectIndex == index ? 'active' : '']" v-for="(item,index) in bookList" :key="index">
<view class="videoBox" @click="selectOne(item.book,index)">
<image v-if="item.book.images != ''" :src="item.book.images" mode="scaleToFill"></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill"></image>
</view>
<text class="bookName">{{item.book.name}}</text>
</view>
</view>
</scroll-view>
</view>
<view class="container1">
<view class="subContent" v-if="status==0">
<!-- 已打卡 -->
<view class="had" v-if="recordList.length> 0">
<view class="item">
<view class="bookinfo">
<view class="case" v-for="(item, index) in recordList" :key="index">
<view class="book flexbox" >
<!-- <image src="../../static/icon/x1.jpg" mode="aspectFill"></image> -->
<view class="clockInfo" >
<!-- <span>中医免疫学</span> -->
<h3><span class="day">第 <em>{{item.dayId}}</em> 天</span><br/>#{{item.TaskHeading}}#</h3>
</view>
</view>
<view :class="['content',item.zhankai ? 'active' : '']" >
<view class="texttt" v-html="item.phtml" ></view>
<view class="images flexbox" v-if="item.clockinimages.length>0">
<view class="box" v-for="(item1,index1) in item.clockinimages">
<image @click="previewImage(item1)"
:src="item1"
mode="aspectFill"></image>
</view>
</view>
<view class="opBtns flexbox">
<span class="flexbox"><u-icon name="clock" color="#b3b3b3"></u-icon>{{item.createTime}}</span>
</view>
<span class="viewMore" v-if="!item.zhankai" @click="changeHeight(item, index)">
<u-icon style="display: inline-block;" name="arrow-down"
color="#55aa00"></u-icon>
展开</span>
<span class="viewMore" v-else @click="changeHeight(item, index)">
<u-icon style="display: inline-block;" name="arrow-down"
color="#55aa00"></u-icon>
收起</span>
</view>
</view>
</view>
</view>
</view>
<view v-else>
<u-divider text="暂无打卡记录哦~"></u-divider>
</view>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
<view style="padding-bottom: 20rpx;">
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</view>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
import musicPlay from '@/components/music.vue'
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
mode: 'open',
status: 0,
scrollLeft: 0,
recordList: [],
bookList: [],
scrollTop: 0,
bookinfo:{},
selectIndex:0
}
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
},
onLoad() {
this.getfreeBook()
},
methods: {
selectOne(val,index){
// 点击某一个图书
uni.showLoading()
this.bookinfo = val
this.selectIndex = index
this.getmyWord()
},
scroll(e) {
},
// 获取打卡图书列表
getfreeBook() {
this.$http
.post('book/userebookbuy/appbooklist', {
'userId': this.userInfo.id,
'page': this.page,
'limit': 100
})
.then(res => {
if (res.code == 0) {
// this.ygtotalPage = res.resultlist.totalCount
if(res.resultlist.length > 0) {
this.bookList = res.resultlist
this.bookinfo = this.bookList[0].book
console.log(res, '已购买')
this.getmyWord()
// this.status = 3
}else{
this.bookList = []
}
}
});
},
change(e) {
console.log(e)
},
// 放大图片
previewImage(url){
console.log(url, 'url')
uni.previewImage({
urls: [url]
});
},
// 处理展开或者合并
changeHeight(val, index){
this.recordList[index].zhankai = !this.recordList[index].zhankai
},
// 处理格式
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>');
},
getmyWord() {
console.log(this.userInfo.id,this.bookinfo.id,'++++++++')
this.$http
.post('book/clockin/myinfo?userid=' + this.userInfo.id + '&bookid='+ this.bookinfo.id)
.then(res => {
console.log(res, '我的打卡内容')
if (res.code == 0 && res.ClockinList.length > 0) {
// this.recordList = res.ClockinList
var arr = []
res.ClockinList.forEach((item1)=>{
var pjstr = ''
var imgs = []
imgs = item1.clockinimages.split(',')
pjstr = this.getHtmlComment(item1.content)
item1.clockinimages = imgs
//console.log(pjstr,'99999999999----------')
item1.zhankai = false
item1.phtml = pjstr
arr.push(item1)
})
this.recordList = arr
} else {
this.recordList = []
}
uni.hideLoading()
})
.catch(e => {
console.log(e.msg)
uni.hideLoading()
})
},
},
components: {
musicPlay,
zsyCalendar
},
computed: {
...mapState(['userInfo'])
}
}
</script>
<style lang="scss" scoped>
.scroll-view_H{background-color: #fff; padding:10rpx }
.listenList { background-color: #fff; padding: 5rpx 0;
.item { padding: 10rpx; overflow: hidden;
width: 150rpx !important; margin-right: 20rpx; border: 1px solid #fff; border-radius: 10rpx;
.videoBox{
image{display: block; width:130rpx;
height: 170rpx;
}
}
.bookName{display: block; margin-top: 20rpx; color: #666; font-size: 24rpx; white-space: nowrap;
overflow-x: hidden; overflow: hidden;
text-overflow: ellipsis;}
}
.item.active{margin-right: 20rpx; border: 1px solid #55aa00; border-radius: 10rpx;}
}
.task {
margin-top: 40rpx 20rpx;
.taskinfo {
video {
width: 100%;
}
}
}
.subContent {
overflow: hidden;
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx;
}
}
.container1 {
.margin-top {
margin-top: 30rpx;
overflow: hidden;
}
}
.container {
padding: 30rpx;
}
.calendar_container {
//min-height: calc(60vh);
background-color: #f5f5f5;
//padding: 30rpx;
box-sizing: border-box;
}
.had {
margin-top: 30rpx;
h3 {
color: #8c9a92;
font-size: 34rpx;
}
.content {
width: 100% !important; overflow: hidden;
line-height: 60rpx;
margin-top: 10rpx;
font-size: 30rpx;
color: #0e0e15;
.texttt{margin-top: 10rpx; text-align: left !important; word-wrap:break-word !important; word-break:break-all; width: 100%;
font-size: 30rpx;
color: #888;}
}
.images {
height: 150rpx;
overflow: hidden;
margin-top: 30rpx;
.box{
width: 150rpx;height: 150rpx; margin: 0 10rpx;
}
image {
width: 150rpx;
}
}
.opBtns {
margin-top: 30rpx;
span {
color: #b3b3b3;
padding-left: 20rpx;
font-size: 24rpx;
}
}
.item {
padding-left: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
justify-content: space-between;
.dateName {
color: #444;
text-align: center;
align-items: center;
width: 80rpx;
padding-right: 20rpx;
border-right: 1px solid #eee;
span {
display: inline-block;
height: 120rpx;
padding: 20rpx 0;
border-radius: 50rpx;
width: 100%;
background-color: #d9e8f7;
text-align: center;
em {
font-weight: bold;
font-style: normal;
}
}
}
.bookinfo {
text-align: center;
// width: 100%;
// padding: 20rpx;
margin-left: 20rpx;
.case {
margin-top: 30rpx;
background-color: #fff; padding-bottom: 30rpx !important;
padding:10rpx;
border-bottom: 1px solid #efefef; margin-bottom: 20rpx ;
}
.content {
position: relative;
padding-bottom: 60rpx;
height: 60px;
overflow: hidden;
}
.content.active{height: auto !important;}
.book {
image {
width: 200rpx;
height: 150rpx;
margin: 0 auto;
}
.clockInfo { margin-bottom: 10rpx;
text-align: left;
.day{ color: #55aa7f; margin-bottom: 20rpx ; font-size: 36rpx !important; display: inline; padding: 20rpx; border-radius: 10rpx;}
em{font-style: normal; font-size: 60rpx !important; padding: 0 10rpx;}
}
span {
color: #444;
display: block;
font-weight: bold;
margin-bottom: 20rpx;
}
}
}
}
}
.viewMore {
position: absolute;
bottom: 5rpx;
right: 0;
color: #55aa00;
z-index: 1;
text-align: right;
width: 200rpx;
background-image: url('@/static/icon/zuotouming.png');
background-position: right;
background-size: cover;
background-repeat: no-repeat;
}
.flexbox {
display: flex;
}
</style>

213
pages/clock/index.vue Normal file
View File

@@ -0,0 +1,213 @@
<template>
<view>
<z-nav-bar title="读书打卡"></z-nav-bar>
<view class="listenList" v-if="bookList.length > 0">
<view class="wrap" >
<u-row gutter="16" justify="flex-start">
<u-col span="4" v-for="(item,index) in bookList" :key="index">
<view class="videoBox demo-layout bg-purple" @click="goToClock(item.book)">
<image v-if="item.book.images != ''" :src="item.book.images" mode="scaleToFill" ></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>
</view>
<text class="bookName">{{item.book.name}}</text>
</u-col>
</u-row>
</view>
</view>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
import musicPlay from '@/components/music.vue'
export default {
data() {
return {
playData:{},
bookList:[],
page:1, // 页码
}
},
onLoad() {
this.getfreeBook()
},
methods: {
// 跳转到打卡页面
goToClock(val){
if(val.clockIn != 1){
uni.showModal({
title: '提示',
cancelText: '暂不购买',
confirmText:'立即购买',
content: '购买后才可参与本书打卡哦~',
success: function (res) {
if (res.confirm) {
console.log('点击了去购买');
}
}
});
}else{
console.log(val,'val')
this.onPageJump('../clock/clock?bookid='+val.id)
}
},
// 获取打卡图书
getfreeBook(){
this.$http
.post('book/userebookbuy/appbooklist', {
// .post('book/userebookbuy/buylist', {
// .post('book/buyorderdetail/querybuy', {
'userId': this.userInfo.id,
// 'page':this.page,
// 'limit':100
})
.then(res => {
if(res.code == 0){
//this.ygtotalPage = res.resultlist.totalCount
this.bookList = res.resultlist
console.log(res,'已购买')
this.status = 3
}
});
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
},
computed: {
...mapState(['userInfo'])
},
components: {
musicPlay,
}
}
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.contentButton{margin: 20rpx 0;}
.btns{margin-top: 15rpx; background-color: #f1f1f1; border-radius: 10rpx; font-size: 28rpx; justify-content: space-between;
}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
.bookName{
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
font-size: 30rpx; color: #333; padding: 10rpx 0;
}
.videoBox{position: relative;}
.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px; padding: 5px; border-radius: 100%; }
uni-image {
width:auto !important;
height: 350rpx;
}
.u-row{flex-wrap: wrap;}
.u-col{overflow: hidden; height: 250px; margin-bottom: 30rpx; }
.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
.flexbox{display: flex;}
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 60%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.head_line {
margin: 50rpx 0;
b {
display: inline-block;
width: 12rpx;
height: 40rpx;
background-color: #54a966;
vertical-align: bottom;
margin: 0 20rpx 0 0;
}
text {
font-size: 32rpx;
font-weight: bold;
}
i {
float: right;
font-style: normal;
color: #8b8a91;
font-size: 24rpx;
margin: 5rpx 35rpx 0 0;
}
}
.home_bg {
background-image: url('@/static/icon/home_bg.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 100rpx 0 40rpx 0;
position: relative;
.icon_hua_1 {
margin: 0 auto;
width: 150rpx;
height: 150rpx;
}
.search_box {
width: 90%;
height: 64upx;
background-color: #fff;
border-radius: 32upx;
display: flex;
align-items: center;
padding: 0upx 40upx;
position: absolute;
margin-left: -46%;
left: 50%;
bottom: -30rpx;
box-shadow: 0 0px 10px 1px #54a96633;
.prompt {
color: #cccccc;
}
.icon_search {
background-image: url('@/static/icon/map_ic_search.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 29upx;
height: 28upx;
margin-right: 20upx;
}
}
}
</style>