mobile_h5/card/components/my-ranklist/my-ranklist.vue

<template>
	<uni-list ref="list" class="list" :border="false" @click="test">
		<uni-list-item v-for="(item,index) in rankRs" :key="index" :border="false" class="list-item uni-row"
			:class="getListItemClass(item,index)">
			<template v-slot:body>
				<text class="item-rankNum"
					:class="getMedalClass(item.rankNum)">{{item.rankNum > 0 ? item.rankNum : '--'}}</text>
				<view class="item-detail uni-row">
					<view class="uni-row item-box">
						<view v-if="item.isDispAdditionalName == 1 && item.additionalName.length > 0" class="uni-row item-userName">
							<text class="item-userName2">{{item.isSelf ? "我" : item.userName}}</text>
							<text class="item-additionalName">（{{item.additionalName}}）</text>
						</view>
						<!-- <text v-else class="item-userName">{{ teamType >= 0 ? rankfunc.getTeamName(teamType, item.userName) : item.userName}}</text> -->
						<view v-else>
							<text v-if="teamType >= 0" class="item-userName">{{rankfunc.getTeamName(teamType, item.userName)}}</text>
							<text v-else class="item-userName">{{item.isSelf ? "我" : item.userName}}</text>
						</view>
						<!-- isInGame 是否正在比赛中 0 不在 1 在 -->
						<image class="item-inGame" v-if="item.isInGame == 1" mode="aspectFit" src="/static/common/ingame.gif"></image>
						<!-- isTodayFinishGame 当日完赛 0 没有比赛 1 非正常完赛 2 正常完赛 -->
						<!-- <image class="item-todayFinish" v-else-if="item.isTodayFinishGame == 1" mode="aspectFit" src="/static/common/unfinishgame.png"></image> -->
						<image class="item-todayFinish" v-else-if="item.isTodayFinishGame == 2" mode="aspectFit" src="/static/common/finishgame.png"></image>
						<text v-if="item.isDispInGameUserNum == 1 && item.inGameUserNum > 0" class="item-inGameNum">x {{item.inGameUserNum}}</text>
					</view>
					<text class="item-totalTime" v-if="rankType == 'totalDistance'">{{rankfunc.fmtDistanct(item.inRankNum)}} km</text>
					<text class="item-totalTime" v-else-if="rankType == 'fastPace'">{{rankfunc.fmtPace(item.inRankNum)}}</text>
					<text class="item-totalTime" v-else-if="rankType == 'rightAnswerPer'">{{item.inRankNum}}%</text>
					<text class="item-totalTime" v-else-if="rankType == 'totalCp' || rankType == 'totalSysPoint'">{{item.inRankNum}} 个</text>
					<text class="item-totalTime" v-else-if="rankType == 'totalScore'">{{item.inRankNum}}</text>
					<text class="item-totalTime" v-else-if="rankType == 'speed'">{{rankfunc.fmtTime(item.inRankNum)}}</text>
					<text class="item-totalTime" v-else-if="rankType == 'grad'">{{item.inRankNum}}</text>
					<text class="item-totalTime" v-else-if="rankType == 'mapNum'">{{item.inRankNum}}</text>
					<text class="item-totalTime" v-else>{{fmtTime(item.totalTime)}}</text>
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import rankfunc from '/common/rankfunc';

	export default {
		name: "my-ranklist",
		props: {
			rankRs: {},
			teamType: {
				type: Number,
				default: -1
			},
			rankType: {	// totalScore:总积分 totalDistance:总里程 totalCp:打点数 totalSysPoint:百味豆 fastPace:配速 rightAnswerPer:答题正确率 speed:速度 grad:积分 mapNum:地图解锁数
				type: String,
				default: ""
			},
			styleType: {	// 排名列表样式 0:默认 static\default  1: static\ranklist\1
				type: Number,
				default: 0
			},
			myOldRankNum: { // 我的旧排名
				type: Number,
				default: null
			},
			myNewRankNum: { // 我的新排名
				type: Number,
				default: null
			}
		},
		data() {
			return {
				rankfunc: rankfunc,
				curMoveIndex: null, // 当前正在移动的列表Index (等于 rankNum-1) 用于排名变动的动画效果
				refList: null,
				refListItems: null,
				// item: {}
			};
		},
		mounted() {
			this.refList = this.$refs.list;
			this.refListItems = this.refList.$el.children;
			// console.log("refListItems", this.refListItems);
			// console.log("rankRs", this.rankType);
		},
		methods: {
			getListItemClass(item, index) {
				// console.log("item", item);
				if (item == undefined) {
					return "";
				}

				let classStr = "";
				// if (item.rankNum >= 0 && this.curMoveIndex == item.rankNum-1) {
				if (this.curMoveIndex == index) {
					classStr += " list-item-move"
					// console.log("list-item-move curMoveIndex", this.curMoveIndex);
				}
				if (item.isSelf) {
					classStr += " list-item-isself"
				}
				return classStr;
			},
			getMedalClass(rankNum) {
				if (rankNum == 0)
					return 'rankNum-style' + this.styleType + '-other';
					// return 'medal-style' + this.styleType + '-other';
				if (rankNum <= 3)
					return 'medal-style' + this.styleType + '-' + rankNum;
				else if (rankNum <= 10)
					return 'medal-style' + this.styleType + '-other';
				else
					return 'rankNum-style' + this.styleType + '-other';
			},
			// 排名上升
			moveRankUp(i, animation = false) {
				// console.log("moveRankUp:", i, animation, this.rankRs[i]);
				const temp = this.rankRs[i];
				this.rankRs[i] = this.rankRs[i-1];
				this.rankRs[i-1] = temp;
				this.rankRs[i-1].rankNum--;
				if (animation) {
					this.curMoveIndex = i-1;
					this.refListItems[i-1].scrollIntoView(true);
				}
				// console.log("rankRs:", i, rankRs);
			},
			// 排名下降
			moveRankDown(i, animation = false) {
				// console.log("moveRankDown:", i, animation, this.rankRs[i]);
				const temp = this.rankRs[i];
				this.rankRs[i] = this.rankRs[i+1];
				this.rankRs[i+1] = temp;
				this.rankRs[i+1].rankNum++;

				if (animation) {
					this.curMoveIndex = i+1;
					this.refListItems[i+1].scrollIntoView(false);
				}
				// console.log("rankRs:", i, rankRs);
			},
			// 更新排名
			moveRank(myOldRankNum, myNewRankNum, animation = false) {
				if (!(myOldRankNum > 0)) {
					console.log("[moveRank] 我的旧排名为空，终止执行", myOldRankNum);
					return;
				}
				if (!(myNewRankNum > 0)) {
					console.log("[moveRank] 我的新排名为空，终止执行", myNewRankNum);
					return;
				}
				
				const difNum = myOldRankNum - myNewRankNum;
				if (difNum > 0) { // 排名上升
					// console.log("排名上升");
					let t = 1;
					for (var i = myOldRankNum - 1; i > myNewRankNum - 1; i--) {
						if (animation) {
							setTimeout(this.moveRankUp, 200 * t, i, animation);
						} else {
							this.moveRankUp(i, animation);
						}
						t++;
					}
				} else if (difNum < 0) { // 排名下降
					// console.log("排名下降");
					let t = 1;
					for (var i = myOldRankNum - 1; i < myNewRankNum - 1; i++) {
						if (animation) {
							setTimeout(this.moveRankDown, 200 * t, i, animation);
						} else {
							this.moveRankDown(i, animation);
						}
						t++;
					}
				}
			},
			test() {
				return;
				
				// const oldRankNum = 1;
				// const newRankNum = 20;
				
				const oldRankNum = 20;
				const newRankNum = 10;
				
				// 先将我的排名恢复到旧排名
				this.moveRank(newRankNum, oldRankNum);
				
				// 再将我的旧排名已动画的形式更新到新排名
				setTimeout(this.moveRank, 3000, oldRankNum, newRankNum, true);
				// this.moveRank(oldRankNum, newRankNum, true);
			}
			// onItemClick(item) {
			// 	this.data.item = item
			// 	this.$emit('my-combo-list-click', this.data);
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 90%;
		height: 43vh;
		flex-grow: 1;
		overflow: scroll;
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.list-item {
		width: 100%;
		height: 35px;
		justify-content: flex-start;

		// transition: all 1s ease;
		// -webkit-transition: all 1s ease;
	}
	
	::v-deep .uni-list-item__container {
		padding: 0 5px;
	}

	.list-item-move {
		background-color: #bd640a !important;
	}

	.list-item-isself {
		background-color: #ececea !important;
		border-radius: 6px;
	}

	.item-rankNum {
		width: 40px;
		height: 25px;
		text-align: center;
		margin-top: 3px;
		padding-right: 0.25px;
		margin-right: 5px;
		font-size: 13px;
		font-weight: bold;
		line-height: 25px;
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: top;
		background-size: contain;
	}

	.item-detail {
		width: 82%;
		height: 30px;
		padding-left: 5px;
		padding-right: 5px;
		border-bottom: #ececea 2px solid;
		justify-content: space-between;
	}

	.medal-style0-1 {
		color: #bd640a;
		background-image: url("/static/default/medal_gold.png");
	}

	.medal-style0-2 {
		color: #68758c;
		background-image: url("/static/default/medal_silver.png");
	}

	.medal-style0-3 {
		color: #9b3b11;
		background-image: url("/static/default/medal_copper.png");
	}

	.medal-style0-other {
		color: #9a140a;
		background-image: url("/static/default/medal_other.png");
	}

	.rankNum-style0-other {
		color: #8c8c8c;
	}
	
	.medal-style1-1 {
		font-size: 0px;
		background-image: url("/static/ranklist/1/medal_gold.png");
	}

	.medal-style1-2 {
		font-size: 0px;
		background-image: url("/static/ranklist/1/medal_silver.png");
	}

	.medal-style1-3 {
		font-size: 0px;
		background-image: url("/static/ranklist/1/medal_copper.png");
	}

	.medal-style1-other {
		font-size: 16px;
		color: #8c8c8c;
	}
	
	.rankNum-style1-other {
		font-size: 16px;
		color: #8c8c8c;
	}

	.item-box {
		width: 80%;
		// background-color: #55aa00;
	}
	
	.item-userName {
		// max-width: 176px;
		// max-width: 66%;
		max-width: 88%;
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-userName2 {
		// max-width: 88%;
		font-size: 14px;
		white-space: nowrap;
	}

	.item-additionalName {
		// max-width: 100px;
		font-size: 12px;
		color: #9f9f9f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-inGame {
		width: 18px;
		height: 25px;
		margin-left: 3px;
	}
	
	.item-todayFinish {
		width: 18px;
		height: 25px;
		margin-left: 3px;
	}
	
	.item-inGameNum {
		margin-top: 8px;
		font-size: 10px;
		font-weight: 400;
		color: #808080;
	}

	.item-totalTime {
		font-size: 13px;
		font-weight: 550;
		white-space: nowrap;
	}
	
	.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>