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

<template>
	<view>
		<view class="searchBar">
			<search-bar :disabled="true" @onNavigator="navByIcon('/pages/activityList/activity/hot', 2)"></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].id)" 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].score}}</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].id)" 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].score}}</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].id)" 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].score}}</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.id)">
				<view class="flex justify-around align-center">
					<view class="padding-right text-black text-bold">{{item.rank}}</view>
					<view class="padding-right">
						<u-avatar :src="item.avatar" size="130"></u-avatar>
					</view>
					<view>
						<view class="text-bold text-black">{{item.nickName}}</view>
						<view class="margin-tb-xs">{{+item.score}} 热力值</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 {authUrl} from '@/common/conf/config.js'
	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() {
				let params={
					activityId:this.activityId,
					type:0,//选手排名
					current:1,
					size:20
				}
				this.$u.api.activity.rankList(params).then(res => {
					this.rankList = res.records;
				})
			},
			navByIcon(path, index) {
				let url;
				if (index == 0) { //图片 和 活动详情
					url = path + "?poster=" + this.activity.poster; 
				}
				if (index == 1) { //报名
					let changeTime = new Date() - Date.parse(this.activity.applyEndTime.replace(/-/g, '/'));//时间戳差值
					if (changeTime > 0) { //检查活动是否已经停止报名
						uni.showToast({
							icon: "none",
							title: "报名已结束"
						})
						return;
					} else {
						let userId = uni.getStorageSync("userId")
						if (this.$u.test.isEmpty(userId)) { //是否已经登录
							let param = "pages/activityList/home/home?activityId=" + this.activityId;
							window.location.href = authUrl(param);
						} else {
							url = path + "?activityId=" + this.activityId;
						}
					}
				}
				if (index == 2) { //热榜
					url = path + "?activityId=" + this.activityId;
				}
				if (index == 3) { //我的奖金
					url = path;
				}
				if (index == 4) { //更多
					url = path + "?activityId=" + this.activityId;
				}
				uni.navigateTo({
					url: url,
				})
			},
			//跳转需要带惨方法
			navWithParm(id) {
				uni.navigateTo({
					url: "/pages/activityList/activity/authorBoost?activityId=" + this.activityId + "&receiverId=" + 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>