ProAdvanced/pages/game-page/game-ranking/game-ranking.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack" :title="pageTitle" backgroundColor="rgba(151, 151, 255, 1)"
		 color="#FFFFFF" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="w-left-arrow" src="../../../static/m-icon/leftBack.png"></image>
				</view>
			</view>

		</uni-nav-bar>
		
		
		<view class="make-bg-bPurple rankingTop">
			<view style="position:absolute;left:0; right:0; top:-100px; bottom:0;margin:auto;" class="flex justify-center align-center">
				<image style="width: 337px;height: 337px;" src="/static/ranking-light.png"></image>
			</view>
			<!-- 底部领奖台 -->
			<view class="flex justify-center rankingImageContainer">
				<image style="height: 94px; width: 100%; margin: 0 37rpx;" src="/static/ranking-plat.png"></image>
			</view>
			<view class="rankingImageContainer">
				<view class="text-white text-bold text-15px text-center" style="margin-top: 66px;width: 160rpx;">{{rankInfo?rankInfo.rankScoreList[1]:''}}</view>
				<view class="text-white text-bold text-15px text-center" style="margin: 38px 75rpx 0; width: 160rpx;">{{rankInfo?rankInfo.rankScoreList[0]:''}}</view>
				<view class="text-white text-bold text-15px text-center" style="margin-top: 66px;width: 160rpx;">{{rankInfo?rankInfo.rankScoreList[2]:''}}</view>

			</view>


			<!-- 头像部分 -->
			<view class="rankingHeadContainer">

				<view class="flex justify-around  margin-left margin-right" style="margin-top: 40px; width: 100%;">
					<!-- 排名2 -->
					<view class="text-white flex justify-center flex-direction align-center" style="margin-top: 25px;width: 160rpx;height: 100%;">
						<view v-if="rankUserInfo[1].bShow" class="rankHeadMin" style="border: 3px solid #dee2e5; ">
							<image class="rankHead" mode="aspectFill" :src="rankUserInfo[1].avatarUrl"></image>
							<view class="flex justify-center rankingNum">
								<view style="background-color: #dee2e5;" class="flex justify-center align-center rankingNumChild">
									2
								</view>
							</view>
						</view>
						{{rankUserInfo[1].username}}
					</view>
					<!-- 排名1 -->
					<view class="text-white flex justify-center flex-direction align-center" style="height: 100%;width: 160rpx;">
						<view v-if="rankUserInfo[0].bShow" class="rankHeadBig">

							<image class="rankHead" mode="aspectFill" :src="rankUserInfo[0].avatarUrl"></image>
							<view style="position: absolute;top:-14px;left: 0;  width: 100%;height: 16px; " class="flex justify-center">
								<image style=" width: 22px;height: 16px;" src="../../../static/ranking-crown.png"></image>

							</view>

							<view class="flex justify-center rankingNumOne">

								<view style=" background-color: #fed642;" class="flex justify-center align-center rankingNumOneChild">
									1
								</view>
							</view>
						</view>
						{{rankUserInfo[0].username}}
					</view>
					<!-- 排名3 -->
					<view class="text-white flex justify-center flex-direction align-center" style="margin-top: 25px;width: 160rpx;height: 100%;">
						<view v-if="rankUserInfo[2].bShow" class="rankHeadMin" style="border: 3px solid #fdaf41;">
							<image class="rankHead" mode="aspectFill" :src="rankUserInfo[2].avatarUrl"></image>
							<view class="flex justify-center rankingNum">
								<view style=" background-color: #fdaf41;" class="flex justify-center align-center rankingNumChild">
									3
								</view>
							</view>
						</view>
						{{rankUserInfo[2].username}}
					</view>

				</view>

			</view>


		</view>

		<!-- 切换游戏信息和分类部分 -->
		<view style="background-color: #FFFFFF; box-shadow: 0px 0px 3px 2px rgba(113, 113, 219, 0.23);">

			<view class="flex justify-between padding">
				<view class="flex justify-center align-center ">
					<image style="width:50px;height: 50px; background-color: #eeeeee; border-radius: 8px;" :src="rankSelectedGame?rankSelectedGame.gameIcon:''"></image>
					<view style="margin-left: 22rpx;">{{rankSelectedGame?rankSelectedGame.gameName:''}}</view>
				</view>

				<view class="button-fav" @tap="showModal" data-target="bottomModal">切换</view>

			</view>
			<view class="nav flex  justify-around align-center ">
				<view style="width: 200rpx; margin: 0 40rpx;" class="cu-item text-bold text-18px text-center" :class="0==TabCur?'make-text-bPurple cur':''"
				 data-id="0" @tap="tabSelect">
					全国
				</view>
				<view style="height: 30px; border-right: 1rpx solid #AAAAAA;"></view>
				<view style="width: 200rpx; margin: 0 40rpx;" class="cu-item text-bold text-18px text-center text-cut" :class="1==TabCur?'make-text-bPurple cur':''"
				 data-id="1" @tap="tabSelect">
					{{cityName}}
				</view>
			</view>
		</view>
		<!-- 滚动部分 style="height: 300px; margin-bottom: 87px;"-->
		<view >
			<scroll-view style="max-height:300px; width: 100%; padding: 22rpx; box-sizing: border-box;" scroll-y="true">
				<view class="flex justify-between align-center bg-white" style="height: 73px; width: 100%; border-radius: 8px; margin-bottom:14rpx ; "
				 v-for="(item,index) in otherUserInfoList" v-bind:key="index">
					<view class="flex justify-center align-center  " style="margin-left: 68rpx;">
						<view class="text-13px margin-right flex justify-center align-center text-bold" style="background-color: #f6f3f7; width: 27px;height: 27px; border-radius: 45px;">{{index+1}}</view>
						<image class="head-image-50" :src="item.avatarUrl"></image>
						<view class="text-16px text-bold margin-left">{{item.username}}</view>
					</view>

					<view class="text-bold text-16px" style="margin-right: 68rpx;">{{otherScoreList[index]}}</view>
				</view>
				
				<view v-if="otherUserInfoList.length == 0 " class="text-center text-gray">没有其他排名数据~</view>
				<view style="height: 73px; "></view>
			</scroll-view>
		</view>

		<view class="flex justify-between align-center bg-white" style="position: fixed;bottom: 0;height: 73px; width: 100%;">
			<view class="flex justify-center align-center " style="margin-left: 68rpx;">
				<view class="text-13px margin-right text-gray">{{rankInfo&&rankInfo.userRank>3?'名落孙山':'金榜题名'}}</view>
				<image class="head-image-50" :src="rankInfo?rankInfo.userInfo.avatarUrl:''"></image>
				<view class="text-16px text-bold margin-left">{{rankInfo?rankInfo.userInfo.username:''}}</view>
			</view>

			<view class="text-bold text-16px" style="margin-right: 68rpx;">{{rankInfo&&rankInfo.userScore?rankInfo.userScore:0}}</view>
		</view>
		
		

		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg-white" style=" border-radius: 15px;" @tap.stop="">
				<view class="flex justify-center align-center" style="width: 100%; height: 60rpx;" @tap="hideModal">
					<view class="text-blue" style="width: 80rpx; height: 2px; background-color: #AAAAAA;"></view>
				</view>
				<view class="article" style="position: relative; ">
					<view class="title">
						最近在玩
					</view>
					<view class="cu-item">
						<view class="cu-form-group margin-top">
							<view v-if="playRankingGames.length!=0" class="grid col-4 homepage-grid-square flex-sub ">
								<view v-for="(item,index) in playRankingGames" :key="index" v-if="index<4" @tap="onChangeGame(item)">
									<block v-if="platform == gamePlatform[item.platform] || item.platform == 2">
										<image class="item-img" :src="item.gameIcon" mode="aspectFill"></image>
										<view class="border text-center text-cut">{{item.gameName}}</view>
									</block>
									
								</view>
							</view>
							<view v-else class="text-center text-gray" :style="{width:'100%'}">去玩游戏吧~</view>
						</view>
					</view>
				</view>

				<view class="article" style="position: relative; ">
					<view class="title">
						总榜
					</view>
					<scroll-view scroll-y="true"  class="cu-item">
						<view class="cu-form-group ">
							<view class="grid col-4 homepage-grid-square flex-sub ">
								<view v-if="calorieGame" @tap="onChangeGame(calorieGame)">
									<image class="item-img" :src="calorieGame.gameIcon" mode="aspectFill"></image>
									<view class="border text-center margin-bottom text-cut">{{calorieGame.gameName}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="article" style="height: 270px; position: relative; bottom: 10px;">
					<view class="title">
						全部游戏
					</view>
					<scroll-view scroll-y="true" style="height: 250px;" class="cu-item">
						<view class="cu-form-group ">
							<view v-if="versionCodeState&&versionCodeState.showGame&&allGames.length!=0" class="grid col-4 homepage-grid-square flex-sub ">
								<view v-if="platform == gamePlatform[item.platform] || item.platform == 2"  v-for="(item,index) in allGames" :key="index" @tap="onChangeGame(item)">
									<image class="item-img" :src="item.gameIcon" mode="aspectFill"></image>
									<view class="border text-center margin-bottom text-cut">{{item.gameName}}</view>
								</view>
							</view>
							<view v-else class="text-center text-gray" :style="{width:'100%'}">去玩游戏吧~</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../../common/config.js';
	import reqUtil from "@/util/util-js/requstUtil.js";

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: mapState(['rankSelectedGame', 'rankInfo', 'cityName', 'city', 'playRankingGames', 'playGames', 'hasLogin', 'allGames','platform','gamePlatform','versionCodeState']),
		data() {
			return {
				pageTitle: '排行榜',
				TabCur: 0,
				rankUserInfo: [{
						bShow: false,
						avatarUrl: '',
						username: '',
					},
					{
						bShow: false,
						avatarUrl: '',
						username: '',
					},
					{
						bShow: false,
						avatarUrl: '',
						username: '',
					}
				],
				//除去前三名的数据
				otherUserInfoList: [],
				otherScoreList: [],

				modalName: null,

				scrollviewHight: 0,

				//卡路里游戏
				calorieGame: null,
			}
		},
		onLoad() {
			let that = this;
			//获得全部游戏列表
			that.getAllGame(() => {
				reqUtil.requestData(config.URL.GETRANKGAME).then(res => {
						console.warn('GETRANKGAME =====', res);
						// 如果玩家有记录显示的游戏，
						if (res.data !== null) {
							that.$store.state.rankSelectedGame = res.data;
							that.onGetRank();
							reqUtil.requestData(config.URL.GAMEDETAIL, {
								gameId: '1'
							}).then(res => {
									that.calorieGame = res.data.gameInfo;
								},
								e => {
									console.log(e)
								});
						} else {
							// //如果没有记录到用户的选择数据，给一个游戏显示
							// if (that.allGames.length == 0) {
							// 	console.warn("allGames 没有任何游戏！");
							// 	return;
							// }
							// //设置第一个游戏给显示
							// that.$store.state.rankSelectedGame = that.allGames[0];
							// console.log("this.getAllGame rankSelectedGame", that.rankSelectedGame);
							// that.onGetRank();
							
							reqUtil.requestData(config.URL.GAMEDETAIL, {
								gameId: '1'
							}).then(res => {
									console.log("*************", res);
									that.calorieGame = res.data.gameInfo;
									that.$store.state.rankSelectedGame = that.calorieGame;
									that.onGetRank();
								},
								e => {
									console.log(e)
								});
						}
					},
					e => {
						console.log(e)
					});
			});


			

			//获取最近玩的游戏列表
			reqUtil.requestData(config.URL.RECENTLYPLAYINGGETBYPLATFORM).then(res => {
					console.log('RECENTLYPLAYINGGETBYPLATFORM =====', res);
					if (res.code == 0 && res.data.gameList) {
						// that.$store.state.playRankingGames = res.data.gameList;
						let _arry = [];
						for(let i=0;i<res.data.gameList.length;i++){
							if(res.data.gameList[i].gameRankingShow){
								_arry.push(res.data.gameList[i]);
							}
						}
						that.$store.state.playRankingGames = _arry;
						that.onGetRank();
					}
				},
				e => {
					console.log(e)
				});



		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('#nav-bar');
					view.boundingClientRect(data => {
						let navHeight = data.height;
						let scrollXHight = uni.upx2px(90);
						that.scrollviewHight = res.windowHeight - navHeight - 265-125-73;
					}).exec();
				}
			});
		},
		methods: {
			...mapMutations(['getRankGame', 'getAllGame']),
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;

				if (this.TabCur == 1 && this.city.cityCode == "") {
					console.warn("选择城市时候，cityCode 不能为空");
					return;
				}


				this.onGetRank();
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			onChangeGame(item) {
				uni.showToast({
					title: '',
					icon: "loading",
					duration: 10000
				})
				// console.log(item);
				//这里切换游戏
				let that = this;
				//切换游戏，修改一次用户记录的数据
				reqUtil.requestData(config.URL.MOTIFYRANKGAME, {
					gameId: item.gameId,
					score: 111
				}, "POST").then(res => {
						console.log('MOTIFYRANKGAME =====', res, item);
						//设置当前显示的游戏数据
						that.$store.state.rankSelectedGame = item;
						that.hideModal();
						that.onGetRank();
					},
					e => {
						console.log(e)
					});
			},

			onGetRank() {
				uni.showToast({
					title: '',
					icon: "loading",
					duration: 10000
				})
				// console.log( this.rankSelectedGame);
				if(!this.rankSelectedGame)return;
				this.getRankGame({
					param: {
						type: this.TabCur == 0 ? "china" : "city",
						cityCode: this.city.cityCode,
						gameId: this.rankSelectedGame.gameId
					},
					callback: (res) => {
						uni.hideToast();
						if (res.data == null) return;
						for (let i = 0; i < 3; i++) {
							if (this.rankInfo.rankingList[i]) {
								this.rankUserInfo[i] = Object.assign({
									bShow: true
								}, this.rankInfo.rankingList[i])

								// console.log("=====", this.rankUserInfo[i]);
							} else {
								this.rankUserInfo[i] = Object.assign({
									bShow: false,
									avatarUrl: '',
									username: '',
								})


							}
						}
						//.slice(3)
						this.otherUserInfoList = this.rankInfo.rankingList;
						this.otherScoreList = this.rankInfo.rankScoreList;

					}
				});
			}
		}
	}
