IHG/pages/my/Kudos/Kudos.vue

<template>
	<view class="kudos">
		<!-- 点赞列表 -->
		
		<view class="msg-null" v-if="List.length == 0 ">
			<image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
			<view class="msg-null-text">
				<text>暂无数据</text>
			</view>
		</view>
		
		<view class="List" v-if="List.length > 0">
			<view class="ListItem" v-for="(item,index) in List" :key="index" @click="goVoteDetail(item.id)">
				<image :src="item.cover_img" style="width: 640rpx;height:420rpx;border-radius: 12rpx;"></image>
				<view class="kudosicon">
					<image src="/static/icon/Kudos.png" v-if="item.is_like!=1" @click.stop="clickKudos(item.id,index)"></image>
					<image src="/static/icon/Kudos(1).png" v-if="item.is_like==1" @click.stop="clickKudos(item.id,index)"></image>
				</view>
				<view class="nav">
					<view class="events">
						<text>{{item.title}}</text>
					</view>
					<view class="voteStatus" style="width: 100rpx;">
						<text style="font-size: 30rpx;color: #999;" v-if="item.activity_status==1">未开始</text>
						<text style="font-size: 30rpx;color: #FF6503;" v-if="item.activity_status==2">进行中</text>
						<text style="font-size: 30rpx;color: #999;" v-if="item.activity_status==3">已结束</text>
					</view>
				</view>
				<view class="foot">
					<image src="/static/icon/data.png"></image>
					<text>{{item.end_time}} 结束</text>
				</view>
			</view>
		</view>
		<!-- 已经到底啦 -->
		<uni-load-more v-if="List.length > 0" :status="status" color="#CCCCCC" :content-text="contentText"/>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				//组件uni-load-more
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				// 点赞列表
				List:[],
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			// 获取点赞列表
			getList(){
				this.$api.active.getActiveList({
					page:1,
					is_my_like:1
				}).then(res=>{
					console.log(res,"点赞列表")
					if(res.code==0){
						this.List=res.data.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			// 跳转投票详情
			goVoteDetail(id){
				uni.navigateTo({
					url:'/pages/index/active-detail/index?id='+id
				})
			},
			// 点赞
			clickKudos(id,index){
				let beforeLike=this.List[index].is_like
				this.$api.active.kudos({
					activity_id:id
				}).then(res=>{
					if(res.code==0){
						if(beforeLike==1){
							this.List[index].is_like=0
							this.getList()
						}else{
							this.List[index].is_like=1
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.kudos {
		height: 100%;
		background: $pageColor;
	}
	
	
	.msg-null{
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.msg-null-text{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.List {
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-top: 24rpx;

		.ListItem {
			position: relative;
			margin-bottom: 24rpx;
			width: 690rpx;
			height: 562rpx;
			background: $bgColor;
			box-shadow: 0rpx 12rpx 40rpx 0rpx rgba(220, 222, 229, 0.4);
			border-radius: 24rpx;
			padding: 20rpx 26rpx 26rpx 24rpx;

			.kudosicon {
				width: 48rpx;
				position: absolute;
				top: 52rpx;
				right: 58rpx;
				border-radius: 50%;
				height: 48rpx;
				background: #FFFFFF;
				opacity: 0.84;
				@include flexlayout()
				image{
					width: 29rpx;
					height: 26rpx;
				}
			}

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.events {
					text {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.voteStatus {
					font-size: 30rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.foot {
				margin-top: 10rpx;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					display: block;
				}
			}

		}
	}
</style>