websoft-cms/pages/passport/login.vue

<template>
  <div class="login flex justify-around py-24 h-[700px] items-center">
    <div class="flash">

    </div>
    <el-card class="m-5 w-screen-sm sm:w-[430px] sm:h-[520px] flex justify-around relative border-0" style="border: 0;">
      <div class="login-bar absolute top-0 right-0 cursor-pointer" @click="onLoginBar">
        <div class="go-to-register cursor-pointer">
          <img src="https://img.alicdn.com/imgextra/i3/O1CN01yz6fEl1MwaRtkJyvf_!!6000000001499-55-tps-70-70.svg" alt=""/>
        </div>
        <span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ loginBar ? '注册' : '登录' }}</span>
      </div>
      <!-- 登录界面 -->
      <el-space class="tabs pt-5 text-xl flex justify-center" v-if="loginBar">
        <el-tabs v-model="activeName" class="demo-tabs ">
          <el-tab-pane label="账号登录" name="account">
            <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="租户ID" :prefix-icon="Shop" v-model="form.tenantId" />-->
<!--                </el-form-item>-->
                <el-form-item>
                  <el-input class="w-full" size="large" placeholder="登录账号" :prefix-icon="Avatar" v-model="form.username" />
                </el-form-item>
                <el-form-item>
                  <el-input type="password" size="large" maxlength="100" placeholder="登录密码" :prefix-icon="Briefcase" v-model="form.password" />
                </el-form-item>
                <el-form-item>
                  <el-space class="flex justify-between w-full">
                    <el-input size="large" placeholder="图形验证码" maxlength="5" v-model="form.code" @keyup.enter.prevent="onSubmit" />
                    <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="sms">
            <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.phone">
                    <template #prepend>+86</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-space class="flex justify-between w-full">
                    <el-input size="large" placeholder="短信验证码" maxlength="6" class="w-full" v-model="form.code" @keyup.enter.prevent="onSubmitBySms" />
                    <el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
                      <span v-if="!countdownTime">发送验证码</span>
                      <span v-else>已发送 {{ countdownTime }} s</span>
                    </el-button>
                  </el-space>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="large" class="w-full" @click="onSubmitBySms">登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-space>
      <!-- 快捷登录 --->
      <template v-if="loginBar && activeName == 'account'">
<!--        <div class="clearfix flex justify-center">-->
<!--          <el-divider>-->
<!--            <span class="text-gray-400">其他登录方式</span>-->
<!--          </el-divider>-->
<!--        </div>-->
<!--        <div class="clearfix flex justify-center">-->
<!--          <el-button circle :icon="ElIconUserFilled"></el-button>-->
<!--        </div>-->
      </template>
      <!-- 注册界面 -->
      <el-space class="tabs pt-5 text-xl flex justify-center" v-if="!loginBar">
        <el-tabs v-model="activeName" class="demo-tabs ">
          <el-tab-pane label="手机号注册" name="sms">
            <span class="text-sm text-gray-400">
              未注册手机号验证通过后将自动注册
            </span>
            <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.phone">
                    <template #prepend>+86</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-space class="flex justify-between w-full">
                    <el-input size="large" placeholder="短信验证码" maxlength="6" class="w-full" v-model="form.code" />
                    <el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
                      <span v-if="!countdownTime">发送验证码</span>
                      <span v-else>已发送 {{ countdownTime }} s</span>
                    </el-button>
                  </el-space>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
                  <a href="#" class="text-gray-700">《用户协议》</a>
                  <a href="#" class="text-gray-700">《隐私政策》</a>
                  <a href="#" class="text-gray-700">《产品服务协议》</a>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="账号密码注册" name="account">
            <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="30" placeholder="登录账号" v-model="form.username" />
                </el-form-item>
                <el-form-item>
                  <el-input type="password" size="large" maxlength="30" placeholder="登录密码" v-model="form.password" />
                </el-form-item>
                <el-form-item>
                  <el-input class="w-full" size="large" maxlength="11" placeholder="请输入手机号码" v-model="form.phone">
                    <template #prepend>+86</template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-space class="flex justify-between w-full">
                    <el-input size="large" placeholder="短信验证码" maxlength="6" class="w-full" v-model="form.code" @keyup.enter.prevent="onSubmitBySms" />
                    <el-button size="large" class="w-full" :disabled="!!countdownTime" @click="checkUser">
                      <span v-if="!countdownTime">发送验证码</span>
                      <span v-else>已发送 {{ countdownTime }} s</span>
                    </el-button>
                  </el-space>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="form.isAgree">我已阅读并同意</el-checkbox>
                  <a href="#" class="text-gray-700">《用户协议》</a>
                  <a href="#" class="text-gray-700">《隐私政策》</a>
                  <a href="#" class="text-gray-700">《产品服务协议》</a>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="large" class="w-full" :disabled="!form.isAgree" @click="onRegister">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-space>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useUser, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import { Shop, Key, Avatar, Briefcase } from '@element-plus/icons-vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";

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

const activeName = ref('account')

// 登录注册切换
const loginBar = ref<boolean>(true)
// 验证码 base64 数据
const captcha = ref('');
// 验证码内容, 实际项目去掉
const text = ref('');
// 图形验证码
const imgCode = ref('');
// 发送验证码按钮loading
const codeLoading = ref(false);
// 验证码倒计时时间
const countdownTime = ref(0);
// 验证码倒计时定时器
let countdownTimer: number | null = null;

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

