cfc/cfc-frontend/pages/action/index.vue

<template>
  <view class="container">
    <!-- 品牌头部 -->
    <PageBanner theme="action"
      tagline="知行合一 · 快乐成长"
      quote="千里之行，始于足下" />

    <!-- 我的任务（登录后可见，放在最上面） -->
    <view class="section" v-if="sectionVisible('today_tasks') && isLoggedIn">
      <view class="section-header">
        <text class="section-title">📋 我的任务</text>
        <text class="section-more" @click="goTasks">全部 ›</text>
      </view>
      <view class="task-wrap" v-if="todayTasks.length > 0">
        <view class="task-item" v-for="task in todayTasks" :key="task.id">
          <text class="task-name">{{ task.title }}</text>
          <text class="task-points">+{{ task.points || 0 }}分</text>
        </view>
      </view>
      <view class="task-empty" v-else>
        <text class="task-empty-text">今日暂无任务</text>
      </view>
    </view>

    <!-- 功能入口（4个：活动、商品、课程） -->
    <view class="func-section" v-if="sectionVisible('func_entries')">
      <view class="func-grid">
        <view class="func-item" v-for="item in funcList" :key="item.label" @click="onFuncClick(item)">
          <view class="func-icon-wrap">
            <text class="func-icon">{{ item.icon }}</text>
          </view>
          <text class="func-label">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <!-- 热门活动 -->
    <view class="section" v-if="sectionVisible('hot_activities')">
      <view class="section-header">
        <text class="section-title">🔥 热门活动</text>
        <text class="section-more" @click="goMoreActivities">更多 ›</text>
      </view>
      <scroll-view scroll-x class="activity-scroll" show-scrollbar="false">
        <view class="activity-card" v-for="act in hotActivities" :key="act.id" @click="goActivityDetail(act.id)">
          <image class="activity-img" :src="act.image || '/static/default-activity.png'" mode="aspectFill" />
          <view class="activity-info">
            <text class="activity-name">{{ act.name }}</text>
            <text class="activity-meta">{{ act.date }} · {{ act.location }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐商品 -->
    <view class="section" v-if="sectionVisible('recommended_products')">
      <view class="section-header">
        <text class="section-title">🛍️ 推荐商品</text>
        <text class="section-more" @click="goMoreProducts">更多 ›</text>
      </view>
      <view class="product-list">
        <view class="product-card" v-for="prod in recommendedProducts" :key="prod.id" @click="goProductDetail(prod.id)">
          <image class="product-img" :src="prod.image || '/static/default-product.png'" mode="aspectFill" />
          <text class="product-name line-clamp-2">{{ prod.name }}</text>
          <text class="product-price">¥{{ prod.price }}</text>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getVisibleSections, getEnergyOverview, getTodayTasks } from '../../utils/api.js'

