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

<template>
  <view class="home-page">
    <view class="banner">
      <text class="banner-icon">🚀</text>
      <text class="banner-title">爱伴·AI之旅</text>
      <view class="course-tag">
        <text class="course-tag-text">{{ courseLabel }}</text>
      </view>
      <button v-if="!isLoggedIn" class="login-entry-btn" @click="showLoginSheet">点击登录</button>
    </view>

    <view class="status-card">
      <view class="status-row">
        <text class="status-label">校友校验</text>
        <text :class="['status-value', verifyClass]">{{ verifyLabel }}</text>
      </view>
      <view class="status-row">
        <text class="status-label">班级</text>
        <text class="status-value">{{ classLabel }}</text>
      </view>
      <view class="status-row">
        <text class="status-label">小组</text>
        <text class="status-value">{{ groupLabel }}</text>
      </view>
    </view>

    <view class="section-title">日常服务</view>
    <view class="nav-grid">
      <view class="nav-item" @click="switchToTab('/pages/course/index')">
        <text class="nav-icon">📚</text>
        <text class="nav-text">课程</text>
      </view>
      <view class="nav-item" @click="goTo('/pages/enroll/list')">
        <text class="nav-icon">🎫</text>
        <text class="nav-text">报名中心</text>
      </view>
      <view class="nav-item" @click="goTo('/pages/survey/index')">
        <text class="nav-icon">📝</text>
        <text class="nav-text">兴趣调研</text>
      </view>
      <view class="nav-item" @click="goTo('/pages/verify/index')">
        <text class="nav-icon">🎓</text>
        <text class="nav-text">校友校验</text>
      </view>
      <view class="nav-item" @click="goTo('/pages/salon/list')">
        <text class="nav-icon">🎨</text>
        <text class="nav-text">周末沙龙</text>
      </view>
    </view>

    <view class="section-title">最近课程</view>
    <view class="course-mini-list">
      <view class="course-mini-card" v-for="(c, idx) in recentCourses" :key="idx" @click="goToCourse(c)">
        <view class="course-mini-head">
          <text class="course-mini-level">{{ c.level || 'L' }}</text>
          <text class="course-mini-name">{{ c.name }}</text>
          <text class="course-mini-status" :class="'st-' + c.effectiveStatus">{{ statusLabel(c.effectiveStatus) }}</text>
        </view>
        <text class="course-mini-desc" v-if="c.description">{{ c.description }}</text>
      </view>
      <view class="course-mini-empty" v-if="!recentCourses.length && isLoggedIn">
        <text class="course-mini-empty-text">暂无课程</text>
      </view>
    </view>

    <!-- Login Bottom Sheet -->
    <view class="login-sheet-mask" :class="{ 'sheet-open': loginSheetVisible }" @click="hideLoginSheet">
      <view class="login-sheet-panel" @click.stop>
        <view class="sheet-handle"></view>
        <view class="sheet-content">
          <view class="sheet-header">
            <text class="sheet-title">欢迎回来</text>
            <text class="sheet-sub">登录以解锁更多成长功能</text>
          </view>
          <button class="sheet-login-btn" @click="handleLogin" :loading="loginLoading" :disabled="loginLoading">
            微信一键登录
          </button>
          <view class="sheet-footer">
            <text class="sheet-footer-text">登录即代表同意服务协议</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyGroup, getClassInfo, wechatLogin, getMyCourse, getCourseList } from '@/utils/api.js'

export default {
  data() {
    return {
      groupInfo: null,
      classInfo: null,
      courseName: '',
      recentCourses: [],
      loginSheetVisible: false,
      loginLoading: false
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    },
    courseLabel() {
      return this.courseName || 'L0 家立方-AI管家成长营'
    },
    verifyLabel() {
      var v = this.$store.state.alumniVerify
      if (v === 'accepted') return '✅ 已通过'
      if (v === 'pending') return '⏳ 待审核'
      return '❌ 未校验'
    },
    verifyClass() {
      var v = this.$store.state.alumniVerify
      return v === 'accepted' ? 'val-pass' : (v === 'pending' ? 'val-pending' : 'val-fail')
    },
    classLabel() {
      return this.classInfo ? this.classInfo.name : '未进班'
    },
    groupLabel() {
      return this.groupInfo ? this.groupInfo.name : '未入组'
    }
  },
  onShow() {
    this.loadInfo()
  },
  onLoad() {
    // 注册全局登录浮层触发事件（uni-app 页面生命周期 onLoad 早于 created 时机更稳）
    var self = this
    try {
      uni.$on('showLoginSheet', function() {
        self.showLoginSheet()
      })
    } catch (e) {
      console.error('[home] 注册 showLoginSheet 监听失败', e)
    }
  },
  onUnload() {
    try {
      uni.$off('showLoginSheet')
    } catch (e) {}
  },
  methods: {
    loadInfo() {
      if (!this.isLoggedIn) return
      var self = this
      if (this.$store.state.classId) {
        getClassInfo().then(function(resp) {
          self.classInfo = resp.data
        }).catch(function() {})
      }
      getMyGroup().then(function(resp) {
        self.groupInfo = resp.data
      }).catch(function() {})
      getMyCourse().then(function(resp) {
        var d = resp.data || {}
        var c = d.course
        if (c && c.name) {
          self.courseName = (c.level ? c.level + ' ' : '') + c.name
        }
      }).catch(function() {})
      // 最近课程：优先取进行中/未开始，最多 3 门
      getCourseList().then(function(resp) {
        var list = resp.data || []
        var sorted = list.slice().sort(function(a, b) {
          return rankOf(a) - rankOf(b)
        })
        self.recentCourses = sorted.slice(0, 3)
      }).catch(function() {})
    },
    rankOf(c) {
      var st = c && c.effectiveStatus
      if (st === 'active') return 0
      if (st === 'upcoming') return 1
      if (st === 'finished') return 2
      return 3
    },
    statusLabel(st) {
      var map = { upcoming: '未开始', active: '进行中', finished: '已结束', draft: '未发布' }
      return map[st] || st || '-'
    },
    goToCourse(c) {
      if (!c || !c.id) return
      uni.navigateTo({ url: '/pages/course/detail?courseId=' + c.id })
    },
    showLoginSheet() {
      this.loginSheetVisible = true
    },
    hideLoginSheet() {
      this.loginSheetVisible = false
    },
    handleLogin() {
      if (this.loginLoading) return
      this.loginLoading = 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' })
              self.hideLoginSheet()
              self.loadInfo()
            }).catch(function(err) {
              console.error('登录失败', err)
            }).finally(function() {
              self.loginLoading = false
            })
          } else {
            uni.showToast({ title: '微信登录失败', icon: 'none' })
            self.loginLoading = false
          }
        },
        fail: function() {
          uni.showToast({ title: '微信登录失败', icon: 'none' })
          self.loginLoading = false
        }
      })
    },
    goTo(url) {
      uni.navigateTo({ url: url })
    },
    switchToTab(url) {
      uni.switchTab({ url: url })
    }
  }
}
</script>

