weapp-v1/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">
			<image :src="item.avatar" mode="scaleToFill"></image>
			<image v-if="item.score >= 200" class="hat" src="../static/new/hat.png" mode="scaleToFill"></image>
			<text style="text-align:left;">{{ 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: {
			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: 70px;
		line-height: 98rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		color: #2A2A2A;
		position: relative;
		font-size: 30rpx;
		margin: 0 auto;
		&.bg {
			background: rgba(250, 99, 66, .2);
		}

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

			image {
				width: 100%;
				height: 62rpx;
			}

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

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

			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: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: center;
			}
		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;

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

			.float {
				flex: 1;
				display: flex;
				align-items: center;

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

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