weapp-v3/components/ranking-item.vue

<template>
	<view class="ranking-item" @tap="toself" :class="bg ? 'bg' : ''">
		<view class="left">
			<image v-if="index == 1" src="../static/icon/first.png" mode="scaleToFill"></image>
			<image v-else-if="index == 2" src="../static/icon/second.png" mode="scaleToFill"></image>
			<image v-else-if="index == 3" src="../static/icon/third.png" mode="scaleToFill"></image>
			<text class="ranking-num" v-else>{{ index }}</text>
		</view>
		<view class="center">
			<view class="avatar-box">
				<image :src="item.avatar" mode="scaleToFill" class="avatar"></image>
				<image v-if="item.score >= 200" class="hat" src="../static/new/hat.png" mode="scaleToFill"></image>
			</view>
			<text style="text-align:left;">{{ getName(item.name) }}</text>
		</view>
		<view class="right">
			<view class="score">
				{{ item.score }}
			</view>
			<view class="float" v-if="item.float > 0 && (type === 0 || type === 1)">
				<image src="../static/icon/up.png" mode="scaleToFill"></image>
				<text>{{ item.float }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			type: Number,
			index: Number,
			rank: Number,
			bg: Boolean
		},
		computed: {
			userServerInfo() {
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			getName(name, len) {
				if (name) {
					return name.length > 6 ? name.slice(0, 6) + '...' : name;
				}
				return '';
			},
			toself() { //点击排行榜列表时
				if (this.userServerInfo.type === 2) { //批发商可以查看个人榜和团队榜
					if (this.type === 0 || this.type === 2) {
						uni.navigateTo({
							url: `../self/self?from=ranking&id=${this.item.id}`
						})
					}
				} else if (this.userServerInfo.type === 3) { //客服只可以查看个人榜
					if (this.type === 0) {
						uni.navigateTo({
							url: `../self/self?from=ranking&id=${this.item.id}`
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-item {
		width: 100%;
		background-color: #FFFFFF;
		height: 120rpx;
		line-height: 120rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: flex-start;
		color: #2A2A2A;
		position: relative;
		font-size: 30rpx;
		margin: 0 auto;

		&.bg {
			background: rgba(250, 99, 66, .2);
		}

		.left {
			height: 100%;
			// width: 76rpx;
			width: 13%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 76rpx;
				height: 62rpx;
			}

			.ranking-num {
				font-size: 40rpx;
			}
		}

		.center {
			margin-left: 40rpx;
			height: 100%;
			// width: 380rpx;
			width: 57%;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;

			.avatar-box {
				width: 84rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					position: absolute;
					left: 19rpx;
					top: 35rpx;
				}

				.hat {
					width: 84rpx;
					height: 85rpx;
				}
			}

			// image {
			// 	width: 64rpx;
			// 	height: 64rpx;
			// 	border-radius: 50%;

			// 	&.hat {
			// 		position: absolute;
			// 		top: 50%;
			// 		margin-top: -44rpx;
			// 		left: -11rpx;
			// 		width: 80rpx;
			// 		height: 80rpx;
			// 	}
			// }

			text {
				flex: 1;
				margin-left: 20rpx;
				// overflow: hidden;
				// white-space: nowrap;
				// text-overflow: ellipsis;
				text-align: center;
			}
		}

		.right {
			width: 30%;
			// flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.score {
				// width: 130rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				text-align: center;
				color: #FA6342;
			}

			.float {
				flex: 1;
				display: flex;
				align-items: center;
				margin-left: 24rpx;

				image {
					width: 24rpx;
					height: 30rpx;
				}

				text {
					margin-left: 10rpx;
					color: #FA6342;
				}
			}
		}
	}
</style>