You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
12 KiB
498 lines
12 KiB
<template> |
|
<view class="dabang-index"> |
|
<view class="top-box"> |
|
<view class="dabang-name">{{detail.studyListDto.listName}}</view> |
|
<!-- <view class="desc">抱朴书院孕育自华夏优秀传统文化，以“博学致用，朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</view> --> |
|
<view class="time-box"> |
|
<span>时间：{{detail.studyListDto.listStartTime}} 至 {{detail.studyListDto.listEndTime}}（共{{detail.studyListDto.clockTimes}}天）</span> |
|
<view class="sanjiao"></view> |
|
</view> |
|
</view> |
|
<view class="join-num">参与人数：{{detail.enterNum}}人</view> |
|
<view class="my-progress-box"> |
|
<view class="t-word acea-row row-between-wrapper"> |
|
<text>我的进度</text> |
|
<view> |
|
<text class="to-more" @click="toMyBangdan">我的打榜日记</text> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
<view class="progress-info-box acea-row-nowrap row-between"> |
|
<view class="acea-row"> |
|
<view class="user-headerimg"> |
|
<image :src="detail.avatar"></image> |
|
</view> |
|
<view class="user-progress"> |
|
<view class="name line1">{{detail.realName}}</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon1.png" mode=""></image></view> |
|
已坚持<text class="colO">{{detail.finishTimes}}</text>/{{detail.totalTimes}} |
|
</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon4.png" mode=""></image></view> |
|
完成进度<text class="colO">{{(detail.progress*100).toFixed(2)}}</text>% |
|
</view> |
|
<view class="progress"> |
|
<view class="pro-icon"><image src="../../static/course-icon3.png" mode=""></image></view> |
|
全榜排名<text class="colO">{{detail.rank}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="progress-r acea-row row-column row-center-wrapper"> |
|
<text>{{detail.enterState ? '今日已打卡' : '今日未打卡'}}</text> |
|
<!-- <view class="dabang-btn default" v-if="detail.enterState">已打卡</view> --> |
|
<view class="dabang-btn default" v-if="detail.studyListDto.listState == 0">未开始</view> |
|
<view class="dabang-btn" @click="toEdit" v-if="detail.studyListDto.isClockTime && detail.studyListDto.listState == 1">立即打卡</view> |
|
<view class="dabang-btn default" v-if="!detail.studyListDto.isClockTime && !detail.enterState && detail.studyListDto.listState == 1">未开始</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="tab-box acea-row row-middle"> |
|
<view class="tab-item" :class="active == 0 ? 'tab-item-a' : ''" @click="tabClick(0)">打卡分享</view> |
|
<view class="tab-item" :class="active == 1 ? 'tab-item-a' : ''" @click="tabClick(1)">排行榜</view> |
|
</view> |
|
<!-- 打榜分享 --> |
|
<view class="dabang-share-box" v-if="active == 0"> |
|
<view class="dabang-share-item" v-for="(item,index) in studyListRecordDtos" :key="index"> |
|
<view class="user-info-box acea-row row-middle"> |
|
<view class="header-img"> |
|
<image :src="item.avatar" mode="aspectFill"></image> |
|
</view> |
|
<view class="acea-row row-column row-center"> |
|
<view class="name">{{item.realName}}</view> |
|
<view class="create-time">{{item.recordTime}}</view> |
|
</view> |
|
</view> |
|
<view class="share-word" :class="item.isShow == 0 ? 'line1' : ''"> |
|
{{item.content}} |
|
</view> |
|
<view class="img-box acea-row" v-if="item.isShow == 1"> |
|
<image :src="imgUrl" mode="aspectFill" @tap="previewImage(item.imgPaths,idx)" v-for="(imgUrl,idx) in item.imgPaths" :key="idx"></image> |
|
</view> |
|
<view class="zan-box acea-row row-middle row-right" @click="voteClick(item)"> |
|
<image src="../../static/zan.png" v-if="!item.isVote"></image> |
|
<image src="../../static/like.png" v-else></image> |
|
<text class="zan-conunt">{{item.voteNum}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 排行榜 --> |
|
<view class="rank-list" v-if="active == 1"> |
|
<view class="rank-item acea-row row-between-wrapper" v-for="(item,index) in detail.memberIntegralRankVos" :key="index"> |
|
<view class="acea-row row-middle" style="width: 72%;"> |
|
<view class="rank-img" v-if="index == 0"><image src="../../static/num1.png" mode=""></image></view> |
|
<view class="rank-img" v-if="index == 1"><image src="../../static/num2.png" mode=""></image></view> |
|
<view class="rank-img" v-if="index == 2"><image src="../../static/num3.png" mode=""></image></view> |
|
|
|
<view class="ranking" v-if="index > 2">{{index+1}}</view> |
|
|
|
<view class="header-img"><image :src="item.headImg" mode=""></image></view> |
|
<view class="name line1">{{item.realName}}</view> |
|
</view> |
|
<view class="acea-row row-column row-center-wrapper"> |
|
<view>完成打榜{{item.finishNum}}项</view> |
|
<view class="jifen">累计打榜{{item.counts}}天</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="loading-status">{{loadingStatus}}</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { myProgress , studyListVote} from '@/api/knowledge'; |
|
export default{ |
|
data(){ |
|
return { |
|
active: 0, |
|
studyId: '', |
|
detail:{ |
|
enterNum: 0, |
|
totalTimes: 0, |
|
finishTimes: 0, |
|
progress: 0, |
|
rank: 0, |
|
memberIntegralRankVos:[], |
|
}, |
|
studyListRecordDtos:[], |
|
page: 0, |
|
pagesize: 10, |
|
isLoad: true, |
|
loadingStatus: '没有更多了...' |
|
} |
|
}, |
|
onLoad() { |
|
this.studyId = this.$yroute.query.id; |
|
this.getProgress(); |
|
}, |
|
onReachBottom(){ |
|
this.page = this.page + 1 |
|
this.getProgress() |
|
console.log('上拉加载') |
|
}, |
|
|
|
onPullDownRefresh() { |
|
this.studyListRecordDtos = [] |
|
this.page = 0; |
|
this.isLoad = true; |
|
this.getProgress(); |
|
}, |
|
methods:{ |
|
previewImage(imgArr,idx) { |
|
//预览图片 |
|
uni.previewImage({ |
|
urls: imgArr, |
|
current: imgArr[idx] |
|
}); |
|
}, |
|
getProgress(){ |
|
if(this.isLoad){ |
|
uni.showLoading({ |
|
title: "正在加载中..." |
|
}) |
|
this.loadingStatus = '加载中...' |
|
const data = { |
|
page: this.page, |
|
size: this.pagesize, |
|
studyListId: this.studyId |
|
} |
|
myProgress(data).then((res)=>{ |
|
if(res.success){ |
|
res.data.studyListDto.listStartTime = res.data.studyListDto.listStartTime.split(" ")[0]; |
|
res.data.studyListDto.listEndTime = res.data.studyListDto.listEndTime.split(" ")[0]; |
|
this.detail = res.data; |
|
this.studyListRecordDtos = this.studyListRecordDtos.concat(res.data.studyListRecordDtos.content) |
|
uni.hideLoading() |
|
uni.stopPullDownRefresh(); |
|
if(this.pagesize <= res.data.studyListRecordDtos.content.length){ |
|
this.isLoad = true; |
|
this.loadingStatus = '上拉加载更多...' |
|
} else{ |
|
this.isLoad = false; |
|
this.loadingStatus = '没有更多了...' |
|
} |
|
} |
|
}) |
|
} |
|
}, |
|
voteClick(item){ |
|
let id = item.id, |
|
voteNum = item.voteNum, |
|
isVote = !item.isVote; |
|
this.detail.studyListRecordDtos.map((item)=>{ |
|
if(item.id == id){ |
|
if(item.isVote){ |
|
item.voteNum = item.voteNum - 1 |
|
} else{ |
|
item.voteNum = item.voteNum + 1 |
|
} |
|
item.isVote = !item.isVote |
|
} |
|
}) |
|
let data = { |
|
"studylistRecordId": id, |
|
"type": isVote ? '1' : '0' |
|
} |
|
studyListVote(data).then((res)=>{ |
|
if(res.success){ |
|
uni.showToast({ |
|
title: '操作成功！' |
|
}) |
|
} |
|
}) |
|
}, |
|
tabClick(idx){ |
|
this.active = idx; |
|
}, |
|
toMyBangdan(){ |
|
this.$yrouter.push({ |
|
path:'/pages/study/bangdanRecord', |
|
query:{ |
|
id: this.studyId |
|
} |
|
}) |
|
}, |
|
toEdit(){ |
|
this.$yrouter.push({ |
|
path:'/pages/study/editDabang', |
|
query:{ |
|
id: this.studyId |
|
} |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.loading-status{ |
|
text-align: center; |
|
font-size: 28rpx; |
|
color: #B9B9B9; |
|
} |
|
.dabang-index{ |
|
min-height: 100vh; |
|
background: #fff; |
|
padding-bottom: 100rpx; |
|
.top-box{ |
|
width: 100%; |
|
height: 300rpx; |
|
background: linear-gradient(135deg, #E5B964 0%, #CE9F45 100%); |
|
box-sizing: border-box; |
|
padding: 40rpx 0; |
|
color: #fff; |
|
position: relative; |
|
.dabang-name{ |
|
width: 80%; |
|
font-size: 50rpx; |
|
font-weight: 600; |
|
color: #FFFFFF; |
|
line-height: 72rpx; |
|
margin: 40rpx auto; |
|
} |
|
.desc{ |
|
width: 80%; |
|
margin: 0 auto; |
|
font-size: 24rpx; |
|
color: #FFFFFF; |
|
line-height: 36rpx; |
|
text-indent: 2em; |
|
} |
|
.time-box{ |
|
width: 100%; |
|
height: 78rpx; |
|
line-height: 78rpx; |
|
background: rgba(0,0,0,.1); |
|
font-size: 28rpx; |
|
position: absolute; |
|
bottom: 0; |
|
text-indent: 1em; |
|
} |
|
.sanjiao{ |
|
width:0; |
|
height:0; |
|
border-right:14rpx solid transparent; |
|
border-left:14rpx solid transparent; |
|
border-bottom:16rpx solid #fff; |
|
position: absolute; |
|
left: 50%; |
|
top: 64rpx; |
|
transform: translateX(-50%); |
|
} |
|
} |
|
.join-num{ |
|
width: 406rpx; |
|
height: 58rpx; |
|
background: #FFF2DA; |
|
border-radius: 46rpx; |
|
margin: 30rpx auto; |
|
text-align: center; |
|
line-height: 58rpx; |
|
color: #E49600; |
|
} |
|
.my-progress-box{ |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 30rpx; |
|
font-size: 36rpx; |
|
color: #222; |
|
.t-word{ |
|
font-size: 36rpx; |
|
color: #222; |
|
font-weight: 600; |
|
.to-more{ |
|
font-size: 28rpx; |
|
color: #666; |
|
font-weight: normal; |
|
} |
|
.iconfont{ |
|
font-size: 30rpx; |
|
} |
|
} |
|
.progress-info-box{ |
|
margin-top: 30rpx; |
|
width: 690rpx; |
|
height: 280rpx; |
|
background: #FFFFFF; |
|
box-shadow: 0px 4px 8px 0px rgba(239,239,239,0.5); |
|
border-radius: 10rpx; |
|
padding: 30rpx 0; |
|
.user-headerimg{ |
|
width: 130rpx; |
|
height: 130rpx; |
|
margin-right: 20rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 50px; |
|
} |
|
} |
|
.user-progress{ |
|
font-size: 28rpx; |
|
.name{ |
|
width: 340rpx; |
|
font-size: 32rpx; |
|
font-weight: 500; |
|
color: #222222; |
|
line-height: 44rpx; |
|
} |
|
.colO{ |
|
// font-size: 40rpx; |
|
font-weight: bold; |
|
color: #F36F5E; |
|
} |
|
.progress{ |
|
display: flex; |
|
align-items: center; |
|
margin-top: 10rpx; |
|
.pro-icon{ |
|
width: 32rpx; |
|
height: 32rpx; |
|
margin-right: 10rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
.progress-r{ |
|
font-size: 24rpx; |
|
color: #666; |
|
.dabang-btn{ |
|
width: 160rpx; |
|
height: 56rpx; |
|
background: linear-gradient(180deg, #F7D08E 0%, #E2B35D 100%); |
|
border-radius: 35rpx; |
|
text-align: center; |
|
line-height: 56rpx; |
|
color: #fff; |
|
font-size: 28rpx; |
|
margin-top: 10rpx; |
|
} |
|
.default{ |
|
background: #999; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.tab-box{ |
|
width: 100%; |
|
padding: 0rpx 30rpx; |
|
font-size: 36rpx; |
|
color: #222; |
|
.tab-item{ |
|
width: 50%; |
|
text-align: center; |
|
border-bottom: 1px solid #ECECEC; |
|
padding: 20rpx 0; |
|
} |
|
.tab-item-a{ |
|
color: #EA533E; |
|
font-weight: bold; |
|
border-bottom: 1px solid #EA533E; |
|
} |
|
} |
|
|
|
.rank-list{ |
|
width: 100%; |
|
padding: 0rpx 30rpx; |
|
.rank-item{ |
|
width: 100%; |
|
padding: 32rpx 0; |
|
border-bottom: 1px solid #ececec; |
|
font-size: 28rpx; |
|
color: #222; |
|
.ranking{ |
|
width: 50rpx; |
|
height: 50rpx; |
|
border-radius: 50%; |
|
line-height: 50rpx; |
|
text-align: center; |
|
color: #EA533E; |
|
font-size: 34rpx; |
|
// background: #EA533E; |
|
|
|
} |
|
.name{ |
|
width: 60%; |
|
} |
|
.rank-img{ |
|
width: 50rpx; |
|
height: 50rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.header-img{ |
|
width: 82rpx; |
|
height: 82rpx; |
|
border-radius: 50px; |
|
overflow: hidden; |
|
margin: 0 30rpx 0 22rpx; |
|
} |
|
.jifen{ |
|
color: #E5B764; |
|
} |
|
} |
|
} |
|
|
|
.dabang-share-box{ |
|
width: 100%; |
|
padding: 30rpx; |
|
.dabang-share-item{ |
|
color: #222; |
|
padding:20rpx 0; |
|
border-bottom: 1px solid #ececec; |
|
.header-img{ |
|
width: 76rpx; |
|
height: 76rpx; |
|
border-radius: 50%; |
|
overflow: hidden; |
|
margin-right: 10rpx; |
|
} |
|
.name{ |
|
font-size: 28rpx; |
|
line-height: 40rpx; |
|
} |
|
.create-time{ |
|
font-size: 24rpx; |
|
color: #999; |
|
line-height: 34rpx; |
|
} |
|
.share-word{ |
|
font-size: 28rpx; |
|
line-height: 46rpx; |
|
margin: 22rpx 0 30rpx; |
|
} |
|
.img-box{ |
|
|
|
image{ |
|
width: 222rpx; |
|
height: 206rpx; |
|
margin-right: 10rpx; |
|
margin-bottom: 10rpx; |
|
border-radius: 10rpx; |
|
} |
|
image:nth-child(3n){ |
|
margin-right: 0; |
|
} |
|
} |
|
.zan-box{ |
|
margin-top: 20rpx; |
|
image{ |
|
width: 30rpx; |
|
height: 32rpx; |
|
margin-right: 20rpx; |
|
} |
|
} |
|
} |
|
} |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
</style>
|
|
|