cyzh-SoundOfMusic-H5/pages/activityList/activity/songRank.vue

<template>
	<view>
		<view class="bg-img flex justify-center align-center"
			style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/97d63ec49f544a33a6a8cc3c0b64b17a-songRankBgImg.png');height: 402upx;">
			<view class="title">歌曲排行榜</view>
		</view>
		<view class="flex justify-center align-center padding-bottom">
			<view class="search">
				<u-input confirm-type="search" v-model="keyword" style="margin: 0 20rpx;" placeholder="请输入搜索内容" />
			</view>
		</view>
		<view class="homeBtn" @click="home">
			<image src="/static/home.png" style="width: 40upx;height: 40upx;" />
		</view>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" active-color="#5c40e8" :bold="false" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</u-sticky>
		<view class="flex align-center padding-left" style="margin-top: 40upx;">
			<image src="/static/songRank/medal.png" style="width: 32upx;height: 40upx"></image>
			<view style="font-size: 36upx;font-weight: 800;color: #000000;padding-left: 20upx;">提名歌曲</view>
		</view>
		<block v-for="(item, index) in rankList" :key="index">
			<block v-if="index == 0 || index == 1 || index == 2">
				<view class="margin-sm flex align-center"
					:class="index == 0 ? 'first' : index == 1 ? 'second' : index == 2 ? 'third' : '' "
					@click="musicBoost(item.production.id)">
					<u-image width="200" height="200" border-radius="16" :src="item.production.cover"
						v-if="item.production.urlsType==1"></u-image>
					<u-image width="200" height="200" border-radius="16" :src="item.production.urls" v-else></u-image>
					<view class="flex justify-between container"
						:style="{width: (index == 0 ? '70%': index == 1 ? '69%' : index == 2 ? '68%' : '60%')}">
						<view class="left" style="width: 65%;">
							<view class="name text-cut">{{item.production.title}}</view>
							<view class="padding-tb-sm text-sm">{{item.production.personName}}</view>
							<view class="hot-value">热力值 {{ +item.production.hotValue}}</view>
						</view>
						<view class="right">
							<view class="rank"
								:style="{coloar: (index == 0 ? '#ECDA47': index == 1 ? '#C1D4DA' : index == 2 ? '#C1D4DA' : '')}">
								NO.{{item.rank}}
							</view>
							<view>
								<button class="cu-btn round theme-bg-color sm text-white">
									<text class="cuIcon-hotfill"></text>
									<text class="padding-left-xs">打榜</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="flex" style="padding: 10upx 30upx 30upx 40upx;" @click="musicBoost(item.production.id)">
					<view class="flex justify-center align-center text-bold text-lg padding-right">{{item.rank}}</view>
					<image v-if="item.production.urlsType==1" :src="item.production.cover"
						style="width: 120upx;height: 120upx;margin-right: 20upx;"></image>
					<image v-else :src="item.production.urls" style="width: 120upx;height: 120upx;margin-right: 20upx;">
					</image>
					<view style="width: 70%;">
						<view class="flex justify-between">
							<view class="music" style="width: 75%;">
								<view class="name text-cut">{{item.production.title}}</view>
								<view class="author">{{item.production.personName}}</view>
								<view class="hot-vaule">热力值 {{ +item.production.hotValue}}</view>
							</view>
							<view class="flex align-end">
								<button class="cu-btn round lines-purple sm" style="width: 110upx;">打榜</button>
							</view>
						</view>
						<view class="margin-top-xs">
							<u-line color="#cacaca"></u-line>
						</view>
					</view>
				</view>
			</block>
		</block>
		<u-loadmore :status="status" v-if="rankList.length>4"/>
		<view class="padding-top">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityId: '',
				current: 0,
				list: [{
					name: '全部'
				}],
				rankList: [],
				//搜索关键字
				keyword: '',
				name: '', //榜单搜索
				//分页
				status: 'loadmore',
				pageCurrent: 1,
				pageSize: 10,
			}
		},
		watch: {
			keyword() {
				let that = this
				//节流函数
				if (this.timer) {
					clearTimeout(this.timer) //阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.pageCurrent = 1
					that.rankList = []
					that.getRankList()
				}, 500)
			},
		},
		onLoad(options) {
			this.activityId = options.activityId;
			this.getActivityDetail()
			this.getRankList()
		},
		onReachBottom() {
			if (this.rankList.length < this.pageCurrent * 10) {
				this.status = 'nomore';
				return
			} else {
				this.status = 'loading';
				this.pageCurrent = ++this.pageCurrent;
				this.getRankList()
			}
		},
		methods: {
			change(index) {
				this.current = index;
				let name = this.list[index].name.replace("榜", '')
				if (name == '全部') {
					name = ""
				}
				this.rankList=[]
				this.name = name
				this.pageCurrent = 1;
				this.getRankList()
			},
			home() {
				uni.navigateTo({
					url: "/pages/activityList/home/home?activityId=" + this.activityId,
				})
			},
			getActivityDetail() {
				this.$u.api.activity.detail({
					id: this.activityId
				}).then(res => {
					let arr = res.classification.split(",")
					arr.forEach(item => {
						let obj = {
							name: item + '榜'
						}
						this.list.push(obj)
					})
				})
			},
			getRankList(name) {
				let params = {
					type: 1,
					activityId: this.activityId,
					current: this.pageCurrent,
					size: this.pageSize
				}
				if (!this.$u.test.empty(this.name)) {
					params.productionType = this.name
				}
				if (!this.$u.test.empty(this.keyword)) {
					params.productionSearch = this.keyword
				}
				this.$u.api.production.getRankList(params).then(res => {
					this.rankList = [...this.rankList,...res.records]
				})
			},
			musicBoost(id) {
				uni.navigateTo({
					url: "/pages/activityList/activity/musicBoost?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: -40upx;
		width: 80%;
		border-radius: 50upx;
		line-height: 60upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9D9D9D;
		font-size: 20upx;
		box-shadow: 10upx 20upx 60upx #d8d8d8;
	}

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

	.first {
		background-color: #fbf8e5;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
	}

	.second {
		background-color: #f0f5f9;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
		margin: 0 30upx;
	}

	.third {
		background-color: #fef0ef;
		border-radius: 20upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
		margin: 20upx 40upx;
	}

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

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

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

		.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>