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.userName}}</text>
							<text class="item-additionalName">（{{item.additionalName}}）</text>
						</view>
						<text v-else class="item-userName">{{ teamType >= 0 ? getTeamName(teamType, item.userName) : item.userName}}</text>
						<image class="item-inGame" v-if="item.isInGame == 1" mode="aspectFit" src="/static/common/ingame.gif"></image>
					</view>
					<text class="item-totalTime" v-if="rankType == 'totalDistance'">{{fmtDistanct(item.inRankNum)}} km</text>
					<text class="item-totalTime" v-else-if="rankType == 'fastPace'">{{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'">{{fmtTime(item.inRankNum)}}</text>
					<text class="item-totalTime" v-else>{{fmtTime(item.totalTime)}}</text>
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import tools from '/common/tools';
	import {
		teamName
	} from '/common/define';

	export default {
		name: "my-ranklist",
		props: {
			rankRs: {},
			teamType: {
				type: Number,
				default: -1
			},
			rankType: {	// totalDistance:总距离 totalCp:打点数 totalSysPoint:百味豆 fastPace:配速 rightAnswerPer:答题正确率 speed:速度
				type: String,
				default: ""
			},
			myOldRankNum: { // 我的旧排名
				type: Number,
				default: null
			},
			myNewRankNum: { // 我的新排名
				type: Number,
				default: null
			}
		},
		data() {
			return {
				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);
		},
		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;
			},
			getTeamName(teamType, teamIndex) {
				return teamName[teamType][teamIndex];
			},
			getMedalClass(rankNum) {
				if (rankNum == 0)
					return 'item-rankNum-other';
				if (rankNum <= 3)
					return 'item-rankNum-medal-' + rankNum;
				else if (rankNum <= 10)
					return 'item-rankNum-medal-other';
				else
					return 'item-rankNum-other';
			},
			fmtTime(time) {
				if (time > 0)
					return tools.convertSecondsToHMS(time, 1);
				else
					return '--';
			},
			// 格式化 距离
			fmtDistanct(val) {
				return Math.round(val * 100 / 1000) / 100;
				// if (val < 1000)
				// 	return Math.round(val * 10 / 1000) / 10;
				// else
				// 	return Math.round(val / 1000);
			},
			// 格式化 配速
			fmtPace(val) {
				if (val > 0)
					return tools.convertSecondsToHMS(val, 2);
				else
					return '--';
			},
			// 排名上升
			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;
	}

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

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

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

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

	.item-rankNum-other {
		color: #9a140a;
	}

	.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: 30px;
		margin-left: 3px;
	}

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