train/src/views/login.vue

<template>
  <div class="login-page" >
    <div class="title" >中德智慧教育培训系统登录</div>
    <div class="field" >
      <van-field class="field-item" maxlength="11" type="number"  v-model="loginState.phone"   placeholder="请输入手机号" />
      <van-field class="field-item" v-model="loginState.password"   placeholder="请输入密码" />
      <div class="forget-password" @click="forgetPwd" >忘记密码</div>
    </div>
    <div class="btn" @click="handleLogin" >登录</div>
  </div>
</template>
<script  setup >
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store'
import { useDebounceFn } from 'vue-hooks-plus'
import { useRouter } from 'vue-router'
import { WxLogin, getQueryString } from '@/utils/wx'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const router = useRouter()

const { userInfo } = storeToRefs(userStore)

const { login } = userStore

const loginState = ref({
  phone: '',
  password: ''
})

const { run } = useDebounceFn(() => login(loginState.value), { wait: 1000 })

const handleLogin = () => run()

const forgetPwd = () => {
  router.push({ path: '/forget-pwd' })
}

onMounted(() => {
  if (process.env.NODE_ENV === 'development') {

  } else {
    const code = getQueryString('code')
    if (!userInfo.token && !code) {
      WxLogin('/login')
    }
  }
})

</script>
<style lang='less' scoped >
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .title {
    font-size: 22px;
    font-weight: 600;
  }
  .field {
    margin: 40px 0;
    .field-item {
      height: 48px;
      border-radius: 40px;
      background-color: #f3f1f1;
      font-size: 18px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #000;
      /deep/ .van-field__control {
        // height: 60px;
      }
    }
    .forget-password {
      font-size: 14px;
      color: #6fa7f5;;
      text-align: right;
    }
  }
  .btn {
    width: 251px;
    height: 52px;
    background-color: #6fa7f5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    color: #fff;
  }
}
</style>