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')
			//本地158
			set('token','aGh2UkUyWTBMbFh5dlV2WXJRci9pQ3hFVEpweGF4MjZiNjdIbVBjOFNkc0Q0Y2dEYTVMa29naU1pdS9Kb1dmZEc5d2w5cEdkSTJWNnFZdkZVYUtkaUhVck1RbWtCK0Rpa3NRT0w3N3RVenMwcUliK3IvZ1BFa2lQR2REZ3FZaHE5Sm1QdkJHWTJMRmFZQzBmQmVpTERFL3ZrM0phUE1icy80THJrM3BkRU9qU0xzakVJQ1IzN0xGbHA2SzFIcktnQk1oZFVpR3M4Qy96Q2o2VDJQZjdacW9SL01qQTNLcDRpemdsSXc4Y1RpYjNKS3NOamRPZitCSlE3akRjN3FnSWcxUmVuSktRSWhzZzNUT1I3R0luVm1CaWN3Uzg0cTJUdTJudm9Xdk5GNlhCbXdxc1hBT3d4VGxEQll4MGRDSzJpaG9FT014bzcrNnV1SVc3NkxXcGNCNm51dDVJWG5YRnE4bjMxRUxqdnIwPQ==')
			set('userId','8ed7c4f7-1ddf-4618-aa6b-0e08cbd2ec1b')
			// 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() {
				uni.switchTab({
					url: "/pages/index/home",
				});
				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: 0.3;
		font-size: 28rpx;
		color: black;
		font-weight: 500;
		text-align: left;
	}

	.form-item-content {
		flex: 0.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>