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

<template>
  <view class="container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="action" waitingFor="action" />

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

    <!-- 游客登录引导卡 -->
    <template v-if="!isLoggedIn">
      <LoginGuideCard
        title="登录后查看任务和活动记录"
        :items="[
          '查看今日任务，完成打卡获取行动能量',
          '报名参加热门活动，记录成长足迹',
          '查看专属商品和活动价格'
        ]" />
    </template>

    <!-- 登录后：五维能量条 -->
    <FamilyEnergyBar
      v-if="isLoggedIn"
      dimensionCode="action"
      :sandboxData="sandboxData"
      :dualDimension="dualDimension" />

    <!-- 能量沙盘（登录后可见） — Canvas 五行星图 -->
    <WuxingSandbox
      v-if="isLoggedIn && sandboxData"
      mode="live"
      :scores="{
        body: sandboxData.bodyScore || 0,
        mind: sandboxData.mindScore || 0,
        wisdom: sandboxData.wisdomScore || 0,
        action: sandboxData.actionScore || 0,
        wealth: sandboxData.wealthScore || 0
      }"
      :overallScore="sandboxData.overallScore || 0"
      :members="sandboxData.members || []"
      showDimensionBar
      starHeight="480rpx" />

    <!-- 关系图谱（登录后可见） — 家庭关系网络 -->
    <FamilyRelationGraph
      v-if="isLoggedIn && familyMembersVisible.length > 0"
      dimensionCode="action"
      :selfId="activeChildId"
      :members="familyMembersVisible"
      :energyMap="energyMapForGraph"
      :intimacyMap="intimacyMapForGraph"
      @memberTap="goMemberDetail" />

    <!-- ===== 维度任务/活动/商品 ===== -->
    <DimensionTasks
      v-if="isLoggedIn"
      dimensionCode="action"
      :tasks="dimensionTasks"
      @taskClick="onTaskClick"
      @moreTasks="goTasks" />

    <DimensionActivities
      dimensionCode="action"
      :activities="dimensionActivities"
      :isLoggedIn="isLoggedIn"
      @activityClick="goActivityDetail"
      @moreActivities="goMoreActivities" />

    <DimensionProducts
      dimensionCode="action"
      :products="dimensionProducts"
      :isLoggedIn="isLoggedIn"
      @productClick="goProductDetail"
      @moreProducts="goMoreProducts" />

    <!-- 推荐阅读 -->
    <DimensionArticles
      dimensionCode="action"
      :articles="actionArticles"
      :isLoggedIn="isLoggedIn"
      @articleClick="goArticleDetail"
      @moreArticles="goMoreArticles" />

    <!-- ===== 重要关系维护 + 关系健康概览 ===== -->
    <OctopusGraph
      :contactList="contactList"
      :healthAlerts="healthAlerts"
      :milestones="milestones"
      :isLoggedIn="isLoggedIn" />

    <!-- 功能入口（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>

    <!-- 导入联系人弹窗 -->
    <ContactImport
      :visible="showImportModal"
      @close="onCloseImport"
      @success="onImportSuccess" />

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

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import LoginGuideCard from '../../components/LoginGuideCard.vue'
import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
import DimensionTasks from '../../components/DimensionTasks.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import DimensionArticles from '../../components/DimensionArticles.vue'
import ContactCard from '../../components/ContactCard.vue'
import ContactImport from '../../components/ContactImport.vue'
import OctopusGraph from '../../components/OctopusGraph.vue'
import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
import WuxingSandbox from '../../components/wuxing-sandbox.vue'
import { getVisibleSections, getEnergyOverview, getFamilyEnergySandbox, getTodayTasksByCategory, getActivityList, getProductsByDomain, getChildren, getContactList, getVisibleFamilyMembers, getFeaturedArticles, getHealthAlerts, getMilestones } from '../../utils/api.js'