<style scoped>
.home-page { min-height: 100vh; background: #F5F5F5; padding: 0 32rpx 32rpx; }
.banner { background: linear-gradient(135deg, #F97316, #EA580C); border-radius: 0 0 32rpx 32rpx; padding: 60rpx 32rpx 48rpx; text-align: center; margin: 0 -32rpx 24rpx; position: relative; }
.banner-icon { font-size: 72rpx; display: block; margin-bottom: 16rpx; }
.banner-title { display: block; font-size: 40rpx; font-weight: 700; color: #FFF; margin-bottom: 16rpx; }
.course-tag {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  border: 2rpx solid rgba(255,255,255,0.4);
  border-radius: 100rpx;
  padding: 8rpx 24rpx;
  margin-bottom: 28rpx;
}
.course-tag-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #FFF;
  line-height: 1.4;
}
.login-entry-btn { 
  background: #FFF; 
  color: #EA580C; 
  font-size: 24rpx; 
  font-weight: 600; 
  border-radius: 100rpx; 
  padding: 0 32rpx; 
  height: 64rpx; 
  line-height: 64rpx; 
  margin: 0 auto;
  border: none;
}
.status-card { background: #FFF; border-radius: 16rpx; padding: 24rpx 32rpx; margin-bottom: 24rpx; }
.status-row { display: flex; justify-content: space-between; padding: 14rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.status-row:last-child { border-bottom: none; }
.status-label { font-size: 28rpx; color: #64748B; }
.status-value { font-size: 28rpx; color: #1E293B; font-weight: 500; }
.val-pass { color: #22C55E; }
.val-pending { color: #FFB74D; }
.val-fail { color: #EF5350; }
.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 16rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.nav-grid { display: flex; flex-wrap: wrap; gap: 0; background: #FFF; border-radius: 16rpx; overflow: hidden; }
.nav-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 28rpx 0; }
.nav-item:active { background: #F8FAFC; }
.nav-icon { font-size: 44rpx; margin-bottom: 8rpx; }
.nav-text { font-size: 24rpx; color: #1E293B; text-align: center; }
.course-mini-list { display: flex; flex-direction: column; margin-top: 20rpx; }
.course-mini-card { background: #FFF; border-radius: 16rpx; padding: 24rpx 28rpx; margin-bottom: 16rpx; }
.course-mini-card:active { background: #F8FAFC; }
.course-mini-head { display: flex; align-items: center; margin-bottom: 8rpx; }
.course-mini-level { font-size: 22rpx; font-weight: 600; color: #F97316; background: #FFF7ED; border-radius: 8rpx; padding: 4rpx 14rpx; margin-right: 16rpx; }
.course-mini-name { font-size: 28rpx; font-weight: 600; color: #1E293B; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-mini-status { font-size: 22rpx; border-radius: 6rpx; padding: 4rpx 14rpx; }
.course-mini-status.st-upcoming { color: #F97316; background: #FFF7ED; }
.course-mini-status.st-active { color: #22C55E; background: #F0FDF4; }
.course-mini-status.st-finished { color: #94A3B8; background: #F1F5F9; }
.course-mini-desc { font-size: 24rpx; color: #64748B; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.course-mini-empty { background: #FFF; border-radius: 16rpx; padding: 48rpx 0; text-align: center; }
.course-mini-empty-text { font-size: 26rpx; color: #94A3B8; }

/* Bottom Sheet Styles */
.login-sheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.login-sheet-mask.sheet-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.login-sheet-panel {
  background: #FFF;
  border-radius: 32rpx 32rpx 0 0;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.login-sheet-mask.sheet-open .login-sheet-panel {
  transform: translateY(0);
}
.sheet-handle {
  width: 80rpx;
  height: 8rpx;
  background: #E2E8F0;
  border-radius: 4rpx;
  margin: 24rpx auto;
}
.sheet-content {
  padding: 0 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sheet-header {
  text-align: center;
  margin-bottom: 48rpx;
}
.sheet-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12rpx;
}
.sheet-sub {
  display: block;
  font-size: 26rpx;
  color: #64748B;
}
.sheet-login-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color: #FFF;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
  margin-bottom: 32rpx;
}
.sheet-login-btn:active {
  opacity: 0.9;
}
.sheet-footer {
  text-align: center;
}
.sheet-footer-text {
  font-size: 22rpx;
  color: #94A3B8;
}
</style>