school-shunt-app/pages/apps/shunt-places/shunt-places.vue

<template>
	<view class="page-container">
		<u-nav-bar title="专业分流名额" />
		<view class="u-bg" />
		<view class="main-content">
			<view class="statistics-container u-flex">
				<view v-for="(item,index) in statisticsList" :key="index" class="statistics-item u-flex-column">
					<view class="icon-container">
						<image :src="item.icon" mode="widthFix" class="icon"></image>
					</view>
					<view class="value">{{item.value}}</view>
					<view class="label">{{item.label}}</view>
				</view>
			</view>
			<view class="rank-container">
				<view v-for="(item,index) in rankList" :key="index" class="rank-item u-flex">
					<view class="rank">{{index+1}}</view>
					<view class="label">{{item.majorName}}</view>
					<view class="value">{{item.sinUpStudentsNum}}/{{item.totalStudentsNum}}</view>
				</view>
			</view>
			<view class="tip">
				注：各专业报名人数为第一志愿已报人数，正式报名阶段每小时 更新一次~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statisticsList: [{
						prop: 'totalStudents',
						value: 0,
						label: '学生总人数',
						icon: '/static/num_icon.png'
					},
					{
						prop: 'sinUpStudents',
						value: 0,
						label: '已报人数',
						icon: '/static/choose_icon.png'
					},
					{
						prop: 'unSinUpStudents',
						value: 0,
						label: '未报名人数',
						icon: '/static/no_choose_icon.png'
					},

				],
				rankList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax.post('/shunt/quota').then(res => {
					const data = res.data || {}
					this.statisticsList.forEach(element => {
						element.value = data[element.prop]
					})
					this.rankList = data.majorShuntCountVOList || []
				}).catch(error => {
					this.statisticsList.forEach(element => {
						element.value = 0
					})
					this.rankList = []
				}).finally(() => {
					console.log(this.statisticsList)
					uni.hideLoading();
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	$bg-height: 317rpx;
	.page-container {
		.u-bg {
			height: $bg-height;
			background: $uni-color-primary;
		}

		.main-content {
			padding: 0 32rpx;
		}

		.statistics-container {
			margin: $bg-height - $u-nav-bar-height 0 0 0;
			transform: translateY(-50%);

			.statistics-item {
				height: 170rpx;
				flex: 1;
				background: #FFFFFF;
				box-shadow: 0px 4px 22px 0px rgba(232, 237, 251, 0.8);
				border-radius: 16px;
				padding: 16rpx 20rpx;

				&:nth-child(2) {
					margin: 0 24rpx;
				}

				.value {
					font-size: 43rpx;

					font-weight: bold;
					color: #333333;
					width: 100%;
				}

				.label {
					font-size: 24rpx;

					font-weight: 400;
					color: #333333;
					width: 100%;
				}

				.icon {
					width: 44rpx;
					height: 44rpx;
				}

				.icon-container {
					width: 100%;
					text-align: right;
				}
			}

		}

		.rank-container {
			.rank-item {
				margin-bottom: 60rpx;

				.rank {
					font-size: 41rpx;

					font-weight: bold;
					color: #A3ABBF;
					margin-right: 30rpx;


				}

				&:nth-child(1) {
					.rank {
						color: #FFB300;
					}
				}

				&:nth-child(2) {
					.rank {
						color: #ED6E4E;
					}
				}

				&:nth-child(3) {
					.rank {
						color: #078EF7;
					}
				}

				.label {

					font-size: 32rpx;

					font-weight: bold;
					color: #333333;
					flex: 1;
				}

				.value {
					font-size: 24rpx;

					font-weight: 400;
					color: #333333;

				}
			}
		}

		.tip {
			font-size: 24rpx;
			font-weight: 400;
			color: #FFB300;
			line-height: 1.5;

		}
	}
</style>