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

<template>
  <view class="home-page">
    <!-- Banner：深底反白品牌组合 -->
    <view class="banner">
      <image class="banner-logo" src="/static/logo-banner.png" mode="widthFix"></image>
      <text class="banner-slogan">让 AI 成为您的贴心伙伴</text>
      <button v-if="!isLoggedIn" class="login-entry-btn" @click="showLoginSheet">点击登录</button>
      <view v-else class="banner-welcome">
        <text class="banner-welcome-text">Hi，{{ nickname }}，欢迎回来</text>
        <text class="banner-welcome-sub">每一次探索，都离 AI 高手更近一步</text>
      </view>
    </view>

    <!-- 我的档案 -->
    <view class="status-card">
      <view class="status-row" @click="goTo('/pages/verify/index')">
        <text class="status-label">校友校验</text>
        <view class="status-value-wrap">
          <text :class="['status-value', verifyClass]">{{ verifyLabel }}</text>
          <text class="status-arrow">›</text>
        </view>
      </view>
      <view class="status-row">
        <text class="status-label">我的班级</text>
        <text class="status-value">{{ classLabel }}</text>
      </view>
    </view>

    <!-- 个人成长 -->
    <view class="growth-card" v-if="isLoggedIn" @click="goGrowth">
      <view class="growth-head">
        <view class="growth-grade-dot" :style="{ background: gradeColor }"></view>
        <text class="growth-grade-name" :style="{ color: gradeColor }">{{ gradeText }}</text>
        <text class="growth-earned">{{ earnedCount }}/32 徽章</text>
        <text class="growth-more">›</text>
      </view>
      <view class="growth-body">
        <view class="growth-cell">
          <text class="growth-cell-num" :style="{ color: gradeColor }">{{ progressText }}</text>
          <text class="growth-cell-label">完课验收</text>
        </view>
        <view class="growth-cell">
          <text class="growth-cell-num" :style="{ color: gradeColor }">{{ certLabel }}</text>
          <text class="growth-cell-label">完课证书</text>
        </view>
      </view>
    </view>
    <view class="growth-card growth-card-guide" v-else @click="showLoginSheet">
      <text class="growth-guide-text">登录后查看我的成长档案</text>
    </view>

    <!-- 平台动态 -->
    <view class="section-title">平台动态</view>
    <view class="dynamic-list" v-if="dynamics.length">
      <view class="dynamic-item" v-for="(d, idx) in dynamics" :key="idx" @click="goDynamic(d)">
        <text class="dynamic-tag" :class="d.tagClass">{{ d.tag }}</text>
        <view class="dynamic-main">
          <text class="dynamic-title">{{ d.title }}</text>
          <text class="dynamic-desc">{{ d.desc }}</text>
        </view>
        <text class="dynamic-arrow">›</text>
      </view>
    </view>
    <view class="dynamic-empty" v-else-if="isLoggedIn">
      <text class="dynamic-empty-text">暂无动态，稍后再来看看</text>
    </view>

    <!-- AI 小知识 -->
    <view class="section-title">AI 小知识</view>
    <swiper class="tip-swiper" :autoplay="true" :interval="4000" :circular="true" :indicator-dots="true"
      indicator-active-color="#FC7A57" indicator-color="#E8E2DE">
      <swiper-item v-for="(tip, idx) in aiTips" :key="idx">
        <view class="tip-card">
          <text class="tip-icon">{{ tip.icon }}</text>
          <text class="tip-text">{{ tip.text }}</text>
        </view>
      </swiper-item>
    </swiper>

    <!-- 沙龙 -->
    <view class="section-title">沙龙</view>
    <view class="course-mini-list">
      <view class="course-mini-card" v-for="(s, idx) in salonNews" :key="idx" @click="goSalon(s)">
        <view class="course-mini-head">
          <text class="course-mini-level">{{ mapTheme(s.theme) }}</text>
          <text class="course-mini-name">{{ s.title }}</text>
          <text class="course-mini-status" :class="s.num <= 0 ? 'st-finished' : 'st-upcoming'">{{ s.num <= 0 ? '已满' : '可报名' }}</text>
        </view>
        <text class="course-mini-desc">{{ formatDateTime(s.time) }} · {{ s.place }}</text>
        <text class="course-mini-desc">余 {{ s.num }}/{{ s.capacity }} 位</text>
      </view>
      <view class="course-mini-empty" v-if="!salonNews.length && isLoggedIn">
        <text class="course-mini-empty-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>

    <!-- 登录引导卡（未登录时平台动态区下方提示） -->
    <view class="login-hint" v-if="!isLoggedIn" @click="showLoginSheet">
      <text class="login-hint-icon">✨</text>
      <text class="login-hint-text">登录解锁班级、成长与沙龙报名</text>
      <text class="login-hint-arrow">›</text>
    </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 { wechatLogin, getCourseList, getMyEnrollments, getMyBadges, getCourseProgress, getMyCert, getSalonList } from '@/utils/api.js'
