zc_saas_h5/pages2/appointment/index.vue

<template>
	<view class="safeArea">
		<view class="appointment">
			<view class="appointmentItem appointmentHead">
				<view class="imgBox">
					<image src="/static/login_bg.jpg"></image>
				</view>
				<u-line color="#EEEEEE" />
				<view class="title">这是一个考试标题过长换行过长换行过长换行过长换行过长换行</view>
			</view>
			<view class="appointmentItem appointmentTime">
				<view class="item">
					<view class="labelName">报名时间：</view>
					<view class="valName">2021/12/1 ~ 2021/12/31</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="item">
					<view class="labelName">温馨提示：</view>
					<view class="valName">预约开放期登录CCMS，进入主页，显示预核准的已报科目考试，点击预约考试科目，按流程选择考试考点、具体考试时间，提交完成。</view>
				</view>
			</view>
			<view class="appointmentItem appointmentMajor">
				<view class="top">
					<view class="labelName">报考专业：</view>
					<view class="valName">XXX专业名称XXX</view>
				</view>
			</view>
			<view class="appointmentItem appointmentInfo">
				<view class="item"><text class="labelName">姓<text style="opacity: 0;">姓</text>名：</text>倪虹洁</view>
				<u-line color="#EEEEEE" />
				<view class="item"><text class="labelName">身份证：</text>44046354687236685698</view>
			</view>
			<view class="appointmentItem appointmentType">
				<view class="item">
					<view class="labelName">学员类型：</view>
					<u-radio-group placement="column">
					   <u-radio
					     :customStyle="{marginBottom: '8px'}"
					     v-for="(item, index) in radiolist"
					     :key="index"
					     :label="item.name"
					     :name="item.name"
					     @change="radioChange"
					   >{{item.name}}
					   </u-radio>
					 </u-radio-group>
				</view>
			</view>
			<view class="btn" @click="next">下一步</view>
		</view>
		<!-- 弹框-->
		<u-popup v-model="showTip" mode="center" class="tipModel">
			<view class="tipBox">
				<view class="title">温馨提示</view>
				<view class="main">
					<view class="item">您所报考的【设备安装施工员】专业，</view>
					<view class="item">考试次数已经用完。</view>
					<view class="item">需要预约考试的补考学员，</view>
					<view class="item">请先购买补考机会。</view>
				</view>
				<view class="btn">
					<view class="btn1 cancel" @click="showTip=false">知道了</view>
					<view class="btn1 submit" @click="submit">马上缴费</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			showTip: false,
			radiolist: [{name: '非补考学员'},{name: '补考学员'}]
		};
	},
	onLoad(option) {},
	methods: {
		radioChange(e){
			console.log(e)
		},
		next(){
			this.showTip = true
		},
		submit(){
			this.$navTo.togo('/pages2/appointment/order');
		}
	},

};
</script>
<style >
page{
	background-color: #EAEEF1;
}
.appointmentType .u-radio__label{
	margin-left:16rpx!important;
	margin-right: 116rpx!important;;
}
.tipModel .u-mode-center-box{
	background-color: transparent!important;
}
</style>
<style scoped lang="scss">
.appointment{
	padding: 16rpx;
	.appointmentItem{
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		.item{
			padding: 24rpx 0;
		}
		.labelName{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 16rpx;
			line-height: 1;
		}
		.valName{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
	.appointmentHead{
		padding-top: 16rpx;
		.imgBox{
			width: 590rpx;
			height: 232rpx;
			margin: 0 auto;
			background: #ccc;
			overflow: hidden;
		}
		.title{
			padding:24rpx 28rpx 31rpx 31rpx;
			font-size: 30rpx;
			font-weight: bold;
			font-family: PingFang SC;
			color: #333333;
		}
	}
	.appointmentTime{
		padding: 10rpx 30rpx 0;
	}
	.appointmentMajor{
		padding: 34rpx 30rpx 24rpx;
	}
	.appointmentInfo{
		padding: 8rpx 30rpx;
	}
	.appointmentType{
		padding: 8rpx 30rpx 4rpx;
		.u-radio__label{
			margin-left:16rpx;
			margin-right: 116rpx;
		}
	}
	.btn{
		width: 526rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #007AFF;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 40rpx auto;
		text-align: center;
	}
}
.tipBox{
	width: 640rpx;
	padding: 30rpx 36rpx 40rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	font-family: PingFang SC;
	.title{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}
	.main{
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}
	.btn{
		display: flex;
		justify-content: center;
		.btn1{
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F5F5F5;
			border-radius: 40px;
			font-size: 30rpx;
			font-weight: bold;
			color: #007AFF;
			margin: 0 20rpx;
			&.submit{
				background: #007AFF;
				color:#fff;
			}
		}
	}
}
</style>