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

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>