lingji-work-fe/src/views/components/login/index.vue

<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
  <div
    class="relative w-100vw h-100vh min-h-175 flex justify-center items-center bg-cover bg-center bg-#f0edff login-wrap"
  >
    <section class="login-bg"></section>
    <section class="relative flex justify-between w-1200 h-100% my-0 mx-auto">
      <div class="flex flex-col justify-center flex-column h-100% mt--12.5">
        <img src="@/assets/img/Frame.svg" class="w-480 h-480 mr-40" alt="" />
      </div>
      <div class="flex items-center w-400 h-100%">
        <a-space
          direction="vertical"
          size="large"
          align="center"
          class="w-400 bg-#fff rounded-8px shadow-[0_4px_10px_0_#6D4CFE33] px-40px py-48px"
        >
          <img src="@/assets/img/LOGO.svg" alt="" class="w-155 h-37 mb-8px" />
          <span class="text-4 color-#737478">AI营销工具</span>
          <a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
            <a-form-item field="mobile" hide-label>
              <a-input
                v-model="loginForm.mobile"
                placeholder="输入手机号"
                class="form-input border border-solid border-#d7d7d9 x w-100% h-48px text-14 rounded-4px color-#333 bg-#fff"
                clearable
                allow-clear
                @blur="validateField('mobile')"
                @input="clearError('mobile')"
              />
            </a-form-item>
            <a-form-item field="captcha" hide-label>
              <div
                class="form-input border border-solid border-#d7d7d9 w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center"
              >
                <a-input
                  v-model="loginForm.captcha"
                  placeholder="验证码"
                  style="background-color: #fff; border: none"
                  allow-clear
                  maxlength="6"
                  @blur="validateField('captcha')"
                  @input="clearError('captcha')"
                />
                <span
                  class="w-120 font-400 text-right mr-4 text-16px"
                  :style="{
                    color: countdown > 0 || hasGetCode ? '#6D4CFE' : '#211F24',
                    cursor: countdown > 0 ? 'not-allowed' : 'pointer',
                  }"
                  @click="getCode"
                  >{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
                >
              </div>
            </a-form-item>
            <a-form-item hide-label class="mt-68px mb-16px">
              <div
                type="primary"
                class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
                :class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
                :style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
                :disabled="disabledSubmitBtn"
                @click="handleSubmit"
              >
                {{ isLogin ? '登录' : '注册并开通企业账号' }}
              </div>
            </a-form-item>
          </a-form>
          <a-space class="text-12px color-#737478 justify-start items-center">
            <a-checkbox v-model="hasCheck" class="!text-12px mr-8px"></a-checkbox>
            <span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
            <a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
            <span class="text-12px color-#737478">和</span>
            <a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
          </a-space>
        </a-space>
      </div>
    </section>

    <section class="login-footer">
      <p class="text">闽公网安备 352018502850842号 闽ICP备20250520582号 © 2025小题科技</p>
    </section>
  </div>
  <PuzzleVerification
    :show="isVerificationVisible"
    @submit="handleVerificationSubmit"
    @cancel="isVerificationVisible = false"
  />
  <a-modal :visible="visible" unmountOnClose hide-cancel @ok="handleOk" @cancel="handleCancel">
    <template #title>
      <span style="text-align: left; width: 100%">选择账号</span>
    </template>
    <div class="account-bind-container">
      <a-card :bordered="false" class="bind-card">
        <div class="bind-header">
          <a-typography-text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</a-typography-text>
        </div>

        <a-list :bordered="false" :split="false" class="account-list">
          <a-list-item
            v-for="(account, index) in accounts"
            :key="index"
            class="account-item"
            :class="{
              selected: selectedAccountIndex === index,
              'cursor-no-drop': account.status === 0,
              'cursor-pointer': account.status !== 0,
            }"
            @click="selectAccount(account, index)"
          >
            <a-list-item-meta>
              <template #title>
                <div style="display: flex; align-items: center; gap: 12px">
                  <a-checkbox :model-value="selectedAccountIndex === index" />
                  <a-typography-text>{{ account.name || '-' }}</a-typography-text>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { ref, reactive, onUnmounted, computed } from 'vue';
