zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

09-22

Browse Source
This commit is contained in:
@fawn-nine
2023-09-22 11:15:25 +08:00
parent 648117b7a6
commit e630e70376
2 changed files with 418 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

561
pages/clock/clock.vue
View File

@@ -2,6 +2,11 @@
<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> -->
@@ -12,10 +17,12 @@
<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">
<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">
<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;">
@@ -23,39 +30,41 @@
</view> -->
</view>
</view>
<swiper class="swiper scroll-view_H" @animationfinish="animationfinish" @change="swiperChange" :current='currentIndex' :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
<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">
<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' : '',
<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)">
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>
<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>
<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" >
<view class="task" v-if="taskInfo.id">
<view class="title">
{{taskInfo.heading}}
</view>
<view class="video " v-if="taskInfo.video">
<!-- 视频形式的任务 -->
<view class="taskinfo">
<video id="myVideo" :poster="poster" v-show="!addTextShow"
:src="taskInfo.video"
<video id="myVideo" :poster="poster" v-show="!addTextShow" :src="taskInfo.video"
@error="videoErrorCallback" controls></video>
</view>
</view>
<view class="image " v-if="taskInfo.images">
<!-- 图片形式的任务 -->
<image :src="taskInfo.images" @click="previewImage(taskInfo.images)" style="width: 100%;" mode="aspectFit"></image>
<image :src="taskInfo.images" @click="previewImage(taskInfo.images)" style="width: 100%;"
mode="aspectFit"></image>
</view>
<view class="txt" v-if="taskInfo.content" v-html="taskInfo.content"></view>
</view>
@@ -65,7 +74,7 @@
<view :class="['subContent']" v-if="myword.length > 0">
<text class="clockTitle">-- 我的签到 --</text>
<!-- 已打卡 -->
<view class="had" >
<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">
@@ -73,38 +82,41 @@
</view>
<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>
<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>{{item.createTime}}</span>
<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">
<view class="touxiang">
<image :src="item.avatar" mode="aspectFit"></image>
<text class="username nowrap ">{{item.name}}</text>
</view>
<view class="contentBox">
<div class="pjimgs flexbox">
<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 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">
<view class="touxiang">
<image :src="item.avatar" mode="aspectFit"></image>
<text class="username nowrap ">{{item.name}}</text>
</view>
<view class="contentBox">
<div class="pjimgs flexbox">
<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>
</div>
<view class="content" v-html="item.phtml"></view>
<text class="time">{{item.createdate}}</text>
</view>
</view>
<!-- 显示追平 -->
<!-- <view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 50px;">
</div>
<view class="content" v-html="item.phtml"></view>
<text class="time">{{item.createdate}}</text>
</view>
</view>
<!-- 显示追平 -->
<!-- <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">
@@ -113,9 +125,9 @@
</view>
</view>
</view> -->
</view>
</view>
<u-divider v-else text="暂无更多签到记录"></u-divider>
</view>
</view>
<u-divider v-else text="暂无更多签到记录"></u-divider>
</view>
</view>
@@ -153,7 +165,8 @@
</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>
<button style="height: 70rpx; font-size: 28rpx; line-height: 70rpx;" type="primary" plain="true"
@click="addTextShow = true">说点什么</button>
</view>
<music-play :playData="playData"></music-play>
<!-- <z-navigation></z-navigation> -->
@@ -173,39 +186,40 @@
export default {
data() {
return {
dayCurrent:0, // 载入页面时的显示页数
showBack:false,
currentIndex:0,
dayList:[],
dayCurrent: 0, // 载入页面时的显示页数
showBack: false,
currentIndex: 0,
dayList: [],
indicatorDots: false,
autoplay: false,
interval: 2000,
duration: 500,
commentsList:[], // 他人的打卡列表
autoplay: false,
interval: 2000,
duration: 500,
commentsList: [], // 他人的打卡列表
addTextShow: false, // 说点什么弹出层
show: false,
scrollLeft: 0, // 距离左侧的距离
currentDay:0, // 当前打卡位置
currentTid:null, // 今天的任务id
currentDay: 0, // 当前打卡位置
currentTid: null, // 今天的任务id
emojiIcon: 'cuIcon-emoji',
windowWidth: 0,
taskInfo:{
id:null,
heading:''
taskInfo: {
id: null,
heading: ''
},
list3:[], // 时间日期
list3: [], // 时间日期
emoji: [],
signList:[], // 已打卡天
linshiDay:null,
signList: [], // 已打卡天
linshiDay: null,
page: 1,
bookid: null,
windowHeight: 500,
isShowEmj: false,
playData: {},
bookInfo: {}, // 书籍信息
videoContext: null,
innerAudioContext: null, // 音频对象
poster: '',
myword:[], // 我的打卡内容
myword: [], // 我的打卡内容
formData: {
// 打卡表单
content: '',
@@ -235,9 +249,11 @@
onLoad(e) {
this.bookid = e.bookid
this.windowWidth = uni.getSystemInfoSync().windowWidth;
},
onShow() {
this.getBookInfo()
this.initDay()
this.getmySign()
},
onReady() {
this.videoContext = uni.createVideoContext('myVideo')
@@ -248,34 +264,55 @@
...mapState(['userInfo'])
},
methods: {
swiperChange(e){
console.log(e,'change')
// 获取书籍信息
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, 'res基本信息')
}).catch((error) => {
console.log(error)
})
},
backTo(){
// console.log('')
// this.currentIndex++
this.currentIndex = this.dayCurrent
console.log(this.currentIndex,'点击了')
gotoDetail() {
uni.navigateTo({
url: '../eBook/bookContent?Id=' + this.bookInfo.id
});
},
animationfinish(e){
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;
let index = 0;
let newArray = [];
while (index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
},
// 初始化day
initDay(){
initDay() {
var listint = 1
var arr = []
var arr1 = []
for (var i= 1; i<=365; i++) {
var arr1 = []
for (var i = 1; i <= 365; i++) {
arr.push(i)
}
arr1 = this.group(arr, 5)
@@ -283,14 +320,14 @@
// console.log(arr1,'+++++++++++++')
},
// 放大图片
previewImage(url){
previewImage(url) {
console.log(url)
uni.previewImage({
urls: [url]
});
},
// 获取打卡参数
getmySign(){
getmySign() {
let data = {
'bookId': this.bookid,
'userId': this.userInfo.id
@@ -299,7 +336,7 @@
.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, '打卡参数')
@@ -308,12 +345,12 @@
let yu = this.currentDay % 5
//if(this.currentDay <=5){this.scrollLeft = 0}
if(zheng >= 1 && yu > 0){
if (zheng >= 1 && yu > 0) {
// 不是前五个，并且不能整除
// this.scrollLeft = (this.windowWidth - 30) * zheng
}
if(zheng > 1 && yu == 0){
// this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
if (zheng > 1 && yu == 0) {
// this.scrollLeft = (this.windowWidth - 30) * (zheng - 1)
this.currentIndex -= 1
}
this.dayCurrent = this.currentIndex
@@ -327,25 +364,26 @@
},
// 获取当天我的发布内容
getmyWord(){
getmyWord() {
this.$http
.post('book/clockin/myinfolist?userid='+this.userInfo.id+'&taskid='+ this.taskInfo.id + '&bookid='+this.bookid)
.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 ){
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)
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{
} else {
this.myword = []
}
})
@@ -354,19 +392,19 @@
})
},
// 获取签到详情
getInfo(index){
if(this.currentDay < index){
getInfo(index) {
if (this.currentDay < index) {
uni.showToast({
title:'未来日期不可签到',
title: '未来日期不可签到',
icon: 'none'
})
}else{
} else {
this.getTask(index)
}
},
// 获取某天的签到列表信息
getAllSign(val){
console.log(val,'-----------')
getAllSign(val) {
console.log(val, '-----------')
let data = {
'bookid': this.bookid,
'limit': 5,
@@ -379,13 +417,13 @@
.then(res => {
if (res.code == 0) {
console.log(res, '所有人打卡信息')
if(res.list.length > 0){
if (res.list.length > 0) {
var arr = res.list
for (var i=0; i<arr.length; i++) {
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)
pjstr = this.getHtmlComment(arr[i].content)
// console.log(pjstr,'pjstr')
arr1 = arr[i].images.split(',')
arr[i].images = arr1
@@ -395,7 +433,7 @@
}
// console.log(arr,'res.page.list')
this.commentsList = arr
}else{
} else {
this.commentsList = []
}
@@ -404,7 +442,7 @@
});
},
// 获取对应签到内容
getTask(index){
getTask(index) {
uni.showLoading()
let data = {
'bookid': this.bookid,
@@ -417,12 +455,13 @@
.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{
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 = ''
}
@@ -434,65 +473,75 @@
})
},
// 补卡
buSign(day){
console.log('正在补卡',this.taskInfo)
if(!this.taskInfo.id){
buSign(day) {
console.log('正在补卡', this.taskInfo)
if (!this.taskInfo.id) {
uni.showToast({
title:'当天未发布打卡任务',
icon:'none'
title: '当天未发布打卡任务，不可补卡哦',
icon: 'none'
})
return
}
let data = {
"bookId": this.bookid,
"userId": this.userInfo.id,
"userId": this.userInfo.id,
"tid": this.taskInfo.id,
"days":this.linshiDay
"days": this.linshiDay
}
console.log(data,'data')
console.log(data, 'data')
$http.request({
url : 'book/clockinPunch/save',
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)
}
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(){
let data = {
"bookId": this.bookid,
"userId": this.userInfo.id,
"tid": this.taskInfo.id,
"days":this.currentDay
kuickSign() {
if (!this.taskInfo.id) {
uni.showToast({
title: '当天未发布打卡任务,不可签到哦',
icon: 'none'
})
return false
}
$http.request({
url : 'book/clockinPunch/save',
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
let data = {
"bookId": this.bookid,
"userId": this.userInfo.id,
"tid": this.taskInfo.id,
"days": this.currentDay
}
$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:'签到成功'
title: '签到成功',
icon: 'success'
})
return false
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
@@ -500,7 +549,8 @@
this.getAllSign(this.taskInfo)
}
});
});
},
// 说点什么
goToSign() {
@@ -514,29 +564,29 @@
"imageeStrings": this.formData.images,
}
console.log(data,'data')
console.log(data, 'data')
$http.request({
url : 'book/clockin/save',
url: 'book/clockin/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:'发布成功',
icon:'success'
})
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.formData.imagesStr = []
this.getmySign()
this.getTask()
if (res.code == 0) {
//console.log(res, '快捷签到')
uni.showToast({
title: '发布成功',
icon: 'success'
})
this.addTextShow = false
this.formData.content = ''
this.formData.images = []
this.formData.imagesStr = []
this.getmySign()
this.getTask()
}
}
});
},
@@ -638,7 +688,7 @@
that.formData.images.push({
url: JSON.parse(res.data).url
})
console.log(that.formData.images,'that.formData.images')
console.log(that.formData.images, 'that.formData.images')
}
});
}
@@ -665,41 +715,96 @@
</script>
<style lang="scss" scoped>
.pjimgs{ margin: 10px 0;flex-wrap: wrap; display: flex;
.item{width: 23%; margin-right: 10px;
image{ }
.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;}
.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; }
.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; }
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
.haveSignText{color: #999 ;}
.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;
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;
// 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;
.fanhuiDay {
margin-right: 20rpx;
// height: 52rpx;
font-size: 24rpx;
// line-height: 52rpx;
@@ -713,11 +818,18 @@
.scroll-view_H {
white-space: nowrap;
margin: 8rpx 0; height: 120rpx !important;
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;
.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);
@@ -728,7 +840,8 @@
border-radius: 20rpx;
padding: 12rpx;
.day {display: block;
.day {
display: block;
font-size: 26rpx;
color: #999;
@@ -746,13 +859,15 @@
.buka {
font-size: 24rpx;
display: inline-block; padding: 0 12rpx;
display: inline-block;
padding: 0 12rpx;
color: #888;
// border: 1px solid #888;
margin: 10px 0;
border-radius: 20rpx;
margin-bottom: 0; ;
margin-bottom: 0;
;
}
.weidaka {
@@ -763,9 +878,11 @@
margin-bottom: 0;
display: block;
}
.daka{
.daka {
font-size: 24rpx;
display: inline-block; padding: 0 6rpx;
display: inline-block;
padding: 0 6rpx;
border: 1px solid #55aaff;
color: #55aaff;
margin: 10px 0;
@@ -787,6 +904,7 @@
.day {
font-size: 26rpx;
color: #fff;
em {
font-size: 30rpx;
font-style: normal;
@@ -799,18 +917,20 @@
display: block;
}
}
.item.current{
.item.current {
border: 1px solid #55aaff;
text-align: center;
display: inline-block;
background-color: #edf9ff;
background-color: #edf9ff;
border-radius: 20rpx;
padding: 6px 6px;
.day {
font-size: 26rpx;
color: #55aaff;
em {
font-size: 30rpx;
font-style: normal;
@@ -819,10 +939,13 @@
}
}
}
.item.linshiDay{
.daka{
color: #fff; border-color:#fff;
.item.linshiDay {
.daka {
color: #fff;
border-color: #fff;
}
border: 1px solid #55aaff;
text-align: center;
@@ -830,9 +953,11 @@
background-color: #55aaff;
border-radius: 20rpx;
padding: 6px 6px;
.day {
font-size: 26rpx;
color: #fff;
em {
font-size: 32rpx;
font-style: normal;
@@ -840,7 +965,10 @@
padding-right: 2px;
}
}
.buka{color: #fff; }
.buka {
color: #fff;
}
}
}
@@ -902,13 +1030,16 @@
}
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx; margin-bottom: 30rpx;
}
.clockTitle {
color: #55aa7f;
font-size: 38rpx;
text-align: center;
display: block;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.container1 {
.margin-top {
margin-top: 30rpx;
@@ -922,7 +1053,7 @@
.calendar_container {
//min-height: calc(60vh);
background-color: #fff;
background-color: #fff;
padding: 10rpx;
box-sizing: border-box;
padding-bottom: 20rpx;
@@ -1027,6 +1158,12 @@
.flexbox {
display: flex;
}
.mb50{margin-bottom: 50rpx;}
.pb100{padding-bottom: 100rpx;}
.mb50 {
margin-bottom: 50rpx;
}
.pb100 {
padding-bottom: 100rpx;
}
</style>

21
pages/clock/index.vue
View File

@@ -8,11 +8,11 @@
<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>
<view class="videoBox demo-layout bg-purple" @click="goToClock(item)">
<image v-if="item.images != ''" :src="item.images" mode="scaleToFill" ></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>
</view>
<text class="bookName">{{item.book.name}}</text>
<text class="bookName">{{item.name}}</text>
</u-col>
</u-row>
</view>
@@ -66,19 +66,16 @@
// 获取打卡图书
getfreeBook(){
this.$http
.post('book/userebookbuy/appbooklist', {
// .post('book/userebookbuy/buylist', {
// .post('book/buyorderdetail/querybuy', {
.post('book/userebookbuy/getUserClockBookList', { // 磊哥新写
// .post('book/userebookbuy/appbooklist', { 原接口
'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
this.bookList = res.books
console.log(this.bookList,'打卡列表')
// this.status = 3
}
});
@@ -124,7 +121,7 @@
height: 350rpx;
}
.u-row{flex-wrap: wrap;}
.u-col{overflow: hidden; height: 250px; margin-bottom: 30rpx; }
.u-col{overflow: hidden; margin-bottom: 30rpx; }
.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
.flexbox{display: flex;}
.scroll-Y {