webs/power_leasing/src/views/account/securitySettings.vue

<template>
  <div class="security-settings" v-loading="statusLoading">
    <div class="security-item-wrapper">
      <div class="security-item">
        <div class="security-left">
          <div class="security-icon">
            <i class="el-icon-lock"></i>
          </div>
          <div class="security-info">
            <div class="security-title">双重验证</div>
            <p class="security-desc">用于登录帐户、结算订单、提现、修改登录密码等，涉及账户安全的重要操作。</p>
          </div>
        </div>
        <div class="security-right">
          <span class="security-status" :class="getStatusClass">
            {{ getStatusText }}
          </span>
          <el-button
            :type="getButtonType"
            @click="handleButtonClick"
            :loading="loading"
            class="security-btn"
          >
            {{ getButtonText }}
          </el-button>
        </div>
      </div>
      <div class="security-divider"></div>
    </div>

    <!-- 第一步：显示二维码和密钥 -->
    <el-dialog
      title="开启双重验证 - 步骤 1/2"
      :visible.sync="step1Visible"
      width="600px"
      :close-on-click-modal="false"
      @close="handleStep1Close"
    >
      <div class="step1-content">
        <div class="instruction-text">
          <p>请使用您手机上的谷歌身份验证器 (Google Authenticator) 或其它兼容应用程序扫描下方二维码，也可手动输入以下密钥。</p>
        </div>
        
        <div class="qr-section">
          <div class="qr-code-wrapper" v-if="qrCodeUrl">
            <img :src="getQrCodeSrc" alt="二维码" class="qr-code" />
          </div>
          <div v-else class="qr-loading">
            <i class="el-icon-loading"></i>
            <span>加载中...</span>
          </div>
        </div>

        <div class="secret-key-section">
          <div class="secret-key-label">或手动输入密钥：</div>
          <div class="secret-key-input-group">
            <el-input
              v-model="secretKey"
              readonly
              class="secret-key-input"
            />
            <el-button
              type="primary"
              @click="handleCopySecret"
              :disabled="!secretKey"
            >
              复制
            </el-button>
          </div>
        </div>

        <div class="warning-box">
          <i class="el-icon-warning"></i>
          <div class="warning-text">
            <p>请妥善保存密钥，避免被盗或丢失。如遇手机丢失等情况，可通过该密钥恢复您的谷歌验证。如密钥丢失，需要提交工单通过人工客服重置，处理时间需7天。</p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="step1Visible = false">取消</el-button>
        <el-button type="primary" @click="handleNextToStep2" :disabled="!qrCodeUrl || !secretKey">
          下一步
        </el-button>
      </span>
    </el-dialog>

    <!-- 第二步：验证 -->
    <el-dialog
      title="开启双重验证 - 步骤 2/2"
      :visible.sync="step2Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleStep2Close"
    >
      <el-form
        ref="verifyForm"
        :model="verifyForm"
        :rules="verifyRules"
        label-position="top"
      >
        <el-form-item label="登录密码" prop="password">
          <el-input
            v-model="verifyForm.password"
            type="password"
            placeholder="请输入密码（8-32位）"
            show-password
            clearable
          />
          <!-- 密码规则提示 -->
          <div class="password-tip">
            <i class="el-icon-info"></i>
            <span>密码需包含大小写字母、数字和特殊字符，长度8-32位</span>
          </div>
        </el-form-item>

        <el-form-item label="邮箱验证码" prop="emailCode">
          <div class="code-input-group">
            <el-input
              v-model="verifyForm.emailCode"
              placeholder="请输入邮箱验证码"
              class="code-input"
              maxlength="10"
              clearable
            />
            <el-button
              type="primary"
              @click="handleSendEmailCode"
              :loading="sendingCode"
              :disabled="countdown > 0"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
            </el-button>
          </div>
          <div class="help-link">
            <a href="javascript:void(0)" @click="handleCannotGetCode">无法获取验证码?</a>
          </div>
        </el-form-item>

        <el-form-item label="谷歌验证码" prop="googleCode">
          <el-input
            v-model="verifyForm.googleCode"
            placeholder="请输入6位动态口令"
            maxlength="6"
            @input="handleGoogleCodeInput"
           
          />
          
          <div class="help-link">
            <a href="javascript:void(0)" @click="handleCannotGetGoogleCode">无法获取验证码?</a>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleBackToStep1">上一步</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="submitting">
          确定
        </el-button>
      </span>
    </el-dialog>

    <!-- 关闭双重验证弹窗 -->
    <el-dialog
      title="关闭双重验证"
      :visible.sync="closeDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleCloseDialogClose"
    >
      <el-form
        ref="closeForm"
        :model="closeForm"
        :rules="closeRules"
        label-position="top"
      >
        <el-form-item label="邮箱验证码" prop="emailCode">
          <div class="code-input-group">
            <el-input
              v-model="closeForm.emailCode"
              placeholder="请输入邮箱验证码"
              class="code-input"
              maxlength="10"
              clearable
            />
            <el-button
              type="primary"
              @click="handleSendCloseEmailCode"
              :loading="sendingCloseCode"
              :disabled="closeCountdown > 0"
            >
              {{ closeCountdown > 0 ? `${closeCountdown}秒后重试` : '发送验证码' }}
            </el-button>
          </div>
          
        </el-form-item>

        <el-form-item label="谷歌验证码" prop="googleCode">
          <el-input
            v-model="closeForm.googleCode"
            placeholder="请输入6位动态口令"
            maxlength="6"
            @input="handleCloseGoogleCodeInput"
            clearable
          />
         
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmClose" :loading="closing">
          确定
        </el-button>
      </span>
    </el-dialog>

    <!-- 开启双重验证弹窗 -->
    <el-dialog
      title="开启双重验证"
      :visible.sync="openDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="handleOpenDialogClose"
    >
      <el-form
        ref="openForm"
        :model="openForm"
        :rules="openRules"
        label-position="top"
      >
        <el-form-item label="邮箱验证码" prop="emailCode">
          <div class="code-input-group">
            <el-input
              v-model="openForm.emailCode"
              placeholder="请输入邮箱验证码"
              class="code-input"
              maxlength="10"
              clearable
            />
            <el-button
              type="primary"
              @click="handleSendOpenEmailCode"
              :loading="sendingOpenCode"
              :disabled="openCountdown > 0"
            >
              {{ openCountdown > 0 ? `${openCountdown}秒后重试` : '发送验证码' }}
            </el-button>
          </div>
        </el-form-item>

        <el-form-item label="谷歌验证码" prop="googleCode">
          <el-input
            v-model="openForm.googleCode"
            placeholder="请输入6位动态口令"
            maxlength="6"
            @input="handleOpenGoogleCodeInput"
            clearable
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmOpen" :loading="opening">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBindInfo, bindGoogle, sendOpenGoogleCode,getGoogleStatus,closeStepTwo,sendCloseGoogleCode,openStepTwo } from '../../api/verification'
import { rsaEncrypt } from '../../utils/rsaEncrypt'

