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">
					<text
						class="item-userName">{{ teamType >= 0 ? getTeamName(teamType, item.userName) : item.userName}}</text>
					<text class="item-totalTime">{{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
			},
			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 '--';
			},
			// 排名上升
			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: 53vh;
		/* margin-top: 20rpx; */
		/* margin-top: 1vh; */
		overflow: scroll;
	}

	.list-item {
		width: 100%;
		height: 70rpx;
		justify-content: flex-start;

		// transition: all 1s ease;
		// -webkit-transition: all 1s ease;
	}

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

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

	.item-rankNum {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		margin-top: 6rpx;
		padding-right: 0.5rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 50rpx;
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: top;
		background-size: contain;
	}

	.item-detail {
		width: 82%;
		height: 60rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-bottom: #ececea 5rpx 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-userName {
		font-size: 30rpx;
	}

	.item-totalTime {
		font-size: 26rpx;
		font-weight: 550;
	}
</style>