413 lines
10 KiB
Vue
413 lines
10 KiB
Vue
<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/home_icon_0.png" 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> |