export default {
  name: 'SecuritySettings',
  data() {
    /**
     * 密码格式验证
     * 8-32位，包含大小写字母、数字和特殊字符
     */
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
        return
      }
      
      // 密码验证正则：8-32位，包含大小写字母、数字和特殊字符（！@#￥%……&.*）
      const regexPassword = /^(?!.*[\u4e00-\u9fa5])(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/
      
      if (!regexPassword.test(value)) {
        callback(new Error('密码应包含大小写字母、数字和特殊字符，长度8-32位'))
        return
      }
      
      callback()
    }

    return {
      isEnabled: false, // 是否已开启双重验证
      loading: false,
      statusLoading: false, // 状态查询的 loading
      step1Visible: false,
      step2Visible: false,
      closeDialogVisible: false, // 关闭双重验证弹窗
      openDialogVisible: false, // 开启双重验证弹窗
      qrCodeUrl: '',
      secretKey: '',
      sendingCode: false,
      countdown: 0,
      countdownTimer: null,
      sendingCloseCode: false, // 发送关闭验证码的 loading
      closeCountdown: 0, // 关闭验证码倒计时
      closeCountdownTimer: null, // 关闭验证码倒计时定时器
      sendingOpenCode: false, // 发送开启验证码的 loading
      openCountdown: 0, // 开启验证码倒计时
      openCountdownTimer: null, // 开启验证码倒计时定时器
      closing: false, // 关闭双重验证的 loading
      opening: false, // 开启双重验证的 loading
      submitting: false,
      verifyForm: {
        password: '',
        emailCode: '',
        googleCode: ''
      },
      closeForm: {
        emailCode: '',
        googleCode: ''
      },
      openForm: {
        emailCode: '',
        googleCode: ''
      },
      verifyRules: {
        password: [
          { required: true, validator: validatePassword, trigger: 'blur' }
        ],
        emailCode: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
          { min: 1, max: 10, message: '验证码长度为1-10位', trigger: 'blur' }
        ],
        googleCode: [
          { required: true, message: '请输入谷歌验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur' }
        ]
      },
      closeRules: {
        emailCode: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
          { min: 1, max: 10, message: '验证码长度为1-10位', trigger: 'blur' }
        ],
        googleCode: [
          { required: true, message: '请输入谷歌验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur' }
        ]
      },
      openRules: {
        emailCode: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
          { min: 1, max: 10, message: '验证码长度为1-10位', trigger: 'blur' }
        ],
        googleCode: [
          { required: true, message: '请输入谷歌验证码', trigger: 'blur' },
          { pattern: /^\d{6}$/, message: '请输入6位数字', trigger: 'blur' }
        ]
      },
      googleStatus: 1 // 谷歌验证状态：0 开启；1 未绑定；2 关闭
    }
  },
  computed: {
    /**
     * 获取二维码图片源（处理 Base64 格式）
     */
    getQrCodeSrc() {
      if (!this.qrCodeUrl) return ''
      // 如果已经是完整的 data URI，直接返回
      if (this.qrCodeUrl.startsWith('data:')) {
        return this.qrCodeUrl
      }
      // 如果是 Base64 字符串，添加前缀
      return `data:image/png;base64,${this.qrCodeUrl}`
    },
    /**
     * 获取状态显示文字
     * 0 开启；1 未绑定；2 关闭
     */
    getStatusText() {
      switch (this.googleStatus) {
        case 0:
          return '已开启' // 0 开启 -> 显示已开启
        case 1:
          return '未绑定' // 1 未绑定
        case 2:
          return '已关闭' // 2 关闭 -> 显示已关闭
        default:
          return '未绑定'
      }
    },
    /**
     * 获取按钮文字
     * 0 开启；1 未绑定；2 关闭
     */
    getButtonText() {
      switch (this.googleStatus) {
        case 0:
          return '关闭' // 0 开启 -> 按钮显示关闭
        case 1:
          return '设置' // 1 未绑定 -> 按钮显示设置
        case 2:
          return '开启' // 2 关闭 -> 按钮显示开启
        default:
          return '设置'
      }
    },
    /**
     * 获取状态样式类
     * 0 开启；1 未绑定；2 关闭
     */
    getStatusClass() {
      return {
        'status-enabled': this.googleStatus === 0, // 状态0（开启）显示绿色
        'status-bound': this.googleStatus === 2 // 状态2（关闭）可以有不同的样式
      }
    },
    /**
     * 获取按钮类型
     * 0 开启；1 未绑定；2 关闭
     */
    getButtonType() {
      switch (this.googleStatus) {
        case 0:
          return 'danger' // 0 开启 -> 关闭按钮使用危险色（红色）
        case 1:
          return 'primary' // 1 未绑定 -> 设置按钮使用主色（蓝色）
        case 2:
          return 'primary' // 2 关闭 -> 开启按钮使用主色（蓝色）
        default:
          return 'primary'
      }
    }
  },
  mounted() {
    this.check2FAStatus()
  },
  beforeDestroy() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer)
    }
    if (this.closeCountdownTimer) {
      clearInterval(this.closeCountdownTimer)
    }
    if (this.openCountdownTimer) {
      clearInterval(this.openCountdownTimer)
    }
  },
  methods: {
    /**
     * 检查双重验证状态
     * 返回值：0 开启；1 未绑定；2 关闭
     */
    async check2FAStatus() {
      this.statusLoading = true
      try {
        const res = await getGoogleStatus()
        if (res && (res.code === 0 || res.code === 200)) {
          const status = res.data?.status ?? res.data ?? 1
          // 0: 开启
          // 1: 未绑定
          // 2: 关闭
          this.googleStatus = status
          this.isEnabled = status === 0 // 兼容旧逻辑
        } else {
          // 如果接口调用失败，默认未绑定
          this.googleStatus = 1
          this.isEnabled = false
        }
      } catch (e) {
        console.error('查询谷歌绑定状态失败', e)
        // 出错时默认未绑定
        this.googleStatus = 1
        this.isEnabled = false
      } finally {
        this.statusLoading = false
      }
    },
    /**
     * 处理按钮点击
     * 0 开启；1 未绑定；2 关闭
     */
    handleButtonClick() {
      switch (this.googleStatus) {
        case 0:
          // 0 开启 -> 点击关闭
          this.handleDisable2FA()
          break
        case 1:
          // 1 未绑定 -> 点击设置（开启）
          this.handleEnable2FA()
          break
        case 2:
          // 2 关闭 -> 点击开启
          this.handleEnable2FA()
          break
        default:
          this.handleEnable2FA()
      }
    },
    /**
     * 开启双重验证
     * 状态 1（未绑定）：需要先获取二维码和密钥
     * 状态 2（已关闭）：直接显示开启验证弹窗
     */
    async handleEnable2FA() {
      // 如果是未绑定状态，需要先获取二维码和密钥
      if (this.googleStatus === 1) {
        this.loading = true
        try {
          const res = await getBindInfo()
          if (res && (res.code === 0 || res.code === 200)) {
            // img 是 Base64 格式的二维码图片
            this.qrCodeUrl = res.data?.img || ''
            // secret 是返回的密钥
            this.secretKey = res.data?.secret || ''
            console.log('getBindInfo 返回数据:', res.data) // 调试用
            console.log('保存的 secretKey:', this.secretKey) // 调试用
            if (this.qrCodeUrl || this.secretKey) {
              this.step1Visible = true
            } else {
              this.$message.error('获取绑定信息失败，请稍后重试')
            }
          } else {
            this.$message.error(res?.message || res?.msg || '获取绑定信息失败')
          }
        } catch (e) {
          console.error('获取绑定信息失败', e)
          this.$message.error('获取绑定信息失败，请稍后重试')
        } finally {
          this.loading = false
        }
      } else {
        // 如果是已关闭状态，直接显示开启验证弹窗
        this.openDialogVisible = true
      }
    },
    /**
     * 关闭双重验证 - 显示弹窗
     */
    handleDisable2FA() {
      this.closeDialogVisible = true
    },
    /**
     * 发送关闭双重验证的邮箱验证码
     */
    async handleSendCloseEmailCode() {
      if (this.closeCountdown > 0) return

      this.sendingCloseCode = true
      try {
        const res = await sendCloseGoogleCode() // 不需要参数
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('验证码已发送到您的邮箱')
          this.startCloseCountdown()
        } else {
          this.$message.error(res?.message || res?.msg || '发送验证码失败')
        }
      } catch (e) {
        console.error('发送验证码失败', e)
        this.$message.error('发送验证码失败，请稍后重试')
      } finally {
        this.sendingCloseCode = false
      }
    },
    /**
     * 开始关闭验证码倒计时
     */
    startCloseCountdown() {
      this.closeCountdown = 60
      this.closeCountdownTimer = setInterval(() => {
        this.closeCountdown--
        if (this.closeCountdown <= 0) {
          clearInterval(this.closeCountdownTimer)
          this.closeCountdownTimer = null
        }
      }, 1000)
    },
    /**
     * 关闭双重验证弹窗的谷歌验证码输入（仅数字）
     */
    handleCloseGoogleCodeInput(val) {
      this.closeForm.googleCode = val.replace(/\D/g, '').slice(0, 6)
    },
    /**
     * 确认关闭双重验证
     */
    async handleConfirmClose() {
      try {
        const valid = await this.$refs.closeForm.validate()
        if (!valid) return

        this.closing = true
        const params = {
          eCode: this.closeForm.emailCode, // 邮箱验证码
          gCode: this.closeForm.googleCode // 谷歌验证码
        }

        const res = await closeStepTwo(params)
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('双重验证已关闭')
          this.closeDialogVisible = false
          this.googleStatus = 2 // 设置为已绑定，关闭
          this.isEnabled = false
          this.handleCloseDialogClose()
          // 刷新状态
          this.check2FAStatus()
        } else {
          this.$message.error(res?.message || res?.msg || '关闭失败，请检查输入信息')
        }
      } catch (e) {
        console.error('关闭双重验证失败', e)
        this.$message.error('关闭失败，请稍后重试')
      } finally {
        this.closing = false
      }
    },
    /**
     * 关闭双重验证弹窗关闭时的处理
     */
    handleCloseDialogClose() {
      this.closeForm = {
        emailCode: '',
        googleCode: ''
      }
      this.$refs.closeForm && this.$refs.closeForm.clearValidate()
    },
    /**
     * 发送开启双重验证的邮箱验证码
     */
    async handleSendOpenEmailCode() {
      if (this.openCountdown > 0) return

      this.sendingOpenCode = true
      try {
        const res = await sendOpenGoogleCode() // 不需要参数
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('验证码已发送到您的邮箱')
          this.startOpenCountdown()
        } else {
          this.$message.error(res?.message || res?.msg || '发送验证码失败')
        }
      } catch (e) {
        console.error('发送验证码失败', e)
        this.$message.error('发送验证码失败，请稍后重试')
      } finally {
        this.sendingOpenCode = false
      }
    },
    /**
     * 开始开启验证码倒计时
     */
    startOpenCountdown() {
      this.openCountdown = 60
      this.openCountdownTimer = setInterval(() => {
        this.openCountdown--
        if (this.openCountdown <= 0) {
          clearInterval(this.openCountdownTimer)
          this.openCountdownTimer = null
        }
      }, 1000)
    },
    /**
     * 开启双重验证弹窗的谷歌验证码输入（仅数字）
     */
    handleOpenGoogleCodeInput(val) {
      this.openForm.googleCode = val.replace(/\D/g, '').slice(0, 6)
    },
    /**
     * 确认开启双重验证
     */
    async handleConfirmOpen() {
      try {
        const valid = await this.$refs.openForm.validate()
        if (!valid) return

        this.opening = true
        const params = {
          eCode: this.openForm.emailCode, // 邮箱验证码
          gCode: this.openForm.googleCode // 谷歌验证码
        }

        const res = await openStepTwo(params)
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('双重验证已开启')
          this.openDialogVisible = false
          this.googleStatus = 0 // 设置为已绑定，开启
          this.isEnabled = true
          this.handleOpenDialogClose()
          // 刷新状态
          this.check2FAStatus()
        } else {
          this.$message.error(res?.message || res?.msg || '开启失败，请检查输入信息')
        }
      } catch (e) {
        console.error('开启双重验证失败', e)
        this.$message.error('开启失败，请稍后重试')
      } finally {
        this.opening = false
      }
    },
    /**
     * 开启双重验证弹窗关闭时的处理
     */
    handleOpenDialogClose() {
      this.openForm = {
        emailCode: '',
        googleCode: ''
      }
      this.$refs.openForm && this.$refs.openForm.clearValidate()
    },
    /**
     * 复制密钥
     */
    handleCopySecret() {
      if (!this.secretKey) return
      const input = document.createElement('input')
      input.value = this.secretKey
      document.body.appendChild(input)
      input.select()
      try {
        document.execCommand('copy')
        this.$message.success('密钥已复制到剪贴板')
      } catch (e) {
        this.$message.error('复制失败，请手动复制')
      }
      document.body.removeChild(input)
    },
    /**
     * 第一步关闭
     * 注意：不要清空 secretKey，因为第二步提交时需要用到
     * 只有在用户真正取消（点击取消按钮或 X）时才清空
     */
    handleStep1Close() {
      this.qrCodeUrl = ''
      // 不清空 secretKey，因为第二步提交时需要用到
      // 如果用户点击取消，会在 handleStep2Close 中清空
    },
    /**
     * 进入第二步
     */
    handleNextToStep2() {
      if (!this.qrCodeUrl && !this.secretKey) {
        this.$message.warning('请先获取二维码或密钥')
        return
      }
      this.step1Visible = false
      this.step2Visible = true
    },
    /**
     * 返回第一步
     */
    handleBackToStep1() {
      this.step2Visible = false
      this.step1Visible = true
    },
    /**
     * 第二步关闭
     */
    handleStep2Close() {
      this.verifyForm = {
        password: '',
        emailCode: '',
        googleCode: ''
      }
      this.$refs.verifyForm && this.$refs.verifyForm.clearValidate()
    },
    /**
     * 发送邮箱验证码
     */
    async handleSendEmailCode() {
      if (this.countdown > 0) return

      this.sendingCode = true
      try {
        const res = await sendOpenGoogleCode()
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('验证码已发送到您的邮箱')
          this.startCountdown()
        } else {
          this.$message.error(res?.message || res?.msg || '发送验证码失败')
        }
      } catch (e) {
        console.error('发送验证码失败', e)
        this.$message.error('发送验证码失败，请稍后重试')
      } finally {
        this.sendingCode = false
      }
    },
    /**
     * 开始倒计时
     */
    startCountdown() {
      this.countdown = 60
      this.countdownTimer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.countdownTimer)
          this.countdownTimer = null
        }
      }, 1000)
    },
    /**
     * 双重验证码输入（仅数字）
     */
    handleGoogleCodeInput(val) {
      this.verifyForm.googleCode = val.replace(/\D/g, '').slice(0, 6)
    },
    /**
     * 确认提交
     */
    async handleConfirm() {
      try {
        const valid = await this.$refs.verifyForm.validate()
        if (!valid) return

        // 检查密钥是否存在
        if (!this.secretKey) {
          this.$message.warning('密钥不存在，请重新获取')
          return
        }

        // 检查密码是否存在
        if (!this.verifyForm.password) {
          this.$message.warning('请输入密码')
          return
        }

        this.submitting = true

        // 对密码进行 RSA 加密
        const encryptedPassword = await rsaEncrypt(this.verifyForm.password)
        if (!encryptedPassword) {
          this.$message.error('密码加密失败，请稍后重试')
          this.submitting = false
          return
        }

        const params = {
          eCode: this.verifyForm.emailCode, // 邮箱验证码
          gCode: this.verifyForm.googleCode, // 谷歌验证码
          pwd: encryptedPassword, // RSA 加密后的密码
          secret: this.secretKey // 上一步弹窗的密钥（getBindInfo 返回的 secret）
        }

        console.log('提交参数:', params) // 调试用，确认 secret 是否正确

        const res = await bindGoogle(params)
        if (res && (res.code === 0 || res.code === 200)) {
          this.$message.success('双重验证已成功开启')
          this.step2Visible = false
          this.googleStatus = 0 // 设置为已绑定，开启
          this.isEnabled = true
          this.handleStep2Close()
        } else {
          this.$message.error(res?.message || res?.msg || '绑定失败，请检查输入信息')
        }
      } catch (e) {
        console.error('绑定失败', e)
       
      } finally {
        this.submitting = false
      }
    },
    /**
     * 无法获取验证码
     */
    handleCannotGetCode() {
      this.$message.info('请检查邮箱垃圾箱，或联系客服')
    },
    /**
     * 无法获取谷歌验证码
     */
    handleCannotGetGoogleCode() {
      this.$message.info('请确保已正确扫描二维码或输入密钥，并检查时间同步')
    }
  }
}
</script>

