谷歌验证

api/index.js

@@ -182,6 +182,17 @@ export function Api_identityVerify (data) {
 }
 
 
+
+// 设置google验证码
+export function Api_getGoogle () {
+	return axios.get(`/api/user/get_google`)
+}
+
+// 设置google验证码
+export function Api_checkGoogle (code) {
+	return axios.post(`/api/user/check_google`, code)
+}
+
 // // 根据手机号登录
 // export function goAuthLogin_Api(data) {
 // 	return axios.post(`/auth/c/doMiniLoginByPhone` , data )

pages.json

@@ -270,8 +270,24 @@
 				"enablePullDownRefresh": false
 			}
 
+		}, {
+			"path": "pages/content/Google",
+			"style": {
+				"navigationBarTitleText": "谷歌验证",
+				"enablePullDownRefresh": false
+			}
+
 		}
-	],
+	    ,{
+            "path" : "pages/content/google-verification",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "谷歌验证",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 
 	"tabBar": {
 		"height": "50px",

pages/content/Google.vue

@@ -0,0 +1,190 @@
+<template>
+	<view>
+		<headContent borderBottom>
+			<template #left>
+				<reverse-back />
+			</template>
+			<template #content>
+				<view class="haed-title">
+					绑定谷歌验证
+				</view>
+			</template>
+		</headContent>
+
+		<view class="content-box">
+			<text class="lable-text">1. 安装谷歌验证器</text>
+			<text class="lable-hint">首先您需要在手机上安装谷歌验证器</text>
+			<text class="lable-hint">(GoogleAuthenticator)</text>
+			<view class="app-box">
+				<image class="app-icon" src="@/static/images/google.png" mode="aspectFit"></image>
+				<text class="app-btn">立即安装</text>
+			</view>
+			<text class="lable-text">2. 绑定谷歌验证器</text>
+			<text class="lable-hint">使用谷歌验证器App扫描该二维码或输入密钥</text>
+			<text class="lable-hint">(GoogleAuthenticator)</text>
+			<view class="qrcode">
+				<tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="codeurl" />
+			</view>
+			<view class="copy-box">
+				<text class="copy-num">{{secret}}</text>
+				<text v-show="secret" class="copy-icon iconfont" @click.stop="copySecret(secret)">&#xe65f;</text>
+			</view>
+			<view class="copy-hint">
+				请将16位密钥记录在纸上，并保存在安全的地方，如果遇到手机丢失，您可以通过密钥恢复您的谷歌验证。
+			</view>
+			<text class="bind-btn" @click.stop="bind">绑定</text>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		Api_getGoogle
+		
+	} from "@/api/index.js"
+	export default {
+		name: 'Google',
+		data() {
+			return {
+				val: '',
+				account:'',
+				secret: "G64DR7OMCFV3KQIM", // 密钥
+				codeurl: "otpauth://totp/Biking?secret=G64DR7OMCFV3KQIM"
+			};
+		},
+		onLoad(opt) {
+			this.account = opt?.account
+			this.getGoogle()
+		},
+		mounted() {
+			this.$refs.qrcodeRef._makeCode()
+		},
+		methods: {
+			getGoogle() {
+				Api_getGoogle().then(res => {
+					this.secret = res.secret
+					this.codeurl = res.codeurl
+					this.$nextTick(() => {
+						this.$refs.qrcode._makeCode()
+
+					})
+				})
+			},
+			openUrl(){
+				const url = 'https://www.baidu.com/'
+				plus.runtime.openWeb(url);
+			},
+			copySecret(secret) {
+				uni.setClipboardData({
+					data: secret,
+					success: res => {
+						uni.showToast({
+							title:'复制成功',
+							icon:'none'
+						})
+					}
+				});
+
+
+			},
+			bind(){
+				// this.type = opt?.type;
+				// this.account = opt?.account;
+				uni.navigateTo({
+					url:`/pages/login/safety-verification?type=2&account=${this.account}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content-box {
+		width: 100%;
+		padding: 20rpx $pages-padding;
+		display: flex;
+		flex-direction: column;
+
+		.lable-text {
+			font-size: 32rpx;
+			font-weight: bold;
+			line-height: 1.6;
+		}
+
+		.lable-hint {
+			font-size: 28rpx;
+			line-height: 1.4;
+			color: $SizeColor3;
+		}
+
+		.app-box {
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			padding: 50rpx 0;
+
+			.app-icon {
+				width: 100rpx;
+				height: 100rpx;
+			}
+
+			.app-btn {
+				background-color: $Theme-Color;
+				width: 200rpx;
+				height: 70rpx;
+				text-align: center;
+				line-height: 70rpx;
+				font-size: 28rpx;
+				color: #fff;
+				border-radius: 10rpx;
+				margin-top: 40rpx;
+			}
+		}
+
+		.qrcode {
+			text-align: center;
+			padding: 60rpx 0;
+		}
+
+		.copy-box {
+			width: 100%;
+			background-color: $bg_02;
+			height: 80rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.copy-num {
+				font-size: 26rpx;
+				font-weight: bold;
+			}
+
+			.copy-icon {
+				font-size: 28rpx;
+				color: $Theme-Color;
+				padding-left: 30rpx;
+			}
+		}
+
+		.copy-hint {
+			padding: 10rpx 0;
+			font-size: 26rpx;
+			color: $Theme-Color;
+		}
+
+		.bind-btn {
+			font-size: 28rpx;
+			width: 100%;
+			height: 80rpx;
+			background-color: $Theme-Color;
+			border-radius: 10rpx;
+			text-align: center;
+			line-height: 80rpx;
+			color: #fff;
+			margin-top: 20rpx;
+		}
+	}
+</style>

pages/content/bind.vue

@@ -73,9 +73,9 @@
 				errIndex: '',
 				next: false,
 				account: {
-					user_string: '17777777777',
+					user_string: '',
 					area_code: '',
-					code: '893720'
+					code: ''
 				},
 				errText: [
 					'',

pages/content/google-verification.vue

@@ -0,0 +1,352 @@
+<template>
+	<view>
+		<!-- 头部 -->
+		<headContent>
+			<template #left>
+				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
+			</template>
+			<template #content>
+				<view class="haed-title">安全验证</view>
+			</template>
+		</headContent>
+		<view class="page-content">
+			<text class="login-title">谷歌验证</text>
+			<text class="login-content">谷歌验证具有时效性，请于限时前输入</text>
+			<view class="form-item">
+
+				<input class="form-input" v-model="code" placeholder-class="form-input-place" :placeholder="`请输入验证码`" />
+
+			</view>
+			<view :class="['form-btn' , code ? '' : 'invalid-form-btn']" style="margin-top: 28rpx;"
+				@click.stop="formSubmit">
+				确定
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import {
+		reverseBack
+	} from "@/utils/common.js"
+	import {
+		Api_checkGoogle
+	} from "@/api/index.js"
+	export default {
+		name: 'google-verification',
+		data() {
+			return {
+				code: '',
+			};
+		},
+		onLoad(opt) {
+
+		},
+
+
+		methods: {
+
+			reversBackBtn() {
+				reverseBack()
+			},
+
+			formSubmit() {
+				uni.showLoading({
+					title: '',
+					mask: true
+				});
+				Api_checkGoogle({
+					code: this.code
+				}).then(res => {
+					setTimeout(() => {
+						uni.showToast({
+							title: `验证成功`,
+							icon: "none"
+						})
+						setTimeout(() => {
+							uni.reLaunch({
+								url: '/pages/content/mine'
+							});
+						}, 1000)
+					}, 300)
+				}).catch(err =>{}).finally(() => {
+						setTimeout(() => {
+							uni.hideLoading()
+						}, 200)
+				})
+				// Api_checkGoogle().then(res => {
+				// 	setTimeout(() => {
+				// 		uni.showToast({
+				// 			title: `验证成功`,
+				// 			icon: "none"
+				// 		})
+				// 		setTimeout(() => {
+				// 			uni.reLaunch({
+				// 				url: '/pages/content/mine'
+				// 			});
+				// 		}, 1000)
+				// 	}, 300)
+				// }).catch(err => {
+
+				// }).failly(() => {
+				// 	setTimeout(() => {
+				// 		uni.hideLoading()
+				// 	}, 200)
+				// })
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.head-revers-back {
+		font-size: 52rpx;
+		color: #000;
+	}
+
+	.page-content {
+		width: 100%;
+		padding: 30rpx 60rpx 0;
+
+		.login-title {
+			display: block;
+			font-size: 68rpx;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+			color: #333333;
+			line-height: 1.2;
+			letter-spacing: 0.96rpx;
+		}
+
+		.login-content {
+
+			display: block;
+			font-size: 28rpx;
+			font-family: PingFang SC, PingFang SC-Regular;
+			font-weight: 400;
+			color: #808080;
+			line-height: 1.2;
+			letter-spacing: 0.56rpx;
+			padding: 20rpx 0 40rpx;
+		}
+
+	}
+
+	.tab-box {
+		padding-bottom: 44rpx;
+	}
+
+	.tab {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding-top: 46rpx;
+
+		.tab-item {
+			font-size: 30rpx;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+			color: #1a1a1a;
+			line-height: 38rpx;
+			letter-spacing: 0.6rpx;
+
+			+.tab-item {
+				margin-left: 50rpx;
+			}
+		}
+
+		.active-tab-item {
+			color: $Theme-Color;
+			position: relative;
+
+			&::before {
+				position: absolute;
+				left: 0;
+				bottom: -11rpx;
+				content: '';
+				width: 100%;
+				height: 6rpx;
+				border-radius: 2rpx;
+				background-color: $Theme-Color;
+			}
+		}
+
+	}
+
+	.form-lable-icon {
+		margin-left: 4px;
+		font-size: 18rpx;
+	}
+
+	.login-form {
+		width: 100%;
+
+		.form-item {
+			width: 100%;
+			height: 90rpx;
+			padding: 0 20rpx;
+			display: flex;
+			align-items: center;
+			background-color: $box-bg;
+			border-radius: 6rpx;
+			margin-top: 20rpx;
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			.form-lable {
+				width: 140rpx;
+				height: 100%;
+				font-size: 24rpx;
+				flex-wrap: 700;
+				display: flex;
+				align-items: center;
+			}
+
+			.form-input {
+				flex: 1;
+				height: 100%;
+				font-size: 28rpx;
+			}
+
+			.form-input-place {
+				font-size: 28rpx;
+				color: #938989;
+			}
+		}
+
+
+	}
+
+	.form-agreement {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		font-size: 26rpx;
+		color: #938989;
+		padding: 26rpx 0;
+
+		.agreement-confirm {
+			width: 30rpx;
+			height: 30rpx;
+			background-color: $box-bg;
+			margin-right: 10rpx;
+			border-radius: 6rpx;
+
+			.confirm-icon {
+				width: 100%;
+				height: 100%;
+				background-color: $Theme-Color;
+				color: #fff;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 24rpx;
+			}
+		}
+
+		.agreement-name {
+			color: $Theme-Color;
+		}
+	}
+
+	.form-btn {
+		width: 100%;
+		height: 90rpx;
+		background-color: $Theme-Color;
+		border-radius: 8rpx;
+		text-align: center;
+		line-height: 90rpx;
+		color: #fff;
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+
+	.invalid-form-btn {
+		background-color: #e3e0e0;
+	}
+
+	.form-hint {
+		width: 100%;
+		padding: 46rpx 0 0;
+		font-size: 24rpx;
+		line-height: 1.2;
+		color: #c1c1c1;
+		display: flex;
+		justify-content: center;
+		align-items: stretch;
+
+		.hint-btn {
+			color: $Theme-Color;
+		}
+
+		.form-hint-link {
+			margin: 0 10px;
+			width: 1rpx;
+			background-color: #cfcfcf;
+		}
+	}
+
+	.code-box {
+		width: 100%;
+		margin-top: 50rpx;
+
+		.code-hint {
+			margin-top: 50rpx;
+			font-size: 28rpx;
+			display: inline-block;
+			color: #666;
+		}
+	}
+
+	.login-title {
+		font-size: 34rpx !important;
+	}
+
+	.login-content {
+		padding-bottom: 0 !important;
+	}
+
+	.form-lable {
+		min-width: 100rpx;
+		text-align: center;
+		padding: 0 20rpx;
+		flex-shrink: 0;
+	}
+
+	.form-item {
+		width: 100%;
+		min-height: 100rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1rpx solid $border-color4;
+
+		.form-input {
+			flex: 1;
+			font-size: 26rpx;
+		}
+
+		.form-input-place {
+			font-size: 26rpx;
+			font-weight: 800;
+		}
+
+		.form-code {
+			flex-shrink: 0;
+			padding-left: 10rpx;
+			font-size: 26rpx;
+			color: $Theme-Color;
+		}
+	}
+
+
+	.form-btn {
+		margin-top: 80rpx !important;
+	}
+</style>

pages/content/safety-set.vue

@@ -18,7 +18,7 @@
 					<text class="more-icon iconfont">&#xe88e;</text>
 				</view>
 			</view>
-			<view class="safety-set-item">
+			<view class="safety-set-item" @click.stop="setGoogle()">
 				<text class="safety-set-lable">谷歌验证</text>
 				<view class="safety-set-more">
 					<text class="more-lable">绑定</text>
@@ -79,7 +79,8 @@
 		name: 'safety-set',
 		data() {
 			return {
-				userInfo:{}
+				userInfo:{},
+				account:''
 			};
 		},
 		onShow() {
@@ -89,6 +90,7 @@
 			getUserInfo() {
 				Way_getUserInfo().then(res => {
 					this.userInfo = res
+					this.account = res.email || res.phone
 				})
 			},
 			changePassword() {
@@ -106,6 +108,11 @@
 				uni.navigateTo({
 					url:'/pages/content/money-password'
 				})
+			},
+			setGoogle(){
+				uni.navigateTo({
+					url:`/pages/content/Google?account=${this.account}`
+				})
 			}
 		}
 	}

pages/login/safety-verification.vue

@@ -145,6 +145,9 @@
 						case '1':
 							path = `/pages/login/reset-pswd?account=${this.account}&code=${this.code}`;
 							break
+						case '1':
+							path = `/pages/content/google-verification`;
+							break
 
 					}
 					if (path) {