big-model-wechat/src/pages/login/index.vue

<script setup>
import { ref, unref } from 'vue';
import { userApi } from '@/api/login';
import { useUserStore } from '@/stores/modules/userStore';

const REMOTE_PATH = {
  logo: 'https://static.fuxicarbon.com/bigModel/wechat/login/img-desc.png',
  username: 'https://static.fuxicarbon.com/bigModel/wechat/login/icon-username.png',
  password: 'https://static.fuxicarbon.com/bigModel/wechat/login/icon-password.png'
}

const userStore = useUserStore();

const showPasswordIcon = ref(false);
const loading = ref(false);
const loginFormData = ref({
  username: 'admin',
  password: 'admin123'
});

const handleSubmit = async () => {

  const { username, password } = unref(loginFormData);
  
  if (!username) {
    return uni.showToast({ icon: 'none', title: "请输入账号", duration: 3 * 1000 });
  }
  if (!password) {
    return uni.showToast({ icon: 'none', title: "请输入密码", duration: 3 * 1000 });
  }

  loading.value = true;

  try {
    const { token } = await userApi.postLogin({ username, password });

    userStore.setUserInfo({ token });

    const { user } = await userApi.getUserInfo();

    userStore.setUserInfo({ ...user });

    await uni.showToast({ icon: 'none', title: "登录成功", duration: 2 * 1000});

    setTimeout(() => uni.redirectTo({url: '/pages/home/index'}), 2 * 1000);
  } catch (error) {
    console.log("打印error", error);
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <view class="login-viewport">
    <TheNavBar title-text="登录" class="nav-bar"></TheNavBar>
    <view class="login-content">
      <view class="logo-inner">
        <image :src="REMOTE_PATH.logo" class="img-desc"></image>
      </view>
      <view class="form-inner">
        <view class="login-form-item">
          <image :src="REMOTE_PATH.username" class="image"></image>
          <input class="inp" v-model.trim="loginFormData.username" placeholder="请输入账号"
            placeholder-style="color: #ADB0BD" />
        </view>
        <view class="login-form-item">
          <image :src="REMOTE_PATH.password" class="image"></image>
          <input class="inp" v-model.trim="loginFormData.password" placeholder="请输入密码"
            placeholder-style="color: #ADB0BD" :password="!showPasswordIcon" />
          <uni-icons size="20" color="#ADB0BD" class="icon-eye" :type="showPasswordIcon ? 'eye' : 'eye-slash'"
            @click="showPasswordIcon = !showPasswordIcon"></uni-icons>
        </view>
        <button class="sub-btn" hover-class="sub-btn_hover" :loading="loading" @click="handleSubmit">
          <text>登录</text>
        </button>
      </view>
      <view class="text-inner">
        <text>人工智能运营体智慧决策助手</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.login-viewport {
  display: flex;
  flex-flow: column;
  height: 100vh;
  background: url("https://static.fuxicarbon.com/bigModel/wechat/login/bg-login.png") no-repeat;
  background-size: 100% 100%;

  .login-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    padding: 132rpx 60rpx 36rpx 60rpx;

    .logo-inner {
      .img-desc {
        width: 500rpx;
        height: 96rpx;
      }
    }

    .form-inner {
      width: 628rpx;
      margin: 0 auto;

      .login-form-item {
        position: relative;

        .inp {
          height: 52rpx;
          padding: 24rpx 96rpx 24rpx 96rpx;
          border-radius: 100rpx;
          background: #f6f7f8;
          line-height: 100rpx;
          font-size: 32rpx;
        }

        .image {
          position: absolute;
          top: 50%;
          left: 40rpx;
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
          transform: translateY(-50%);
        }

        &:not(:last-child) {
          margin-bottom: 24rpx;
        }

        &:nth-child(2) {
          .icon-eye {
            position: absolute;
            top: 50%;
            right: 40rpx;
            transform: translateY(-50%);
          }
        }
      }

      .sub-btn {
        height: 100rpx;
        margin-top: 180rpx;
        border-radius: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        color: #fff;
        background: #8ab1ff;
      }

      .sub-btn_hover {
        background: #6495f7;
      }
    }

    .text-inner {
      padding-bottom: 50rpx;
      font-size: 28rpx;
      text-align: center;
      color: #727687;
    }
  }
}
</style>