zc_saas_h5/pages2/appointment/index.vue

<template>
	<view class="safeArea">
		<view class="appointment">
			<view class="appointmentItem appointmentHead">
				<view class="imgBox"><image :src="$method.splitImgHost(listData.splitImgHost)"></image></view>
				<u-line color="#EEEEEE" />
				<view class="title">{{ listData.applyName }}</view>
			</view>
			<view class="appointmentItem appointmentTime">
				<view class="item">
					<view class="labelName">报名时间：</view>
					<view class="valName">{{ $method.timestampToTime(listData.applyStartTime) }} ~ {{ $method.timestampToTime(listData.applyEndTime) }}</view>
				</view>
				<u-line color="#EEEEEE" />
				<view class="item">
					<view class="labelName">温馨提示：</view>
					<view class="valName">{{ listData.applyIntroduce }}</view>
				</view>
			</view>
			<view class="appointmentItem appointmentMajor">
				<view class="top">
					<view class="labelName">报考专业：</view>
					<view class="valName">{{ listData.major }}</view>
				</view>
			</view>
			<view class="appointmentItem appointmentInfo">
				<view class="item">
					<text class="labelName">
						姓
						<text style="opacity: 0;">姓</text>
						名：
					</text>
					{{ listData.realname }}
				</view>
				<u-line color="#EEEEEE" />
				<view class="item">
					<text class="labelName">身份证：</text>
					{{ listData.idCard }}
				</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.label" :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: '非补考学员', label: '1' }, { name: '补考学员', label: '2' }],
			goodsId: 0,
			gradeId: 0,
			applyStatus:'',
			listData: {} //页面数据
		};
	},
	onLoad(option) {
		this.goodsId = Number(option.goodsId);
		this.gradeId = Number(option.gradeId);
		this.getInfo();
	},
	methods: {
		getInfo() {
			var data = {
				goodsId: this.goodsId,
				gradeId: this.gradeId
			};
			this.$api.getApplysubscribe(data).then(res => {
				console.log(res.data, 123);
				this.listData = res.data.data;
			});
		},
		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>