web/src/views/login/index.vue

<template>
  <div class="login flex justify-center items-center h-full">
    <img class="logo" src="../../assets/imgs/login_logo.png" />
    <div class="login-bg flex justify-center items-center">
      <div class="login-bg-inner-box text-center">
        <img src="../../assets/imgs/login_bg_inner.png" />
        <div class="title1">欢 迎 使 用</div>
        <div class="title2">项目质量控制管理平台</div>
      </div>
    </div>
    <div class="login-box">
      <div class="title1 flex justify-between items-center">
        <span>{{ forgetStatus ? '忘记密码' : '输入信息' }}</span>
        <t-button
          v-if="forgetStatus"
          variant="outline"
          @click="forgetStatus = false"
        >
          <template #icon><RollbackIcon /></template>
          返回登录
        </t-button>
        <t-button
          v-else
          variant="outline"
          @click="loginType = loginType === 'ACCOUNT' ? 'PHONE' : 'ACCOUNT'"
        >
          <template #icon><SwapRightIcon /></template>
          {{ loginType === 'ACCOUNT' ? '手机号' : '账号' }}登录
        </t-button>
      </div>
      <div class="title2" v-if="forgetStatus">{{ `请输入新的账号与密码` }}</div>
      <div class="title2" v-else>{{
        `请输入${loginType === 'ACCOUNT' ? '账号与密码' : '手机号与验证码'}`
      }}</div>
      <template v-if="!forgetStatus">
        <t-form
          ref="form"
          :data="formData"
          :label-width="0"
          class="login-form"
          :rules="rules"
          v-if="loginType === 'ACCOUNT'"
        >
          <t-form-item name="loginName">
            <t-input
              v-model="formData.loginName"
              clearable
              placeholder="请输入账号"
              size="large"
              @enter="loginHandle"
            >
              <template #prefix-icon>
                <desktop-icon />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password">
            <t-input
              v-model="formData.password"
              type="password"
              clearable
              placeholder="请输入密码"
              size="large"
              @enter="loginHandle"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
            </t-input>
          </t-form-item>
        </t-form>

        <t-form
          v-else
          ref="form2"
          :data="formData2"
          :label-width="0"
          class="login-form"
          :rules="rules2"
        >
          <t-form-item name="mobileNumber">
            <t-input
              v-model="formData2.mobileNumber"
              clearable
              placeholder="请输入你的手机号"
              size="large"
            >
              <template #prefix-icon>
                <CallIcon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="code">
            <div class="flex items-center">
              <t-input
                style="width: 170px"
                v-model="formData2.code"
                clearable
                placeholder="验证码"
                size="large"
              >
                <template #prefix-icon>
                  <MobileIcon />
                </template>
              </t-input>
              <t-button
                class="m-l-20px"
                style="width: 110px"
                :loading="loading"
                @click="getCode"
                >{{ isActive ? lastSeconds + 's' : '获取验证码' }}</t-button
              >
            </div>
          </t-form-item>
        </t-form>
        <t-link theme="primary" class="m-t-20px" @click="forgetStatus = true"
          >忘记密码</t-link
        >
        <t-button
          block
          class="m-t-30px"
          @click="loginHandle"
          size="large"
          theme="primary"
          >登 录</t-button
        >
      </template>
      <ForgetPwd v-else @success="findSuccess" />
    </div>
  </div>
  <!-- <button @click="loginHandle" class="m-t-10px">登录！</button> -->
</template>

<script setup name="Login">
import { ref, reactive, computed, watch } from 'vue';
import {
  DesktopIcon,
  LockOnIcon,
  RollbackIcon,
  SwapRightIcon,
  CallIcon,
  MobileIcon,
} from 'tdesign-icons-vue-next';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore, useAppStore } from '@/store';
import { MessagePlugin } from 'tdesign-vue-next';
import { getBase64 } from '@/utils/crypto';
import ForgetPwd from './forget-pwd.vue';
import { useRequest } from 'vue-request';
import { getVerifyCode } from '@/api/user';
import { useIntervalFn } from '@vueuse/core';
const { run, loading } = useRequest(getVerifyCode, {
  onSuccess: () => {
    MessagePlugin.success('验证码已发送');
  },
});
const lastSeconds = ref(10);
const countdown = () => {
  if (lastSeconds.value == 0) {
    pause();
  } else {
    lastSeconds.value = lastSeconds.value - 1;
  }
};
const { pause, resume, isActive } = useIntervalFn(
  () => {
    countdown();
  },
  1000,
  { immediate: false }
);
const getCode = () => {
  if (!formData2.mobileNumber) {
    MessagePlugin.error('请先输入手机号');
    return;
  }
  run({
    mobileNumber: formData2.mobileNumber,
  });
  // resume();
};
const loginType = ref('ACCOUNT');
const appStore = useAppStore();
const forgetStatus = ref(false);
const form = ref(null);
const form2 = ref(null);

const route = useRoute();
const router = useRouter();

const formData = reactive({
  loginName: '',
  password: '',
});
const formData2 = reactive({
  mobileNumber: '',
  code: '',
});
const rules = {
  loginName: [
    { required: true, message: '请输入账号', type: 'error', trigger: 'change' },
  ],
  password: [
    { required: true, message: '请输入密码', type: 'error', trigger: 'change' },
  ],
};
const rules2 = {
  mobileNumber: [
    {
      required: true,
      message: '请输入手机号',
      type: 'error',
      trigger: 'change',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      type: 'error',
      trigger: 'change',
    },
  ],
};

const userStore = useUserStore();

const loginHandle = () => {
  (loginType.value === 'ACCOUNT' ? form.value : form2.value)
    .validate()
    .then(async (result) => {
      const redirect = route.query.redirect
        ? route.query.redirect
        : '/my-workbenches';
      if (result === true) {
        let params =
          loginType.value === 'ACCOUNT'
            ? {
                loginName: formData.loginName,
                password: getBase64(formData.password),
              }
            : formData2;
        await userStore.login({
          ...params,
          type: loginType.value,
        });
        await userStore.requestUserMenu();
        await appStore.getFlowParams();
        if (redirect) {
          router.push(redirect);
        } else {
          router.push({ name: userStore.menus[0].name });
        }
      }
    });
};
const findSuccess = () => {
  forgetStatus.value = false;
  formData.loginName = '';
  formData.password = '';
};
</script>
<style lang="less" scoped>
.login {
  background: linear-gradient(180deg, #f4f9ff 0%, #d7eaff 100%);
  position: relative;
  min-height: 550px;

  .logo {
    width: 180px;
    z-index: 100;
    top: 48px;
    left: 48px;
    position: absolute;
  }
  .login-bg {
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    width: 70%;
    z-index: 99;
    background: url(../../assets//imgs/login_bg_grid.png) center center
      no-repeat;
    background-size: contain;
    .login-bg-inner-box {
      img {
        height: 260px;
        margin-bottom: 20px;
      }
      .title1 {
        font-size: 32px;
        color: #262626;
        margin-bottom: 15px;
        font-weight: bold;
        line-height: 40px;
      }
      .title2 {
        font-size: 20px;
        color: #8c8c8c;
        line-height: 28px;
      }
    }
  }
  .login-box {
    width: 350px;
    background: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    padding: 24px;
    position: absolute;
    left: 60%;
    z-index: 101;
    .title1 {
      span {
        font-size: 20px;
        font-weight: bold;
        color: #262626;
        line-height: 32px;
      }
    }
    .title2 {
      font-size: 14px;
      color: #8c8c8c;
      line-height: 24px;
      margin-top: 4px;
      margin-bottom: 28px;
    }
  }
}
</style>