export default {
  components: { PageBanner },
  data() {
    return {
      isLoggedIn: false,
      role: null,
      currentChildId: null,
      totalEnergy: null,
      visibleSections: [],
      funcList: [
        { icon: '\u{1F3CB}', label: '任务', needLogin: true, page: '/pages/tasks/tasks' },
        { icon: '\u{1F3C0}', label: '活动', needLogin: false, page: '/pages/discover/index?type=activity' },
        { icon: '\u{1F6CD}', label: '商城', needLogin: false, page: '/pages/shop/index' },
        { icon: '\u{1F3EB}', label: '课程', needLogin: false, page: '/pages/discover/index?type=course' }
      ],
      hotActivities: [
        { id: 1, name: '亲子户外徒步', date: '周六', location: '奥林匹克公园', image: '' },
        { id: 2, name: '家庭健康跑', date: '周日', location: '朝阳公园', image: '' },
        { id: 3, name: '儿童瑜伽体验', date: '下周六', location: '浠艾福中心', image: '' }
      ],
      recommendedProducts: [
        { id: 1, name: '儿童智能手环', price: 299, image: '' },
        { id: 2, name: '家庭健康管理套装', price: 599, image: '' },
        { id: 3, name: '亲子运动礼盒', price: 399, image: '' },
        { id: 4, name: '儿童营养补充品', price: 199, image: '' }
      ],
      todayTasks: []
    }
  },
  onShow() {
    var token = uni.getStorageSync('token')
    this.isLoggedIn = !!token
    if (this.isLoggedIn) {
      this.role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      this.currentChildId = uni.getStorageSync('currentChildId') || null
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      this.loadEnergyData()
      this.loadTodayTasks()
    }
  },
  methods: {
    async loadSectionConfig() {
      if (!uni.getStorageSync('token')) {
        this.visibleSections = ['func_entries', 'hot_activities', 'recommended_products']
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      try {
        var res = await getVisibleSections({ pageKey: 'action', role: role })
        if (res.code === 200 && res.data) {
          this.visibleSections = res.data.map(function(s) { return s.sectionKey })
        }
      } catch (e) {
        this.visibleSections = ['func_entries', 'hot_activities', 'recommended_products']
      }
    },
    async loadEnergyData() {
      var childId = this.currentChildId
      if (!childId) return
      try {
        var res = await getEnergyOverview(childId)
        if (res && res.data) {
          this.totalEnergy = res.data.totalEnergy || 0
        }
      } catch (e) { console.log('获取能量概览失败', e) }
    },
    async loadTodayTasks() {
      var childId = this.currentChildId
      if (!childId) return
      try {
        var res = await getTodayTasks(childId)
        if (res && res.data) {
          this.todayTasks = res.data.slice(0, 5)
        }
      } catch (e) { console.log('获取今日任务失败', e) }
    },
    sectionVisible(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    onFuncClick(item) {
      if (item.needLogin && !this.isLoggedIn) {
        uni.showModal({
          title: '提示',
          content: '请先登录后使用此功能',
          success: function(res) { if (res.confirm) uni.navigateTo({ url: '/pages/login/login' }) }
        })
        return
      }
      if (item.page) {
        // TabBar page uses switchTab, others use navigateTo
        var nativeTabs = ['/pages/tasks/tasks', '/pages/index/index', '/pages/body/index', '/pages/mind/index', '/pages/action/index', '/pages/profile/profile']
        if (nativeTabs.indexOf(item.page) !== -1) {
          uni.switchTab({ url: item.page })
        } else {
          uni.navigateTo({ url: item.page })
        }
      }
    },
    goMoreActivities() {},
    goActivityDetail(id) {},
    goMoreProducts() {},
    goProductDetail(id) {
      var token = uni.getStorageSync('token')
      if (token) {
        uni.navigateTo({ url: '/pages/discover/product-detail/product-detail?id=' + id })
      } else {
        uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/action/index') })
      }
    },
    goTasks() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goLogin() { uni.navigateTo({ url: '/pages/login/login' }) }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

/* ===== 功能入口 ===== */
.func-section {
  margin: -40rpx 20rpx 0;
  position: relative;
  z-index: 2;
}
.func-grid {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 16rpx;
  display: flex;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.func-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.func-item:active {
  opacity: 0.7;
}
.func-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
.func-icon {
  font-size: 40rpx;
}
.func-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* ===== 通用区块 ===== */
.section {
  margin: 20rpx 20rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}

/* ===== 热门活动 ===== */
.activity-scroll {
  white-space: nowrap;
}
.activity-card {
  display: inline-block;
  width: 280rpx;
  margin-right: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.activity-img {
  width: 280rpx;
  height: 180rpx;
  background: #f0f0f0;
}
.activity-info {
  padding: 16rpx;
}
.activity-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.activity-meta {
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
  display: block;
}

/* ===== 推荐商品 ===== */
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.product-card {
  width: calc(50% - 10rpx);
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.product-img {
  width: 100%;
  height: 240rpx;
  background: #f0f0f0;
}
.product-name {
  font-size: 26rpx;
  color: #333;
  padding: 12rpx 16rpx 0;
}
.product-price {
  font-size: 28rpx;
  color: #F97316;
  font-weight: bold;
  padding: 8rpx 16rpx 16rpx;
  display: block;
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== 今日任务 ===== */
.task-wrap {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.task-item {
  display: flex;
  justify-content: space-between;
  padding: 28rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.task-item:last-child {
  border-bottom: none;
}
.task-name {
  font-size: 26rpx;
  color: #333;
}
.task-points {
  font-size: 24rpx;
  color: #F97316;
}
.task-empty {
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.task-empty-text {
  font-size: 26rpx;
  color: #999;
}

/* ===== 底部 ===== */
.bottom-spacer {
  height: 20rpx;
}
</style>