caremate/train-frontend/pages/login/index.vue

<template>
  <view class="login-page">
    <view class="login-bg">
      <view class="login-content">
        <view class="logo-area">
          <view class="logo-icon">🤖</view>
      <text class="logo-title">爱伴·AI之旅</text>
      <text class="logo-subtitle">L0 家立方-AI管家成长营</text>
        </view>
        <view class="login-btn-area">
          <button class="login-btn" @click="handleLogin" :loading="loading" :disabled="loading">
            微信一键登录
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { wechatLogin } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleLogin() {
      if (this.loading) return
      this.loading = true
      var self = this
      wx.login({
        success: function(res) {
          if (res.code) {
            wechatLogin(res.code).then(function(resp) {
              var data = resp.data
              self.$store.dispatch('login', data)
              uni.showToast({ title: '登录成功', icon: 'success' })
              setTimeout(function() {
                if (!data.alumniVerify || data.alumniVerify === 'pending') {
                  uni.redirectTo({ url: '/pages/verify/index' })
                } else if (!data.classId) {
                  uni.redirectTo({ url: '/pages/class/index' })
                } else {
                  uni.switchTab({ url: '/pages/index/index' })
                }
              }, 800)
            }).catch(function(err) {
              console.error('登录失败', err)
            }).finally(function() {
              self.loading = false
            })
          } else {
            uni.showToast({ title: '微信登录失败', icon: 'none' })
            self.loading = false
          }
        },
        fail: function() {
          uni.showToast({ title: '微信登录失败', icon: 'none' })
          self.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #F97316, #EA580C);
  display: flex;
  flex-direction: column;
}
.login-bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60rpx;
}
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120rpx;
}
.logo-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}
.logo-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16rpx;
}
.logo-subtitle {
  font-size: 28rpx;
  color: rgba(255,255,255,0.85);
}
.login-btn-area {
  width: 100%;
}
.login-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: #FFFFFF;
  color: #F97316;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
}
.login-btn:active {
  opacity: 0.85;
}
</style>