xunjian_app/pages/writeoff/register/register.vue

<template>
	<view class="m-w partol ">
		<!-- logo -->
		<view class="logo-back"></view>
		<!-- 机房制度弹窗 -->
		<u-popup :mask-close-able="false" mode="top" v-model="explain_show" width="650rpx">
			<scroll-view scroll-y="true" style="height: 900rpx;">
				<view class="content u-p-l-24 u-p-r-24 u-p-t-22">
					<view v-html="content">
						{{content}}
					</view>
					<view class="confrim-btn1">
						<u-button type="primary" @click="explain_show = false;">已阅读并同意执行
						</u-button>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 表单 -->
		<view class=" m-w title-font u-p-l-30 u-p-r-30">
			<view class=" m-w u-flex u-m-t-30 u-col-center">
				<u-image :src="logo" width="70" height="70"></u-image>
				<view class="u-m-l-14">
					<view class="u-font-32">赣西云出入系统</view>
					<view class="u-font-28 u-m-t-14" style="color: rgba(255, 255, 255, .4);">带*号为必填项</view>
				</view>
			</view>
			<scroll-view class="cell-item u-p-l-20 u-p-r-20">
				<u-form ref="uForm" label-position="top" :model="form">
					<c-form-item :required="true" label="姓名" prop="username">
						<u-input placeholder="请输入名字" :border="true" v-model="form.username" />
					</c-form-item>
					<c-form-item :required="true" label="手机号" prop="userPhone">
						<u-input type="number" placeholder="请输入手机号" :border="true" v-model="form.userPhone" />
					</c-form-item>
					<c-form-item :required="true" label="访客时长(h)" prop="duration">
						<u-input type="number" placeholder="请输入访客时长" :border="true" v-model="form.duration" />
					</c-form-item>
					<c-form-item :required="true" label="访客公司" prop="company">
						<u-input placeholder="请输入访客公司" :border="true" v-model="form.company" />
					</c-form-item>
					<c-form-item :required="true" label="事由" prop="reason">
						<u-input placeholder="请选择事由" :border="true" v-model="form.reason" />
					</c-form-item>
					<c-form-item label="是否高风险" prop="highRiskname">
						<u-input placeholder="请选择" @click="highRisktshow = true" type="select" :border="true"
							v-model="form.highRiskname" />
						<u-select :default-value="[1]" v-model="highRisktshow" :list="actionSheetList"
							@confirm="highRisonok"></u-select>
					</c-form-item>
					<c-form-item label="上传行程码" prop="contactname">
						<view>
							<view class="u-p-l-20 u-p-r-10 u-m-t-20 u-m-b-20 u-flex ">
								<c-img ref="img1" @changeImg="changeImg1($event)"></c-img>
							</view>
						</view>
					</c-form-item>
					<c-form-item label="上传健康码" prop="confirmname">
						<view>
							<view class="u-p-l-20 u-p-r-10 u-m-t-20 u-m-b-20 u-flex ">
								<c-img ref="img2" @changeImg="changeImg2($event)"></c-img>
							</view>
						</view>
					</c-form-item>
					<c-form-item label="上传相关审核资料" prop="uploadimg">
						<view>
							<view class="u-p-l-20 u-p-r-10 u-m-t-20 u-m-b-20  u-flex  ">
								<c-img ref="img3" @changeImg="changeImg3($event)"></c-img>
							</view>
						</view>
					</c-form-item>
				</u-form>
				<view class="procol u-flex u-row-left u-m-t-20 u-m-b-20">
					<u-radio-group v-model="value">
						<u-radio label-size="28rpx" shape="square" v-for="(item, index) in fa_list" :key="index"
							:name="item.name" :disabled="item.disabled">
							已阅读并同意{{item.name}}
						</u-radio>
					</u-radio-group>
					<view class="detail_procol" @click="show = true">查看</view>
				</view>
				<view class="sumit u-m-b-32" @click="resbtn()">提交申请</view>
			</scroll-view>
		</view>
		<!-- 隐私协议弹窗 -->
		<u-popup border-radius="15" mode="center" v-model="show" width="650rpx">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 900rpx;">
					<view>
						<h2 style="text-align: center; margin-top: 20rpx; margin-bottom: 20rpx; font-weight: 700;">
							《运维智慧掌中宝小程序隐私保护指引》</h2>
						<p>本指引是运维智慧掌中宝小程序开发者 "江西省邮电建设工程有限公司"（以下简称“开发者”）为处理你的个人信息而制定。</p>
						<p>开发者处理的信息</p>
						<p>根据法律规定，开发者仅处理实现小程序功能所必要的信息。</p>
						<p>为了方便对访问者进行电话回访，开发者将在获取你的明示同意后，收集你的手机号。</p>
						<p>你的权益:</p>
						<p>关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</p>
						<p>邮箱:3182863831@qq.com</p>
						<p>开发者对信息的存储</p>
						<p>开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。</p>
						<p>信息的使用规则:</p>
						<p>开发者将会在本指引所明示的用途内使用收集的信息</p>
						<p>如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以短信方式告知并征得你的明示同意。</p>
						<p>信息对外提供</p>
						<p>开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。</p>
						<p>开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</p>
						<p>你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</p>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button type="primary" @click="topup1()">已阅读</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 消息提示组件 -->
		<u-toast ref="regToast" />
	</view>
