NewZkgj/pages/mine/registerForm.vue

<template>
	<view class="cented-box">
		<!-- 背景图 -->
		<image class="bg-img" src="@/static/images/screenCode/screen_bg.png" mode=""></image>
		<!-- 头部 -->
		<view class="header">
			<view class="lside">
				<text class="text top">访客入场</text>
				<text class="text">登记表</text>
			</view>
			<view class="rside">
				<image src="@/static/images/screenCode/screen_note.png" mode=""></image>
			</view>
		</view>

		<!-- 表单 -->
		<view class="container">
			<view class="chented">
				<view class="title">
					<view class="titletext">客户姓名</view>
					<view class="titletext2">
						<input maxlength="10" class="titletext-input" style="color: #333333;" v-model="parames.name"
							placeholder-class="titletext-input" placeholder-style="color:#B2B2B2;" type="text"
							placeholder="请输入客户姓名（必填）" />
					</view>
					<view class="titleimg"></view>
				</view>
			</view>

			<view class="chented">
				<view class="title">
					<view class="titletext">客户性别</view>
					<!-- <view class="titletext2 displayclick"
						style="display: flex;align-items: center;padding-left: 10rpx;">
						<view class="sexRadio" @click="changeSex(1)" :class="{active:parames.sex == 1}">男士</view>
						<view class="sexRadio" @click="changeSex(2)" :class="{active:parames.sex == 2}">女士</view>
					</view> -->
					<u-radio-group v-model="parames.sex">
						<view style="display: flex;align-items: center;">
							<u-radio :name="1" shape="circle">男士</u-radio>
							<u-radio :name="2" shape="circle">女士</u-radio>
						</view>
					</u-radio-group>
				</view>

				<view class="title">
					<view class="titletext">到访人数</view>
					<view class="titletext2" style="display: flex;align-items: center;justify-content: space-around;">
						<view class="num" v-for="i in 4" :key="i" :class="{active:parames.howMany == i+1}"
							@click="changeHowMany(i+1)">
							{{i + 1}}
						</view>
					</view>
				</view>
				<!-- 				<view class="title" @click="Buildingselection()">
					<view class="titletext">到访途径</view>
					<view class="titletext2"
						style="font-size: 30rpx;font-weight: 400;color: #B2B2B2;line-height: 110rpx;padding-left: 10rpx;">
						<text v-if="parames.sourceName" style="color: #333333;">{{parames.sourceName}}</text>
						<text v-else>请选择客户来源</text>
					</view>
					<view class="titleimg">
						<image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
					</view>
				</view> -->
			</view>

			<button class="clive" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				v-if="verifyPass">提交</button>
			<view class="clive" @click="save" v-else>提交</view>

			<view class="dengji">
				<view class="d-lside">
					入场登记
				</view>
				<view class="d-rside">
					<view class="top">
						<text class="t-time">{{$u.timeFormat(new Date(), 'hh:MM:ss')}}</text>
						<text class="date">{{$u.timeFormat(new Date(), 'yyyy/mm/dd')}}</text>
					</view>
					<view class="address" style="font-size: 36rpx;">{{pname}}</view>
				</view>
			</view>


			<view class="bottoms">
				<u-checkbox v-model="parames.checked">我已阅读并同意</u-checkbox>
				<text class="books" @click="openModel">《{{tit}}》</text>
			</view>
		</view>
		<u-modal v-model="modelShow" :title="tit" width="720rpx" :mask-close-able="true" :show-confirm-button="false">
			<view class="slot-content" style="padding:0 20rpx;">
				<u-icon class="close" @click="readOk" name="close-circle" color="#CCCCCC" size="60"></u-icon>
				<view class="cont">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</u-modal>
		

		<view class="tips">
			疫情防控 人人有责
		</view>

		<u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="list" @cancel="cancel"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	var app = getApp();
	var config = require("@/config");
	let domain = require("@/utils/domain")
	export default {
		data() {
			return {
				Showhiddenunits: false,
				list: [{
						label: '自然到访',
						value: '自然到访'
					},
					{
						label: '渠道推荐',
						value: '渠道推荐'
					},
				],
				parames: {
					name: '',
					sex: 1,
					// sourceName: "自然到访",
					howMany: 1,
					projectId: '',
					phone: '',
					projectId: '',
					projectName: 'xxx',
					version:"",
					checked: true,
				},
				pname:"",
				daitiReceptionobj: {},
				verifyPass: false,
				qrCodeUrl: '',
				 // 是否同意隐私协议
				content:"",
				modelShow:false,
				tit:"",
			};
		},
		onLoad(options) {
			console.log(options)
			const sceneStr = decodeURIComponent(options.scene);
			this.parames.projectId = sceneStr
			this.initFetch()
		},
		watch: {
			parames: {
				deep: true,
				handler(newV) {
					if(newV.checked){
						if(newV.name.length != 0){
							this.verifyPass = true;
						}else{
							this.verifyPass = false;
						}
					}else{
						this.verifyPass = false;
					}
					// if (newV.name.length == 0) {
					// 	this.verifyPass = false;
					// } else {
					// 	this.verifyPass = true;
					// }
				}
			}
		},

		methods: {
			initFetch(){
				let appid = uni.getAccountInfoSync().miniProgram.appId;
				uni.request({
					url: config.service.privacyAgr,
					method: "GET",
					data:{
						id:appid,
						projectId:this.parames.projectId
					},
					header: {
						'content-type': 'application/json',
						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
					},
					success: (res) => {
						this.content = res.data.data.content
						this.tit = res.data.data.title
						this.parames.version = res.data.data.version
						this.pname = res.data.data.projectName
					}
				})
			},
			openModel(){
				this.modelShow = true;
			},
			readOk(){
				this.parames.checked = true;
				this.modelShow = false;
			},
			save() {
				if(this.parames.checked == false){
						uni.showToast({
							icon: "none",
							title: "请阅读并同意用户隐私协议"
						})
						return;
				}else{
						if (this.parames.name.length == 0) {
							uni.showToast({
								icon: "none",
								title: "姓名不能为空"
							})
						return;
				}
					
				}
			},
			getPhoneNumber(e) {
				this.qrCodeUrl = domain.baseUrl
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let data = {
						code: e.detail.code,
						appid: uni.getAccountInfoSync().miniProgram.appId,
					}
					uni.request({
						url: this.qrCodeUrl + '/code/loginSessionKey',
						method: "GET",
						data,
						success: (res) => {
							console.log(res.data.data)
							let phoneNum = JSON.parse(res.data.data).phone_info.phoneNumber
							this.parames.phone = phoneNum
							if (this.parames.phone != null && this.parames.phone != "") {
								if (this.parames.name.length > 8) {
									uni.showToast({
										icon: "none",
										title: "不能超过8个汉字"
									})
								} else {
									uni.request({
										url: this.qrCodeUrl + '/customer/codeAdd',
										method: "POST",
										data: this.parames,
										header: {
											'content-type': 'application/json',
											'Access-Token': uni.getStorageSync(
												'weapp_session_login_data').token
										},
										success: (addres) => {
											if (addres.data.code == 10000) {
												uni.reLaunch({
													url: '/pages/mine/registerResult'
												})
											} else {
												uni.showToast({
													icon: "none",
													title: addres.data.message
												})
											}
										}
									})

								}
							}

						}
					})
				} else {
					return;
				}
			},
			changeSex(sex) {
				this.parames.sex = sex;
			},
			changeHowMany(num) {
				this.parames.howMany = num;
			},

			Buildingselection() {
				this.Showhiddenunits = true;
			},
			cancel() {
				this.Showhiddenunits = false;
			},
			confirm(e) {
				this.parames.sourceName = e[0].value;
				this.Showhiddenunits = false;
			},

		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-model-title{
		padding-top: 0 !important;
	}
	.slot-content{
		position: relative;
		.close{
			position: absolute;
			top: 0;
			right: 0;
		}
		.cont{
			padding: 80rpx 0;
		}
	}
	.cented-box {
		position: relative;
		padding: 0 0 50rpx 0;
		width: 100vw;
		min-height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;

		.bg-img {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
		}

		.header {
			margin: 0 0 40rpx 0;
			width: 100%;
			display: flex;

			.lside {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text {
					color: #fff;
					font-size: 100rpx;
					font-weight: 800;
				}

				.top {
					font-size: 76rpx;
				}
			}

			.rside {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 306rpx;
					height: 302rpx;
				}
			}

		}

		.container {
			position: relative;
			margin: 0 auto;
			width: 670rpx;
			height: 900rpx;
			background: #fff;
			border-radius: 16rpx;


			.chented {
				padding: 0 30rpx;
				width: 100%;

				.title {
					width: 100%;
					height: 110rpx;
					border-bottom: 1rpx solid #E0E0E0;
					display: flex;
					align-items: center;

					.titletext {
						width: 21%;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
					}

					.titletext2 {
						width: 71%;
					}

					.titletext-input {
						width: 100%;
						height: 110rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #B2B2B2;
						line-height: 110rpx;
						padding-left: 10rpx;
					}

					.titleimg {
						width: 8%;
						text-align: right;

						.titleimg1 {
							width: 16rpx;
							height: 36rpx;
						}
					}
				}
			}

			.clive {
				margin: 100rpx auto 0;
				width: 610rpx;
				height: 88rpx;
				background: #2671E2;
				text-align: center;
				line-height: 88rpx;
				color: #FFFFFF;
				border-radius: 8rpx;
				font-size: 32rpx;
			}

			.dengji {
				margin: 60rpx 0 0 0;
				padding: 0 30rpx;
				width: 100%;
				display: flex;

				.d-lside {
					padding: 0 20rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					border-right: 1rpx solid #E0E0E0;
					font-size: 36rpx;
					font-weight: 500;
				}

				.d-rside {
					padding: 0 20rpx;
					height: 88rpx;
					display: flex;
					flex-direction: column;

					.top {
						display: flex;
						align-items: baseline;
						font-size: 24rpx;
						color: #333330;

						.t-time {
							margin-right: 20rpx;
							font-size: 36rpx;
							font-weight: 500;
							color: #333331;
						}
					}


				}
			}


			.bottoms {
				position: absolute;
				bottom: 30rpx;
				padding: 0 30rpx;
				width: 100%;

				.books {
					margin-left: -24rpx;
					color: #2671E2;
					font-size: 30rpx;
				}
			}
		}

		.tips {
			margin: 40rpx 0 0 0;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
		}
	}

	.sexRadio {
		color: #BFBFBF;
		border: 1rpx solid #BFBFBF;
		font-size: 24upx;
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		&:last-child {
			margin-left: 20rpx;
		}

		&.active {
			background: #2B6FFF;
			color: #fff;
			border-color: #2B6FFF;
		}
	}

	.num {
		width: 74rpx;
		height: 74rpx;
		border-radius: 8rpx;
		background: rgba(43, 110, 253, 0.1);
		color: #2B6EFD;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&.active {
			background: #2B6EFD;
			color: #FFFFFF;
		}
	}

	.Pinspeak {
		width: 100%;
		height: 92rpx;
		border-bottom: 1rpx solid #E0E0E0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-indent: 30rpx;
		line-height: 92rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-left: 10rpx;
	}
</style>