ts_aimz_uni/pages/login/login.vue

<template>
	<view class="content">
		<image src="/static/images/login_bg.png" class="bg-login" mode="scaleToFill"></image>
		<view class="login-box">
			<view class="input-container">
				<input :value="phoneNumber" @input="inputPhone" placeholder="请输入手机号码" class="login-input-content"
					type="number" />
				<view class="verify-box">
					<input :value="verifyCode" type="number" @input="inputVerifyCode" placeholder="请输入验证码"
						class="login-input-verifycode mr-10" />
					<view :class="[isVerifyActive? 'verify-btn-disable' :'verify-btn']" @click="getVerifyCode">
						{{verifyBtnTxt}}
					</view>
				</view>
				<checkbox-group class="mt-20" style="font-size: 24rpx;font-weight: bold;" @change="rememberPhone">
					<checkbox :checked="isRememberPhone">记住账号</checkbox>
				</checkbox-group>
			</view>

			<view class="rule-box mt-20">
				<checkbox-group @change="changeAgree">
					<checkbox>阅读并同意</checkbox>
				</checkbox-group>
				<text class="link" @click="showServiceDeal">《用户服务协议》</text>
				<text>和</text>
				<text class="link" @click="showPrivacyDeal">《隐私条款》</text>
			</view>
			<view @click="doLogin" :class="isActive?'btn-login-disable':'btn-login'">登录</view>
		</view>
		<uni-popup ref="contactDialog" :is-mask-click="false" type="bottom" background-color="#fff"
			border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="bottom-dialog-container">
				<view class="dialog-title-box">
					<view class="icon-close size-48" @click="closeDialog"></view>
					<view class="dialog-title-txt has-icon">联系人</view>
				</view>
				<view class="form-box">
					<view class="form-item">
						<text class="form-item-title star">姓&emsp;&emsp;名</text>
						<input adjust-position :cursor-spacing="50" type="text" confirm-type="next" :value="contactName"
							placeholder="请输入姓名" class="form-item-content" @input="inputContactName" />
					</view>
					<view class="form-item">
						<text class="form-item-title star">联系电话</text>
						<input adjust-position :cursor-spacing="50" :value="contactPhone" placeholder="请输入联系电话"
							class="form-item-content" @input="inputContactPhone" />
					</view>
					<view class="form-item">
						<view class="form-item-title">联系邮箱</view>
						<input adjust-position :cursor-spacing="50" type="text" confirm-type="next"
							:value="contactEmail" placeholder="请输入联系邮箱" class="form-item-content"
							@input="inputContactEmail" />
					</view>
					<view class="form-item">
						<text class="form-item-title">公&emsp;&emsp;司</text>
						<input adjust-position :cursor-spacing="50" type="text" confirm-type="next"
							:value="contactCompany" placeholder="请输入公司名称" class="form-item-content"
							@input="inputContactCompany" />
					</view>
					<view class="download-notes mt-20">
						<icon type="info" size="14" color="#3270FF" style="margin-top: 6rpx;"></icon>
						<view class="notes-content-box ml-10">
							<text style="font-weight: bold;font-size: 28rpx;">提示</text>
							<text class="mt-10">为了更精准地为您提供后续服务，需要为您创建联系人。联系人主要用于.</text>
							<text class="mt-10">· 业务联系</text>
							<text class="mt-10">· 信息通知</text>
							<text class="mt-10">· 活动跟进等</text>
						</view>
					</view>
				</view>
				<view class="bottom-btn-green" @click="doCreateContact">确定</view>
			</view>
		</uni-popup>
		<uni-popup ref="msg" type="message">
			<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import UserApi from '@/common/js/net/UserApi'
	import {
		set,
		get
	}
	from '@/common/js/cache/storage.js'
	import {
		isMobilePhone
	} from '@/common/js/validator.js'
	export default {
		data() {
			return {
				isActive: true,
				verifyBtnTxt: '获取验证码',
				phoneNumber: '', //手机号
				verifyCode: '', //验证码
				msgType: 'error',
				msgHint: '',
				countNumber: 120,
				isVerifyActive: false,
				timer: null,
				isRememberPhone: false,
				contactPhone: '',
				contactName: '',
				contactEmail: '',
				contactCompany: '',
				csaNo: ''
			}
		},
		onLoad() {
			// set('token',
			// 	'WWZRMmsySWJib2hKQUZVVzdYdjFBS3RGRko5UzVVb1dWdm1SZUVxVnUycVhTeDFtN0Q2aHcyTXlwVFRXUTJZM2I5eWRjc2VXK0lLd2d2Z1pCSndydFZQYjZ6ejIyakd6czV4UVF2V3hSRUxsNWZlOStITjhTU1JWdXNWWExIeTloNHNsVkdPMWQ3Q0JGamNhSnpSNXhVVXN5Wnk1NmpnOGNsckxueHNiZFBVdlU3NGpkZDRHMTQrc1pYTGlyZ1c3MnprdFRvTUhWODhJR2M1THhObkN4NGpKZk9sUmVJcTJqYTBZalp0YkNxRU5aNjA3WklLQnRTMVdEdXg0NW1tMEV5V3RSSEEvV0M2ZmFoRWtzRGRoZkd0ZUcyZ2pKRFYwa3YxYThDZm53ZGE5bTBYKzgrVm8yV1h1aTdVU2FQbVAwbFZ6TnhobkxvNGswMWlsMGtiSVNBPT0='
			// )
			// set('userId', 'c2438eb8-2685-49a9-bf02-5111a5192d96')
			// set('token',
			// 	'NjBIOFRORDcraDc4U1RsUTI4a3B5em50VVVzclp2QjdFWDV2dVJJc0VLL3Fhazd0bjZPaU9Tc3E1cHc2cmYyZTc0Y2FITTdRR0pMTk1xaVRHM0I1d0NiTnJ4b1BVSVNtUFl4SlFtR1g2M0tCQTc2TXM4L3d4ZVhwM09VREN0bDMrTXNoa0trWDR1eG5PdG84OXZ4UVE0dDhRUDdQRk1Qd2N0ZWVLSzJaZzBkZ0RhQS84M3B5WDN1aGlEdWQwR3BIZ24vWDBUWmhrNUZiQkJPUDJKQngyL002Rm5aOG5JZ01HTldoNmJnRGxqOFhjNDhjMmxvVnJDV3JSWlo4dHIydHBRU3FEN3htVjVHZlhueUFjRHlpSVZEd0JJZVJWa3NVMFNlVkNWR2dSZHg4RXFsSkttc05WTDhBN014R3dVRUdIclNZN0UwSm9zdUZ3T052MTRmWmhwRmZhWTJsbURCZ0RlTDFLeHZWWDQ0PQ=='
			// )
			// set('userId', '776864b2-f9d5-49eb-9ea9-db6c862ea10b')
			//本地156
			// set('token','NjBIOFRORDcraDc4U1RsUTI4a3B5em50VVVzclp2QjdFWDV2dVJJc0VLL3Fhazd0bjZPaU9Tc3E1cHc2cmYyZTc0Y2FITTdRR0pMTk1xaVRHM0I1d0NiTnJ4b1BVSVNtUFl4SlFtR1g2M0tCQTc2TXM4L3d4ZVhwM09VREN0bDMrTXNoa0trWDR1eG5PdG84OXZ4UVE0dDhRUDdQRk1Qd2N0ZWVLSzJaZzBkRXRJMFE0NDZpVUp0azVyUHRkekJrWXU2SlJFNE1VWHJVNWozazJ2cHJtK241TDhhYWhnNHRkM1ZHR1g5MVd4aDFRMkgyS1BrSWo2RmlUZk5nQW1scm5Xd0NlNUs4S1cwZ2VjYURodEsraGEyYk8vSDlXYk0zRXkzTG5XYnBac1BrN0ZTTGdyR21XMkM2bUhEUzhBQ1RHVWh6YnFjVkJKNFlDcXpqZVM0THhHNG5hR3ZtWDQxY1dobnk1OWpVcEtzPQ==')
			// set('userId','3e256f41-d838-40ac-acbc-ada0ef039cbd')
			// setTimeout(() => {
			// 	uni.switchTab({
			// 		url: '/pages/index/home'
			// 	})
			// }, 1000)
			this.isRememberPhone = get('isRemember', false)
			this.phoneNumber = get('loginPhone', '')
		},
		onUnload() {
			console.log('页面卸载');
			if (this.timer != null) {
				clearInterval(this.timer)
			}
		},
		methods: {
			closeDialog() {
				uni.showModal({
					title: '警告',
					content: '如不创建联系人,将无法使用本程序,您确定要关闭吗?',
					success: res => {
						if (res.confirm) {
							this.$refs.contactDialog.close()
						}
					}
				})
			},
			inputPhone(e) {
				this.phoneNumber = e.detail.value
				if (this.timer != null) {
					clearInterval(this.timer)
					this.timer = null
					this.verifyBtnTxt = '获取验证码'
					this.isVerifyActive = false
					this.countNumber = 120
				}
			},
			inputVerifyCode(e) {
				this.verifyCode = e.detail.value
			},
			inputContactName(e) {
				this.contactName = e.detail.value
			},
			inputContactPhone(e) {
				this.contactPhone = e.detail.value
			},
			inputContactCompany(e) {
				this.contactCompany = e.detail.value
			},
			inputContactEmail(e) {
				this.contactEmail = e.detail.value
			},
			rememberPhone(e) {
				this.isRememberPhone = !this.isRememberPhone
			},
			//是否勾选服务协议
			changeAgree(e) {
				this.isActive = !this.isActive
			},
			getVerifyCode() {
				if (this.isVerifyActive) {
					return
				}
				const _self = this
				if (_self.phoneNumber == '' || !isMobilePhone(_self.phoneNumber)) {
					_self.msgHint = '请输入有效的手机号码'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return
				}
				uni.showLoading({
					title: '获取中...'
				})

				UserApi.doGetVerifyCode(_self.phoneNumber)
					.then(res => {
						uni.hideLoading()
						_self.msgHint = '获取成功'
						_self.msgType = 'success'
						_self.$refs.msg.open()
						_self.timer = setInterval(_self.startCountDown, 1000)
						console.log(res)
					})
					.catch(err => {
						console.log(err)
						uni.hideLoading()
						_self.msgHint = err.msg ? err.msg : '获取验证码失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			startCountDown() {
				const _self = this
				if (_self.countNumber <= 0) {
					_self.verifyBtnTxt = '获取验证码'
					_self.isVerifyActive = false
					if (_self.timer != null) {
						clearInterval(_self.timer)
						_self.timer = null
					}
					_self.countNumber = 20
					return;
				}
				_self.isVerifyActive = true
				_self.verifyBtnTxt = `重新发送(${_self.countNumber}s)`
				_self.countNumber = --_self.countNumber
			},
			//用户服务协议
			showServiceDeal() {
				uni.navigateTo({
					url: '/pages/common/rule/rule?id=68eee8f5-33d3-4246-aeee-a33956677101',
				})
			},
			//隐私条款
			showPrivacyDeal() {
				uni.navigateTo({
					url: '/pages/common/rule/rule?id=93679af4-e264-4d1c-bd49-538028daa95d'
				})
			},
			//创建联系人
			showCreateContactDialog() {
				this.contactPhone = this.phoneNumber
				this.$refs.contactDialog.open()
			},
			doLogin() {
				const _self = this
				if (_self.phoneNumber == '' || !isMobilePhone(_self.phoneNumber)) {
					_self.msgHint = '请输入正确的手机号码'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return
				}
				if (_self.verifyCode == '') {
					_self.msgHint = '请输入验证码'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return
				}
				if (_self.isActive) {
					_self.msgHint = '请勾选阅读与同意用户服务协议与隐私条款'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return
				}
				uni.showLoading({
					title: '登录中...'
				})
				const data = {
					phone: _self.phoneNumber,
					verifyCode: _self.verifyCode
				}
				set('isRemember', this.isRememberPhone)
				set('loginPhone', this.isRememberPhone ? this.phoneNumber : '')
				UserApi.doLoginVerifyCode(data)
					.then(res => {
						uni.hideLoading()
						if (res.data && res.data != '') {
							//登录成功
							set('token', res.data)
							//判断是否创建过联系人
							_self.doGetMineContactList()
						} else {
							//登录失败
							_self.msgHint = '登录失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						}
					})
					.catch(err => {
						uni.hideLoading()
						console.log(err)
						self.msgHint = err.msg ? err.msg : '登录失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//判断是否创建过联系人
			doGetMineContactList() {
				uni.showLoading({
					title: '登录中...'
				})
				const data = {
					page: 1,
					rows: 2
				}
				const _self = this
				UserApi.doGetMineContactList(data)
					.then(res => {
						uni.hideLoading()
						if (res.rows && res.rows.length <= 0) {
							//需要创建
							_self.doGetCsaNo()
						} else {
							//无需创建
							uni.switchTab({
								url: '/pages/index/home'
							})
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = '登录失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//获取客服id
			doGetCsaNo() {
				const _self = this
				uni.showLoading({
					title: '加载中...',
				})
				UserApi.doGetCsaNo()
					.then(res => {
						uni.hideLoading()
						if (res.csaNo && res.csaNo != '') {
							_self.csaNo = res.csaNo
							_self.showCreateContactDialog()
						} else {
							_self.msgHint = '登录失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgHint = '登录失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			checkParams() {
				if (this.contactName == '') {
					this.msgHint = '请输入联系人姓名'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				if (this.contactPhone == '' || !isMobilePhone(this.contactPhone)) {
					this.msgHint = '请输入正确的联系电话'
					this.msgType = 'error'
					this.$refs.msg.open()
					return false
				}
				return true
			},
			//去创建联系人
			doCreateContact() {
				const isLegal = this.checkParams()
				if (isLegal) {
					uni.showLoading({
						title: '创建中...'
					})
					const _self = this
					//创建联系人
					//更新个人信息
					const userInfo = {
						userInfoName: _self.contactName != '' ? _self.contactName : '新用户',
						contactPhone: _self.contactPhone,
						idCardType: 'ID_CARD',
						userInfoType: 'PERSONAL',
					}
					const contactData = {
						company: _self.contactCompany,
						csaNo: _self.csaNo,
						email: _self.contactEmail,
						name: _self.contactName,
						phone: _self.contactPhone
					}
					const user = UserApi.doUpdateUserInfo(userInfo)
					const contact = UserApi.doCreateContact(contactData)
					const list = [user, contact]
					Promise.all(list)
						.then(res => {
							uni.hideLoading()
							_self.msgHint = '创建成功'
							_self.msgType = 'success'
							_self.$refs.msg.open()
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/home'
								})
							}, 1500)
						})
						.catch(err => {
							uni.hideLoading()
							_self.msgHint = '创建失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bg-login {
		height: 100vh;
		width: 100vw;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		width: 75vw;
		border-radius: 15rpx;
		position: absolute;
		background-color: #00000010;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 40rpx;
	}

	.rule-box {
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		font-weight: bold;
		align-items: center;
	}

	.link {
		text-align: center;
		color: blue;
		white-space: nowrap;
	}

	.btn-login-disable {
		width: 70%;
		margin-top: 40rpx;
		font-size: 24rpx;
		line-height: 20px;
		border-radius: 45px;
		padding: 15rpx;
		background-color: $bg-gray-input-color;
		color: $black-color;
		text-align: center;
		font-family: PingFangSC-regular;
		align-self: center;
	}

	.btn-login-disable::before {
		border: none !important;
	}

	.btn-login {
		width: 70%;
		animation: clickScale 1.2s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		margin-top: 40rpx;
		font-size: 24rpx;
		line-height: 20px;
		border-radius: 45px;
		padding: 15rpx;
		background-color: $primary-color;
		color: $white-color;
		text-align: center;
		font-family: PingFangSC-regular;
		align-self: center;
	}

	.btn-login::after {
		border: none !important;
	}

	@keyframes clickScale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	button::after {
		border: none;
	}


	.login-input-content {
		background-color: $bg-gray-input-light-color;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 70rpx;
		height: 70rpx;
	}

	.login-input-verifycode {
		background-color: $bg-gray-input-light-color;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		padding: 0rpx 20rpx;
		flex-direction: row;
		align-items: center;
		line-height: 70rpx;
		height: 70rpx;
	}

	.login-input-verifycode::before {
		content: '';
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3ODA4NjYzNTc3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExOTAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUyMi44NTQgMzMuODg0TDkwMi40NyAxNjQuNzMyYzE0LjEgNC44NSAyMy41NCAxOC4xMTMgMjMuNTQgMzMuMDExdjQwMi4yMThjLTEwLjcxNCAyMzguNDktMzg2LjE4IDM4My43MDMtNDAyLjExOCAzODkuNzY0QTM0LjkxIDM0LjkxIDAgMCAxIDUxMS41MDUgOTkyYy00LjIxNyAwLTguNDM5LTAuNzY3LTEyLjM4Ny0yLjI3NUM0ODMuMTQ3IDk4My42NjQgMTA3LjY0OCA4MzguNDUyIDk3IDYwMS41MDJWMTk3Ljc0M2MwLTE0Ljg5OCA5LjQ0Mi0yOC4xNiAyMy41MDMtMzMuMDExTDUwMC4xMjEgMzMuODg0YTM1LjI0IDM1LjI0IDAgMCAxIDIyLjczMyAweiBtMjQzLjk4NCAyOTkuODA0Yy0yOS4yOS0yOS4yOS03Ni43NzctMjkuMjktMTA2LjA2NiAwTDQ1OS4yNDYgNTM1LjIxM2wtOTUuNDYtOTUuNDZjLTI5LjI4OS0yOS4yODktNzYuNzc2LTI5LjI4OS0xMDYuMDY1IDAtMjkuMjkgMjkuMjktMjkuMjkgNzYuNzc3IDAgMTA2LjA2N2wxNDguNDkyIDE0OC40OTJjMTQuNjQ1IDE0LjY0NSAzMy44MzkgMjEuOTY3IDUzLjAzMyAyMS45NjdsMS4xNTItMC4wMDljMTguODA4LTAuMjg3IDM3LjUzLTcuNjA2IDUxLjg4MS0yMS45NThsMjU0LjU1OS0yNTQuNTU4YzI5LjI4OS0yOS4yOSAyOS4yODktNzYuNzc3IDAtMTA2LjA2NnoiIGZpbGw9IiM3MDcwNzAiIHAtaWQ9IjExOTEiPjwvcGF0aD48L3N2Zz4=');
		background-size: cover;
		background-repeat: no-repeat;
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.login-input-content::before {
		content: '';
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ3ODA4NzUzNDg1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0MjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTYyMi4wMTMyMzcgNzEzLjcyNzljMS44NTczMTYtMS4xNTQ1NDggMjIuNDU1MTEzLTE0LjAzODYyOSAyOC40NjIxMDctMTcuNjUyODY1YTI3Ny42OTM3ODEgMjc3LjY5Mzc4MSAwIDAgMSAyOS41MTYyNTgtMTUuOTI5NDA5YzY0LjU3MDk5OS0yOS4zNjU2NjYgMTIxLjUxMTk0NS04LjYxNzI3NSAxOTYuODQxOTg5IDc5LjM5NjA1OCA0Ni42MDAyMTYgNTQuNDgxMjU4IDYwLjM3MTEyMyAxMDIuODIxNjYxIDQyLjM4MzYwNyAxNDUuODU3ODM5LTEzLjQwMjc5MSAzMi4xNjAwMDUtMzkuMjIxMTUxIDU0LjM0NzM5Ny04NS4xNjg3OTYgODEuNzg4ODE2LTIuOTc4Mzk4IDEuNzQwMTg4LTI5LjQ0OTMyOCAxNy4xMzQxNTUtMzYuMjI2MDIxIDIxLjM1MDc2NC0xMDYuOTU0NjA2IDY1Ljk5MzI2OC0zNTIuMTIwMjY1LTg1LjEwMTg2Ni01MjguNDY0ODUyLTM0My4yODU0NjdDOTIuNTc3ODk2IDQwNi40MzQxOTcgNDYuODMxMDQyIDEzMC40NjM4NzEgMTU1LjIyNDY0OSA2My40ODMzODJsMTQuMjg5NjE3LTkuMDY5MDU1IDE1LjUyNzgyOC0xMC4wNzMwMDlDMjM5Ljg0MTI3MSA4Ljg4NDk5NiAyNzQuOTI5NDc2LTUuMjg3NDkzIDMxNi41NDMzODUgMS43NTY5MmM0MS41MzAyNDYgNy4xMjgwNzYgNzYuODY5NDQgMzcuODY1ODEzIDEwNi43NzA1NDggOTMuODE5NTM3IDYzLjAxNDg3IDExOC40MTY0MTkgNDkuMDkzMzY5IDE3NC41ODc2NjYtMzEuOTc1OTQ3IDIyNS42Mzg3NDYtNS44Mzk2NjggMy43NDgwOTYtMjYuNTIxMTI4IDE2LjI0NzMyOC0yOC40Nzg4MzkgMTcuNDY4ODA2LTE5Ljg2MTU2NCAxMi4yOTg0NDEgMTMuNzg3NjQgOTQuNjcyODk4IDkyLjAyOTE1MSAyMDkuMTkwNjI3IDc5LjE3ODUzNSAxMTUuODIyODcgMTQ1LjM4OTMyNiAxNzkuMTcyMzkxIDE2Ny4wNTgwMDkgMTY1LjgzNjUzMWgwLjA2NjkzeiIgZmlsbD0iIzcwNzA3MCIgcC1pZD0iMjQyMSI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.verify-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.verify-btn {
		font-size: 28rpx;
		color: $text-blue-color;
		white-space: nowrap;
		background-color: transparent;
		min-width: 160rpx;
		width: 160rpx;
		text-align: center;
		font-weight: bold;
	}

	.verify-btn:active {
		background-color: #00000020;
	}

	.verify-btn-disable {
		font-size: 26rpx;
		color: $text-gray-desc-color;
		white-space: nowrap;
		min-width: 160rpx;
		width: 160rpx;
		background-color: transparent;
		text-align: center;
		font-weight: bold;
	}

	.form-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 14px;
		margin-top: 30rpx;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 10px;
	}

	.form-item-title {
		flex: .3;
		font-size: 28rpx;
		color: black;
		font-weight: 500;
		text-align: left;
	}


	.form-item-content {
		flex: .7;
		text-align: right;
		font-size: 28rpx;
		border: 10rpx;
		padding: 10rpx;
		background-color: $bg-gray-input-color;
	}

	.input-container {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	::v-deep .uni-popup-message__box {
		margin-top: 120rpx;
	}

	.download-notes {
		display: flex;
		flex-direction: row;
		border-left: 8rpx solid $blue-color;
		border-radius: 5rpx;
		background-color: $bg-blue-shallow-color;
		font-size: 24rpx;
		/* #ifdef MP-BAIDU */
		margin-bottom: 10rpx;
		/* #endif */
		/* #ifndef MP-BAIDU */
		margin-bottom: 80rpx;
		/* #endif */
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 0rpx 5rpx $bg-gray-input-color;
	}

	.notes-title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: $text-blue-color;
	}

	.notes-content-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		color: $text-blue-color;
	}
</style>