</template>

<script>
	import cImg from '@/components/c-img/index.vue'
	import logo from '@/static/img/logo.png'
	import {
		loginWeixin,
		visitorsave,
		getMachineInstitu
	} from '@/api/index.js'
	export default {
		components: {
			cImg,
		},
		data() {
			return {
				logo,
				show: false, //用户隐私协议弹窗
				explain_show: true, //规章制度弹窗
				form: {
					openid: undefined, //微信openid
					username: undefined, //用户名
					userPhone: undefined, //手机
					company: undefined, //公司
					reason: undefined, //事由
					duration: undefined, //时长
					highRisk: undefined, //高风险
					highRiskname: undefined, //高风险文字
					itineraryCode: undefined, //行程码
					healthCode: undefined, //健康码
					information: undefined, //审核资料
				},
				highRisktshow: false, //高风险选择弹窗
				//选择列表
				actionSheetList: [{
						value: true,
						label: '是'
					},
					{
						value: false,
						label: '否'
					}
				],
				//校验规则
				rules: {
					username: [{
						required: true,
						message: '请输入名字',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					userPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					duration: [{
							required: true,
							message: '请输入访问时长',
							trigger: 'change',
							type: 'number'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return 0 < value && value <= 24;
							},
							message: '访问时长必须0~24小时以内',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					company: [{
						required: true,
						message: '请输入来访公司',
						trigger: 'change'
					}],
					reason: [{
						required: true,
						message: '请选择事由',
						trigger: 'change'
					}],
				},
				//用户协议选择
				fa_list: [{
					name: '《用户服务协议》及《隐私政策》',
					disabled: false
				}],
				value: '', //用户协议按钮文字
				content: '' //机房制度
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.autoWrite(); //缓存访客信息
			this.getInstitu(); // 机房制度信息获取
			this.init(); //获取openid
		},
		methods: {
			//填写访客信息缓存
			autoWrite() {
				let visitor = uni.getStorageSync("visitor");
				if(visitor) {
					this.form.username = visitor.username;
					this.form.userPhone = visitor.userPhone;
					this.form.company = visitor.company;
					this.form.reason = visitor.reason;
					this.form.duration = visitor.duration;
				} else{
					return false
				}
			},
			//获取机房制度
			async getInstitu() {
				let {
					data,
					code,
					message
				} = await getMachineInstitu();
				if (code === 200) {
					this.content = data.content;
				} else {
					this.$refs.regToast.show({
						title: message,
						type: "info",
					})
				}
			},
			//用户保护协议弹窗
			topup1() {
				this.show = !this.show;
				this.value = '《用户服务协议》及《隐私政策》';
			},
			changeImg1(img) {
				this.form.itineraryCode = img;
			},
			changeImg2(img) {
				this.form.healthCode = img;
			},
			changeImg3(img) {
				this.form.information = img;
			},
			//获取openid
			init() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						loginWeixin({
								code: loginRes.code
							})
							.then(({
								data,
								code,
								message
							}) => {
								if (code == 200) {
									uni.setStorageSync('openid', data)
									this.form.openid = data
								} else {
									this.$refs.regToast.show({
										title: message,
										type: "info",
									})
								}
							})
					}
				});
			},
			resbtn() {
				//提交访客信息
				if (this.value == '') {
					this.$refs.regToast.show({
						title: "未勾选用户隐私协议",
						type: "info",
					})
				} else {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							visitorsave(
								this.form
							).then(({
								data,
								code,
								message
							}) => {
								this.$refs.regToast.show({
									title: code == 200 ? '提交成功' : message,
									type: code == 200 ? "success" : "info",
								})
								if (code == 200) {
									this.setWrite();
									this.reset();
								} else {
									console.log('验证失败');
								}
							})

						};
					})
				}
			},
			//重置表单
			reset() {
				this.form = {
					username: '',
					userPhone: '',
					company: '',
					reason: '',
					duration: '', 
					highRiskname: '',
					highRisk: '',
					itineraryCode: [],
					healthCode: [],
					informationv: [],
				}
				this.$refs.img1.reset()
				this.$refs.img2.reset()
				this.$refs.img3.reset()
			},
			//缓存访客信息
			setWrite() {
				let visitor = {
					username: this.form.username,
					userPhone: this.form.userPhone,
					company: this.form.company,
					reason: this.form.reason,
					duration: this.form.duration
				}
				uni.setStorageSync("visitor", visitor);
			},
			//是否风险区选择
			highRisonok(e) {
				this.form.highRisk = e[0].value
				this.form.highRiskname = e[0].label
			},
		}
	}