export default {
  components: { TabTransition, PageBanner, LoginGuideCard, FamilyEnergyBar, DimensionTasks, DimensionActivities, DimensionProducts, DimensionArticles, ContactCard, ContactImport, FamilyRelationGraph, OctopusGraph, WuxingSandbox },
  data() {
    return {
      showTabTransition: true,
      isLoggedIn: false,
      role: null,
      currentChildId: null,
      activeChildId: null,
      currentChildName: '',
      userName: '',
      children: [],
      familyMembersVisible: [],
      sandboxData: null,
      dualDimension: null,
      visibleSections: [],
      dimensionTasks: [],
      dimensionActivities: [],
      dimensionProducts: [],
      articles: [],
      contactList: [],
      showImportModal: false,
      healthAlerts: [],
      milestones: [],
      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/discover/index?type=product' },
        { icon: '\u{1F3EB}', label: '课程', needLogin: false, page: '/pages/discover/index?type=course' }
      ]
    }
  },
  computed: {
    energyMapForGraph: function() {
      var map = {}
      if (this.sandboxData && this.sandboxData.members) {
        for (var i = 0; i < this.sandboxData.members.length; i++) {
          var m = this.sandboxData.members[i]
          map[m.memberId || m.id] = {
            bodyScore: m.bodyScore || 0,
            mindScore: m.mindScore || 0,
            actionScore: m.actionScore || 0
          }
        }
      }
      return map
    },
    intimacyMapForGraph: function() {
      return {}
    },
    actionArticles: function() {
      if (!this.articles || this.articles.length === 0) return []
      var result = []
      for (var i = 0; i < this.articles.length; i++) {
        var a = this.articles[i]
        if (a.relatedDimensions && a.relatedDimensions.indexOf('action') !== -1) {
          result.push(a)
        }
      }
      if (result.length === 0) return this.articles.slice(0, 5)
      return result.slice(0, 5)
    }
  },
  onShow() {
    this.showTabTransition = true

    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.userName = uni.getStorageSync('nickname') || uni.getStorageSync('userName') || '家长'
    }
    this.loadSectionConfig()
    if (this.isLoggedIn) {
      var self = this
      this.loadChildren().finally(function() {
        uni.setStorageSync('actionReadyTime', Date.now())
      })
      this.loadFamilyMembersVisible()
      this.loadRelationshipHealth()
    }
    // 游客也能浏览活动和商品
    this.loadDimensionActivities()
    this.loadDimensionProducts()
    // 游客也能浏览文章
    this.loadFeaturedArticles()
    this._watchPageReady()
  },
  methods: {
    loadSectionConfig: function() {
      var self = this
      var baseSections = ['func_entries']
      if (!uni.getStorageSync('token')) {
        self.visibleSections = baseSections
        return
      }
      var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || null
      getVisibleSections({ pageKey: 'action', role: role }).then(function(res) {
        if (res.code === 200 && res.data) {
          var keys = res.data.map(function(s) { return s.sectionKey })
          var merged = baseSections.slice()
          keys.forEach(function(k) { if (merged.indexOf(k) === -1) merged.push(k) })
          self.visibleSections = merged
        }
      }).catch(function() {
        self.visibleSections = ['func_entries']
      })
    },
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data) {
          self.children = res.data
          var savedChildId = uni.getStorageSync('currentChildId')
          var found = false
          for (var i = 0; i < self.children.length; i++) {
            if (self.children[i].childId === savedChildId) {
              self.currentChildId = savedChildId
              self.activeChildId = savedChildId
              self.currentChildName = self.children[i].name || self.children[i].nickname || '孩子'
              found = true
              break
            }
          }
          if (!found && self.children.length > 0) {
            self.currentChildId = self.children[0].childId
            self.activeChildId = self.children[0].childId
            self.currentChildName = self.children[0].name || self.children[0].nickname || '孩子'
            uni.setStorageSync('currentChildId', self.activeChildId)
          }
          if (self.currentChildId) {
            self.loadDimensionData()
          }
          self.loadContacts()
        }
      }).catch(function(e) {
        console.log('获取孩子列表失败', e)
      })
    },
    loadDimensionData: function() {
      this.loadEnergyData()
      this.loadSandboxData()
      this.loadDimensionTasks()
      this.loadDimensionActivities()
      this.loadDimensionProducts()
    },
    loadEnergyData: function() {
      var self = this
      if (!this.currentChildId) return
      getEnergyOverview(this.currentChildId).then(function(res) {
        if (res && res.data) {
          var dims = res.data.dimensions
          if (dims && dims.length > 0) {
            for (var i = 0; i < dims.length; i++) {
              if (dims[i].code === 'action') {
                self.dualDimension = dims[i]
                break
              }
            }
          }
        }
      }).catch(function(e) {
        console.log('获取能量概览失败', e)
      })
    },
    loadSandboxData: function() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
        }
      }).catch(function() {})
    },
    loadDimensionTasks: function() {
      var self = this
      if (!this.currentChildId) return
      getTodayTasksByCategory(this.currentChildId, 'action').then(function(res) {
        if (res && res.data) {
          self.dimensionTasks = Array.isArray(res.data) ? res.data.slice(0, 5) : []
        }
      }).catch(function() { self.dimensionTasks = [] })
    },
    loadDimensionActivities: function() {
      var self = this
      getActivityList({ dimensionCode: 'action', page: 1, size: 3 }).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionActivities = list.slice(0, 3)
        }
      }).catch(function() { self.dimensionActivities = [] })
    },
    loadDimensionProducts: function() {
      var self = this
      getProductsByDomain('action', 1, 4).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionProducts = list.slice(0, 4)
        }
      }).catch(function() { self.dimensionProducts = [] })
    },
    loadContacts: function() {
      var self = this
      getContactList({}).then(function(res) {
        if (res.code === 200 && res.data) {
          self.contactList = Array.isArray(res.data) ? res.data : []
        }
      }).catch(function(e) {
        console.log('获取联系人失败', e)
      })
    },
    onContactClick: function(item) {
      uni.navigateTo({ url: '/pages/action-detail/contact-detail?id=' + item.id })
    },
    onShowImport: function() {
      this.showImportModal = true
    },
    onCloseImport: function() {
      this.showImportModal = false
    },
    onImportSuccess: function() {
      this.showImportModal = false
      this.loadContacts()
    },
    onChildChanged: function(child) {
      this.currentChildId = child.childId
      this.currentChildName = child.name || child.nickname || '孩子'
      uni.setStorageSync('currentChildId', child.childId)
      this.loadDimensionData()
    },
    loadFamilyMembersVisible: function() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    scrollToSection: function(section) {
      uni.pageScrollTo({ selector: '#' + section, duration: 300 })
    },
    sectionVisible: function(key) {
      return this.visibleSections.length === 0 || this.visibleSections.indexOf(key) !== -1
    },
    onTaskClick: function(task) {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goActivityDetail: function(act) {
      if (!act || !act.id) return
      uni.navigateTo({ url: '/pages/discover-detail/activity-detail/activity-detail?id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/activity/index' })
    },
    goProductDetail: function(prod) {
      uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/shop/index' })
    },
    onFuncClick: function(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) {
        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 })
        }
      }
    },
    goTasks: function() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
    goMemberDetail: function(member) {
      if (!member || !member.memberId) return
      uni.navigateTo({
        url: '/pages/member-detail/member-detail?memberId=' + member.memberId + '&memberType=' + (member.memberType || 'child') + '&entrySource=relation-graph&dimensionCode=action'
      })
    },
    goLogin: function() { uni.navigateTo({ url: '/pages/login/login' }) },
    parseRelatedDimensions: function(val) {
      if (!val) return []
      if (Array.isArray(val)) return val
      if (typeof val === 'string') {
        try {
          var parsed = JSON.parse(val)
          return Array.isArray(parsed) ? parsed : []
        } catch (e) {
          // 逗号分隔格式 fallback: "action,mind"
          return val.split(',').map(function(s) { return s.trim() }).filter(function(s) { return s })
        }
      }
      return []
    },
    loadFeaturedArticles: function() {
      var self = this
      getFeaturedArticles({ size: 5, dimensionCode: 'action' }).then(function(res) {
        if (res.code === 200 && res.data) {
          var gradientColors = [
            'linear-gradient(135deg, #10B981, #34D399)',
            'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
            'linear-gradient(135deg, #8B5CF6, #C084FC)',
            'linear-gradient(135deg, #F97316, #FB923C)',
            'linear-gradient(135deg, #6366F1, #818CF8)'
          ]
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.articles = list.map(function(item, index) {
            return {
              id: item.id,
              category: item.categoryName || '行动文章',
              categoryColor: gradientColors[index % gradientColors.length],
              title: item.title || '',
              summary: item.summary || '',
              views: item.viewCount ? String(item.viewCount) : '0',
              likes: '0',
              date: item.publishedAt ? item.publishedAt.slice(0, 10) : '',
              relatedDimensions: self.parseRelatedDimensions(item.relatedDimensions)
            }
          })
        }
      }).catch(function() {})
    },
    goArticleDetail: function(article) {
      var id = article.id || article
      uni.navigateTo({ url: '/pages/mind-detail/article-detail?id=' + id })
    },
    goMoreArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=action' })
    },
    loadRelationshipHealth: function() {
      var self = this
      getHealthAlerts({}).then(function(res) {
        if (res.code === 200 && res.data) {
          self.healthAlerts = Array.isArray(res.data) ? res.data : []
        }
      }).catch(function() {
        self.healthAlerts = []
      })
      getMilestones({}, 30).then(function(res) {
        if (res.code === 200 && res.data) {
          self.milestones = Array.isArray(res.data) ? res.data : []
        }
      }).catch(function() {
        self.milestones = []
      })
    },
    goInteractionLog: function(memberId) {
      if (memberId) {
        uni.navigateTo({ url: '/pages/action-detail/interaction-log?memberId=' + memberId })
      } else {
        uni.navigateTo({ url: '/pages/action-detail/interaction-log' })
      }
    },
    goRelationshipQuestionnaire: function() {
      uni.navigateTo({ url: '/pages/action-detail/relationship-questionnaire' })
    },
    _watchPageReady() {
      var self = this
      var unwatch = this.$watch(function() {
        if (self.isLoggedIn) {
          return !!(self.dualDimension || self.sandboxData || (self.dimensionTasks && self.dimensionTasks.length > 0))
        }
        return !!(self.dimensionActivities && self.dimensionActivities.length > 0) ||
               !!(self.dimensionProducts && self.dimensionProducts.length > 0)
      }, function(val) {
        if (val) {
          if (unwatch) unwatch()
          self.showTabTransition = false
        }
      })
      setTimeout(function() {
        if (unwatch) unwatch()
        self.showTabTransition = false
      }, 5000)
    }
  }
}
</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;
}

