mgrading/src/views/signup/SignUp.vue

<template>
    <div class="SignUp">
        <!-- <m-header /> -->
		<div v-show="show" class="container" :style="backgroundImg">
			<h2>{{ baseInfo.posterTitle }}</h2>
			<div class="section" v-if="baseInfo.transStatus === 'APPLIED' || baseInfo.transStatus === 'EXAM_ING' || baseInfo.transStatus === 'EXAM_END' || baseInfo.transStatus === 'RESULT_CONFIRM' || baseInfo.transStatus === 'CLOSE'" key="status">
				<div class="sectionStatus">
					<img src="../../assets/images/level/sign_over.png" alt="">
					<h3>您来迟啦，报名已结束～</h3>
				</div>
			</div>
			<div class="section" v-else-if="baseInfo.transStatus === 'NOT_START'" key="status">
				<div class="sectionStatus">
					<img src="../../assets/images/level/sign_not_start.png" alt="">
					<h3>您来早啦，报名还未开始～</h3>
					<p>报名时间：{{ baseInfo.enrollTime2 }}</p>
				</div>
			</div>
			<div class="section" v-else key="status">
				<div class="title" style="margin-top: 0">考试类型</div>
				<div class="content">{{ baseInfo.examMode === "OFFLINE" ? "线下" : "线上" }}</div>

				<div class="title">考试地址</div>
				<div class="content" v-if="baseInfo.examMode === 'OFFLINE'">
					<template v-if="baseInfo.examLocations">
						<p v-for="(item, index) in baseInfo.examLocations" :key="index">
							{{ item.address }}
						</p>
					</template>
				</div>
				<div class="content" v-else>线上网络教室</div>

				<div class="title">考试简介</div>
				<div class="content" v-html="baseInfo.posterProfile"></div>

				<div class="title">报名时间</div>
				<div class="content">{{ baseInfo.enrollTime }}</div>

				<div class="title">预计考试日期</div>
				<div class="content">{{ baseInfo.expectExamTime }}</div>
			</div>
			<van-button type="primary" :color="buttonColor" v-if="baseInfo.status" @click="onSubmit" round block>我要报名</van-button>
			<!-- <a class="protocol" @click="onProtocol" v-if="baseInfo.status">协议</a> -->
		</div>
    </div>
</template>
<script>
// import MHeader from '@/components/MHeader'
// import MButton from '@/components/MButton'
import dayjs from 'dayjs'
// import _ from 'lodash'
import setLoading from '@/utils/loading'
import { examinationBasicInfo } from './SignUpApi'
// ETTING("SETTING", "设置中"),
// NOT_START("NOT_START", "未开始"),
// APPLYING("APPLYING","报名中"),
// APPLIED("APPLIED", "报名结束"),
// EXAM_ING("EXAM_ING", "考试中"),
// EXAM_END("EXAM_END", "考试结束"),
// RESULT_CONFIRM("RESULT_CONFIRM", "确认考试结果"),
// CLOSE("CLOSE", "关闭")
export default {
    name: 'SignUp',
    data () {
		localStorage.removeItem('examId')
		localStorage.removeItem('organId')
		let query = this.$route.query
        return {
			examId: query.examId,
			organId: query.organId,
			show: false,
			baseInfo: {}, // 基本信息
			backgroundImg: null,
			buttonColor: null,
        }
    },
    mounted() {
		localStorage.removeItem("Authorization")
		this.__init()
    },
    methods: {
		async __init() {
			setLoading(true)
			try {
				localStorage.setItem('examId', this.examId)
				localStorage.setItem('organId', this.organId)
				let res = await examinationBasicInfo({ examId: this.examId })
				if(res.data.code == 200) {
					let tempData = res.data.data
					let tempStatus = false
					if(tempData.status == "APPLYING") {
						tempStatus = true
					}
					localStorage.setItem("examStartTime", dayjs(tempData.expectExamStartTime).format("YYYY-MM-DD"))
					this.baseInfo = {
						posterTitle: tempData.posterTitle,
						examMode: tempData.examMode,
						enrollTime: dayjs(tempData.enrollStartTime).format("YYYY-MM-DD") + "～" + dayjs(tempData.enrollEndTime).format("YYYY-MM-DD"),
						enrollTime2: dayjs(tempData.enrollStartTime).format("YYYY-MM-DD"),
						examLocationIdList: tempData.examLocationIdList,
						expectExamTime: dayjs(tempData.expectExamStartTime).format("YYYY-MM-DD") + "～" + dayjs(tempData.expectExamEndTime).format("YYYY-MM-DD"),
						status: tempStatus,
						examLocations: tempData.examLocations, // 地址
						posterProfile: tempData.posterProfile ? tempData.posterProfile.replace(/\n/ig,'<br/>') : null,
						transStatus: tempData.status
					}
					let poster = tempData.posterBackgroundImg ? JSON.parse(tempData.posterBackgroundImg) : ""
					if(poster) {
						// 设置背景图
						this.backgroundImg = {
							backgroundImage: `url(${poster.url}) !important`
						}
						this.buttonColor = poster.color
					}
				}
			} catch(err) {
				//
			}
			this.show = true
			setLoading(false)
		},
		onSubmit() {
			// console.log(show)
			this.$router.push({
				path: '/signUpAccount',
				query: {
					examId: this.examId,
					organId: this.organId
				}
			})
		},
		onProtocol() {
			this.$router.push('/smallProtocol')
		}
    }
}
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable");
.SignUp {
	max-width: 700px;
	position: relative;
    overflow-y: auto;
    overflow-x: hidden;
	background-color: #fff;
	margin: 0 auto;
}
.container {
	min-height: 100vh;
	background: url('../../assets/images/level/signUpBg.png') no-repeat center top #F3F4F8;
	background-size: contain;
	overflow: hidden;
	h2 {
		position: absolute;
		padding-top: .4rem;
		color: #ffffff;
		font-size: .26rem;
		font-weight: bold;
		width: 2.1rem;
		text-align: left;
		margin-left: .16rem;
	}
	.section {
		background: #ffffff;
		margin: 1.87rem .16rem .15rem;
		border-radius: .1rem;
		padding: .22rem;
		.title {
			margin-top: .28rem;
			font-size: .18rem;
			color: #1A1A1A;
			font-weight: 500;
		}
		.content {
			padding-top: .05rem;
			color: #808080;
			font-size: .16rem;
			word-break: break-all;
		}
	}

	.sectionStatus {
		text-align: center;
		padding: 1rem 0 .5rem;
		img {
			width: 1.2rem;
		}
		h3 {
			padding-top: .3rem;
			font-size: .18rem;
			color: #1A1A1A;
		}
		p {
			padding-top: .05rem;
			font-size: .14rem;
			color: #999999;
		}
	}

	.protocol {
		font-size: .14rem;
		margin-bottom: .3rem;
		text-align: center;
		display: block;
		color: #0091FF;
	}
	.van-button--primary {
		margin: .36rem 0 .18rem;
		background-color: @--main-color;
		border: 1px solid @--main-color;
		color: #FFFFFF;
		font-size: .18rem;
		height: .5rem;
		line-height: .52rem;
		width: 90%;
		margin-left: 5%;
	}
}
</style>