From c71ce0c9724230e151d004212a1bd153c73c75df Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Sun, 26 Apr 2026 11:10:56 +0800
Subject: [PATCH] 1
---
src/views/account/settings/googleAuthCode.vue | 233 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 233 insertions(+), 0 deletions(-)
diff --git a/src/views/account/settings/googleAuthCode.vue b/src/views/account/settings/googleAuthCode.vue
new file mode 100644
index 0000000..5071ad4
--- /dev/null
+++ b/src/views/account/settings/googleAuthCode.vue
@@ -0,0 +1,233 @@
+<template>
+ <div class="account-settings-info-view">
+ <a-form layout="vertical" :form="addUserform" ref="addUserform" v-if="!googleAuthBind">
+ <a-row :gutter="16" type="flex" justify="center">
+ <a-col :order="isMobile ? 2 : 1" :md="24" :lg="16">
+ <a-form-item label="秘钥">
+ <a-input
+ placeholder="请点击右侧 生成秘钥和二维码"
+ readonly
+ @click="handleCopy"
+ :addonAfter="addonContent"
+ v-decorator="['secret', { rules: [{ required: false, message: '请输入您的昵称' }] }]"
+ />
+ <img v-if="googleAuthimg" style="width: 100px;margin-top:10px;" :src="googleAuthimg"/>
+ </a-form-item>
+
+ <a-form-item label="谷歌验证码">
+ <a-input
+ placeholder="请输入谷歌验证码"
+ v-decorator="['googleAuthCode', { rules: [{ required: true, message: '请输入谷歌验证码' }] }]"
+ />
+ </a-form-item>
+
+ <!-- <a-form-item label="超级谷歌验证码">
+ <a-input
+ placeholder="请输入超级谷歌验证码"
+ v-decorator="['rootGoogleAuthCode', { rules: [{ required: true, message: '请输入超级谷歌验证码' }] }]"
+ />
+ </a-form-item> -->
+ <a-form-item>
+ <a-button type="primary" @click="saveinfo">绑定</a-button>
+ </a-form-item>
+ </a-col>
+ </a-row>
+ </a-form>
+ <div v-else style="">
+ <div style="margin-bottom: 20px;">已绑定</div>
+
+ <a-form-item label="谷歌验证码">
+ <a-input
+ placeholder="请输入谷歌验证码"
+ v-model="ggyzm"
+ v-decorator="['googleAuthCode', { rules: [{ required: true, message: '请输入谷歌验证码' }] }]"
+ />
+ </a-form-item>
+
+ <a-button type="primary" @click="adskille">解绑</a-button>
+ </div>
+ <avatar-modal ref="modal" @ok="setavatar" />
+ </div>
+</template>
+
+<script>
+import AvatarModal from './AvatarModal'
+import { baseMixin } from '@/store/app-mixin'
+import { adminlist, adminupdate,bindGoogleAuth,getLoginGoogleAuthSecret,getAdmin,unbindingGoogleAuth } from '@/api/managesettings'
+import pick from 'lodash.pick'
+export default {
+ mixins: [baseMixin],
+ components: {
+ AvatarModal,
+ },
+ data() {
+ return {
+ // cropper
+ addonContent: (
+ <a
+ onClick={this.handleGenerate} // 这里是点击事件
+ >
+ 生成秘钥和二维码
+ </a>
+ ),
+ preview: {},
+ googleAuthimg:'',
+ ggyzm:'',
+ userid:'',
+ googleAuthBind:'',
+ option: {
+ img: '/avatar2.jpg',
+ info: true,
+ size: 1,
+ outputType: 'jpeg',
+ canScale: false,
+ autoCrop: true,
+ // 只有自动截图开启 宽度高度才生效
+ autoCropWidth: 180,
+ autoCropHeight: 180,
+ fixedBox: true,
+ // 开启宽度和高度比例
+ fixed: true,
+ fixedNumber: [1, 1],
+ },
+ settingdetail: {},
+ addUserform: this.$form.createForm(this),
+ fields: ['googleAuthCode', 'secret','id'],
+ }
+ },
+ mounted() {
+ this.getnowuser()
+ },
+ methods: {
+ adskille(){
+ var values ={}
+ values.rootGoogleAuthCode = this.ggyzm
+ values.id = this.userid
+ unbindingGoogleAuth(values).then((res) => {
+ if (res.status == 0) {
+ this.getnowuser()
+ this.$message.success({ content: '解绑成功', duration: 2 });
+ form.resetFields();
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ },
+ getnowuser() {
+ getAdmin().then((res) => {
+ if(res.status==0){
+ this.userid = res.data.id
+ this.googleAuthBind = res.data.googleAuthBind
+ }
+ console.log(res);
+ })
+ },
+ setavatar(url) {
+ this.option.img = url
+ },
+ handleCopy() {
+ // 使用浏览器的 execCommand 来实现复制功能
+ const input = document.createElement('input');
+ input.value = this.addUserform.getFieldValue('secret'); // 这里用你的秘钥变量
+ document.body.appendChild(input);
+ input.select();
+ document.execCommand('copy');
+ document.body.removeChild(input);
+
+ this.$message.success('秘钥已复制');
+ },
+ handleGenerate() {
+ getLoginGoogleAuthSecret().then((res) => {
+ if (res.status == 0) {
+ // this.$set(this.$refs.addUserform.form, 'secret', res.data.googleAuthSecret);
+ this.addUserform.setFieldsValue({
+ secret: res.data.googleAuthSecret,
+ })
+ this.googleAuthimg = res.data.googleAuthImg;
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ },
+ saveinfo() {
+ const form = this.$refs.addUserform.form;
+ form.validateFields((errors, values) => {
+ if (!errors) {
+ values.id = this.userid
+ bindGoogleAuth(values).then((res) => {
+ if (res.status == 0) {
+ this.getnowuser()
+ this.$message.success({ content: '绑定成功', duration: 2 });
+ form.resetFields();
+ this.getnowuser();
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ }
+ });
+ }
+ },
+}
+</script>
+
+<style lang="less" scoped>
+.avatar-upload-wrapper {
+ height: 200px;
+ width: 100%;
+}
+
+.ant-upload-preview {
+ position: relative;
+ margin: 0 auto;
+ width: 100%;
+ max-width: 180px;
+ border-radius: 50%;
+ box-shadow: 0 0 4px #ccc;
+
+ .upload-icon {
+ position: absolute;
+ top: 0;
+ right: 10px;
+ font-size: 1.4rem;
+ padding: 0.5rem;
+ background: rgba(222, 221, 221, 0.7);
+ border-radius: 50%;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ }
+
+ .mask {
+ opacity: 0;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ transition: opacity 0.4s;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ i {
+ font-size: 2rem;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -1rem;
+ margin-top: -1rem;
+ color: #d6d6d6;
+ }
+ }
+
+ img,
+ .mask {
+ width: 100%;
+ max-width: 180px;
+ height: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+ }
+}
+</style>
+
+<style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3