chanyiUniapp/pages/serviceTeacher/memberDabang.vue

<template>
	<view class="dabang-index">
		<view class="top-box">
			<view class="dabang-name">{{studyListDto.listName}}</view>
			<view class="time-box acea-row row-column">
				 <text>时间：{{studyListDto.listStartTime.split(' ')[0]}} 至 {{studyListDto.listEndTime.split(' ')[0]}}（共{{studyListDto.clockTimes}}天）</text>
				 <text>进行中：{{studyListDto.signTimes}}/{{studyListDto.clockTimes}}</text>
				 <view class="sanjiao"></view>
			</view>
		</view>
		<!-- <view class="join-num">参与人数：{{detail.enterNum}}人</view> -->
		<!-- 打榜分享 -->
		<view class="dabang-share-box">
			<view class="dabang-share-item" v-for="(item,index) in dataList" :key="index">
				<view class="user-info-box acea-row row-middle">
					<view class="header-img">
						<image :src="item.avatar" mode=""></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">
					{{item.content}}
				</view>
				<view class="img-box acea-row">
					<image :src="imgUrl" mode="aspectFill"  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>
</template>

<script>
	import { studyListVote} from '@/api/knowledge';
	import { myMemberStudylist} from '@/api/serverTeacher';
	export default{
		data(){
			return {
				active: 0,
				studyId: '',
				memberId:'',
				studyListDto:{},
				dataList:[]
			}
		},
		onLoad() {
			this.studyId = this.$yroute.query.studyId;
			this.memberId = this.$yroute.query.memberId;
			console.log( this.$yroute.query.studyId)
			console.log( this.$yroute.query.memberId)
			this.myMemberStudylist();
		},
		methods:{
			myMemberStudylist(){
				myMemberStudylist({memberId:this.memberId,studyId:this.studyId}).then((res)=>{
					if(res.success){
						this.studyListDto = res.data.studyListDto
						this.dataList = res.data.recordDtos;
						uni.stopPullDownRefresh();
					}
				})
			},
			voteClick(item){
				let id = item.id,
						voteNum = item.voteNum,
						isVote = !item.isVote;
				this.dataList.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;
			},
			onPullDownRefresh() {
				this.myMemberStudylist();
			}
		}
	}
</script>

<style lang="less" scoped>
.dabang-index{
	min-height: 100vh;
	background: #fff;
	padding-bottom: 100rpx;
	.top-box{
		width: 100%;
		height: 344rpx;
		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;
		}
		.time-box{
			width: 100%;
			background: rgba(0,0,0,.1);
			font-size: 28rpx;
			padding: 20rpx 20rpx;
			position: absolute;
			bottom: 0;
			text{
				display: inline-block;
				margin:6rpx 0;
			}
		}
		.sanjiao{
			width:0;
			height:0;
			border-right:14rpx solid transparent;
			border-left:14rpx solid transparent;
			border-bottom:16rpx solid #fff;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.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: 224rpx;
					height: 206rpx;
					margin-right: 10rpx;
					border-radius: 10rpx;
				}
			}
			.zan-box{
				margin-top: 20rpx;
				image{
					width: 30rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
}
</style>