yoe_home_pc/src/views/enterprise/securitySetting/index.vue

<template>
  <div class="security-setting-container">
    <!-- 顶部返回 -->
    <div class="page-header">
      <el-button link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </el-button>
      <span class="page-title">安全设置</span>
    </div>

    <div class="page-content">
      <!-- 企业信息头部 -->
      <div class="company-header">
        <div class="company-logo">
          <el-icon :size="30" color="#999"><OfficeBuilding /></el-icon>
        </div>
        <div class="company-info">
          <div class="company-name">{{ companyData.companyName }}</div>
          <el-tag type="danger" size="small">{{ companyData.role }}</el-tag>
        </div>
      </div>

      <!-- 登录密码 -->
      <div class="setting-card">
        <div class="setting-icon">
          <el-icon :size="20" color="#fff"><Grid /></el-icon>
        </div>
        <div class="setting-content">
          <div class="setting-title">登录密码</div>
          <div class="setting-desc">建议您定期更换密码，设置安全性高的密码可以使帐号更安全</div>
        </div>
        <el-button type="danger" @click="handleModifyPassword">修改</el-button>
      </div>

      <!-- 安全手机 -->
      <div class="setting-card">
        <div class="setting-icon">
          <el-icon :size="20" color="#fff"><Grid /></el-icon>
        </div>
        <div class="setting-content">
          <div class="setting-title">安全手机{{ securityData.phone }}</div>
          <div class="setting-desc">安全手机可以用于登录帐号，重置密码或其他安全验证</div>
        </div>
        <el-button type="danger" @click="handleChangePhone">更换</el-button>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <el-dialog v-model="passwordDialogVisible" title="修改登录密码" width="450px">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSavePassword">确定</el-button>
      </template>
    </el-dialog>

    <!-- 修改手机弹窗 -->
    <el-dialog v-model="phoneDialogVisible" title="修改安全手机" width="450px">
      <el-form ref="phoneFormRef" :model="phoneForm" :rules="phoneRules" label-width="100px">
        <el-form-item label="新手机号" prop="phone">
          <el-input v-model="phoneForm.phone" placeholder="请输入新手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="code-input">
            <el-input v-model="phoneForm.code" placeholder="请输入验证码" />
            <el-button type="danger" :disabled="countdown > 0" @click="handleSendCode">
              {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="phoneDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSavePhone">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, OfficeBuilding, Grid } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const companyData = reactive({ companyName: '中国南方电网', role: '采购负责人' })
const securityData = reactive({ phone: '180****7722' })

const passwordDialogVisible = ref(false)
const passwordFormRef = ref()
const passwordForm = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' })

const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }],
  confirmPassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }, { validator: validateConfirmPassword, trigger: 'blur' }]
}

const phoneDialogVisible = ref(false)
const phoneFormRef = ref()
const phoneForm = reactive({ phone: '', code: '' })
const countdown = ref(0)

const phoneRules = {
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

const handleBack = () => { router.push('/enterprise/companyInfo') }
const handleModifyPassword = () => { router.push('/enterprise/securitySetting/resetPassword') }
const handleSavePassword = async () => { const valid = await passwordFormRef.value?.validate(); if (!valid) return; ElMessage.success('密码修改成功'); passwordDialogVisible.value = false }
const handleChangePhone = () => { router.push('/enterprise/securitySetting/changePhone') }
const handleSendCode = () => { if (!phoneForm.phone) { ElMessage.warning('请先输入手机号'); return }; countdown.value = 60; const timer = setInterval(() => { countdown.value--; if (countdown.value <= 0) clearInterval(timer) }, 1000); ElMessage.success('验证码已发送') }
const handleSavePhone = async () => { const valid = await phoneFormRef.value?.validate(); if (!valid) return; ElMessage.success('手机号修改成功'); phoneDialogVisible.value = false }
</script>

<style scoped lang="scss">
.security-setting-container { background: #f5f5f5; min-height: 100%; }
.page-header { background: #fff; padding: 15px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eee; .page-title { font-size: 16px; font-weight: bold; color: #333; } }
.page-content { padding: 20px; }
.company-header { display: flex; align-items: center; gap: 15px; padding: 20px; background: #fff; border-radius: 8px; margin-bottom: 15px; .company-logo { width: 50px; height: 50px; border-radius: 8px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; } .company-info { .company-name { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px; } } }
.setting-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: #fff; border-radius: 8px; margin-bottom: 15px; .setting-icon { width: 40px; height: 40px; border-radius: 8px; background: #e60012; display: flex; align-items: center; justify-content: center; } .setting-content { flex: 1; .setting-title { font-size: 15px; font-weight: 500; color: #333; margin-bottom: 5px; } .setting-desc { font-size: 13px; color: #999; } } }
.code-input { display: flex; gap: 10px; .el-input { flex: 1; } }
</style>