chanyiUniapp/pages/study/bangdanRecord.vue

<template>
	<view class="dabang-share-box" v-else>
		<view class="dabang-share-item" v-for="(item,index) in studyList" :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">{{item.content}}</view>
			<view class="img-box acea-row row-left">
				<image :src="imgUrl" v-for="(imgUrl,index) in item.imgPaths" mode="aspectFill"></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>
</template>

<script>
	import { myStudylist , studyListVote } from "@/api/knowledge"
	export default{
		data(){
			return {
				id:'',
				studyList:[]
			}
		},
		onLoad() {
			console.log(this.$yroute.query.id)
			this.id = this.$yroute.query.id;
			this.getMyStudyList()
		},
		methods:{
			voteClick(item){
				let id = item.id,
						voteNum = item.voteNum,
						isVote = !item.isVote;
				this.studyList.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: '操作成功！'
						})
					} else{
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				})		
			},
			getMyStudyList(){
				uni.showLoading({
					title:'正在加载中...'
				})
				myStudylist(this.id).then((res)=>{
					uni.hideLoading()
					this.studyList = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.dabang-share-box{
	width: 100%;
	padding: 30rpx;
	background-color: #fff;
	.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;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.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: 10rpx;
			}
		}
	}
}
</style>