</script>

<style lang="scss">
	.partol {
		background: #f0f2f5;
		overflow: hidden;

		.logo-back {
			width: 751rpx;
			height: 300rpx;
			position: relative;

			&::after {
				content: '';
				width: 140%;
				height: 300rpx;
				position: absolute;
				left: -20%;
				top: 0;
				border-radius: 0 0 45% 45%;
				background: #4a8bff !important;
			}

		}

		.title-font {
			width: 690rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cell-item {
				width: 690rpx;

				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0px 0px;
				padding: 1rpx;
				margin-top: 35rpx;
				box-sizing: border-box;
			}

			.rig-font {
				font-size: 28rpx;
				font-family: Microsoft YaHei-3970(82674968);
				font-weight: 400;
				color: #808080;
			}
		}

		view {
			line-height: 1;
		}

		.sumit {
			width: 650rpx;
			height: 90rpx;
			background: #4A8BFF;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: Microsoft YaHei-3970(82674968);
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}

		.procol {
			width: 690rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
		}

		.detail_procol {
			font-size: 28rpx;
			color: #4A8BFF;
		}

		.upload-image {
			line-height: 32px !important;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}

		.content p {
			margin-left: 10rpx;
			margin-bottom: 10rpx !important;
			font-size: 28rpx;
			line-height: 30rpx;
			text-align: left;
		}

		.confrim-btn1 {
			width: 620rpx;
			height: 100rpx;
			font-size: 24rpx;
			font-weight: 400;
			text-align: center;
			margin-bottom: 20rpx;
			margin-top: 30rpx;
		}

		.confrim-btn {
			width: 400rpx;
			height: 100rpx;
			text-align: center;
			margin-bottom: 20rpx;
			margin-top: 30rpx;
			// margin-left: 125rpx;
		}

		.u-radio__label {
			margin-left: 10rpx !important;
			margin-right: 0rpx !important;
		}
	}
</style>