baiyuApp/pages_enter/activity/index.vue

<template>
	<view class="activity-page">
		<u-navbar title="" :autoBack="true" :bgColor="bgColor" leftIconColor="#222222 "></u-navbar>
		<image class="bg_dance" src="/static/images/enter/activity/bg_dance.png" mode=""></image>
		<view class="header-bg">
			<view class="header-content u-f u-f-jsb">
				<view class="left-info">
					<view class="title">广场舞大赛</view>
					<view class="vote-info">
						<text>剩余票数：{{remainingVotes}}</text>
						<text class="es-ml-24">已投票数：{{votedCount}}</text>
					</view>
					<view class="join-btn u-f-ajc" @click="goMyTeam">
						<view class="es-mr-8">{{joinShow?'我的队伍':'立即参与'}}</view>
						<view class="u-f-ajc">
							<image src="/static/images/enter/activity/icon_more.png" class="es-icon-32 rightIcon"
								mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="right-img">
					<image src="/static/images/enter/activity/img_wangguan.png" mode="aspectFit"></image>
				</view>
			</view>

			<view class="search-box">
				<u-input v-model="workName" placeholder="搜索作品名称/关键字" border="none" shape="circle" prefixIcon="search"
					@confirm="onSearch" clearable @clear="onSearch"></u-input>
			</view>
		</view>

		<view class="content-box">
			<view class="tabs u-f">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: currentTab === index}"
					@click="switchTab(index)">
					{{tab}}
					<view class="line" v-if="currentTab === index"></view>
				</view>
			</view>

			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<view class="work-list">
					<view class="work-item" v-for="(item, index) in dataList" :key="index">
						<video v-if="item.videoShow" :src="item.videoUrl" class="work-cover" object-fit="cover"
							:show-center-play-btn="false"></video>
						<image @tap="changeFun(index)" v-else :src="item.coverUrl" mode="aspectFill" class="work-cover">
						</image>
						<view class="work-info">
							<view class="work-title ellipsis">{{item.workName}}</view>
							<view class="u-f u-f-jsb u-f-ac">
								<view class="vote-num">{{item.voteCount}}票</view>
								<view class="vote-btn" :class="{voted: item.isVoted}" @click="handleVote(item)">
									{{item.isVoted ? '已投' : '投票'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getWorkList,
		castVote,
		getVoteCont,
		getActivityInfo
	} from '@/api/activity.js';

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabs: ['热门作品', '最新作品'],
				currentTab: 0,
				dataList: [],
				downOption: {
					auto: false
				},
				upOption: {
					onScroll: false,
					auto: true,
					page: {
						num: 0,
						size: 10
					},
					noMoreSize: 10,
					textNoMore: "已经到底了",
					empty: {
						icon: 'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				sortBy: 'hot', //hot-热门 new-最新
				workName: '',
				remainingVotes: 100,
				votedCount: 12,
				joinShow: false, //是否组队
				bgColor: 'transparent',
			}
		},
		onLoad() {
			this.getVoteContFun()
			this.getActivityInfoFun()
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.bgColor = '#ffefef'
			} else {
				this.bgColor = 'transparent'
			}
		},
		methods: {
			changeFun(index) {
				this.dataList[index].videoShow = true
			},
			async getActivityInfoFun() {
				const res = await getActivityInfo({
					activityId: getApp().globalData.activityId
				})
				if (res.code == 200) {
					this.joinShow = true
				}
			},
			goMyTeam() {
				let url = '/pages_enter/activity/detail'
				// if (this.joinShow) {
					// url = '/pages_enter/activity/team'
				// }
				uni.navigateTo({
					url: url
				});
			},
			onSearch() {
				this.mescroll.resetUpScroll();
			},
			handleJoin() {
				uni.navigateTo({
					url: '/pages_enter/activity/detail'
				});
			},
			switchTab(index) {
				this.currentTab = index;
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				const params = {
					activityId: getApp().globalData.activityId,
					status: 1,
					sortBy: this.currentTab === 0 ? 'hot' : 'new',
					workName: this.workName,
					pageNum: page.num,
					pageSize: page.size
				};
				getWorkList(params).then(res => {
					if (res.code === 200) {
						let curList = res.data.list || [];
						if (page.num === 1) this.dataList = [];
						curList = curList.map(item => {
							return {
								...item,
								videoShow: false
							}
						})
						this.dataList = this.dataList.concat(curList);
						this.mescroll.endBySize(this.dataList.length, res.data.total);
					} else {
						this.mescroll.endErr();
					}
				}).catch(() => {
					this.mescroll.endErr();
					this.mescroll.endSuccess(this.dataList.length);
				});
			},
			handleVote(item) {
				if (item.isVoted) return;
				let params = {
					workId: item.id,
					activityId: getApp().globalData.activityId, 
					ipAddress: ""
				}
				castVote(params).then(res => {
					if (res.code === 200) {
						item.isVoted = true;
						item.voteCount++;
						this.getVoteContFun()
						uni.showToast({
							title: '投票成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				});
			},
			async getVoteContFun() {
				const res = await getVoteCont({activityId:getApp().globalData.activityId})
				if (res.code === 200) {
					this.votedCount = res.data.todayCurrVoteCount || 0
					let todayMaxCount = res.data.todayMaxCount || 0
					this.remainingVotes = (todayMaxCount - this.votedCount) || 0
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.63) 0%, #F7F8FA 100%);
	}

	.bg_dance {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		height: 530rpx;
	}

	.header-bg {
		height: 480rpx;
		padding: 120rpx 40rpx 0;
		position: relative;
		z-index: 1;

		.header-content {
			align-items: flex-start;
		}

		.left-info {
			.title {
				font-size: 56rpx;
				font-weight: bold;
				color: #8B1010;
				margin-bottom: 22rpx;
			}

			.vote-info {
				font-size: 26rpx;
				color: #8B1010;
				margin-bottom: 24rpx;
			}

			.join-btn {
				// display: inline-flex;
				// align-items: center;
				// padding: 12rpx 36rpx;
				background-image: url('/static/images/enter/activity/btn.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// background: linear-gradient(90deg, #FF7F50, #FF1493);
				// border-radius: 40rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 275rpx;
				height: 64rpx;
				line-height: 64rpx;
				align-items: center;
				// font-size: 28rpx;
				// box-shadow: 0 4rpx 12rpx rgba(255, 20, 147, 0.3);
			}
		}

		.right-img {
			width: 260rpx;
			height: 260rpx;
			margin-top: -30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.search-box {
			margin-top: 40rpx;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 4rpx 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		}
	}

	.content-box {
		margin-top: 0;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx 30rpx;
		min-height: calc(100vh - 480rpx);

		.tabs {
			justify-content: space-around;
			margin-bottom: 40rpx;
			background-color: #fff;

			.tab-item {
				font-size: 32rpx;
				color: #666;
				position: relative;
				padding-bottom: 10rpx;

				&.active {
					color: #333;
					font-weight: bold;
				}

				.line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background-color: #FF4500;
					border-radius: 4rpx;
				}
			}
		}
	}

	.work-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
	}

	.work-item {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.work-cover {
			width: 100%;
			height: 240rpx;
			background-color: #eee;
		}

		.work-info {
			padding: 20rpx;

			.work-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 20rpx;
			}

			.vote-num {
				font-size: 24rpx;
				color: #999;
			}

			.vote-btn {
				padding: 8rpx 24rpx;
				background-color: #FF4D4F;
				color: #fff;
				font-size: 24rpx;
				border-radius: 30rpx;
			}

			.voted {
				background-color: #CFCFCF;
			}
		}
	}
</style>