/* ===== 重要关系 ===== */
.contact-section {
  margin: 20rpx 20rpx 0;
}
.contact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.contact-section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.contact-header-right {
  display: flex;
  gap: 16rpx;
  align-items: center;
}
.contact-more {
  font-size: 24rpx;
  color: #999;
}
.contact-import-btn {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
.contact-scroll {
  white-space: nowrap;
  overflow: hidden;
}
.contact-scroll-inner {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding: 8rpx 0 16rpx;
}
.contact-card-wrap {
  flex-shrink: 0;
  width: 220rpx;
}
.contact-card-wrap:active {
  opacity: 0.8;
}
.contact-add-card {
  width: 160rpx;
}
.add-card-inner {
  width: 160rpx;
  height: 280rpx;
  background: #fff;
  border-radius: 16rpx;
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.add-card-icon {
  font-size: 48rpx;
  color: #ccc;
}
.add-card-label {
  font-size: 22rpx;
  color: #999;
}
.contact-empty {
  padding: 40rpx 0;
  text-align: center;
}
.contact-empty-text {
  font-size: 26rpx;
  color: #ccc;
}

/* ===== 关系健康概览 ===== */
.rq-section {
  margin: 20rpx 20rpx 0;
}
.rq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.rq-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.rq-more {
  font-size: 24rpx;
  color: #F97316;
  font-weight: 500;
}
/* 健康预警卡片 */
.rq-alerts {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-bottom: 16rpx;
}
.rq-alert-card {
  background: #FFF7ED;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  border: 1rpx solid #FED7AA;
}
.rq-alert-card:active {
  opacity: 0.8;
}
.rq-alert-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rq-alert-emoji {
  font-size: 32rpx;
}
.rq-alert-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.rq-alert-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.rq-alert-desc {
  font-size: 24rpx;
  color: #F97316;
}
.rq-alert-action {
  flex-shrink: 0;
}
.rq-alert-btn {
  font-size: 24rpx;
  color: #fff;
  background: #F97316;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}
/* 里程碑卡片 */
.rq-milestones {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  margin-bottom: 16rpx;
}
.rq-milestone-card {
  background: #F0F9FF;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  border: 1rpx solid #BAE6FD;
}
.rq-milestone-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rq-milestone-emoji {
  font-size: 32rpx;
}
.rq-milestone-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}
.rq-milestone-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.rq-milestone-desc {
  font-size: 24rpx;
  color: #0EA5E9;
}
/* 快捷操作 */
.rq-quick-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 8rpx;
}
.rq-action-btn {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.rq-action-btn:active {
  opacity: 0.8;
}
.rq-action-icon {
  font-size: 36rpx;
}
.rq-action-label {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

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