|
|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <view class="mind-section">
|
|
|
+ <!-- 亲密关系评分 -->
|
|
|
+ <view class="section-card" v-if="relationScores && relationScores.scores">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">💕 亲密关系评分</text>
|
|
|
+ </view>
|
|
|
+ <view class="score-item" v-for="(score, key) in relationScores.scores" :key="key">
|
|
|
+ <text class="score-label">{{ score.label || key }}</text>
|
|
|
+ <view class="score-bar-bg">
|
|
|
+ <view class="score-bar-fill" :style="'width:' + (score.value || 0) + '%'"></view>
|
|
|
+ </view>
|
|
|
+ <text class="score-value">{{ score.value || 0 }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 联系人 -->
|
|
|
+ <view class="section-card" v-if="contactList.length > 0">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">📞 重要联系人</text>
|
|
|
+ </view>
|
|
|
+ <view class="contact-item" v-for="contact in contactList" :key="contact.id" @click="goContactDetail(contact)">
|
|
|
+ <text class="contact-name">{{ contact.name }}</text>
|
|
|
+ <text class="contact-relation">{{ contact.relation || '' }}</text>
|
|
|
+ <text class="contact-phone">{{ contact.phone || '' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 健康告警 -->
|
|
|
+ <view class="section-card" v-if="healthAlerts && healthAlerts.length > 0">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">⚠️ 健康告警</text>
|
|
|
+ </view>
|
|
|
+ <view class="alert-item" v-for="alert in healthAlerts" :key="alert.id">
|
|
|
+ <text class="alert-type">{{ alert.type }}</text>
|
|
|
+ <text class="alert-desc">{{ alert.description }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 里程碑 -->
|
|
|
+ <view class="section-card" v-if="milestones && milestones.length > 0">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">🎯 即将到来的里程碑</text>
|
|
|
+ </view>
|
|
|
+ <view class="milestone-item" v-for="ms in milestones" :key="ms.id || ms.title">
|
|
|
+ <text class="milestone-title">{{ ms.title }}</text>
|
|
|
+ <text class="milestone-date">{{ ms.date }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <view class="loading" v-if="loading">加载中...</view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getRelationshipScores, getContactList, getHealthAlerts, getMilestones } from '../../utils/api.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ memberId: { type: [Number, String], default: null },
|
|
|
+ childId: { type: [Number, String], default: null },
|
|
|
+ memberType: { type: String, default: '' },
|
|
|
+ memberInfo: { type: Object, default: null },
|
|
|
+ sandboxData: { type: Object, default: null },
|
|
|
+ energyMap: { type: Object, default: null }
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ relationScores: null,
|
|
|
+ contactList: [],
|
|
|
+ healthAlerts: [],
|
|
|
+ milestones: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData: function() {
|
|
|
+ var self = this
|
|
|
+ var familyId = (this.memberInfo && this.memberInfo.familyId) || ''
|
|
|
+
|
|
|
+ if (familyId) {
|
|
|
+ getRelationshipScores(familyId).then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.relationScores = res.data
|
|
|
+ }
|
|
|
+ }).catch(function(e) { console.log('加载关系评分失败', e) })
|
|
|
+
|
|
|
+ getContactList({ familyId: familyId }).then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.contactList = Array.isArray(res.data) ? res.data : (res.data.records || [])
|
|
|
+ }
|
|
|
+ }).catch(function(e) { console.log('加载联系人失败', e) })
|
|
|
+
|
|
|
+ getHealthAlerts(familyId).then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.healthAlerts = Array.isArray(res.data) ? res.data : []
|
|
|
+ }
|
|
|
+ }).catch(function(e) { console.log('加载告警失败', e) })
|
|
|
+
|
|
|
+ getMilestones(familyId, 30).then(function(res) {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.milestones = Array.isArray(res.data) ? res.data : []
|
|
|
+ }
|
|
|
+ }).catch(function(e) { console.log('加载里程碑失败', e) })
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ },
|
|
|
+ goContactDetail: function(contact) {
|
|
|
+ uni.navigateTo({ url: '/pages/mind/contact-detail?id=' + contact.id })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.mind-section {}
|
|
|
+.section-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
|
|
|
+}
|
|
|
+.section-header {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.score-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 0;
|
|
|
+}
|
|
|
+.score-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #555;
|
|
|
+ width: 160rpx;
|
|
|
+}
|
|
|
+.score-bar-bg {
|
|
|
+ flex: 1;
|
|
|
+ height: 20rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.score-bar-fill {
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #FF6B9D, #FF9EC4);
|
|
|
+ border-radius: 10rpx;
|
|
|
+}
|
|
|
+.score-value {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF6B9D;
|
|
|
+ width: 60rpx;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.contact-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 14rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f5f5f5;
|
|
|
+}
|
|
|
+.contact-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.contact-relation {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.contact-phone {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF6B9D;
|
|
|
+}
|
|
|
+.alert-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 10rpx 0;
|
|
|
+}
|
|
|
+.alert-type {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #E74C3C;
|
|
|
+ width: 100rpx;
|
|
|
+}
|
|
|
+.alert-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #555;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.milestone-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10rpx 0;
|
|
|
+}
|
|
|
+.milestone-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.milestone-date {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.loading {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|