websoft-cms/pages/login.vue

<template>
  <div class="login flex justify-around mt-[120px] h-[550px]">
    <div class="flash">

    </div>
    <el-card class="m-2 w-screen-sm sm:w-[430px] flex justify-around">
      <el-space class="tabs pt-5 text-xl flex justify-center">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="账号登录" name="first">
            <div class="custom-style my-4">
              <el-form :model="form" label-width="auto" class="w-[330px]">
                <el-form-item>
                  <el-input class="w-full" size="large" maxlength="11" placeholder="登录账号|手机号码" v-model="form.username" />
                </el-form-item>
                <el-form-item>
                  <el-input type="password" size="large" placeholder="登录密码"  v-model="form.password" />
                </el-form-item>
                <el-form-item>
                  <el-space class="flex justify-between w-full">
                    <el-input size="large" placeholder="图形验证码" v-model="form.code" />
                    <el-image alt="" :src="captcha" @click="changeCaptcha" />
                  </el-space>
                </el-form-item>

                <el-form-item label="记住密码">
                  <el-switch v-model="form.remember" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="large" class="w-full" @click="onSubmit">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="短信登录" name="second">
            <div class="custom-style my-4">
              <el-form :model="form" label-width="auto" class="w-[330px]">
                <el-form-item>
                  <el-input class="w-full" size="large" placeholder="手机号码" v-model="form.username" />
                </el-form-item>
                <el-form-item>
                  <el-input type="password" size="large" placeholder="验证码"  v-model="form.password" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="large" class="w-full" @click="onSubmit">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-space>
      <div class="clearfix flex justify-center">
        <el-divider>
          其他登录方式
        </el-divider>
      </div>
      <div class="clearfix flex justify-center">
        <el-button circle :icon="ElIconUserFilled"></el-button>
      </div>
<!--      <div class="clearfix flex justify-center">-->
<!--        <el-space>-->
<!--          <a class=" text-gray-400 cursor-pointer">忘记账号</a>-->
<!--          <a class=" text-gray-400 cursor-pointer">忘记密码</a>-->
<!--          <a class=" text-gray-400 cursor-pointer">登录异常帮助文档</a>-->
<!--        </el-space>-->
<!--      </div>-->


      <!--      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--        <el-tab-pane label="登录" name="first">登录</el-tab-pane>-->
<!--        <el-tab-pane label="注册" name="second">注册</el-tab-pane>-->
<!--      </el-tabs>-->
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useUserInfo, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import {getCaptcha} from "~/api/passport/login";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {Website} from "~/api/cms/website/model";
import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const website = useWebsite()
const config = useConfigInfo();
const token = useToken();
const userInfo = useUserInfo();

const value = ref('登录')
const options = ['登录', '注册']
const activeName = ref('first')

// 验证码 base64 数据
const captcha = ref('');
// 验证码内容, 实际项目去掉
const text = ref('');
// 是否显示图形验证码弹窗
const visible = ref(false);
// 图形验证码
const imgCode = ref('');
// 发送验证码按钮loading
const codeLoading = ref(false);
// 验证码倒计时时间
const countdownTime = ref(0);
// 验证码倒计时定时器
let countdownTimer: number | null = null;

// 配置信息
const { form } = useFormData<User>({
  username: '',
  phone: '',
  password: '',
  code: '',
  smsCode: '',
  remember: true,
  isAdmin: true
});


const navigateTo = (url: string) => {
  window.location.href = url;
}

/* 获取图形验证码 */
const changeCaptcha = async () => {
  const {data: captchaInfo } = await useServerRequest<ApiResult<CaptchaResult>>('/captcha',{baseURL: runtimeConfig.public.apiServer});
  const captchaData = captchaInfo.value?.data
  if(captchaData){
    captcha.value = captchaData.base64;
  }

  // 已经登录跳转首页
  if(token.value && token.value.length > 0){
    navigateTo('/')
    return;
  }
};

/**
 * 执行登录
 */
const onSubmit = async () => {
  const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: runtimeConfig.public.apiServer,method: "post",body: form})
  console.log(response.value);
  if (response.value?.code == 0) {
    if(response.value.data){
      const access_token = response.value.data?.access_token
      const user = response.value.data?.user
      if(access_token){
        token.value = access_token;
      }
      if(user){
        userInfo.value = user
      }
    }
    ElMessage.success(response.value.message)
    // setTimeout(() => {
    //   navigateTo('/')
    //   return;
    // },1000)
  }
  if(response.value?.code !== 0){
    ElMessage.error(response.value?.message)
  }
}

changeCaptcha();
</script>
<style lang="less">
body{
  background: url("https://oss.wsdns.cn/20240616/4fe7e2e00b7e43e7a5f189fe11b21196.jpeg");
  background-size: 100%;
}
</style>