|
|
@@ -0,0 +1,257 @@
|
|
|
+<template>
|
|
|
+ <view class="detail-container">
|
|
|
+ <!-- 五维能量条 -->
|
|
|
+ <FamilyEnergyBar
|
|
|
+ dimensionCode="wealth"
|
|
|
+ :sandboxData="sandboxData"
|
|
|
+ :dualDimension="dualDimension" />
|
|
|
+
|
|
|
+ <!-- 成员信息卡 -->
|
|
|
+ <view class="member-card" v-if="memberInfo">
|
|
|
+ <view class="member-avatar wealth-avatar">
|
|
|
+ <text class="avatar-text">{{ memberInfo.name && memberInfo.name.charAt(0) || '孩' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="member-info">
|
|
|
+ <text class="member-name">{{ memberInfo.name || '孩子' }}</text>
|
|
|
+ <text class="member-role">财富维度</text>
|
|
|
+ </view>
|
|
|
+ <view class="member-score" v-if="dualDimension">
|
|
|
+ <text class="score-value wealth-score">{{ dualDimension.energy || 0 }}</text>
|
|
|
+ <text class="score-label">能量值</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 家庭成员关系图谱（只读） -->
|
|
|
+ <FamilyRelationGraph
|
|
|
+ dimensionCode="wealth"
|
|
|
+ :selfId="selfId"
|
|
|
+ :members="graphMembers"
|
|
|
+ :energyMap="energyMapForGraph"
|
|
|
+ :intimacyMap="intimacyMapForGraph"
|
|
|
+ :interactive="false" />
|
|
|
+
|
|
|
+ <!-- 今日任务 -->
|
|
|
+ <DimensionTasks
|
|
|
+ :memberId="memberId"
|
|
|
+ @taskClick="onTaskClick"
|
|
|
+ @moreTasks="goTasks" />
|
|
|
+
|
|
|
+ <!-- 活动 -->
|
|
|
+ <DimensionActivities
|
|
|
+ :isLoggedIn="true"
|
|
|
+ @activityClick="goActivityDetail"
|
|
|
+ @moreActivities="goMoreActivities" />
|
|
|
+
|
|
|
+ <!-- 商品 -->
|
|
|
+ <DimensionProducts
|
|
|
+ :isLoggedIn="true"
|
|
|
+ @productClick="goProductDetail"
|
|
|
+ @moreProducts="goMoreProducts" />
|
|
|
+
|
|
|
+ <!-- 底部占位 -->
|
|
|
+ <view class="bottom-spacer"></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
|
|
|
+import FamilyRelationGraph from '../../components/FamilyRelationGraph.vue'
|
|
|
+import DimensionTasks from '../../components/DimensionTasks.vue'
|
|
|
+import DimensionActivities from '../../components/DimensionActivities.vue'
|
|
|
+import DimensionProducts from '../../components/DimensionProducts.vue'
|
|
|
+import { getEnergyOverview, getFamilyEnergySandbox, getChildren } from '../../utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { FamilyEnergyBar, FamilyRelationGraph, DimensionTasks, DimensionActivities, DimensionProducts },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ memberId: null,
|
|
|
+ selfId: null,
|
|
|
+ memberInfo: null,
|
|
|
+ sandboxData: null,
|
|
|
+ dualDimension: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ graphMembers: function() {
|
|
|
+ if (!this.sandboxData || !this.sandboxData.members) return []
|
|
|
+ return this.sandboxData.members.map(function(m) {
|
|
|
+ return {
|
|
|
+ id: m.memberId || m.id,
|
|
|
+ nickname: m.name || m.nickname || '成员',
|
|
|
+ memberType: m.memberType || 'child'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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 {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
+ this.memberId = options.memberId || uni.getStorageSync('currentChildId') || null
|
|
|
+ },
|
|
|
+ onShow: function() {
|
|
|
+ this.selfId = uni.getStorageSync('userId') || null
|
|
|
+ this.loadChildren()
|
|
|
+ this.loadSandboxData()
|
|
|
+ if (this.memberId) {
|
|
|
+ this.loadEnergyData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadChildren: function() {
|
|
|
+ var self = this
|
|
|
+ getChildren().then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].memberId === self.memberId) {
|
|
|
+ self.memberInfo = res.data[i]
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!self.memberInfo && res.data.length > 0) {
|
|
|
+ self.memberInfo = res.data[0]
|
|
|
+ self.memberId = res.data[0].memberId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ loadSandboxData: function() {
|
|
|
+ var self = this
|
|
|
+ getFamilyEnergySandbox().then(function(res) {
|
|
|
+ if (res && res.data) self.sandboxData = res.data
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ loadEnergyData: function() {
|
|
|
+ var self = this
|
|
|
+ getEnergyOverview(this.memberId).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 === 'wealth') {
|
|
|
+ self.dualDimension = dims[i]
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ onTaskClick: function(task) {
|
|
|
+ uni.navigateTo({ url: '/pages/tasks/tasks' })
|
|
|
+ },
|
|
|
+ goActivityDetail: function(act) {
|
|
|
+ if (act && act.id) uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
|
|
|
+ },
|
|
|
+ goMoreActivities: function() {
|
|
|
+ uni.navigateTo({ url: '/pages/activity/index' })
|
|
|
+ },
|
|
|
+ goProductDetail: function(prod) {
|
|
|
+ if (prod && prod.id) uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
|
|
|
+ },
|
|
|
+ goMoreProducts: function() {
|
|
|
+ uni.navigateTo({ url: '/pages/shop/index/index' })
|
|
|
+ },
|
|
|
+ goTasks: function() { uni.navigateTo({ url: '/pages/tasks/tasks' }) },
|
|
|
+ goBack: function() { uni.navigateBack() }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.detail-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.member-card {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20rpx 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
+}
|
|
|
+
|
|
|
+.member-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.wealth-avatar {
|
|
|
+ background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.member-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.member-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.member-role {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.member-score {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.score-value {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFD700;
|
|
|
+}
|
|
|
+
|
|
|
+.wealth-score {
|
|
|
+ color: #B8860B;
|
|
|
+}
|
|
|
+
|
|
|
+.score-label {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-spacer {
|
|
|
+ height: 40rpx;
|
|
|
+}
|
|
|
+</style>
|
Sisyphus