import { formatDateTime } from '@/utils/format.js'
import { loadInviteCode, getInviteCode, buildSharePath } from '@/utils/share.js'

export default {
  data() {
    return {
      myClasses: [],
      grade: null,
      earnedCount: 0,
      progress: null,
      cert: null,
      salonNews: [],
      dynamics: [],
      recentCourses: [],
      aiTips: [
        { icon: '💡', text: '提示词三要素：角色 + 任务 + 要求，描述越具体，AI 越懂你。' },
        { icon: '🤖', text: '把 AI 当成一起上课的学伴，先问「怎么做」，再问「为什么」。' },
        { icon: '🚀', text: 'L0 完成 6 项验收即可领取完课证书，开启你的 AI 成长档案。' },
        { icon: '🎯', text: '五级成长主线：见习 → 启航 → 专精 → 系统师 → 讲师。' }
      ],
      gradeColorMap: {
        novice: '#94877F',
        starter: '#7C3AED',
        expert: '#F59E0B',
        system: '#14B8A6',
        lecturer: '#FC7A57'
      },
      themeMap: {
        ai_basic: 'AI 认知基础',
        wealth: '家庭财富管理',
        health: '健康管理',
        growth: '孩子成长陪伴'
      },
      loginSheetVisible: false,
      loginLoading: false
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    },
    nickname() {
      return this.$store.state.nickname || this.$store.state.name || ''
    },
    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() {
      var cs = this.myClasses || []
      if (!cs.length) return '未进班'
      if (cs.length === 1) return cs[0]
      return cs.slice(0, 2).join('、') + ' 等' + cs.length + '个班级'
    },
    gradeColor() {
      if (!this.grade || !this.grade.key) return '#FC7A57'
      return this.gradeColorMap[this.grade.key] || '#FC7A57'
    },
    gradeText() {
      if (!this.grade || !this.grade.name) return '未入门'
      return this.grade.name
    },
    progressText() {
      if (!this.progress) return '-'
      return this.progress.done + '/' + this.progress.total
    },
    certLabel() {
      if (this.cert && this.cert.eligible) return '已领证'
      return '学习中'
    }
  },
  onShow() {
    loadInviteCode()
    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) {}
  },
  // 分享给好友
  onShareAppMessage() {
    return {
      title: '爱伴·AI之旅｜让 AI 成为您的贴心伙伴',
      path: buildSharePath('/pages/index/index')
    }
  },
  // 分享到朋友圈
  onShareTimeline() {
    var code = getInviteCode()
    return {
      title: '爱伴·AI之旅｜让 AI 成为您的贴心伙伴',
      query: code ? 'inviteCode=' + code : ''
    }
  },
  methods: {
    loadInfo() {
      if (!this.isLoggedIn) return
      var self = this
      this.loadClasses()
      this.loadGrowth()
      this.loadCourses()
      this.loadSalons()
    },
    loadClasses() {
      var self = this
      getMyEnrollments().then(function(resp) {
        var list = resp.data || []
        var classes = []
        for (var i = 0; i < list.length; i++) {
          var e = list[i]
          if (e.classId && e.className) {
            classes.push(e.className)
          }
        }
        // 去重（一个人可能在多个班级，同名只算一次）
        classes = classes.filter(function(v, i, arr) {
          return arr.indexOf(v) === i
        })
        self.myClasses = classes
      }).catch(function() {})
    },
    loadGrowth() {
      var self = this
      getMyBadges().then(function(resp) {
        var d = resp.data || {}
        self.grade = d.grade || null
        self.earnedCount = d.earnedCount || 0
      }).catch(function() {})
      getCourseProgress().then(function(resp) {
        var d = resp.data || {}
        if (d.done !== undefined && d.total !== undefined) {
          self.progress = d
        }
      }).catch(function() {})
      getMyCert().then(function(resp) {
        self.cert = resp.data || null
      }).catch(function() {})
    },
    loadCourses() {
      var self = this
      // 最近课程：优先取进行中/未开始，最多 3 门
      getCourseList().then(function(resp) {
        var list = resp.data || []
        var sorted = list.slice().sort(function(a, b) {
          return self.rankOf(a) - self.rankOf(b)
        })
        self.recentCourses = sorted.slice(0, 3)
        self.buildDynamics()
      }).catch(function() {})
    },
    loadSalons() {
      var self = this
      getSalonList().then(function(resp) {
        self.salonNews = resp.data || []
        self.buildDynamics()
      }).catch(function() {})
    },
    buildDynamics() {
      // 平台动态 = 进行中/未开始课程（最多 3 条）；沙龙已独立成区块，避免重复
      var self = this
      var arr = []
      var courses = this.recentCourses || []
      for (var j = 0; j < courses.length && arr.length < 3; j++) {
        var c = courses[j]
        if (c.effectiveStatus !== 'active' && c.effectiveStatus !== 'upcoming') continue
        arr.push({
          type: 'course',
          tag: (c.level || 'L') + ' 课程',
          tagClass: 'dynamic-tag-course',
          title: c.name,
          desc: self.statusLabel(c.effectiveStatus) + (c.description ? ' · ' + c.description : ''),
          url: '/pages/course/detail?courseId=' + c.id
        })
      }
      this.dynamics = arr
    },
    mapTheme(theme) {
      return this.themeMap[theme] || theme || '通用主题'
    },
    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 })
    },
    goSalon() {
      uni.navigateTo({ url: '/pages/salon/list' })
    },
    goDynamic(d) {
      if (!d || !d.url) return
      uni.navigateTo({ url: d.url })
    },
    goGrowth() {
      uni.navigateTo({ url: '/pages/badge/index' })
    },
    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 })
    }
  }
}
</script>

