discounts-minapp/components/zs-login/index.vue

<template>
	<view class="zs-login" @touchmove.stop.prevent="clear">

		<!-- 注册认证 -->
		<u-popup :show="value" v-show="value" closeable :closeOnClickOverlay="false" mode="center" round="24"
			@close="close">
			<view class="modal">
				<view class="title">
					身份认证
				</view>
				<u--form id="uForm" labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="姓名" prop="name"  ref="item1" labelWidth="100">
						<u--input placeholder="请输入姓名" v-model="userInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="身份证" prop="idCardNum"  ref="item1" labelWidth="100">
						<u--input type="idcard" placeholder="请输入身份证号" maxlength="18" v-model="userInfo.idCardNum"
							border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机号" class="code" prop="phoneNum"  ref="item1" labelWidth="100">
						<u--input type="digit" placeholder="请输入手机号" maxlength="11" v-model="userInfo.phoneNum"
							border="none"></u--input>
						<button size="mini" :loading="loading" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							class="phone-btn" slot="right">一键填入</button>
					</u-form-item>
					<u-form-item label="验证码" prop="code"  ref="item1" labelWidth="100">
						<u--input type="idcard" placeholder="请输入验证码" v-model="userInfo.code" border="none"></u--input>
						<view class="code-btn" slot="right" @click="sendCode">
							{{codeText}}
						</view>
					</u-form-item>
					<u-form-item class="none" prop="check" ref="item1" labelWidth="0">
						<u-checkbox-group v-model="userInfo.check">
							<u-checkbox size="32" shape="circle">
							</u-checkbox>
							<view @click="handleProtocol">已阅读并同意用户协议</view>
						</u-checkbox-group>
					</u-form-item>
				</u--form>
				<button class="save-btn" type="default" @click="submit">进行验证</button>
				<view class="jump-btn" @click="goLogin">已有账号？去登录</view>
			</view>
		</u-popup>

		<u-popup :show="show1" closeable :closeOnClickOverlay="false" mode="center" round="8" @close="close1">
			<view class="modal">
				<view class="title">
					相关协议
				</view>
				<view class="protocol">
					协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
				</view>
				<view class="btn-group">
					<button class="btn refuse" type="default" @click="handleRefuse">拒绝</button>
					<button class="btn agree" type="default" @click="handleAgree">同意</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		register,
		getPhoneNum,
		sendVerifyCode
	} from '@/api/common.js'
	export default {
		options: { styleIsolation: 'shared' },
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// show: false,
				show1: false,
				userInfo: {
					name: '',
					idCardNum: '',
					code: '',
					phoneNum: '',
					check: []
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'phoneNum': {
						type: 'number',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'number',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					'idCardNum': {
						type: 'string',
						max: 18,
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'check': {
						type: 'array',
						min: 1,
						required: true,
						message: '请勾选协议',
						trigger: ['change']
					},
				},
				isSend: false,
				seconds: 60,
				codeText: '获取验证码', //按钮文字
				isLogin: 0,
				loading:false,
			}
		},
		watch: {
			show(val) {
				console.log(val);
			}
		},
		onShow() {

		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules)
			})
		},
		methods: {
			clear(e) {
			},
			// 关闭登录窗口
			close() {
				this.$emit('input', false)
			},
			close1() {
				this.show1 = false
			},
			submit() {
				this.$refs.uForm.validate().then(r => {
					let {
						name,
						idCardNum,
						code,
						phoneNum
					} = this.userInfo
					let obj = {name,
						idCardNum,
						code,
						phoneNum}
					uni.showLoading({
						title:'登录中'
					})
					register(obj).then(res => {
						uni.hideLoading()
						if(res.msg == '成功'){
							uni.setStorageSync('register', 1)
							uni.navigateTo({
								url: '../../verify/index'
							})
							// uni.showModal({
							// 	title: '短信已发送至您的手机，请注意查收',
							// 	success: (r) => {
							// 		if (r.confirm) {
							// 			uni.navigateTo({
							// 				url: '../../login/login/login'
							// 			})
							// 		}
							// 	}
							// })
						}
					})
				}).catch(e => {

				})
				// uni.navigateTo({
				// 	url:'../../login/login/veriFace'
				// })
				



			},
			goLogin() {
				uni.navigateTo({
					url: '../../login/login/login'
				})
			},
			//获取微信绑定手机号
			getPhoneNumber(val) {
				if(!val.detail.hasOwnProperty('encryptedData')) return
				this.loading = true
				getPhoneNum({code:val.detail.code}).then(res=>{
					this.loading = false
					this.userInfo.phoneNum = res.content
				})
			},
			// 获取验证码
			sendCode() {
				if(this.userInfo.phoneNum === ''){
					return uni.showToast({
						icon:'error',
						title:'手机号为空'
					})
				}
				if (this.isSend) return
				this.isSend = true
				sendVerifyCode({phoneNum:this.userInfo.phoneNum,appName:'user',templateId:1}).then(res=>{
				})
				this.timer = setInterval(() => {
					if (this.seconds <= 0) {
						this.codeText = '获取验证码'
						this.seconds = 60
						this.isSend = false
						clearInterval(this.timer)
					} else {
						this.codeText = this.seconds + 's后获取'
					}
					this.seconds--
				}, 1000)
			},
			// 点击协议
			handleProtocol() {
				this.show1 = true
			},
			handleRefuse(){
				this.show1 = false;
				this.userInfo.check = []
			},
			handleAgree() {
				this.show1 = false;
				this.userInfo.check = ['']
			},
		},
	}
</script>

<style lang="scss" >
		
	.zs-login{
		// 弹出框关闭按钮
		.u-popup__content__close--top-right{
			top: 46rpx!important;
			.u-icon__icon{
				font-size: 30rpx!important;
			}
		}
		.u-form-item{
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 24rpx;
			background: #F5F7F9;
			margin-top: 28rpx;
			.u-form-item__body{
				padding: 0 30rpx;
			}
			// 错误提示
				.u-form-item__body__right__message{
					margin-left: 130rpx!important;
				}
		}
		.u-form .u-form-item:last-child{
			background: none !important;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 10rpx;
			.u-form-item__body__right__message{
				margin-left: 70rpx!important;
			}
		}
		
		
		.modal {
			width: 680rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.title {
				text-align: center;
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 30rpx;
				margin-bottom: 50rpx;
			}

			.code {
				position: relative;
			}

			.phone-btn {
				color: $uni-text-primary;
				border: none;
				font-size: 28rpx;
				padding: 0;
			}

			.code-btn {
				color: $uni-text-primary;
				font-size: 28rpx;
			}

			.save-btn {
				width: 432rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				font-size: 32rpx;
				font-weight: bold;
				background: $uni-color-primary;
				color: #fff;
				margin-top: 52rpx;
			}

			.jump-btn {
				text-align: center;
				color: royalblue;
				font-size: 30rpx;
				margin-top: 30rpx;
			}
		}

		.protocol {
			margin: 30rpx;
			padding: 10rpx;
			border: 1px solid #ccc;
			height: 750rpx;
			overflow: auto;
			border-radius: 4px;
			color: #666;
		}

		.btn-group {
			display: flex;
			align-items: center;

			.btn {
				border-radius: 4px;
				width: 250rpx;
				color: #fff;
			}

			.refuse {
				background-color: rgb(191, 191, 191);
			}

			.agree {
				background: $uni-color-primary;
			}

		}
	}
</style>