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

21
pages/clock/index.vue
View File

@@ -8,11 +8,11 @@
<view class="wrap" > <view class="wrap" >
<u-row gutter="16" justify="flex-start"> <u-row gutter="16" justify="flex-start">
<u-col span="4" v-for="(item,index) in bookList" :key="index"> <u-col span="4" v-for="(item,index) in bookList" :key="index">
<view class="videoBox demo-layout bg-purple" @click="goToClock(item.book)"> <view class="videoBox demo-layout bg-purple" @click="goToClock(item)">
<image v-if="item.book.images != ''" :src="item.book.images" mode="scaleToFill" ></image> <image v-if="item.images != ''" :src="item.images" mode="scaleToFill" ></image>
<image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image> <image v-else src="../../static/icon/wufeng.jpg" mode="scaleToFill" ></image>
</view> </view>
<text class="bookName">{{item.book.name}}</text> <text class="bookName">{{item.name}}</text>
</u-col> </u-col>
</u-row> </u-row>
</view> </view>
@@ -66,19 +66,16 @@
// 获取打卡图书 // 获取打卡图书
getfreeBook(){ getfreeBook(){
this.$http this.$http
.post('book/userebookbuy/appbooklist', { .post('book/userebookbuy/getUserClockBookList', { // 磊哥新写
// .post('book/userebookbuy/buylist', { // .post('book/userebookbuy/appbooklist', { 原接口
// .post('book/buyorderdetail/querybuy', {
'userId': this.userInfo.id, 'userId': this.userInfo.id,
// 'page':this.page,
// 'limit':100
}) })
.then(res => { .then(res => {
if(res.code == 0){ if(res.code == 0){
//this.ygtotalPage = res.resultlist.totalCount //this.ygtotalPage = res.resultlist.totalCount
this.bookList = res.resultlist this.bookList = res.books
console.log(res,'已购买') console.log(this.bookList,'打卡列表')
this.status = 3 // this.status = 3
} }
}); });
@@ -124,7 +121,7 @@
height: 350rpx; height: 350rpx;
} }
.u-row{flex-wrap: wrap;} .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);} .listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
.flexbox{display: flex;} .flexbox{display: flex;}
.scroll-Y { .scroll-Y {