nursing-home-app/src/pages/login/index/index.vue

<template>
  <view class="login">
    <view class="login-logo">
      <image :src="logoSrc" />
      <view class="login-logo-text">
        适老设备设施
      </view>
    </view>
    <view class="login-input">
      <wd-input :noBorder="true" placeholder="请输入账号" v-model="state.account" />
    </view>
    <view class="login-input">
      <wd-input :showPassword="true" :noBorder="true" placeholder="请输入密码" v-model="state.password" />
    </view>
    <view class="login-operation">
      <wd-checkbox shape="square" v-model="state.rememberChecked">
        记住密码
      </wd-checkbox>
    </view>
    <wd-button :round="false" :block="true" :disabled="!state.account || !state.password" :loading="state.buttonLoading"
      @click="onClickLogin">
      登录
    </wd-button>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import logoSrc from '@/static/public/logo@2x.png';
import LocalStorage from '@/LocalStorage';
import { regex } from '@/utils';
import { apis, LoginApiParams } from '@/apis';

interface State {
  account: string,
  password: string,
  rememberChecked: boolean,
  buttonLoading: boolean,
};

const state: State = reactive({
  account: '',
  password: '',
  rememberChecked: false,
  buttonLoading: false,
});

const api = {
  // 登录
  login: async (data: LoginApiParams) => {
    state.buttonLoading = true;
    try {
      // const res = await apis.login(data);
      // const token = res.data;
      const token = 'token';
      LocalStorage.setToken(token);
      if (state.rememberChecked) {// 记住密码
        LocalStorage.setAccountPassword({
          account: data.account,
          password: data.password,
        });
      } else {// 不记住密码
        LocalStorage.setAccountPassword(undefined);
      }
      uni.switchTab({
        url: '/pages/home/index/index',
        success: () => {
          uni.showToast({
            icon: 'success',
            mask: true,
            duration: 2000,
            title: '登录成功',
          });
        }
      });
    } catch (error: any) {
      LocalStorage.clear();
      uni.showToast({
        icon: 'none',
        mask: true,
        duration: 2000,
        title: error.msg,
      });
    } finally {
      state.buttonLoading = false;
    }
  },
}

const init = () => {
  const token = LocalStorage.getToken();
  if (token) {// 已登陆直接进入首页
    uni.switchTab({
      url: '/pages/home/index/index',
    });
  } else {
    const accountPassword = LocalStorage.getAccountPassword();
    if (accountPassword) {
      state.account = accountPassword.account;
      state.password = accountPassword.password;
      state.rememberChecked = true;
    }
  }
};

onLoad(() => {
  init();
});

// 点击登录
const onClickLogin = async () => {
  const data = {
    account: state.account,
    password: state.password,
  }
  const passwordRegex = new RegExp(regex.password);
  if (!passwordRegex.test(data.password)) {
    return uni.showToast({
      icon: 'none',
      mask: true,
      duration: 2000,
      title: '密码格式不正确',
    });
  }
  // 登录
  await api.login(data);
}
</script>

<style lang="scss" scoped>
.login {
  padding: 0 20rpx;
  background: #FFFFFF;

  &-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0;

    image {
      width: 180rpx;
      height: 180rpx
    }

    &-text {
      font-size: $font-size-large;
      font-weight: bold;
      color: $primary-color;
      letter-spacing: 10rpx;
      margin-top: 20rpx;
    }
  }

  &-input {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid $border-color;
    margin-bottom: 30rpx;
  }

  &-operation {
    margin: 60rpx 0;
  }
}
</style>