mobile_h5/actMgt/components/my-userlist/my-userlist.vue

<template>
	<uni-list ref="list" class="list" :border="false">
		<view class="list-header uni-row">
			<text class="item-rankNum border-right">序号</text>
			<text class="item-box border-right" style="text-align: center;">玩家</text>
			<text class="item-phone">电话</text>
		</view>
		<uni-list-item v-for="(item,index) in userRs" :key="index" :border="false" class="list-item uni-row"
			:class="getListItemClass(item,index)">
			<template v-slot:body>
				<text class="item-rankNum">{{index+1}}</text>
				<view class="uni-row item-box">
					<text class="item-userName">{{item.name}}</text>
					<image class="item-inGame" v-if="item.isInGame == 1" mode="aspectFit"
						src="/static/common/ingame.gif"></image>
					<image class="item-finish" v-else-if="item.isFinishGame == 1" mode="aspectFit"
						src="/static/common/finishgame.png"></image>
				</view>
				<a class="item-phone" :href="'tel:' + item.phone" style='text-decoration: none;'>{{item.phone}}</a>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import tools from '/utils/tools.js';

	export default {
		name: "my-userlist",
		props: {
			userRs: {},
		},
		data() {
			return {};
		},
		mounted() {
			// console.log("userRs", this.userRs);
		},
		methods: {
			getListItemClass(item, index) {
				// console.log("item", item);
				if (item == undefined) {
					return "";
				}

				let classStr = "";
				if (item.isSelf) {
					classStr += " list-item-isself"
				}
				return classStr;
			},
			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 '--';
			},
		}
	}
</script>

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

	.list-header {
		width: 100%;
		height: 28px;
		justify-content: space-between;
		font-size: 14px;
		line-height: 28px;
		color: #ffffff;
		background: #2e85ec;
		border-radius: 18px;
	}
	
	.border-right {
		border-right: #ffffff solid 1px;
	}

	.list-item {
		width: 100%;
		height: 35px;
		border-bottom: #ececea 1px solid;
		justify-content: space-between;
		font-size: 14px;
	}

	::v-deep .uni-list-item__container {
		padding: 0 0px;
	}

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

	.item-rankNum {
		width: 50px;
		margin-right: 5px;
		line-height: 35px;
		text-align: center;
	}

	.item-box {
		width: 60%;
		flex-grow: 1;
	}

	.item-userName {
		line-height: 35px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-inGame {
		width: 18px;
		height: 25px;
		margin-left: 3px;
	}

	.item-finish {
		width: 18px;
		height: 25px;
		margin-left: 3px;
	}

	.item-phone {
		width: 110px;
		line-height: 35px;
		text-align: center;
		// font-weight: 550;
		white-space: nowrap;
	}

	.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>