Applet/pages/integral/index.vue

<template>
	<view class="box">
		<view class="top">
			<view class="left">
				<text class="name">荣誉积分</text>
				<text class="num">{{ integral.honorPoints || 0 }}</text>
			</view>
			<view class="right">
				<text class="name">消费积分</text>
				<text class="num">{{ integral.spendPoints || 0 }}</text>
			</view>
		</view>
		<view class="main">
			<view class="titleBox">
				<view class="ranking">排名</view>
				<view class="userName">姓名</view>
				<view class="userIntegral">积分</view>
			</view>
			<view class="titleBox item" v-for="(item, index) in list" :key="index">
				<view class="ranking">{{ item.num | userNum }}</view>
				<view class="userName">{{ item.name }}</view>
				<view class="userIntegral">{{ item.honorPoints }}分</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../api/integral';
	export default {
		data() {
			return {
				integral: {},
				list: []
			}
		},
		async mounted() {
			const integral = await request.getIntegral();
			this.integral = integral.data;
			const ranking = await request.getRanking();
			let num = 0;
			this.list = ranking.data.map(e => {
				num ++ 
				return { ...e, num }
			});
			
		},
		filters: {
			userNum(val) {
				if (val == 1) return '🥇';
				if (val == 2) return '🥈';
				if (val == 3) return '🥉';
				return val;
			}
		}
	}
</script>

<style>
.top {
	width: 100%;
	height: 15vh;
	background-color: #cb0714;
	display: flex;
}
.left, .right {
	width: 50%;
	color: #fff;
}
.left .name, .right .name {
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	display: block;
}
.left .num, .right .num {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
}
.titleBox {
	display: flex;
	border-bottom: 1px solid #bfbfbf;
	background-color: #dddddd;
}
.ranking, .userName, .userIntegral {
	width: 32%;
	text-align: center;
}
.userName {
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
}
.item {
	background-color: #fff;
	line-height: 2.5em;
}
</style>