yoe-shop-web/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%;
  width: 1200px;
  margin: 0 auto;
}
.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>