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"
            open-type="getPhoneNumber"
            @getphonenumber="handleGetPhoneNumber"
            :loading="loading"
            :disabled="loading"
          >
            微信一键登录
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    // 微信手机号一键授权登录：getPhoneNumber 返回 phoneCode，同时用 uni.login 取 login code
    handleGetPhoneNumber(e) {
      if (this.loading) return
      if (!e.detail || !e.detail.code) {
        uni.showToast({ title: '授权失败，请重试', icon: 'none' })
        return
      }
      // 手机号授权成功，实时获取 login code（微信 code 一次性有效，必须点击时取）
      var self = this
      self.loading = true
      uni.login({
        provider: 'weixin',
        success: function(res) {
          if (!res.code) {
            uni.showToast({ title: '登录失败，请重试', icon: 'none' })
            self.loading = false
            return
          }
          wechatPhoneLogin({ code: res.code, phoneCode: e.detail.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.switchTab({ url: '/pages/course/index' })
              } else {
                uni.switchTab({ url: '/pages/index/index' })
              }
            }, 800)
          }).catch(function(err) {
            console.error('登录失败', err)
            uni.showToast({ title: (err && err.message) || '登录失败', icon: 'none' })
          }).finally(function() {
            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>