UniappVue3/src/pages/login/index.vue

<!-- 登录页 -->
<template>
  <view class="login-page">
    <view class="login-container">
      <view class="logo-section">
        <text class="logo-text">logo</text>
      </view>
      <view class="login-title">登录</view>
      <view class="login-form">
        <u-form>
          <u-form-item label="账号" prop="username">
            <u-input v-model="formData.username" placeholder="请输入账号" prefixIcon="account" size="large"></u-input>
          </u-form-item>
          <u-form-item label="密码" prop="password">
            <u-input v-model="formData.password" type="password" placeholder="请输入密码" prefixIcon="lock" size="large"
              password-icon></u-input>
          </u-form-item>

          <u-form-item label="角色" prop="role">
            <view class="role-selector">
              <u-select :current="formData.role" :options="roleList" placeholder="请选择角色" size="large" showOptionsLabel
                @update:current="formData.role = $event"></u-select>
            </view>
          </u-form-item>

        </u-form>
      </view>
      <view class="login-actions">
        <u-button type="primary" text="登录" :loading="loading" @click="handleLogin"></u-button>
        <text class="forget-password" @click="handleForgetPassword">忘记密码?</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { login } from '@/api'
import { useUserStore } from '@/store/user'

const formData = reactive({
  username: '',
  password: '',
  role: 'role1'
})

const roleList = ref([
  { name: '工地负责人', id: 'role1' },
  { name: '监督负责人', id: 'role2' },
])

const loading = ref(false)
const userStore = useUserStore()

async function handleLogin() {
  // 表单验证
  if (!formData.username) {
    uni.showToast({ title: '请输入账号', icon: 'none' })
    return
  }
  if (!formData.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' })
    return
  }
  if (!formData.role) {
    uni.showToast({ title: '请选择角色', icon: 'none' })
    return
  }

  loading.value = true
  try {
    // 调用登录接口
    const response = await login({
      username: formData.username,
      password: formData.password,
      role: formData.role
    })
    // 保存用户信息和token
    if (response) {
      userStore.setUserInfo(response)
      if (response.access_token) {
        userStore.setToken(response.access_token)
      }
      if (response.refreshToken) {
        userStore.setRefreshToken(response.refreshToken)
      }
    }
    
    uni.showToast({ title: '登录成功', icon: 'success' })
    
    // 跳转到工作台页面
    setTimeout(() => {
      uni.switchTab({ url: '/pages/WorkOrderApproval/index' })
    }, 1500)
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({ 
      title: error?.message || '登录失败，请重试', 
      icon: 'none' 
    })
  } finally {
    loading.value = false
  }
}

function handleForgetPassword() {
  uni.showToast({ title: '忘记密码功能', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2979ff, #07c160);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-container {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.logo-section {
  text-align: center;
  margin-bottom: 40rpx;
}

.logo-text {
  font-size: 48rpx;
  font-weight: 700;
  color: #2979ff;
}

.login-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
}

.login-form {
  gap: 20rpx;
}

.login-actions {
  margin-top: 40rpx;
}

.forget-password {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #2979ff;
  margin-top: 20rpx;
}

.role-selector {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 6px 9px;
  border: 1rpx solid #e4e7ed;
  color: #333;

  .u-select {
    width: 100%;

  }
}
</style>