</script>

<style>
	.rankingTop {
		position: relative;
		width: 100%;
		height: 265px;
	}

	.rankingImageContainer {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 94px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.rankingNum {
		position: absolute;
		bottom: -10px;
		left: 0;
		width: 100%;
		height: 20px;
	}

	.rankingNumChild {
		width: 20px;
		height: 20px;
		border-radius: 45px;
	}


	.rankingNumOne {
		position: absolute;
		bottom: -12px;
		left: 0;
		width: 100%;
		height: 24px;
	}

	.rankingNumOneChild {
		width: 24px;
		height: 24px;
		border-radius: 45px;
	}

	.rankingHeadContainer {
		position: absolute;
		top: 0;
		left: 0;
		height: 172px;
		width: 100%;
		display: flex;
		justify-content: center;
		/* border: 1rpx solid #000000; */
	}

	.button-fav {
		background-color: rgba(153, 150, 252, 255);
		color: #FFFFFF;
		border-radius: 10px;
		width: 184rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
	}

	.head-image-50 {
		width: 50px;
		height: 50px;
		background-color: #eeeeee;
		border-radius: 45px;
	}

	.title {
		text-align: justify;
		/* padding: 40rpx 30rpx; */
		font-size: 15px;
		position: relative;
		height: 30px;
		line-height: 60upx;
		margin: 20rpx 40rpx;
		font-weight: 400;
		color: rgba(26, 26, 26, 1);
	}

	.homepage-grid-square {
		width: 250rpx;
		/* height: 250rpx; */
		align-items: start;

	}

	.homepage-grid-square image {
		width: 144rpx;
		height: 144rpx;
	}

	.item-img {
		border-radius: 20rpx;
		box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23);
	}

	.rankHead {
		width: 100%;
		height: 100%;
		border-radius: 45px;
		flex-shrink: 0;
	}

	.rankHeadMin {
		display: flex;
		position: relative;
		width: 55px;
		height: 55px;

		border-radius: 45px;
		box-sizing: border-box;
		margin-bottom: 21px;
	}

	.rankHeadBig {
		display: flex;
		position: relative;
		width: 73px;
		height: 73px;
		border: 3px solid #fed642;
		border-radius: 45px;
		box-sizing: border-box;
		margin-bottom: 21px;
	}
</style>