activitys-uniapp/pages/rank/rank.vue

<template>
	<view :style="vuex_skin">
		<view class="">
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar v-show="navbarShow" :custom-back="customBack" title-color="#fff" :border-bottom="false"
				back-icon-color="#fff" title="排行榜" :background="{'backgroundColor': vuex_theme.bgColor}"></u-navbar>
			<back v-show="!navbarShow" :custom-back="customBack"></back>
			<!-- #endif -->
			<view class="bg-img flex-direction flex justify-center" :class="isH5?'marginTop':''"
				style="height: 380rpx;"
				:style="rankBgImg">
				<view class="title" style="padding: 80rpx 0 0 60rpx;">排行榜</view>
			</view>
			<view class="flex justify-center align-center padding-bottom">
				<view class="search">
					<u-search @search="searchWorks" v-model="keyword" search-icon="/static/rank/search.png"
						:show-action="false" bg-color="#fff" style="width: 100%;" placeholder-color="#CCCCCC">
					</u-search>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
				@up="upCallback">
				<block v-for="(item, index) in rankList" :key="item.id">
					<block v-if="index == 0 || index == 1 || index == 2">
						<view class=" flex align-center "
							style="height: 230rpx;position: relative;margin: 10rpx 20rpx 20rpx 20rpx;"
							:class="index == 0 ? 'first1' : index == 1 ? 'second2' : index == 2 ? 'third3' : '' ">
							<view class="" style="width: 220rpx;">
								<u-image width="220" height="220" mode="aspectFill" border-radius="10"
									:src="item.imgUrl">
								</u-image>
							</view>
							<view class="flex justify-between container" style="width: 100%;">
								<view class="left" style="width: 95%;">
									<view class="padding-top-20  " style="display: flex;">
										<view class="center ">
											<view class="cu-tag sm bg-tag  radius margin-right-10">
												编号：{{item.productNo}}
											</view>
										</view>
										<view class="center">
											<text class="name text-cut-1">{{item.title}}</text>
										</view>
									</view>
									<view class="padding-tb-sm text-sm center"
										style="color: #888888;justify-content: flex-start">
										<u-avatar :src="item.userImg?item.userImg:'/static/icon/unlogin.png'" size="56">
										</u-avatar>
										<text class="margin-left-10">{{item.username || '暂无信息'}}</text>
									</view>

									<view class="flex justify-between">
										<view class="hot-value center" style="justify-content: flex-start;">
											<text class="cuIcon-hotfill text-base " style="font-size: 32rpx;"></text>
											<text style="padding-left: 4rpx;">{{item.voteCount}}</text>
										</view>
										<button
											@click.stop="$jump('/pages/activity/activityDetail?id='+item.id+'&isCustomBack=false')"
											class="cu-btn round  bg-base sm text-white"
											style="padding: 20rpx 38rpx;margin-bottom: 30rpx;">
											<text>去投票</text>
										</button>
									</view>
								</view>
							</view>

							<view class="" style="position: absolute;right: -16rpx;top: -16rpx;">
								<image v-if="index==0" style="width: 70rpx;height: 70rpx;"
									src="../../static/rank/no1.png" mode=""></image>
								<image v-if="index==1" style="width: 70rpx;height: 70rpx;"
									src="../../static/rank/no2.png" mode=""></image>
								<image v-if="index==2" style="width: 70rpx;height: 70rpx;"
									src="../../static/rank/no3.png" mode=""></image>
							</view>
						</view>
					</block>
					<view v-else class="flex margin-20">
						<view class="center text-bold text-lg" style="margin:0 20rpx;">
							<text>{{index + 1}}</text>
						</view>
						<view class=" flex align-center "
							style="background-color: #FFFFFF;border-radius: 20rpx;height: 200rpx;width: 95%;">
							<view class="" style="width: 190rpx;">
								<u-image width="190" height="190" border-radius="10" :src="item.imgUrl"></u-image>
							</view>
							<view class="flex justify-between container" style="width: 100%;">
								<view class="left" style="width: 95%;">
									<view class="flex" style="padding-top: 20rpx;width: 430rpx;">
										<view class="cu-tag sm bg-tag  radius">
											编号：{{item.productNo}}
										</view>
										<view class="name text-cut-1" style="font-size: 28rpx;font-weight: 600;">
											{{item.title}}
										</view>
									</view>
									<view class="padding-top-20 text-sm center"
										style="color: #888888;justify-content: flex-start">
										<u-avatar :src="item.userImg?item.userImg:'/static/icon/unlogin.png'" size="56">
										</u-avatar>
										<text class="margin-left-10">{{item.username || '暂无信息'}}</text>
									</view>
									<view class="flex justify-between">
										<view class="hot-value center" style="justify-content: flex-start;">
											<text class="cuIcon-hotfill text-base" style="font-size: 32rpx;"></text>
											<text style="padding-left: 4rpx;">{{item.voteCount}}</text>
										</view>
										<button
											@click.stop="$jump('/pages/activity/activityDetail?id='+item.id+'&isCustomBack=false')"
											class="cu-btn round bg-base sm text-white"
											style="padding: 20rpx 38rpx;margin-bottom: 30rpx;">
											<text>去投票</text>
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</mescroll-body>
		</view>
		<home-btn></home-btn>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import back from '@/components/back.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			back
		},
		data() {
			return {
				isH5: false,

				downOption: {
					auto: false
				},
				upOption: {
					auto: false,
					use: true
				},
				navbarShow: false,
				rankList: [],
				//搜索关键字
				keyword: '',
				activeId: '',


			}
		},
		onPageScroll(res) {
			if (res.scrollTop > 40) {
				this.navbarShow = true
			} else {
				this.navbarShow = false
			}
		},
		onLoad(options) {
			this.activeId = options.activeId
			// #ifdef MP-WEIXIN
			this.mescroll.resetUpScroll();
			// #endif

			// #ifdef H5
			this.getActivityParams();
			this.isH5 = true
			//h5端要延时才能获取到mescroll对象
			setTimeout(() => {
				this.mescroll.resetUpScroll();
			}, 20)
			// #endif
		},
		computed:{
			rankBgImg(){
				if (this.$isEmpty(this.vuex_theme.rankBgImg)) {
					return 'background-image: url(https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/4872ea85f7e74a75a920135ce1384262-bg.png)'
				}
				return 'background-image: url('+this.vuex_theme.rankBgImg+')'
			}
		},
		methods: {
			/**
			 * 获取活动参数
			 */
			async getActivityParams() {
				if(this.$isNotEmpty(this.vuex_active_setting)&&this.$isNotEmpty(this.vuex_active_setting.shareParam)){ //有缓存直接从缓存获取
					this.vuex_active_setting.shareParam.link = window.location.href
					this.$shareConfig.H5Share(this.vuex_active_setting.shareParam)
				}else{
					let params = {
						activeId: this.activeId,
						platformSettingEnum: 'ACTIVE_SETTING'
					}
					let activeSetting = JSON.parse((await this.$api.platform.getPlatformValue(params)).data.data);
					if (this.$isNotEmpty(activeSetting.shareParam)) {
						let shareParam=activeSetting.shareParam
						shareParam.link=window.location.href
						this.$shareConfig.H5Share(shareParam)
					}
					activeSetting.defaultActiveId = this.activeId
					this.$u.vuex('vuex_active_setting', activeSetting);
				}
				
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000)
			},
			async upCallback(mescroll) {
				try {
					let params = {
						current: mescroll.num,
						size: mescroll.size,
						activeId: this.activeId
					}
					this.$api.activity.sortListQuery(params).then(res => {
						let data = res.data.data.records
						let total = res.data.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.rankList = []; //如果是第一页需手动制空列表
						this.rankList = this.rankList.concat(data); //追加新数据
					})
				} catch (e) {
					console.error(e);
					this.mescroll.endErr()
				}
			},
			searchWorks(value) {
				this.$api.activity.searchWork(value).then(res => {
					this.rankList = res.data.data;
				})
			},
			customBack() {
				uni.switchTab({
					url: "/pages/index/home"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.marginTop {
		margin-top: -80rpx;
	}

	.search {
		margin-top: -60upx;
		width: 80%;
		border-radius: 50upx;
		line-height: 60upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9D9D9D;
		font-size: 20upx;
	}

	.title {
		font-size: 52upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.container {
		.left {
			padding-left: 20upx;

			.name {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333;
			}

			.hot-value {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #353535;
			}
		}

		.right {
			text-align: center;
			padding-right: 10upx;

			.rank {
				height: 70%;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 800;
				font-style: italic;
			}
		}
	}

	.music {
		.name {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.author {
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9A9A9A;
		}

		.hot-vaule {
			margin-top: 10upx;
			font-size: 14upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #3F372A;
		}
	}

	.lines-purple::after {
		border-color: #5a3ee8;
	}

	.lines-purple {
		color: #5a3ee8;
	}
</style>