Просмотр исходного кода

feat(cfc-frontend): family members empty state — always show as entry point

- 空状态改为 '还没有家庭成员,添加或邀请' 卡片,添加/邀请可点击
- 添加 → 导航到 /pages/family/add-member
- 邀请 → 打开邀请弹窗
- family-header 在无 familyName 时显示 '我的家庭' 占位
- 筛选后无结果时仍显示 '暂无家长/暂无孩子' 提示
Sisyphus 2 месяцев назад
Родитель
Сommit
66c13a8994
1 измененных файлов с 55 добавлено и 4 удалено
  1. 55 4
      cfc-frontend/pages/profile/family-members.vue

+ 55 - 4
cfc-frontend/pages/profile/family-members.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="container">
     <!-- ===== 家庭信息头部 (带齿轮入口) ===== -->
-    <view class="family-header" v-if="familyName">
+    <view class="family-header">
       <view class="family-header-content">
         <view class="family-header-icon">🏠</view>
         <view class="family-header-text">
-          <text class="family-name">{{ familyName }}</text>
+          <text class="family-name">{{ familyName || '我的家庭' }}</text>
           <text class="family-member-count">{{ members.length }} 位成员</text>
         </view>
         <view class="header-settings-btn" @click="showSettings = true">
@@ -60,8 +60,17 @@
         </view>
         <text class="member-arrow">›</text>
       </view>
-      <view v-if="filteredMembers.length === 0" class="empty-row">
-        <text class="empty-text">暂无成员</text>
+      <!-- 空状态:还没有家庭成员 -->
+      <view v-if="members.length === 0" class="empty-state-card">
+        <text class="empty-icon">👨‍👩‍👧‍👦</text>
+        <text class="empty-title">还没有家庭成员</text>
+        <view class="empty-actions">
+          <view class="empty-action-btn add-btn" @click="onAddMember">+ 添加</view>
+          <view class="empty-action-btn invite-btn" @click="onInvite">📨 邀请</view>
+        </view>
+      </view>
+      <view v-else-if="filteredMembers.length === 0" class="empty-row">
+        <text class="empty-text">暂无{{ filterType === 'parent' ? '家长' : '孩子' }}成员</text>
       </view>
     </view>
 
@@ -518,6 +527,48 @@ export default {
   color: #bbb;
 }
 
+/* ===== 空状态卡片(无家庭成员时显示) ===== */
+.empty-state-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 60rpx 30rpx 40rpx;
+  text-align: center;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+.empty-icon {
+  font-size: 80rpx;
+  display: block;
+  margin-bottom: 16rpx;
+}
+.empty-title {
+  font-size: 30rpx;
+  color: #666;
+  display: block;
+  margin-bottom: 32rpx;
+}
+.empty-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20rpx;
+}
+.empty-action-btn {
+  padding: 16rpx 40rpx;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+}
+.empty-action-btn:active {
+  opacity: 0.8;
+}
+.add-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+}
+.invite-btn {
+  background: #f0f9ff;
+  color: #667eea;
+}
+
 /* ===== 三维评分进度条(列表行内) ===== */
 .member-quality-scores {
   display: flex;