monisuo/app/pages/login/login.uvue

<template>
  <view class="login-container">
    <view class="login-header">
      <text class="app-title">模拟所</text>
      <text class="app-subtitle">虚拟货币模拟交易平台</text>
    </view>

    <view class="login-form">
      <view class="form-item">
        <input
          class="input"
          type="text"
          v-model="username"
          placeholder="请输入用户名"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <input
          class="input"
          type="password"
          v-model="password"
          placeholder="请输入密码"
          placeholder-class="placeholder"
        />
      </view>

      <button class="login-btn" @click="handleLogin">登录</button>

      <view class="register-link">
        <text class="link-text" @click="goToRegister">还没有账号？立即注册</text>
      </view>
    </view>
  </view>
</template>

<script lang="uts">
import { post } from '@/api/request.uts'
import { login } from '@/api/user.uts'

type LoginResponse = {
  token: string
  user: UTSJSONObject
}

export default {
  data() {
    return {
      username: '' as string,
      password: '' as string
    }
  },
  methods: {
    async handleLogin() {
      if (this.username === '' || this.username === null) {
        uni.showToast({ title: '请输入用户名', icon: 'none' })
        return
      }
      if (this.password === '' || this.password === null) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }

      try {
        const res = await login({
          username: this.username,
          password: this.password
        } as UTSJSONObject)

        const token = res.data['token'] as string
        uni.setStorageSync('token', token)

        if (res.data['user'] !== null) {
          uni.setStorageSync('userInfo', JSON.stringify(res.data['user']))
        }

        uni.showToast({ title: '登录成功', icon: 'success' })

        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' })
        }, 1000)
      } catch (e) {
        console.error('登录失败', e)
      }
    },
    goToRegister() {
      uni.navigateTo({ url: '/pages/register/register' })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background: $bg-color-dark;
  padding: 120rpx 48rpx;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.app-title {
  font-size: 56rpx;
  font-weight: bold;
  color: $primary-color;
  display: block;
  margin-bottom: 16rpx;
}

.app-subtitle {
  font-size: $font-size-base;
  color: $text-color-secondary;
}

.login-form {
  margin-top: 48rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.input {
  width: 100%;
  height: 96rpx;
  background: $bg-color-card;
  border-radius: $border-radius-base;
  padding: 0 32rpx;
  font-size: $font-size-base;
  color: $text-color;
  border: 2rpx solid $border-color;
  box-sizing: border-box;
}

.placeholder {
  color: $text-color-placeholder;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  background: $primary-color;
  border-radius: $border-radius-base;
  color: #FFFFFF;
  font-size: $font-size-lg;
  font-weight: bold;
  margin-top: 48rpx;
  border: none;
}

.login-btn:active {
  background: $primary-color-dark;
}

.register-link {
  text-align: center;
  margin-top: 32rpx;
}

.link-text {
  color: $primary-color;
  font-size: $font-size-base;
}
</style>