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.contactName }}</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">修改密码(普通)</div>
          <div class="setting-desc">适用于记得原密码时，直接更新登录密码</div>
        </div>
        <el-button type="danger" @click="handleChangePassword">修改</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="normalPasswordDialogVisible" title="修改密码" width="450px">
      <el-form ref="normalPasswordFormRef" :model="normalPasswordForm" :rules="normalPasswordRules" label-width="100px">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input v-model="normalPasswordForm.oldPassword" type="password" show-password placeholder="请输入当前密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="normalPasswordForm.newPassword" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="normalPasswordForm.confirmPassword" type="password" show-password placeholder="请确认新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="normalPasswordDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSaveNormalPassword">确认</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 { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { ArrowLeft, OfficeBuilding, Grid } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { changePwd, normalChangePwd } from '@/api/pc/enterprise/index';
import { getCurrentUserInfo, updateComStaff } from '@/api/pc/organization/index';
import { onPath } from '@/utils/siteConfig';

const router = useRouter();

const companyData = reactive({ contactName: '', role: '' });
const securityData = reactive({ phone: '' });

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

// 普通修改密码弹窗相关
const normalPasswordDialogVisible = ref(false);
const normalPasswordFormRef = ref();
const normalPasswordForm = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' });

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

const validateNormalConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== normalPasswordForm.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 normalPasswordRules = {
  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: validateNormalConfirmPassword, 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({
    path: '/enterprise/securitySetting/resetPassword',
    query: {
      phone: securityData.phone
    }
  });
};
const handleChangePassword = () => {
  normalPasswordDialogVisible.value = true;
};

const handleSaveNormalPassword = async () => {
  const valid = await normalPasswordFormRef.value?.validate();
  if (!valid) return;

  try {
    const submitData = {
      oldPassword: normalPasswordForm.oldPassword,
      password: normalPasswordForm.newPassword,
      confirmPassword: normalPasswordForm.confirmPassword
    };

    const res: any = await normalChangePwd(submitData);
    if (res.code === 200) {
      ElMessage.success('密码修改成功');
      onlogout();
    }
  } catch (error) {
    // console.error('修改密码失败:', error);
  }
  normalPasswordDialogVisible.value = false;
  normalPasswordForm.oldPassword = '';
  normalPasswordForm.newPassword = '';
  normalPasswordForm.confirmPassword = '';
};

const getCurrentUser = async () => {
  const res = await getCurrentUserInfo();
  companyData.contactName = res.data.contactName;
  companyData.role = res.data.roleName;
  securityData.phone = res.data.phone;
  phoneForm.phone = res.data.phone;
};
const handleSavePassword = async () => {
  const valid = await passwordFormRef.value?.validate();
  if (!valid) return;
  ElMessage.success('密码修改成功');
  passwordDialogVisible.value = false;
};
const handleChangePhone = () => {
  router.push({
    path: '/enterprise/securitySetting/changePhone',
    query: {
      phone: securityData.phone
    }
  });
};
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;
};

const onlogout = () => {
  useUserStore()
    .logout()
    .then(() => {
      onPath('/login');
    });
};
onMounted(() => {
  getCurrentUser();
});
</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>