import { useUserStore } from '@/stores';
import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { handleUserLogin } from '@/utils/user';
import router from '@/router';

const formRef = ref();
const userStore = useUserStore();
const enterpriseStore = useEnterpriseStore();
const countdown = ref(0);
let timer = ref();
const isLogin = ref(true);
const isVerificationVisible = ref(false);
const visible = ref(false);
const hasGetCode = ref(false);
const submitting = ref(false);
const hasCheck = ref(false);
const mobileNumber = ref('');
const selectedAccountIndex = ref(0);

const accounts = ref([]);

const loginForm = reactive({
  mobile: '',
  captcha: '',
});

// 表单校验规则
const formRules = {
  mobile: [
    {
      required: true,
      message: '请填写手机号',
      trigger: ['blur', 'change'],
    },
    {
      validator: (value: string, callback: (error?: string) => void) => {
        if (!/^1[3-9]\d{9}$/.test(value)) {
          callback('手机号格式不正确');
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    },
  ],
  captcha: [
    {
      required: true,
      message: '请填写验证码',
      trigger: ['blur', 'change'],
    },
    {
      validator: (value: string, callback: (error?: string) => void) => {
        if (!/^\d{6}$/.test(value)) {
          callback('验证码必须是6位数字');
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    },
  ],
};

// 表单是否有效
const isFormValid = computed(() => {
  return (
    loginForm.mobile.trim() !== '' &&
    /^1[3-9]\d{9}$/.test(loginForm.mobile) &&
    loginForm.captcha.trim() !== '' &&
    /^\d{6}$/.test(loginForm.captcha)
  );
});

const disabledSubmitBtn = computed(() => {
  return !isFormValid.value;
});

const selectAccount = (account: any, index: any) => {
  if (account.status === 0) {
    return;
  }

  enterpriseStore.setEnterpriseInfo(account);
  selectedAccountIndex.value = index;
};

const validateField = (field: string) => {
  formRef.value.validateField(field);
};

const clearError = (field: string) => {
  formRef.value.clearValidate(field);
};

const handleOk = async () => {
  visible.value = false;

  handleUserLogin();
};

const handleCancel = () => {
  visible.value = false;
};

const getCode = async () => {
  if (countdown.value > 0) return;

  // 先重置验证状态
  formRef.value.clearValidate('mobile');

  const result = await formRef.value.validateField('mobile');
  // 只有当验证通过时才会显示滑块验证
  if (result === true || result === undefined) {
    isVerificationVisible.value = true;
  }
};

// 验证码验证通过后
const handleVerificationSubmit = async () => {
  isVerificationVisible.value = false;
  startCountdown();

  try {
    await fetchLoginCaptCha({ mobile: loginForm.mobile });
    AMessage.success('验证码发送成功');
  } catch (error) {
    // 重置倒计时
    countdown.value = 0;
    clearInterval(timer.value);
  }
};

// 获取用户信息
const getProfileInfo = async () => {
  const { code, data } = await fetchProfileInfo();
  if (code === 200) {
    let enterprises = data['enterprises'];
    mobileNumber.value = data['mobile'];
    accounts.value = enterprises;
    enterpriseStore.setEnterpriseInfo(data);

    if (enterprises.length > 0) {
      if (enterprises.length === 1) {
        handleUserLogin();
      } else {
        // 多个企业时候需要弹窗让用户选择企业
        visible.value = true;
      }
    }
  }
};

// 提交表单
const handleSubmit = async () => {
  if (disabledSubmitBtn.value) return;

  try {
    // 校验所有字段
    await formRef.value.validate();

    if (!hasCheck.value) {
      AMessage.error('请先勾选同意用户协议');
      return;
    }

    submitting.value = true;
    const { code, data } = await fetchAuthorizationsCaptcha(loginForm);

    if (code === 200) {
      // 处理登录成功逻辑
      AMessage.success(isLogin.value ? '登录成功' : '注册成功');
      userStore.setToken(data.access_token);
      getProfileInfo();
    }
  } catch (error) {
    // 错误信息会显示在输入框下方
  } finally {
    submitting.value = false;
  }
};

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60;
  hasGetCode.value = true;
  timer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer.value as number);
      timer.value = null;
    }
  }, 1000);
};

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>