mechanicStore-app/pages/login/verifyManager.uvue

<template>
	<view class="container">
		<view class="safe_content">
			<text class="close_icon" @click="closePage">
				{{closeIcon}}
			</text>
			<image class="title" src="/static/myImages/qrcode-icon.png" mode="widthFix"></image>
			<view class="number">
				<text id="number-text" class="number-text" ref="number-text">
					{{phone}}
				</text>
				<text id="slogan-text" class="slogan-text">
					{{slogan}}
				</text>
			</view>
			<button id="login-button" class="login-button" @click="loginIn">
				本机号码一键登录
			</button>
			<view class="privacy">
				<checkbox id="privacy-checkbox" class="privacy-checkbox" ref="privacy-checkbox" :checked="false">
				</checkbox>
				<text class="privacy-normal-text">
					登录即同意
				</text>
				<text id="privacy-text" class="privacy-text" @click="openLink">
					{{privacyName}}
				</text>
			</view>
			<view class="footer-section other">
				<view class="divider-row row-center">
					<view class="line">
					</view>
					<text class="divider-text">
						其他登录方式
					</text>
					<view class="line">
					</view>
				</view>
				<view class="methods-row row-center">
					<view class="method-item column-center" @click="closePage">
						<view class="icon-box blue-bg">
							<u-icon name="phone" :size="24" />
						</view>
						<text class="method-name">
							其他手机号
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uniVerifyManager: null as UniVerifyManager | null,
				phone: '',
				slogan: '',
				privacyName: '',
				privacyUrl: '',
				closeIcon: '\uE650',
				isLoading: false //是否正在登录中
			}
		},
		onLoad(options : OnLoadOptions) {
			this.uniVerifyManager = uni.getUniVerifyManager();
			this.phone = options['phone'] as string;
			this.slogan = options['slogan'] as string;
			this.privacyName = options['name'] as string;
			this.privacyUrl = options['link'] as string;
		},
		methods: {
			closePage() {
				uni.closeDialogPage({
					dialogPage: this.$page,
					animationType: 'slide-out-bottom',
					success(res) {
						console.log('closeThisDialog success', res)
					},
					fail(err) {
						console.log('closeThisDialog fail', err)
					}
				})
			},
			openLink() {
				let url = '/pages/login/full-webview-page?url=' + this.privacyUrl + '&title=' + this.privacyName + '&animationType=slide-out-bottom';
				uni.openDialogPage({
					url: url,
					animationType: 'slide-in-bottom',
					success(res) {
						console.log("打开隐私协议");
					},
					fail(err) {
						console.log(err);
					}
				})

			},
			loginIn() {
				if (this.isLoading) {
					uni.showToast({
						title: "正在登录中，请稍后",
						position: "bottom",
						duration: 2000
					})
					return;
				} else {
					this.isLoading = true;
				}
				const numberTextElement = this.$page.getElementById('number-text');
				const sloganTextElement = this.$page.getElementById('slogan-text');
				const loginButtonElement = this.$page.getElementById('login-button');
				const privacyCheckBoxElement = this.$page.getElementById('privacy-checkbox');
				const privacyTextElement = this.$page.getElementById('privacy-text');
				if (numberTextElement != null && sloganTextElement != null && loginButtonElement != null && privacyCheckBoxElement != null && privacyTextElement != null) {
					this.uniVerifyManager?.customLogin({
						numberTextElement: numberTextElement,
						sloganTextElement: sloganTextElement,
						loginButtonElement: loginButtonElement,
						privacyCheckBoxElement: privacyCheckBoxElement,
						privacyTextElement: privacyTextElement,
						success: (res) => {
							console.log(res);
							this.takePhoneNumber(res.accessToken, res.openId);
						},
						fail: (error) => {
							if (error.errCode == 40001) {
								uni.showToast({
									title: "请同意服务条款",
									position: "bottom",
									duration: 2000
								})
							} else if (error.errCode == 40002) {
								uni.showToast({
									title: "授权页不符合规范",
									position: "bottom",
									duration: 2000
								})
							} else {
								const errorMsg = JSON.parseObject(error.cause?.cause?.message ?? "")?.getString("errorDesc") ?? error.errMsg;
								uni.showToast({
									title: errorMsg,
									position: "bottom",
									duration: 2000
								})
							}
						},
						complete: () => {
							this.isLoading = false;
						}
					})
				} else {
					uni.showToast({
						title: "未获取到页面元素",
						position: "bottom",
						duration: 2000
					})
					this.isLoading = false;
				}

			},
			takePhoneNumber(token : string, openId : string) {
				//云函数取号
				uniCloud.callFunction({
					name: 'univerify',
					data: {
						access_token: token, // 客户端一键登录接口返回的access_token
						openid: openId // 客户端一键登录接口返回的openid
					}
				}).then(res => {
					// 关闭登录页
					this.closePage();
					setTimeout(() => {
						uni.showModal({
							title: '取号成功',
							content: res.result.getJSON("res")?.getString("phoneNumber"),
							showCancel: false
						});
					}, 100);
				}).catch(err => {
					console.error(JSON.stringify(err));
					// 关闭登录页
					this.closePage();
					setTimeout(() => {
						uni.showModal({
							title: '取号失败',
							content: (err as Error).message,
							showCancel: false
						});
					}, 100);
				});
			},
			otherLogin() {
				//此处可实现其他登录方式
				uni.showToast({
					title: "使用其他方式登录",
					position: "bottom"
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: white;
		flex: 1;
		width: 100%;
	}

	.safe_content {
		padding-top: var(--status-bar-height);
		width: 100%;
		height: 100%;
	}

	.close_icon {
		left: 90%;
		top: 15px;
		font-family: uni-icon;
		font-size: 24px;
		/* font-weight: bold; */
	}

	.title {
		align-self: center;
		top: 20px;
	}

	.number {
		width: 100%;
		/* top: 25%; */
		/* 		position: absolute;
		height: 120px; */
		margin-top: 20rpx;
	}

	.number-text {
		width: 100%;
		text-align: center;
		font-size: 28px;
		font-weight: bold;
		align-self: center;
		height: 30px;
	}

	.slogan-text {
		margin-top: 10px;
		width: 100%;
		font-size: 13px;
		text-align: center;
		align-self: center;
		color: gray;
		height: 20px;
	}

	.login-button {
		width: 80%;
		/* top: 40%; */
		/* position: absolute; */
		align-self: center;
		background-color: orangered;
		font-size: 16px;
		color: white;
	}

	.privacy {
		margin-top: 10px;
		flex-direction: row;
		flex-wrap: wrap;
		/* top: 45%; */
		width: 100%;
		justify-content: center;
		align-self: center;
		/* position: absolute; */
	}

	.privacy-checkbox {
		transform: scale(0.65);
	}

	.privacy-text {
		margin-top: 4px;
		color: #007aff;
		font-size: 14px;
	}

	.privacy-normal-text {
		margin-top: 4px;
		color: gray;
		font-size: 14px;
	}

	.other {
		bottom: 15%;
		transform: translateY(50%);
		position: absolute;
		align-self: center;
		font-size: 14px;
	}

	.footer-section {
		/* margin-top: auto; */
	}

	.divider-row {
		margin-bottom: 40rpx;
		align-items: center;
	}

	.line {
		flex: 1;
		height: 1rpx;
		background-color: #ddd;
	}

	.divider-text {
		font-size: 26rpx;
		color: #999;
		margin: 0 20rpx;
	}

	.methods-row {
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.method-item {
		margin-right: 60rpx;
		align-items: center;
	}

	.method-name {
		font-size: 26rpx;
		color: #666;
	}

	.line {
		flex: 1;
		height: 1rpx;
		background-color: #ddd;
	}
</style>