decorate/src/views/system/login.vue

<template>
  <div class="header">
    <h2>{{ $t('sys.loginh1') }}</h2>
    <p>{{ $t('sys.loginh2') }}</p>
  </div>

  <a-form :model="loginState" class="form" @finish="login">
    <a-form-item name="phone" :rules="[phoneRule]">
      <a-input
        v-model:value="loginState.phone"
        style="height: 50px"
        :placeholder="$t('sys.phoneRule')"
      />
    </a-form-item>
    <a-form-item name="password" :rules="[passwordRule]">
      <a-input-password
        v-model:value="loginState.password"
        :placeholder="$t('sys.passwordRule')"
        style="height: 50px"
      />
    </a-form-item>
    <a-form-item>
      <a-form-item name="remember" no-style>
        <a-checkbox v-model:checked="loginState.remember">{{
          $t('sys.rememberLabel')
        }}</a-checkbox>
      </a-form-item>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        html-type="submit"
        block
        class="login-form-button"
        style="height: 50px"
      >
        {{ $t('sys.login') }}
      </a-button>
    </a-form-item>
  </a-form>
  <div class="footer">
    <a :href="forgetLink">{{ $t('sys.forget') }}</a>
    <a :href="registerLink">{{ $t('sys.register') }}</a>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
import { router, RoutesName } from '@/router'
import { phoneRule, passwordRule, encodePwd, useCacheState } from './shared'
import { registerLink, forgetLink } from '@/env'

defineOptions({ name: 'Login' })

const [loginState, saveLoginState] = useCacheState()

const userStore = useUserStore()
const login = async () => {
  saveLoginState()
  await userStore.login({
    phone: loginState.value.phone,
    password: encodePwd(loginState.value.password)
  })
  router.push({ name: RoutesName.personal })
}
</script>

<style scoped lang="scss">
@import './shared/style.scss';
</style>