cyzh-SoundOfMusic-H5/components/homeViews/activity-view.vue

<template>
	<view>
		<view class="searchBar">
			<search-bar :disabled="true"></search-bar>
		</view>
		<view class="padding-tb bg-white">
			<u-image width="100%" height="350" :src="activity.cover" @click="navByIcon('/pages/activityList/activity/activityDetail', 0)"></u-image>
		</view>
		<view class="flex justify-around text-center padding-tb bg-white">
			<block v-for="(item,index) in icons" :key="index">
				<view @click="navByIcon(item.url, index)">
					<image :src="item.image" style="width: 80upx;height: 80upx;"></image>
					<view class="margin-top-xs text-sm text-bold">{{item.name}}</view>
				</view>
			</block>
		</view>
		<view class="margin-top-sm bg-white flex justify-around align-end" style="height: 350upx;">
			<view class="second text-center" @click="navWithParm(rankList[1].userId)" v-if="!$u.test.isEmpty(rankList[1])">
				<view class="margin-top-sm">
					<u-avatar :src="rankList[1].avatar" size="120"></u-avatar>
				</view>
				<view class="text-bold text-lg text-black">{{rankList[1].totalHotValue}}</view>
				<view class="flex justify-center">
					<view class="hot-btn margin-top-xs">
						<text class="cuIcon-hotfill padding-right-xs"></text>
						<text>打榜</text>
					</view>
				</view>
			</view>
			<view class="first text-center" @click="navWithParm(rankList[0].userId)" v-if="!$u.test.isEmpty(rankList[0])">
				<view class="margin-top-sm">
					<u-avatar :src="rankList[0].avatar" size="130"></u-avatar>
				</view>
				<view class="margin-top-xs text-bold text-lg text-black">{{rankList[0].totalHotValue}}</view>
				<view class="flex justify-center">
					<view class="hot-btn margin-top-xs">
						<text class="cuIcon-hotfill padding-right-xs"></text>
						<text>打榜</text>
					</view>
				</view>
			</view>
			<view class="third text-center" @click="navWithParm(rankList[2].userId)" v-if="!$u.test.isEmpty(rankList[2])">
				<view class="margin-top-sm">
					<u-avatar :src="rankList[2].avatar" size="120"></u-avatar>
				</view>
				<view class="text-bold text-lg text-black">{{rankList[2].totalHotValue}}</view>
				<view class="flex justify-center">
					<view class="hot-btn margin-top-xs">
						<text class="cuIcon-hotfill padding-right-xs"></text>
						<text>打榜</text>
					</view>
				</view>
			</view>
		</view>
		<block v-for="(item, index) in rankList.slice(3, rankList.length + 1)" :key="index">
			<view class="padding-sm flex justify-between align-center bg-white" @click="navWithParm(item.userId)">
				<view class="flex justify-around align-center">
					<view class="padding-right text-black text-bold">{{index + 4}}</view>
					<view class="padding-right">
						<u-avatar :src="item.avatar" size="130"></u-avatar>
					</view>
					<view>
						<view class="text-bold text-black">{{item.name}}</view>
						<view class="margin-tb-xs">{{item.totalHotValue}} 热力值</view>
					</view>
				</view>
				<view class="padding-right">
					<button class="cu-btn round  text-white" style="background-color: #583ce6;height: 68upx;">
						<text class="cuIcon-hotfill padding-right-xs"></text>
						<text>打榜</text>
					</button>
				</view>
			</view>
		</block>
		<view class="text-center bg-white" style="line-height: 80upx;" @click="navByIcon('/pages/activityList/activity/hot', 2)" v-if="!$u.test.isEmpty(rankList)">
			<text class="text-bold text-black">全部歌手</text>
			<text class="cuIcon-right"></text>
		</view>
	</view>
</template>

<script>
	import searchBar from "@/components/basic/search-bar.vue";
	export default {
		components: {
			searchBar,
		},
		props: {
			activityId: {
				type: String,
				default: ''
			},
			imgList: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				icons: [
					{image: '/static/song.png', name: '活动介绍', url: '/pages/activityList/activity/activityDetail'},
					{image: '/static/signUp.png', name: '点击报名', url: '/pages/activityList/activity/signUp'},
					{image: '/static/hot.png', name: '热度榜', url: '/pages/activityList/activity/hot'},
					{image: '/static/activity.png', name: '我的奖金', url: '/pages/activityList/activity/awards'},
					{image: '/static/more.png', name: '更多', url: '/pages/activityList/activity/songRank'},
				],
				activity: {},
				rankList: [],
			}
		},
		mounted() {
			this.getRankList();
			this.getActivityDetail();
		},
		methods: {
			getActivityDetail() {
				this.$u.api.activity.detail({id: this.activityId}).then(res => {
					this.activity = res;
				})
			},
			getRankList() {
				this.$u.api.activity.rankList({activityId: this.activityId}).then(res => {
					this.rankList = res.records;
				})
			},
			navByIcon(path, index) {
				let url;
				if (index == 0) { //图片 和 活动详情
					url = path + "?poster=" + this.activity.poster; 
				}
				if (index == 1 || index == 2) { //报名 和 热榜
					url = path + "?activityId=" + this.activityId;
				}
				uni.navigateTo({
					url: url,
				})
			},
			//跳转需要带惨方法
			navWithParm(id) {
				uni.navigateTo({
					url: "/pages/activityList/activity/boost?activityId=" + this.activityId + "&userId=" + id,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.first {
		height: 300upx;
		width: 30%;
		border-radius: 30upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
	}
	.second {
		height: 260upx;
		width: 27%;
		border-radius: 30upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
	}
	.third {
		height: 260upx;
		width: 27%;
		border-radius: 30upx;
		box-shadow: -1upx -1upx 60upx #d8d8d8;
	}
	.hot-btn {
		color: #FFFFFF;
		line-height: 56upx;
		width: 70%;
		border-radius: 30upx;
		background-color: #583ce6;
		font-weight: bold;
	}
</style>