<style scoped>
.security-settings {
  padding: 0;
}

.security-item-wrapper {
  background: #fff;
  border-radius: 8px;
  overflow: visible; /* 改为 visible，允许内容溢出 */
  width: 100%;
}

.security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  width: 100%;
  min-width: 1000px; /* 设置最小宽度，确保有足够空间 */
}

.security-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0; /* 允许 flex 子元素收缩 */
}

.security-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-icon i {
  font-size: 24px;
  color: #667eea;
}

.security-info {
  flex: 1;
  text-align: left;
  min-width: 700px; /* 设置最小宽度，给文字更多显示空间 */
  flex-shrink: 0; /* 防止被压缩 */
}

.security-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  text-align: left;
}

.security-desc {
  margin: 0;
  font-size: 14px;
  color: #909399;
  line-height: 1.6;
  text-align: left;
}

.security-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.security-status {
  font-size: 13px;
  color: #f56c6c;
  font-weight: 500;
}

.security-status.status-enabled {
  color: #67c23a;
}

.security-btn {
  min-width: 70px;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.security-btn:hover {
  transform: translateY(-1px);
}

.security-btn.el-button--primary:hover {
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.security-btn.el-button--danger:hover {
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

.security-divider {
  height: 1px;
  background: #e4e7ed;
  margin: 0 24px;
}

/* 第一步对话框样式 */
.step1-content {
  padding: 0 8px;
}

.instruction-text {
  margin-bottom: 24px;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.qr-section {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.qr-code-wrapper {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.qr-code {
  width: 200px;
  height: 200px;
  display: block;
}

.qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #909399;
  gap: 12px;
}

.qr-loading i {
  font-size: 32px;
}

.secret-key-section {
  margin-bottom: 24px;
}

.secret-key-label {
  margin-bottom: 12px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.secret-key-input-group {
  display: flex;
  gap: 12px;
}

.secret-key-input {
  flex: 1;
}

.warning-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 6px;
  color: #f56c6c;
}

.warning-box i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* 第二步对话框样式 */
/* 调整弹窗内容区域的 padding，使左右对称 */
.security-settings :deep(.el-dialog__body) {
  padding: 20px 24px;
  text-align: left;
}

/* 第二步弹窗中 label 文字左对齐 */
.security-settings :deep(.el-form--label-top .el-form-item__label) {
  text-align: left;
  padding: 0 0 8px 0;
  justify-content: flex-start;
}

/* 确保表单项内容左对齐 */
.security-settings :deep(.el-form--label-top .el-form-item__content) {
  text-align: left;
}

/* 确保输入框左对齐 */
.security-settings :deep(.el-input) {
  text-align: left;
}

.security-settings :deep(.el-input__inner) {
  text-align: left;
}

.code-input-group {
  display: flex;
  gap: 12px;
}

.code-input {
  flex: 1;
}

.password-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  line-height: 1.5;
}

.password-tip span {
  flex: 1;
}

.password-tip .el-icon-info {
  color: #667eea;
  font-size: 14px;
  flex-shrink: 0;
}

.help-link {
  margin-top: 8px;
  font-size: 12px;
}

.help-link a {
  color: #667eea;
  text-decoration: none;
  cursor: pointer;
}

.help-link a:hover {
  text-decoration: underline;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>