receipt-uniapp-240804/pages/index/index.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="navbar">
			受理凭证
		</view>
		<!-- #endif -->
		<view class="content" v-if="searchShow">
			<view class="t1">
				{{ info.title }}
			</view>
			<view class="t2">
				科目三 道路驾驶技能考试预约凭证
			</view>
			<view class="text">
				<text>流水号：</text> {{ info.waterId }}
			</view>
			<view class="text">
				<text>考生姓名：</text> {{ info.name }}
			</view>
			<view class="text">
				<text>身份证号码：</text> {{ info.idCard }}
			</view>
			<view class="text">
				<text>准考证号码：</text> {{ info.ticketNumber }}
			</view>
			<view class="text">
				<text>考试车型：</text> {{ info.vehicleModel }}
			</view>
			<view class="text">
				<text>考试日期：</text> {{ info.vehicleDate }}
			</view>
			<view class="text">
				<text>考试场地：</text> {{ info.vehicleAddress }}
			</view>
			<view class="text">
				<text>考试场次：</text> {{ info.vehicleSession }}
			</view>
			<view class="erweim">
				<uv-qrcode ref="qrcode" 
				canvas-id="qrcode" 
				:value="`${info.name}\n@${info.idCard}@${info.ticketNumber}@${info.vehicleModel}@${info.vehicleDate}@${info.vehicleAddress}@${info.vehicleSession}
				${tab}`" 
				size="400rpx" 
				:loading="loading"
				v-if="codeShow"
				:options="options"></uv-qrcode>
			</view>
			<view class="z">
				<view class="title">
					注意事项:
				</view>
				<view class="text">
					1、凭此证在有效期内携带有效身份证参加考试以备核查;
				</view>
				<view class="text">
					2、考试提前半小时到场签到，如未按时参加考试的，判定此次考试不及格;
				</view>
				<view class="text">
					3、考试期间禁止携带手机或通讯设备进入考场;
				</view>
				<view class="text">
					4、考试期间请遵守考试纪律并服从工作人员安排，如有发现违规行为的，将终止本科目考试，本科目考试成绩作废。
				</view>
			</view>
		</view>
		<!-- <view class="info" v-else>
			当前系统已关闭，请联系管理员！
		</view> -->
	</view>
</template>

<script>
	import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';
	import api from '@/plugins/api.js'
	import { mapState } from 'vuex'
	export default {
		components : {
			uvQrcode,
		},
		data() {
			return {
				options: {
					useDynamicSize: false,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#fff",
				},
				value : '',
				loading : false,
				// info : {},
				tab : '',
			}
		},
		computed : {
			...mapState(['info', 'codeShow', 'searchShow'])
		},
		onLoad() {
			// for (var i = 0; i < 100; i++) {
			// 	this.tab += i % 2 == 0 ? '\r' : '\n'
			// }
			
			// #ifdef H5
			this.getInfo()
			// #endif
			
			this.$store.commit('getConfList')
		},
		methods: {
			getInfo(){
				this.loading = true
				api('getInfo', {
					id : this.GetQueryString('id')
				}, res => {
					this.loading = false
					if(res.code == 200){
						this.$store.state.info = res.result
					}
				})
			},
			//获取url中参数的方法
			GetQueryString(name) {
				var url = window.location.href;
				try {
					var cs = url.split('?')[1]; //获取?之后的参数字符串
					var cs_arr = cs.split('&'); //参数字符串分割为数组
					for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
						if (cs_arr[i].split('=')[0] == name) {
							return cs_arr[i].split('=')[1];
						}
					}
					return "";
				} catch {
					return "";
				}
			},
			left(){
				window.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.navbar{
	background-color: #2e64ac;
	color: #fff;
	height: 44px;
	text-align: center;
	line-height: 44px;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
	.left{
		position: absolute;
		left: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
	}
}
.content{
	color: #000;
	line-height: 50rpx;
	padding: 15rpx;
	padding-bottom: 50rpx;
	.t1{
		text-align: center;
		padding: 10rpx 0;
		font-size: 34rpx;
	}
	.t2{
		text-align: center;
		padding-bottom: 30rpx;
		font-size: 36rpx;
	}
	.text{
		color: #555;
		padding: 0 20rpx;
		font-size: 30rpx;
		text{
			color: #000;
		}
	}
	.erweim{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
	}
	.z{
		.title{
			padding: 0 20rpx;
		}
		.text{
			font-size: 26rpx;
			color: #000;
			line-height: 54rpx;
		}
	}
}
.info{
	text-align: center;
	padding-top: 100rpx;
	color: #777;
	font-size: 28rpx;
}
</style>