/* 显示发送短信验证码弹窗 */
const openImgCodeModal = () => {
  if (!form.phone) {
    ElMessage.error('请输入手机号码');
    return;
  }
  // imgCode.value = text.value;
};

const checkUser = async () => {
  const {data: hasUser } = await useServerRequest<ApiResult<CaptchaResult>>('/existence',{baseURL: runtimeConfig.public.apiServer,method: "get",params: {
      field: 'phone', value: form.phone
    }});
  if(hasUser.value?.code == 0 || loginBar.value){
    await sendCode();
  }
  if(hasUser.value?.code != 0 && loginBar.value){
    ElMessage.error('该手机号码未注册');
  }
};


/* 发送短信验证码 */
const sendCode = async () => {
  if (!form.phone) {
    ElMessage.error('请输入手机号码');
    return;
  }
  imgCode.value = text.value;
  codeLoading.value = true;

  const {data: smsCode } = await useServerRequest<ApiResult<CaptchaResult>>('/sendSmsCaptcha',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
    phone: form.phone
    }});
  if(smsCode.value?.code == 0){
    codeLoading.value = false;
    countdownTime.value = 30;
    // 开始对按钮进行倒计时
    countdownTimer = window.setInterval(() => {
      if (countdownTime.value <= 1) {
        countdownTimer && clearInterval(countdownTimer);
        countdownTimer = null;
      }
      countdownTime.value--;
    }, 1000);
  }
  if(smsCode.value?.code != 0){
    ElMessage.error(smsCode.value?.message);
  }
};

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

const onLoginBar = () => {
  // if(loginBar.value){
  //   return navigateTo(`/passport/register`)
  // }
  loginBar.value = !loginBar.value
  activeName.value = loginBar.value ? 'account' : 'sms'
}

/* 获取图形验证码 */
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;
    text.value = captchaData.text;
  }

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


useHead({
  title: `登录页 - ${config.value?.siteName || 'WEB应用开发平台'}`,
  meta: [{ name: website.value.keywords, content: website.value.comments }]
});

/**
 * 执行登录
 */
const onSubmit = async () => {
  const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: runtimeConfig.public.apiServer,method: "post",body: form})
  // 登录成功
  if(response.value?.code == 0){
    ElMessage.success(response.value?.message)
    await doLogin(response.value.data)
  }
  if(response.value?.code != 0){
    ElMessage.error(response.value?.message)
    await changeCaptcha()
  }
}

/**
 * 短信验证码登录
 */
const onSubmitBySms = async () => {
  const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/loginBySms',{baseURL: runtimeConfig.public.apiServer,method: "post",body: {
      phone: form.phone,
      code: form.code,
      isSuperAdmin: true
    }})
  // 登录成功
  if(response.value?.code == 0){
    ElMessage.success(response.value?.message)
    await doLogin(response.value.data)
  }
  if(response.value?.code != 0){
    ElMessage.error(response.value?.message)
    await changeCaptcha()
  }
}

/**
 * 账号密码注册
 */
const onRegister = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading'
  })
  await useClientRequest<ApiResult<LoginResult>>('/register',{method: "post",body: {
      companyName: '应用名称',
      username: form.phone,
      phone: form.phone,
      password: form.password,
      code: form.code,
      email: form.email,
      isSuperAdmin: true
    }}).then(response => {
    // 登录成功
    if(response?.code == 0){
      loading.close();
      ElMessage.success(response?.message)
      doLogin(response.data)
    }
    if(response?.code != 0){
      loading.close;
      ElMessage.error(response?.message)
      changeCaptcha()
    }
  }).catch(() => {
    loading.close();
  }).finally(() => {
    loading.close();
  })

}


// 登录成功执行
const doLogin = async (data: any) => {
  const access_token = data?.access_token
  if(access_token){
    localStorage.setItem('token',access_token);
    token.value = access_token;
    console.log(access_token,'access_token')
  }
  if(data.user){
    user.value.userId = data.user.userId;
    user.value.phone = data.user.phone;
    user.value.gradeId = data.user.gradeId;
    user.value.gradeName = data.user.gradeName;
    user.value.avatar = data.user.avatar;
    user.value.balance = data.user.balance;
    localStorage.setItem('UserId',data.user.userId);
    localStorage.setItem('Avatar',data.user.avatar);
    localStorage.setItem('TID_ADMIN',data.user.tenantId);
  }
  setTimeout(() => {
    navigateTo('/')
    return;
  },500)
}

changeCaptcha();
</script>
<style lang="less">
.login{
  background: url("https://oss.wsdns.cn/20240904/6f5dc87c37334c4da3453826352a37d1.jpg");
  background-size: 100%;
}

/* 改变未激活标签的颜色 */
.el-tabs__item {
  color: #606266;
  font-size: 18px;
}

/* 改变激活标签的颜色 */
//.el-tabs__item.is-active {
//  color: #cf1313;
//}
//
///* 改变标签边界的颜色 */
//.el-tabs__item:not(.is-disabled):focus,
//.el-tabs__item:not(.is-disabled):hover {
//  border-color: #cf1313;
//}
//
///* 改变标签栏指示器的颜色 */
//.el-tabs--top .el-tabs__active-bar,
//.el-tabs--bottom .el-tabs__active-bar {
//  background: #cf1313;
//}
</style>