pay-video-applet-uniapp-24-8-22/pages_mine/publish/competition.vue

<template>
	<view class="competition">
		<navbar
		leftClick
		bgColor="transparent"
		@leftClick="$utils.navigateBack"
		title="比赛评选"/>
		
		<image :src="competitionBanner" mode="aspectFill"
		style="position: absolute;z-index: -1;
		width: 100%;
		height: 560rpx;
		top: 0;
		"
		></image>
		
		<view class="top">
			<!-- <view class="left">
				<view class="title">
					比赛评选排行
				</view>
				<view class="">
					参与活动 领取奖励
				</view>
			</view>
			<view class="right">
				<image src="../static/competition/1.png" mode=""></image>
			</view> -->
		</view>
		
		<view class="box">
			
			<view class="head">
				<view class="ranking">
					排行
				</view>
				<view class="content">
					作品
				</view>
				<view class="give-like">
					点赞
				</view>
			</view>
			
			
			<view class="empty"
			v-if="!list.length">
				<image src="../static/competition/k.png" mode=""></image>
				<view class="">
					暂无作品，发布第一个作品吧 ~
				</view>
			</view>
			
			<view class="list"
			v-else>
				
				<view class="item" 
				v-for="(item, index) in list"
				@click="toUrl(item)"
				:key="index">
					<view class="ranking">
						{{ index + 1 }}
					</view>
					<view class="content">
						<view class="image">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="text">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="actor">
								<view class="headImage">
									<image :src="item.userImage" mode=""></image>
								</view>
								<view class="username text-ellipsis">
									发布人：{{ item.userId }}
								</view>
							</view>
							<view class="createTime">
								发布时间：{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
							</view>
						</view>
					</view>
					<view class="give-like">
						<view class="num">
							<uv-icon 
							size="30rpx"
							name="thumb-up"></uv-icon>
							{{ item.num }}
						</view>
						<view :class="{btn : true, a : item.thumbsUp}"
						@click.stop="thumbUp(item)">
							投票
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="submit"
		@click="$utils.navigateTo('/pages_mine/publish/addWorks')"
		>
			发布作品
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				list : [],
				total : 0,
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
			}
		},
		computed : {
			...mapState(['competitionBanner']),
		},
		onLoad() {
			// this.$route.query的参数
		},
		onShow() {
			this.queryParams.pageNo = 1
			this.getList(res => {
				this.list = res.result.records
			})
		},
		//滚动到屏幕底部
		onReachBottom() {
			let total = this.queryParams.pageNo * this.queryParams.pageSize
			if(total < this.total){
				this.queryParams.pageNo += 1
				this.getList(res => {
					this.list.push(...res.result.records)
				})
			}
		},
		onPullDownRefresh(){
			this.queryParams.pageNo = 1
			this.getList(res => {
				this.list = res.result.records
			})
		},
		methods: {
			// 点赞
			thumbUp(item){
				this.$api('infoLike', {
					type : 0,
					id : item.id,
				}, res => {
					if(res.code == 200){
						this.queryParams.pageNo = 1
						this.getList(res => {
							this.list = res.result.records
						})
						
						uni.showToast({
							title: res.message
						})
					}
				})
			},
			getList(fn){
				this.$api('indexGetGetWorkPage', {
					...this.queryParams
				}, res => {
					uni.stopPullDownRefresh()
					if(res.code == 200){
						fn && fn(res)
						this.total = res.result.total
					}
				})
			},
			toUrl(item){
				this.$utils.navigateTo
				('/pages_mine/publish/worksDetail?id=' + item.id)
			},
		}
	}
</script>

<style scoped lang="scss">
.competition{
	position: relative;
	// background: linear-gradient(#cfd4ff, #f7f7f7);
	.top{
		width: 100%;
		height: 400rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		justify-content: space-between;
		.left{
			padding-top: 40rpx;
			font-size: 28rpx;
			.title{
				font-size: 50rpx;
				font-weight: 900;
				color: #5a24f3;
				padding-bottom: 20rpx;
			}
		}
		.right{
			image{
				width: 300rpx;
				height: 300rpx;
				margin-top: -50rpx;
			}
		}
	}
	.box{
		background-color: #fff;
		min-height: 100rpx;
		margin: 0 30rpx;
		margin-top: -150rpx;
		border-radius: 20rpx;
		
		.head,
		.item{
			display: flex;
			padding: 20rpx 10rpx;
			.content{
				flex: 1;
			}
			.give-like,
			.ranking{
				width: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}
		.head{
			font-size: 28rpx;
			color: #999;
		}
		
		.empty{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 100rpx 0;
			color: #999;
		}
		
		.list{
			padding-bottom: 180rpx;
			.item{
				font-size: 20rpx;
				&:nth-child(1){
					.ranking{
						color: red;
					}
				}
				&:nth-child(2){
					.ranking{
						color: #FFA200;
					}
				}
				&:nth-child(3){
					.ranking{
						color: #4739EA;
					}
				}
				.ranking{
					font-size: 40rpx;
					font-weight: 900;
					font-style: italic;
				}
				.content{
					display: flex;
					image{
						width: 100%;
						height: 100%;
					}
					.image{
						width: 200rpx;
						height: 150rpx;
						background-color: #999;
						overflow: hidden; 
						margin-right: 20rpx;
						border-radius: 20rpx;
						flex-shrink: 0;
					}
					.text{
						.title{
							font-size: 30rpx;
							font-weight: 900;
							display: -webkit-box; 
							-webkit-box-orient: 
							vertical; -webkit-line-clamp: 2; 
							overflow: hidden;
							height: 80rpx;
						}
						.actor{
							display: flex;
							.headImage{
								width: 30rpx;
								height: 30rpx;
								overflow: hidden;
								border-radius: 20rpx;
								background-color: #999;
								margin-right: 5rpx;
							}
							.username{
								overflow: hidden;
								text-overflow:ellipsis; 
								white-space: nowrap;
								width: 180rpx;
							}
						}
						.createTime{
							overflow: hidden;
							text-overflow:ellipsis; 
							white-space: nowrap;
							width: 220rpx;
							margin-top: 10rpx;
						}
					}
				}
				.give-like{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.num{
						display: flex;
					}
					.btn{
						border: 1px solid #4739EA;
						margin-top: 10rpx;
						padding: 8rpx 16rpx;
						border-radius: 15rpx;
						color: #4739EA;
						&.a{
							color: #999;
							border: 1px solid #999;
						}
					}
				}
			}
		}
	}
	.submit{
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 50rpx;
		margin-bottom: 50rpx;
		background: $uni-linear-gradient-btn-color;
		color: #fff;
		width: 650rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
}
</style>