<style scoped>
.home-page { min-height: 100vh; background: #F5F5F5; padding: 0 32rpx 32rpx; }
/* Banner：深底反白 */
.banner {
  background: linear-gradient(135deg, #1B212C, #2A2326 55%, #3A2E30);
  border-radius: 0 0 32rpx 32rpx;
  padding: 72rpx 32rpx 48rpx;
  text-align: center;
  margin: 0 -32rpx 24rpx;
}
.banner-logo { width: 480rpx; display: block; margin: 0 auto 20rpx; }
.banner-slogan { display: block; font-size: 28rpx; color: #E8E2DE; letter-spacing: 2rpx; margin-bottom: 32rpx; }
.login-entry-btn {
  background: #FC7A57;
  color: #FFF;
  font-size: 26rpx;
  font-weight: 600;
  border-radius: 100rpx;
  padding: 0 48rpx;
  height: 72rpx;
  line-height: 72rpx;
  margin: 0 auto;
  border: none;
  width: auto;
}
.banner-welcome { display: flex; flex-direction: column; align-items: center; }
.banner-welcome-text { font-size: 32rpx; font-weight: 600; color: #FFF; margin-bottom: 8rpx; }
.banner-welcome-sub { font-size: 24rpx; color: #B6AA9F; }

/* 我的档案 */
.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: #5A4F4B; }
.status-value-wrap { display: flex; align-items: center; max-width: 420rpx; }
.status-value { font-size: 28rpx; color: #2A2326; font-weight: 500; max-width: 390rpx; text-align: right; }
.status-arrow { font-size: 28rpx; color: #B6AA9F; margin-left: 8rpx; }
.val-pass { color: #22C55E; }
.val-pending { color: #FFB74D; }
.val-fail { color: #EF5350; }

/* 个人成长卡 */
.growth-card { background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 24rpx; }
.growth-card:active { background: #FAF7F4; }
.growth-head { display: flex; align-items: center; margin-bottom: 24rpx; }
.growth-grade-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 12rpx; }
.growth-grade-name { font-size: 32rpx; font-weight: 700; }
.growth-earned { font-size: 24rpx; color: #94877F; margin-left: 16rpx; }
.growth-more { margin-left: auto; font-size: 40rpx; color: #B6AA9F; }
.growth-body { display: flex; border-top: 1rpx solid #F1F5F9; padding-top: 20rpx; }
.growth-cell { flex: 1; display: flex; flex-direction: column; align-items: center; }
.growth-cell + .growth-cell { border-left: 1rpx solid #F1F5F9; }
.growth-cell-num { font-size: 32rpx; font-weight: 700; margin-bottom: 4rpx; }
.growth-cell-label { font-size: 22rpx; color: #94877F; }
.growth-card-guide { display: flex; align-items: center; justify-content: center; padding: 40rpx 32rpx; }
.growth-guide-text { font-size: 26rpx; color: #94877F; }

/* 区块标题 */
.section-title { font-size: 30rpx; font-weight: 600; color: #2A2326; margin-bottom: 16rpx; border-left: 8rpx solid #FC7A57; padding-left: 16rpx; }

/* 平台动态 */
.dynamic-list { background: #FFF; border-radius: 16rpx; overflow: hidden; margin-bottom: 24rpx; }
.dynamic-item { display: flex; align-items: center; padding: 24rpx 28rpx; border-bottom: 1rpx solid #F1F5F9; }
.dynamic-item:last-child { border-bottom: none; }
.dynamic-item:active { background: #FAF7F4; }
.dynamic-tag { flex-shrink: 0; font-size: 22rpx; font-weight: 600; padding: 4rpx 14rpx; border-radius: 6rpx; margin-right: 16rpx; }
.dynamic-tag-course { background: #EEF2FF; color: #7C3AED; }
.dynamic-main { flex: 1; overflow: hidden; }
.dynamic-title { display: block; font-size: 28rpx; font-weight: 600; color: #2A2326; margin-bottom: 4rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-desc { display: block; font-size: 22rpx; color: #94877F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-arrow { flex-shrink: 0; font-size: 32rpx; color: #B6AA9F; margin-left: 8rpx; }
.dynamic-empty { background: #FFF; border-radius: 16rpx; padding: 40rpx 0; text-align: center; margin-bottom: 24rpx; }
.dynamic-empty-text { font-size: 26rpx; color: #94877F; }

/* AI 小知识 */
.tip-swiper { height: 180rpx; margin-bottom: 24rpx; }
.tip-card {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1B212C, #2A2326);
  border-radius: 16rpx;
  padding: 32rpx 28rpx;
  height: 140rpx;
  box-sizing: border-box;
}
.tip-icon { font-size: 40rpx; margin-right: 20rpx; flex-shrink: 0; }
.tip-text { font-size: 26rpx; color: #E8E2DE; line-height: 1.6; }

/* 最近课程 */
.course-mini-list { display: flex; flex-direction: column; margin-top: 4rpx; }
.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: #FC7A57; background: #FFF0E8; border-radius: 8rpx; padding: 4rpx 14rpx; margin-right: 16rpx; }
.course-mini-name { font-size: 28rpx; font-weight: 600; color: #2A2326; 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: #FC7A57; background: #FFF0E8; }
.course-mini-status.st-active { color: #22C55E; background: #F0FDF4; }
.course-mini-status.st-finished { color: #94877F; background: #F1F5F9; }
.course-mini-desc { font-size: 24rpx; color: #5A4F4B; 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: #94877F; }

/* 未登录引导 */
.login-hint {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #FC7A57, #F9494F);
  border-radius: 16rpx;
  padding: 28rpx 32rpx;
  margin-top: 8rpx;
}
.login-hint-icon { font-size: 36rpx; margin-right: 16rpx; }
.login-hint-text { flex: 1; font-size: 26rpx; color: #FFF; font-weight: 500; }
.login-hint-arrow { font-size: 32rpx; color: #FFF; }

/* 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: #2A2326;
  margin-bottom: 12rpx;
}
.sheet-sub {
  display: block;
  font-size: 26rpx;
  color: #5A4F4B;
}
.sheet-login-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(135deg, #FC7A57, #F9494F);
  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: #94877F;
}
</style>