ProAdvanced/pages/login-page/login/login.vue

<template>
	<view class="container">

		<image class="bg-image" src="../../../static/loginBg.png" mode="aspectFill"></image>
		<view class="up">
			<!-- 258px  -->
			<view id="HeadArea" style="height: 25%;"></view>
			<view id="MidArea">
				<view class="action-row align-center position-relative"
					style="background-color: rgba(146, 146, 255, 0.15); padding: 29px 104rpx 29px 104rpx;">
					<view class="text-white " :class="bMobileLogin?'text-22px':'text-16px'" @tap="onSwitchLogin(true)">
						手机登录</view>
					<view class="text-white " :class="!bMobileLogin?'text-22px':'text-16px'"
						@tap="onSwitchLogin(false)">邮箱登录</view>
					<view class="position-absolute-center"
						style="height: 29px ;width: 1px; background-color: rgba(255, 255, 255, 0.25);"></view>
				</view>
				<!-- bMobileLogin -->
				<view v-if="bPhoneNumberAndPasswordLogin">
					<view class="input-container" style="margin: 10px 102rpx 0 68rpx;">
						<view class="input-row padding  align-center" style="width: 318px;">
							<view class="text-18px text-regular " style="width: 72rpx;white-space:nowrap;">
								{{bMobileLogin?' +86':'邮箱'}}
							</view>
							<view class="margin-left-sm margin-right-sm"
								style="width: 2rpx; height: 25rpx; background-color: rgba(209, 209, 209, 1);">
							</view>
							<m-input :type="bMobileLogin?'number':'string'" :maxlength="bMobileLogin?'11':'32'"
								clearable v-model="account" :placeholder="bMobileLogin?'请填写11位手机号码':'请输入邮箱'"></m-input>
						</view>

					</view>
					<view class="input-container" style="margin: 8px 102rpx 0 68rpx;">
						<view class="input-row padding align-center" style="width: 318px;">
							<view class="text-18px text-regular " style="width: 72rpx;white-space:nowrap;">
								密码
							</view>
							<view class="margin-left-sm margin-right-sm"
								style="width: 2rpx; height: 25rpx; background-color: rgba(209, 209, 209, 1);">
							</view>
							<m-input type="password" maxlength="16" displayable v-model="password" placeholder="请输入密码">
							</m-input>
						</view>

					</view>
					<view @click="onSwitchGetCode" class="make-text-bPurple text-14px text-right text-regular"
						style="margin: 40rpx 96rpx 0 0;">{{bPhoneNumberAndPasswordLogin?'验证码登录':'密码登录'}} </view>
					<view class="btn-row" style="margin: 32rpx 0 0 0;">
						<view class="btn-confirm" @tap="bindLogin">登录</view>
					</view>
				</view>
				<!-- 手机端登录或者邮箱,获取验证码 -->
				<view v-else-if="bGetCode">
					<view class="input-container" style="margin: 32px 102rpx 0 68rpx;">
						<view class="input-row padding align-center" style="width: 318px;">
							<view class="text-18px text-regular " style="width: 72rpx;white-space:nowrap;">
								{{bMobileLogin?' +86':'邮箱'}}
							</view>
							<view class="margin-left-sm margin-right-sm"
								style="width: 2rpx; height: 25rpx; background-color: rgba(209, 209, 209, 1);">
							</view>
							<m-input :type="bMobileLogin?'number':'string'" :maxlength="bMobileLogin?'11':'32'"
								clearable v-model="account" :placeholder="bMobileLogin?'请填写11位手机号码':'请输入邮箱'"></m-input>
						</view>
					</view>
					<view @click="onSwitchGetCode" class="make-text-bPurple text-14px text-right text-regular "
						style="margin: 40rpx 96rpx 0 0; ">{{bPhoneNumberAndPasswordLogin?'验证码登录':'密码登录'}} </view>
					<view class="btn-row" style="margin: 28rpx 0 0 0;">
						<view class="btn-confirm" @tap="onNavToReg">获取验证码</view>
					</view>
				</view>
				<view v-else>
					<!-- 手机端登录 -->
					<view class="text-22px make-text-bPurple" style="margin: 34px 0 0 96rpx;">输入验证码</view>
					<view v-if="bMobileLogin" class="text-16px text-gray text-lines2"
						style="margin: 20px 96rpx 0 96rpx; word-wrap: break-word;">已发送4位验证码至 +86
						{{phoneNumber}}
					</view>
					<view v-else class="text-16px text-gray text-lines2"
						style="margin: 20px 96rpx 0 96rpx;word-wrap: break-word;">已发送4位验证码至 {{mailboxNumber}}</view>

					<view class="code-input-main">
						<view class="inputLine">
							<!-- <view class="input-item" maxlength="1" :value="inputCode[0]">{{inputCode[0]}}</input> -->
							<view class="input-item">{{inputCode[0]}}</view>
							<view class="input-item">{{inputCode[1]}}</view>
							<view class="input-item">{{inputCode[2]}}</view>
							<view class="input-item">{{inputCode[3]}}</view>
						</view>
						<!-- @input="inputEvent" -->
						<input class="code-input-input" v-model="inputCode" maxlength="4" type="number" />
					</view>

					<view class="btn-row">
						<!--  :disabled="inputCode.length<4" -->
						<view class="btn-confirm " :class="inputCode.length<4?'disabledBtn':''" @tap="onConfirm">确认
						</view>
					</view>
					<view v-if="bCodeDisabled" class="action-row-text">
						<view class="action-child text-gray">重新获取({{count}})</view>
					</view>
					<view v-else class="action-row-text">
						<view class="action-child text-gray" @tap="onGetCode">重新发送验证码</view>
					</view>
					<input class='ipt' type="number" :maxlength="Length" :focus="bFocus" @input="onInputFocus"
						@focus="onFocus"></input>
				</view>

			</view>
			<view v-if="bGetCode">
				<view class="action-row-text " style="margin-top: 30rpx;">
					<view class="text-gray">登录即代表同意哔蹦</view>
					<view class="text-bold text-decoration make-text-bPurple" @tap="onSwitchAgree('agreement')">用户协议
					</view>
					<view class="text-gray">和</view>
					<view class="text-bold text-decoration make-text-bPurple" @tap="onSwitchAgree('privacy')">隐私政策
					</view>
				</view>
			</view>
			<!-- v-if="hasProvider" style="border: 1rpx solid #000000;"-->
			<view class="oauth-row" v-if="bGetCode" v-bind:style="{top: positionTop + 'px'}">
				<view v-if="hasProvider&&providerList.length>0">
					<view v-if="(bInstallWechat&&!bHideWeixin)||appleOauth" class="text-14px text-gray">其他登录方式</view>
					<!-- <view v-else style="height: 50px;"></view> -->
					<view class="flex justify-center align-center margin-top-sm flex-direction">
						<!-- 	<view class="oauth-image" v-for="provider in providerList" :key="provider.value">
							<image :src="provider.image" @tap="oauth(provider.value)"></image>
						</view> -->
						<view v-if="bInstallWechat&&!bHideWeixin" v-for="provider in providerList"
							:key="provider.value">
							<view class="btn-apple-confirm" @tap="oauth(provider.value)">
								<image style="width: 48rpx;height: 48rpx;margin-right: 5px;" :src="provider.image">
								</image>
								<view>通过微信注册</view>
							</view>
						</view>
						<view v-if="appleOauth" class="btn-apple-confirm" @tap="onAppleReg">
							<image style="width: 48rpx;height: 48rpx;margin-right: 5px;"
								src="../../../static/img/apple.png"></image>
							<view>通过Apple注册</view>
						</view>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import config from '../../../common/config.js';
	import service from '../../../util/util-js/service.js';
	import reqUtil from "@/util/util-js/requstUtil.js";
	import verify from '../../../util/util-js/verify.js'

	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../../components/m-input.vue'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				//获取验证码页面
				bGetCode: true,
				//默认手机号和密码登录
				bPhoneNumberAndPasswordLogin: true,
				bMobileLogin: true,
				providerList: [],
				hasProvider: true,
				account: '',
				password: '',
				positionTop: 0,
				//输入框参数
				Length: 4, //输入框个数
				bFocus: false, //聚焦
				Value: "", //输入的内容
				inputCode: '',

				//苹果服务
				appleOauth: null,
			}
		},
		computed: mapState(['bNewUser', 'forcedLogin', 'phoneNumber', 'mailboxNumber', 'bCodeDisabled', 'count',
			'bInstallWechat',
			'bHideWeixin', 'clientName'
		]),
		methods: {
			...mapMutations(['login', 'addUserAvatarAndLogin', 'appleUserInfoLogin', 'accountLogin', 'countDown',
				'resetCountDown'
			]),
			initProvider() {
				// const filters = ['weixin', 'qq', 'sinaweibo'];
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: '../../../static/img/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: (err) => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				let _self = this;

				let headView = uni.createSelectorQuery().in(this).select('#HeadArea');
				headView.fields({
					size: true,
				}, data => {
					// console.log("得到节点信息1" + JSON.stringify(data));
					let headHeight = data.height;
					if (_self.clientName.indexOf('iPad') > -1) {
						_self.positionTop = headHeight + 390;
					} else {
						_self.positionTop = headHeight + 378;
					}
					// let midView = uni.createSelectorQuery().in(this).select('#MidArea');
					// midView.fields({
					// 	size: true,
					// }, data => {
					// 	console.log("得到节点信息2" + JSON.stringify(data));
					// 	let midHeight = data.height;
					// 	/**
					// 	 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
					// 	 * 反向使用 top 进行定位，可以避免此问题。
					// 	 * uni.getSystemInfoSync().windowHeight - 220
					// 	 */
					// 	_self.positionTop = headHeight + midHeight;
					// }).exec();
				}).exec();


				if (plus.runtime.isApplicationExist({
						pname: 'com.tencent.mm',
						action: 'weixin://'
					})) {
					//安装了微信
					// console.log("安装了微信");
					_self.$store.state.bInstallWechat = true;
				} else {
					//未安装微信
					// console.log("未安装微信");
					_self.$store.state.bInstallWechat = false;
				}

			},

			bindLogin() {
				let _self = this;
				uni.showToast({
					icon: 'loading',
					title: '',
					mask: true,
					duration: 10000
				});
				/**
				 * 密码登录的情况下
				 * 处理手机号码和邮箱号码验证。
				 */
				if (this.bMobileLogin) {
					if (!verify.checkPhone(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确手机号'
						});
						return;
					}
				} else {
					//todo 后面要验证邮箱
					if (!verify.checkEMail(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确邮箱号'
						});
						return;
					}
				}

				// if (this.account.length < 11) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '账号最短为 11 个字符'
				// 	});
				// 	return;
				// }
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}

				reqUtil.requestData(config.URL.LOGINPASSWORDBASEDONTHETYPE, {
					"account": this.account,
					"password": this.password,
					"type": this.bMobileLogin ? 0 : 1
				}).then(res => {
						console.log('requestData PASSWORDlOGIN =====', res);
						if (res.code == 0) {
							uni.showToast({
								title: "成功",
								mask: true,
								duration: 1000
							})
							//密码登录成功
							uni.setStorageSync('token', res.data.token);
							_self.$store.state.bNewUser = res.data.newUser;
							_self.accountLogin(function() {
								console.log("_self.bNewUser=", _self.bNewUser);
								if (_self.bNewUser) {
									uni.reLaunch({
										url: "../../my-page/userInfo/userInfo"
									})
								} else {
									uni.reLaunch({
										url: "../../personal-page/personal/personal"
									})
								}

							});

						} else {
							uni.showToast({
								title: "用户密码错误",
								icon: 'none',
								mask: true,
								duration: 1000
							})
						}


					},
					e => {
						console.log(e)
					});
			},
			oauth(value) {
				let _self = this;
				uni.showToast({
					title: "",
					icon: "loading",
					duration: 10000
				})

				uni.login({
					provider: value,
					success: (res) => {
						// console.log('code11:', res);
						// #ifdef APP-PLUS
						// android 端微信登录
						uni.request({
							url: config.URL.ANDROIDLOGINURL,
							data: {
								openid: res.authResult.openid,
								unionid: res.authResult.unionid,
							},
							success: (res) => {
								// console.log('ANDROIDLOGINURL请求返回：', res);
								let resData = res.data;
								uni.hideToast();
								if (resData.code == 0) {
									uni.showToast({
										title: "登录中..",
										icon: "loading",
										mask: true,
										duration: 10000
									})
									//登录成功
									uni.setStorage({
										key: 'token',
										data: resData.data.token,
										success: function() {
											_self.$store.state.bNewUser = resData.data
												.newUser;
											console.log("wx token = ", resData.data
												.token);
											//如果是新用户，则获取用户信息
											if (_self.bNewUser) {
												uni.getUserInfo({
													provider: value,
													success: (infoRes) => {
														//获取了用户信息后
														let userInfo = {
															username: infoRes
																.userInfo
																.nickName,
															gender: 0 //默认是男性
														}
														//服务器0是男，1是女
														//微信的2 对应的女
														if (infoRes
															.userInfo
															.gender == 2) {
															//服务器记录的是1
															userInfo
																.gender =
																1;
														}
														console.log(
															"微信数据：",
															infoRes,
															userInfo);

														uni.downloadFile({
															url: infoRes
																.userInfo
																.avatarUrl,
															success: (
																res
															) => {
																// if (res.statusCode === 200) {
																// 	console.log('下载成功');
																// }
																// console.log(res.tempFilePath);
																_self
																	.addUserAvatarAndLogin({
																		params: userInfo,
																		filePath: res
																			.tempFilePath,
																		callback: () => {
																			_self
																				.$store
																				.state
																				.openid =
																				infoRes
																				.userInfo
																				.openId ||
																				'';
																			uni
																				.hideToast();

																			uni.reLaunch({
																				url: "../../my-page/perfectInfo/perfectInfo"
																			})
																		}
																	});
															}
														});
													},
													fail: (failRes) => {
														uni.hideToast();
														console.log(
															'getUserInfo failRes:',
															failRes);
													}
												})
											} else {
												//如果不是新用户,直接获取用户信息
												_self.accountLogin(function() {
													uni.hideToast();
													uni.reLaunch({
														url: "../../personal-page/personal/personal"
													})
												});
											}

										}
									});
								} else {
									uni.showToast({
										title: "验证码错误",
										mask: true,
										icon: 'none',
										duration: 1000
									})
								}
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.request({
							url: config.URL.USERlOGINURL,
							data: {
								appid: 'wxd6dfd60729d33d17',
								code: res.code,
								source: 1,
							},
							success: (res) => {
								// console.log('请求返回：', res, res.cookies[0]);

								// return;
								uni.getUserInfo({
									provider: value,
									success: (infoRes) => {
										/**
										 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
										 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
										 */
										// this.toMain(infoRes.userInfo.nickName);
										console.log('getUserInfo infoRes:', infoRes)

										uni.request({
											url: config.URL.WXGETUSERINFO,
											data: {
												appid: 'wxd6dfd60729d33d17',
												encryptedData: infoRes
													.encryptedData,
												iv: infoRes.iv,
												signature: infoRes.signature,
												rawData: infoRes.rawData
											},
											success: (wxInfoRes) => {
												console.log(
													'WXGETUSERINFO 请求返回：',
													wxInfoRes);
											}

										})
									},
									fail: (failRes) => {
										console.log('getUserInfo failRes:', failRes)
									}
								});
							}
						})
						// #endif


					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			},
			callbackUserInfo(userinfo) {
				console.log('callbackUserInfo:', userinfo);
			},
			onSwitchLogin(bMobileLogin) {
				this.bMobileLogin = bMobileLogin;
				//如果是已获取的验证码页面，返回获取验证码界面
				if (!this.bGetCode)
					this.bGetCode = true;
			},
			onSwitchGetCode() {
				this.bPhoneNumberAndPasswordLogin = !this.bPhoneNumberAndPasswordLogin;
			},
			onNavToReg() {
				if (this.bMobileLogin) {
					if (!verify.checkPhone(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确手机号'
						});
						return;
					}
					this.$store.state.phoneNumber = this.account;
				} else {
					//todo 后面要验证邮箱
					if (!verify.checkEMail(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确邮箱号'
						});
						return;
					}
					this.$store.state.mailboxNumber = this.account;
				}

				// uni.showToast({
				// 	icon: 'none',
				// 	title: '账号：'+ this.account
				// });
				// return;
				this.bGetCode = false;
				this.onGetCode();
			},

			//验证码操作
			//注册
			onConfirm() {
				var _self = this;

				if (_self.inputCode.length < 4) {
					uni.showToast({
						title: "请输入4位验证码",
						icon: "none",
						duration: 2000,
						mask: true
					})
					return;
				}

				uni.showToast({
					title: "",
					icon: "loading",
					duration: 10000,
					mask: true
				})
				reqUtil.requestData(config.URL.SMSLOGINFROMTYPE, {
					"account": _self.bMobileLogin ? _self.phoneNumber : _self.mailboxNumber,
					"code": _self.inputCode,
					"type": _self.bMobileLogin ? 0 : 1
				}).then(res => {
						console.log('requestData GETCODE =====', res);
						uni.hideToast();
						if (res.code == 0) {
							uni.showToast({
								title: "登录中..",
								icon: "loading",
								mask: true,
								duration: 3000
							})
							//登录成功
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: function() {
									_self.$store.state.bNewUser = res.data.newUser;

									_self.resetCountDown();

									_self.accountLogin(function() {
										uni.hideToast();
										if (_self.bNewUser) {
											uni.reLaunch({
												url: "../../my-page/userInfo/userInfo"
											})
										} else {
											uni.reLaunch({
												url: "../../personal-page/personal/personal"
											})
										}

									});
								}
							});

						} else {
							uni.showToast({
								title: "验证码错误",
								mask: true,
								icon: 'none',
								duration: 1000
							})
						}
					},
					e => {
						console.log(e);
						uni.hideToast();
					});
			},
			onGetCode() {
				//置灰状态
				if (this.bCodeDisabled) return;
				//调用store 倒计时
				if (this.bMobileLogin) {
					this.countDown({
						account: this.phoneNumber,
						type: 0
					});
				} else {
					this.countDown({
						account: this.mailboxNumber,
						type: 1
					});
				}


			},
			onTap() {
				this.bFocus = true;
				console.log(this.bFocus);
			},
			onFocus(e) {

				console.log(e);
				setTimeout(() => {
					// this.bFocus = false;
				}, 1000)
			},
			onInputFocus(e) {
				console.log(e.detail.value);
				this.Value = e.detail.value;

			},
			inputEvent(res) {
				console.log("input 1 input code  components : " + res.detail.value);
				/* this.$emit('vueMsg',res.detail.value); */
				this.inputCode = res.detail.value;

			},
			onSwitchAgree(data) {
				console.log("=== ", data);

				uni.navigateTo({
					url: "../../login-page/userAgreement/userAgreement?type=" + data
				})
			},
			onAppleReg() {
				this.onAppleLogout(() => {
					this.onAppleRegEvent();
				})
			},
			onAppleRegEvent() {
				let _self = this;
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						// console.log('apple login:', loginRes);
						uni.getUserInfo({
							provider: 'apple',
							success(resUser) {
								//用户信息
								console.log("resUser:", resUser);
								uni.showToast({
									title: '',
									icon: 'loading',
									mask: true,
									duration: 10000,
								})

								reqUtil.requestData(config.URL.APPLElOGINURL, {
									"identityToken": resUser.userInfo.identityToken
								}).then(res => {
										console.log('requestData apple login =====', res);
										uni.hideToast();
										if (res.code == 0) {
											//登录成功
											uni.setStorage({
												key: 'token',
												data: res.data.token,
												success: function() {
													_self.$store.state.bNewUser = res
														.data.newUser;
													// console.log("apple token = ", res.data.token);
													//如果是新用户，则获取用户信息
													if (_self.bNewUser) {
														//获取了用户信息后
														let tempName = "匿名";
														if (resUser.userInfo.fullName
															.hasOwnProperty(
																"familyName") &&
															resUser.userInfo.fullName
															.hasOwnProperty(
																"givenName")) {
															tempName = resUser.userInfo
																.fullName.familyName +
																resUser.userInfo
																.fullName.givenName;
														}
														let userInfo = {
															username: tempName,
															gender: 0 //默认是男性
														}
														// console.log("苹果数据11：", resUser.userInfo);
														// console.log("userInfo：", userInfo);
														_self.appleUserInfoLogin({
															params: userInfo,
															callback: () => {
																//这里是记录appleid，不是微信
																_self
																	.$store
																	.state
																	.appleid =
																	resUser
																	.userInfo
																	.openId ||
																	'';
																uni
																	.hideToast();

																uni.reLaunch({
																	url: "../../my-page/perfectInfo/perfectInfo"
																})
															}
														});

													} else {
														//如果不是新用户,直接获取用户信息
														_self.accountLogin(function() {
															uni.hideToast();
															uni.reLaunch({
																url: "../../personal-page/personal/personal"
															})
														});
													}

												}
											});

										} else {
											uni.showToast({
												title: "apple登陆失败",
												mask: true,
												icon: 'none',
												duration: 1000
											})
										}
									},
									e => {
										console.log(e);
										uni.hideToast();
									});
							}
						})
					},
					fail: (err) => {
						//登陆失败
						console.log('登陆失败:', err)
						uni.showToast({
							title: '登陆失败',
							icon: 'none'
						})
					}
				})
			},
			onAppleLogout(callback) {
				this.appleOauth.logout(function(e) {
					// plus.nativeUI.alert("注销登录认证成功!");
					callback(e);
					console.log("注销登录认证成功!");
				}, function(e) {
					// plus.nativeUI.alert("注销登录认证失败: " + JSON.stringify(e));
					console.log("注销登录认证失败: " + JSON.stringify(e));
				});
			},
			onGetAppleService() {
				// console.log("onGetAppleService");
				let _self = this;
				plus.oauth.getServices(function(services) {
					for (var i in services) {
						var service = services[i];
						// 获取苹果授权登录对象，苹果授权登录id 为 'apple' iOS13以下系统，不会返回苹果登录对应的 service    
						if (service.id == 'apple') {
							_self.appleOauth = service;
							// console.log("this.appleOla:", _self.appleOauth);
							break;
						}
						// console.log("service:", service);
					}
				}, function(err) {
					// 获取 services 失败  
				})
			}

		},
		onReady() {
			this.initPosition();
			this.initProvider();

			//获取apple相关服务
			this.onGetAppleService();
		}

	}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 67px;
	}

	.action-row navigator {
		color: #FFFFFF;
		font-size: 16px;
		/* padding: 0 20upx; */
	}

	.action-row-text {
		margin-top: 18px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-child {
		/* color: #FFFFFF; */
		padding: 0 20upx;
	}

	.oauth-row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		right: 0;
		z-index: -1;
		/* border: 1rpx solid #000000; */
	}

	.oauth-image {
		width: 76rpx;
		height: 76rpx;
		/* border: 1upx solid #dddddd; */
		/* border-radius: 100upx; */
		margin: 0 40upx;
		/* background-color: #ffffff; */
	}

	.oauth-image image {
		width: 76rpx;
		height: 76rpx;
		/* margin: 20upx; */
	}


	.input-group {
		background-color: #ffffff;
		margin-top: 40upx;
		position: relative;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.main-title {
		width: 20%;
		height: 50upx;
		min-height: 50upx;
		padding: 15upx 0;
		padding-left: 30upx;
		line-height: 50upx;
	}

	.main-info {
		width: 20%;
		height: 50upx;
		min-height: 50upx;
		padding: 15upx 0;
		padding-left: 30upx;
		line-height: 50upx;
	}

	.btn-row {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(25% + 67px);
		opacity: 1;
	}

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

	.input-container {
		border-bottom: 1rpx solid #e7e9eb;
	}

	.btn-confirm {
		width: 636rpx;
		height: 102rpx;
		background-color: rgba(151, 151, 255, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		color: #FFFFFF;
	}

	.btn-apple-confirm {
		width: 380rpx;
		height: 64rpx;
		/* background-color: rgba(151, 151, 255, 1); */
		border: 1px solid #000000;

		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		color: #000000;
		margin-top: 7px;
	}


	.disabledBtn {
		background-color: rgba(221, 221, 221, 1.0);
	}




	.code-input-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* border: 1rpx solid #000000; */
		height: 150px;
		position: relative;
	}

	.input-item {
		width: 106rpx;
		height: 118rpx;
		font-size: 20px;
		line-height: 118rpx;
		background-color: rgba(244, 241, 244, 255);
		/* border: 1rpx solid #ddd; */
		text-align: center;

		border-radius: 8px;
		margin-left: 44rpx;
		/* margin-right: 40upx; */
		color: rgba(86, 86, 86, 1);
		font-weight: bold;

	}

	.inputLine {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		top: 80rpx;
		left: 52rpx;
		position: absolute;
		z-index: 1;
	}

	.code-input-input {
		height: 150px;
		position: absolute;
		width: 100%;
		outline: none;
		color: transparent;
		text-shadow: 0 0 0 transparent;
		width: 300%;
		left: -100%;
		top: 0;
		/* background: #000000; */
		/* border: 1rpx solid #007AFF; */
		z-index: 10;
	}

	.ipt {
		width: 0;
		height: 0;
	}

	.text-decoration {
		margin: 0 1rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.3);
		padding-bottom: 1rpx;
	}
</style>