chanyishenghuo-uniapp/pages/study/dabang.vue

<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>