school-shunt-app/pages/apps/progress-query/progress-query.vue

<template>
	<view class="page-container" :class="'check-type-' + detailObj.applyStatus">
		<u-nav-bar title="进度查询"></u-nav-bar>
		<view class="u-bg" />
		<view class="main-content">
			<template v-if="detailObj.applyStatus==1">
				<image src="/static/shenhe-中.png" mode="" class="icon"></image>
				<view class="des">等待审核</view>
				<view class="tip">
					<view style="margin-bottom: 15rpx;">审核通过后录取结果将在本页面显示</view>
					<view>请耐心等待~</view>
				</view>
			</template>
			<template v-else-if="detailObj.applyStatus==2">
				<image src="/static/shenhe-成功.png" mode="" class="icon"></image>
				<view class="des">审核通过</view>
				<u-panel title="录取结果">
					<u-des-row label="班级" :value="detailObj.gradeName" border />
					<u-des-row label="学号" :value="detailObj.studentNO" border />
					<u-des-row label="姓名" :value="detailObj.studentName" border />
					<u-des-row v-if="queryType==1" label="是否通过" value="是" border />
					<u-des-row v-else-if="queryType==2" label="是否需要调剂" :value="detailObj.test" border />
					<u-des-row label="录取专业" :value="detailObj.majorName" />
				</u-panel>
			</template>
			<template v-else-if="detailObj.applyStatus==3">
				<image src="/static/shenhe-失败.png" mode="" class="icon"></image>
				<view class="des">审核不通过</view>
				<u-panel title="录取结果" theme="red">
					<u-des-row label="班级" :value="detailObj.gradeName" border />
					<u-des-row label="学号" :value="detailObj.studentNO" border />
					<u-des-row label="姓名" :value="detailObj.studentName" border />
					<u-des-row label="是否通过">
						<view style="color: #EF6960;" slot="value">否</view>
					</u-des-row>
				</u-panel>
			</template>

			<template v-else>
				<image src="/static/shenhe-中.png" mode="" class="icon"></image>
				<view class="des">未提交</view>
			</template>
			<!-- test -->
			<!-- <view style="text-align: left;">
				<view v-for="(item, index) in applyStatusList" :key="item.value" @click="detailObj.applyStatus = item.value">
					<radio :value="item.label" :checked="detailObj.applyStatus == item.value" />
					{{item.label}} {{item.value}}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//
				detailObj: {
					applyStatus: 0,
				},
				queryType: 1, // 1:专业分流 2:特别申请  默认专业分流

				applyStatusList: [{
						value: 1,
						label: '审核中'
					},
					{
						value: 2,
						label: '特别申请-审核成功通过'
					},
					// {
					// 	value: 2,
					// 	label: '专业分流-审核成功通过'
					// },
					{
						value: 3,
						label: '审核失败驳回'
					},
				],

			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.queryType = option.type==2?2:1
			console.log(444, this.queryType, option); //打印出上个页面传递的参数。
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				uni.showLoading({
					title: '加载中'
				});
				
			this.queryType===1	&& this.$ajax.post('/shunt/major-apply-result').then(res => {
					Object.assign(this.detailObj, res.data || {})
				}).catch(error => {}).finally(() => {
					uni.hideLoading();
				})
			this.queryType===2	&& this.$ajax.post('/shunt/special-apply-result').then(res => {
					Object.assign(this.detailObj, res.data || {})
				}).catch(error => {}).finally(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		.u-bg {
			height: 603rpx;
			background: url('/static/success_bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-origin: content-box;
		}

		.main-content {
			padding: 32rpx 32rpx 32rpx 32rpx;
			text-align: center;
		}

		.icon {
			width: 229rpx;
			height: 214rpx;
			margin-bottom: 26rpx;
		}

		.des {
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 50rpx;
		}

		.res-container {
			.content {
				background: #FFFFFF;

				box-shadow: 0px 4rpx 22rpx 0px rgba(232, 237, 251, 0.8);
				border-radius: 6rpx;
				padding: 32rpx;
			}

			.title {
				padding: 0 32rpx 0 28rpx;
				position: relative;
				text-align: left;
				font-size: 30rpx;

				font-weight: bold;
				color: #078EF7;
				margin-bottom: 24rpx;

				.icon {
					width: 7rpx;
					height: 30rpx;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}



			.list-item {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 28rpx;

				font-weight: 400;
				color: #333333;
				border-bottom: 1px solid #F5F7FA;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				.label {
					font-weight: bold;
				}

			}
		}

		.tip {
			font-size: 28rpx;
			font-weight: 400;
			color: #A3ABBF;
			margin-top: 160rpx;
		}
	}

	.check-type-1 {
		.u-bg {
			background: url('/static/bg_plan.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-origin: content-box;
		}
	}

	.check-type-3 {
		.u-bg {
			background: url('/static/bg_fail.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-origin: content-box;
		}
	}
</style>