feat: 重新设计家庭成员页面 - 暖橙卡片风格 + 底部操作栏 + 直接邀请海报

cfc-frontend/pages/profile-extra/family-members.vue

@@ -1,123 +1,34 @@
 <template>
   <view class="container">
-    <!-- ===== 家庭信息头部 (带齿轮入口) ===== -->
+    <!-- ===== 家庭信息头部 ===== -->
     <view class="family-header">
       <view class="family-header-content">
-        <view class="family-header-icon">🏠</view>
+        <text class="family-header-icon">🏠</text>
         <view class="family-header-text">
           <text class="family-name">{{ familyName || '我的家庭' }}</text>
           <text class="family-member-count">{{ members.length }} 位成员</text>
         </view>
-        <view class="header-settings-btn" @click="showSettings = true">
-          <text class="settings-gear-icon">⚙️</text>
-        </view>
       </view>
     </view>
 
-    <!-- ===== 关系标签筛选项 ===== -->
-    <view class="filter-tabs">
-      <view class="filter-tab" :class="{active: filterType === 'all'}" @click="filterType = 'all'">全部</view>
-      <view class="filter-tab" :class="{active: filterType === 'parent'}" @click="filterType = 'parent'">家长</view>
-      <view class="filter-tab" :class="{active: filterType === 'child'}" @click="filterType = 'child'">孩子</view>
-    </view>
-
-    <!-- ===== 成员列表（点击行→详情弹窗） ===== -->
-    <view class="member-list">
-      <view class="member-item" v-for="m in filteredMembers" :key="m.id" @click="showMemberDetail(m)">
+    <!-- ===== 成员卡片列表 ===== -->
+    <view class="member-list" v-if="members.length > 0">
+      <view class="member-card" v-for="m in members" :key="m.id" @click="showMemberDetail(m)">
         <image class="member-avatar" :src="m.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
-        <view class="member-detail">
+        <view class="member-info">
           <text class="member-name">{{ m.nickname || '未设置' }}</text>
-          <view class="member-tags">
-            <text class="member-role-tag">{{ m.relativeLabel || m.roleLabel || (m.effectiveRole === 'parent' ? '家长' : '孩子') }}</text>
-            <text class="member-source-tag" v-if="m.source === 'family_member'">手动添加</text>
-            <text class="member-extra" v-if="m.age"> {{ m.age }}岁</text>
-            <text class="member-extra" v-if="m.gender"> · {{ m.gender === 'male' ? '男' : '女' }}</text>
-          </view>
-          <!-- 三维评分进度条 -->
-          <view class="member-quality-scores" v-if="memberScores[m.id]">
-            <view class="score-item">
-              <text class="score-label">信任</text>
-              <view class="score-bar-bg">
-                <view class="score-bar-fill trust" :style="{width: (memberScores[m.id].trustScore || 0) + '%'}"></view>
-              </view>
-              <text class="score-value">{{ Math.round(memberScores[m.id].trustScore || 0) }}</text>
-            </view>
-            <view class="score-item">
-              <text class="score-label">亲密</text>
-              <view class="score-bar-bg">
-                <view class="score-bar-fill intimacy" :style="{width: (memberScores[m.id].intimacyScore || 0) + '%'}"></view>
-              </view>
-              <text class="score-value">{{ Math.round(memberScores[m.id].intimacyScore || 0) }}</text>
-            </view>
-            <view class="score-item">
-              <text class="score-label">沟通</text>
-              <view class="score-bar-bg">
-                <view class="score-bar-fill communication" :style="{width: (memberScores[m.id].communicationScore || 0) + '%'}"></view>
-              </view>
-              <text class="score-value">{{ Math.round(memberScores[m.id].communicationScore || 0) }}</text>
-            </view>
-          </view>
+          <text class="member-role-tag">{{ m.relativeLabel || m.roleLabel || (m.effectiveRole === 'parent' ? '家长' : '孩子') }}</text>
         </view>
         <text class="member-arrow">›</text>
       </view>
-      <!-- 空状态：还没有家庭成员 -->
-      <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>
 
-    <!-- ===== Settings 弹窗（齿轮入口） ===== -->
-    <view class="modal-mask" v-if="showSettings" @click="showSettings = false">
-      <view class="settings-card" @click.stop>
-        <view class="settings-header">
-          <text class="settings-title">成员管理</text>
-          <text class="settings-close" @click="showSettings = false">×</text>
-        </view>
-        <view class="settings-body">
-          <view class="settings-item" @click="onAddMember">
-            <text class="settings-item-icon">＋</text>
-            <text class="settings-item-text">添加成员</text>
-          </view>
-          <view class="settings-item" @click="onInvite">
-            <text class="settings-item-icon">📨</text>
-            <text class="settings-item-text">邀请成员</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <!-- ===== 邀请卡片弹窗 ===== -->
-    <view class="modal-mask" v-if="showInviteCard" @click="showInviteCard = false">
-      <view class="invite-card" @click.stop>
-        <text class="invite-card-title">邀请家庭成员</text>
-        <text class="invite-card-family">{{ familyName }}</text>
-        <view class="invite-qr-wrap" v-if="inviteQrCode">
-          <image class="invite-qr" :src="inviteQrCode" mode="widthFix" />
-        </view>
-        <view class="invite-qr-wrap loading-qr" v-else>
-          <text class="loading-text">生成二维码中...</text>
-        </view>
-        <view class="invite-code-section">
-          <text class="invite-code-label">邀请码</text>
-          <view class="invite-code-row">
-            <text class="invite-code">{{ inviteCode }}</text>
-            <button class="copy-btn" @click="onCopyCode">复制</button>
-          </view>
-        </view>
-        <text class="invite-tip">让好友在「我的」页面输入邀请码加入家庭</text>
-        <view class="invite-actions">
-          <button class="share-card-btn" @click="shareInviteCard">📤 分享邀请卡</button>
-          <button class="close-btn" @click="showInviteCard = false">关闭</button>
-        </view>
-      </view>
+    <!-- ===== 空状态 ===== -->
+    <view v-if="members.length === 0" class="empty-state">
+      <text class="empty-icon">👨‍👩‍👧‍👦</text>
+      <text class="empty-title">还没有家庭成员</text>
+      <text class="empty-desc">邀请家人加入，一起记录成长</text>
+      <button class="empty-invite-btn" @click="onInvite">📨 邀请家人</button>
     </view>
 
     <!-- ===== 分享邀请卡海报 ===== -->
@@ -179,6 +90,12 @@
       </view>
     </view>
 
+    <!-- ===== 底部操作栏 ===== -->
+    <view class="bottom-bar">
+      <button class="bottom-btn btn-add" @click="onAddMember">＋ 添加成员</button>
+      <button class="bottom-btn btn-invite" @click="onInvite">📨 邀请成员</button>
+    </view>
+
     <!-- ===== 加载状态 ===== -->
     <view v-if="loading" class="loading-wrap">
       <text class="loading-text">加载中...</text>
@@ -211,9 +128,6 @@ export default {
       members: [],
       isAdmin: false,
       loading: false,
-      filterType: 'all',
-      showSettings: false,
-      showInviteCard: false,
       showPoster: false,
       showMemberDetailModal: false,
       detailMember: null,
@@ -224,11 +138,7 @@ export default {
   },
   computed: {
     filteredMembers() {
-      var self = this
-      if (this.filterType === 'all') return this.members
-      return this.members.filter(function(m) {
-        return m.effectiveRole === self.filterType
-      })
+      return this.members
     },
     detailMemberScores() {
       if (!this.detailMember) return {}
@@ -292,12 +202,10 @@ export default {
       this.showMemberDetailModal = true
     },
     canEditMember(member) {
-      // 可编辑规则：非登录用户（无userId关联）
       if (member.userId) return false
       return member.source === 'family_member'
     },
     onAddMember() {
-      this.showSettings = false
       uni.navigateTo({ url: '/pages/family/add-member' })
     },
     async onSwitchMember(member) {
@@ -347,36 +255,26 @@ export default {
       }
     },
     async onInvite() {
-      this.showSettings = false
-      this.showInviteCard = true
       this.inviteQrCode = ''
+      this.inviteCode = ''
+      uni.showLoading({ title: '生成邀请...' })
       try {
         var res = await generateFamilyInviteQrCode()
         if (res.code === 200 && res.data) {
           this.inviteCode = res.data.inviteCode
           this.inviteQrCode = res.data.qrCodeBase64
+          this.showPoster = true
         } else {
           uni.showToast({ title: res.message || '生成失败', icon: 'none' })
         }
       } catch (e) {
         uni.showToast({ title: '生成失败', icon: 'none' })
+      } finally {
+        uni.hideLoading()
       }
     },
-    onCopyCode() {
-      uni.setClipboardData({
-        data: this.inviteCode,
-        success: function() {
-          uni.showToast({ title: '已复制邀请码', icon: 'success' })
-        }
-      })
-    },
-    shareInviteCard() {
-      this.showInviteCard = false
-      this.showPoster = true
-    },
     onEditRelation(member) {
       this.showMemberDetailModal = false
-      // 已整合到家庭成员管理，跳转到添加/编辑成员页面
       var params = 'memberId=' + member.id + '&nickname=' + encodeURIComponent(member.nickname || '')
       if (member.gender) params += '&gender=' + member.gender
       if (member.phone) params += '&phone=' + member.phone
@@ -397,32 +295,35 @@ export default {
 
 <style>
 .container {
-  padding: 30rpx;
+  padding: 30rpx 30rpx 140rpx;
   min-height: 100vh;
-  background: #f5f7fa;
+  background: #F5F0EB;
 }
 
-/* ===== 家庭信息头部（带齿轮入口） ===== */
+/* ===== 家庭信息头部 ===== */
 .family-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #F97316, #EA580C);
   border-radius: 20rpx;
-  padding: 30rpx 30rpx;
-  margin-bottom: 20rpx;
+  padding: 36rpx 30rpx;
+  margin-bottom: 24rpx;
   color: #fff;
+  text-align: center;
 }
 .family-header-content {
   display: flex;
   align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 .family-header-icon {
   font-size: 48rpx;
-  margin-right: 16rpx;
+  margin-bottom: 8rpx;
 }
 .family-header-text {
-  flex: 1;
+  text-align: center;
 }
 .family-name {
-  font-size: 34rpx;
+  font-size: 36rpx;
   font-weight: bold;
   display: block;
 }
@@ -432,107 +333,49 @@ export default {
   margin-top: 4rpx;
   display: block;
 }
-.header-settings-btn {
-  width: 64rpx;
-  height: 64rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: rgba(255,255,255,0.2);
-}
-.header-settings-btn:active {
-  background: rgba(255,255,255,0.35);
-}
-.settings-gear-icon {
-  font-size: 36rpx;
-}
 
-/* ===== 筛选标签 ===== */
-.filter-tabs {
-  display: flex;
-  gap: 12rpx;
-  margin-bottom: 20rpx;
-}
-.filter-tab {
-  padding: 8rpx 28rpx;
-  background: #fff;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  color: #666;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
-}
-.filter-tab.active {
-  background: #667eea;
-  color: #fff;
-  font-weight: 500;
-}
-.filter-tab:active {
-  opacity: 0.8;
-}
-
-/* ===== 成员列表 ===== */
+/* ===== 成员卡片 ===== */
 .member-list {
-  background: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding-bottom: 20rpx;
 }
-.member-item {
+.member-card {
   display: flex;
   align-items: center;
-  padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-.member-item:last-child {
-  border-bottom: none;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx 28rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
-.member-item:active {
-  background: #f8f8ff;
+.member-card:active {
+  background: #FFFCF5;
 }
 .member-avatar {
-  width: 72rpx;
-  height: 72rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: 50%;
   margin-right: 20rpx;
   background: #f0f0f0;
   flex-shrink: 0;
 }
-.member-detail {
+.member-info {
   flex: 1;
   min-width: 0;
 }
 .member-name {
   font-size: 30rpx;
-  font-weight: 500;
+  font-weight: 600;
   display: block;
-}
-.member-tags {
-  display: flex;
-  align-items: center;
-  margin-top: 6rpx;
-  gap: 8rpx;
-  flex-wrap: wrap;
+  color: #333;
 }
 .member-role-tag {
-  font-size: 22rpx;
-  color: #667eea;
-  background: #eef0ff;
-  padding: 2rpx 12rpx;
-  border-radius: 6rpx;
-}
-.member-source-tag {
+  display: inline-block;
   font-size: 22rpx;
   color: #F97316;
-  background: #fff7ed;
-  padding: 2rpx 12rpx;
-  border-radius: 6rpx;
-}
-.member-extra {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 4rpx;
-  display: inline;
+  background: #FFF7ED;
+  padding: 4rpx 14rpx;
+  border-radius: 8rpx;
+  margin-top: 6rpx;
 }
 .member-arrow {
   font-size: 36rpx;
@@ -540,93 +383,76 @@ export default {
   margin-left: 12rpx;
   flex-shrink: 0;
 }
-.empty-row {
-  padding: 40rpx 0;
-  text-align: center;
-}
-.empty-text {
-  font-size: 26rpx;
-  color: #bbb;
-}
 
-/* ===== 空状态卡片（无家庭成员时显示） ===== */
-.empty-state-card {
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 60rpx 30rpx 40rpx;
+/* ===== 空状态 ===== */
+.empty-state {
   text-align: center;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  padding: 100rpx 30rpx;
 }
 .empty-icon {
-  font-size: 80rpx;
+  font-size: 100rpx;
   display: block;
-  margin-bottom: 16rpx;
+  margin-bottom: 20rpx;
 }
 .empty-title {
-  font-size: 30rpx;
+  font-size: 32rpx;
   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;
+  margin-bottom: 12rpx;
 }
-.empty-action-btn:active {
-  opacity: 0.8;
+.empty-desc {
+  font-size: 26rpx;
+  color: #999;
+  display: block;
+  margin-bottom: 40rpx;
 }
-.add-btn {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.empty-invite-btn {
+  background: linear-gradient(135deg, #F97316, #EA580C);
   color: #fff;
+  border: none;
+  border-radius: 40rpx;
+  padding: 20rpx 50rpx;
+  font-size: 28rpx;
+  line-height: 1.4;
 }
-.invite-btn {
-  background: #f0f9ff;
-  color: #667eea;
+.empty-invite-btn:active {
+  opacity: 0.85;
 }
 
-/* ===== 三维评分进度条（列表行内） ===== */
-.member-quality-scores {
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-  padding: 8rpx 0;
-}
-.score-item {
+/* ===== 底部操作栏 ===== */
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16rpx 30rpx calc(16rpx + constant(safe-area-inset-bottom));
+  padding: 16rpx 30rpx calc(16rpx + env(safe-area-inset-bottom));
+  background: #fff;
   display: flex;
-  align-items: center;
-  gap: 8rpx;
-}
-.score-label {
-  width: 56rpx;
-  font-size: 20rpx;
-  color: #999;
+  gap: 20rpx;
+  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.06);
+  z-index: 50;
 }
-.score-bar-bg {
+.bottom-btn {
   flex: 1;
-  height: 10rpx;
-  background: #f0f0f0;
-  border-radius: 5rpx;
-  overflow: hidden;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  text-align: center;
+  border: none;
 }
-.score-bar-fill {
-  height: 100%;
-  border-radius: 5rpx;
+.bottom-btn:active {
+  opacity: 0.85;
 }
-.score-bar-fill.trust { background: #10B981; }
-.score-bar-fill.intimacy { background: #FF6B9D; }
-.score-bar-fill.communication { background: #6366F1; }
-.score-value {
-  width: 44rpx;
-  font-size: 18rpx;
-  color: #999;
-  text-align: right;
+.btn-add {
+  background: #fff;
+  color: #F97316;
+  border: 2rpx solid #F97316;
+}
+.btn-invite {
+  background: linear-gradient(135deg, #F97316, #EA580C);
+  color: #fff;
 }
 
 /* ===== 弹窗遮罩 ===== */
@@ -643,148 +469,6 @@ export default {
   z-index: 100;
 }
 
-/* ===== Settings 弹窗 ===== */
-.settings-card {
-  background: #fff;
-  border-radius: 24rpx;
-  width: 500rpx;
-  overflow: hidden;
-}
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 30rpx 30rpx 0;
-}
-.settings-title {
-  font-size: 32rpx;
-  font-weight: bold;
-}
-.settings-close {
-  font-size: 44rpx;
-  color: #999;
-  padding: 4rpx 8rpx;
-}
-.settings-body {
-  padding: 20rpx 30rpx 30rpx;
-}
-.settings-item {
-  display: flex;
-  align-items: center;
-  padding: 22rpx 16rpx;
-  border-radius: 12rpx;
-  margin-bottom: 8rpx;
-}
-.settings-item:active {
-  background: #f5f5f5;
-}
-.settings-item-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
-  width: 40rpx;
-  text-align: center;
-}
-.settings-item-text {
-  font-size: 28rpx;
-  color: #333;
-}
-
-/* ===== 邀请卡片 ===== */
-.invite-card {
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 40rpx;
-  width: 580rpx;
-  text-align: center;
-}
-.invite-card-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  display: block;
-}
-.invite-card-family {
-  font-size: 28rpx;
-  color: #667eea;
-  display: block;
-  margin-top: 8rpx;
-}
-.invite-qr-wrap {
-  margin: 30rpx auto;
-  width: 320rpx;
-  height: 320rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.invite-qr {
-  width: 320rpx;
-  height: 320rpx;
-}
-.loading-qr {
-  background: #f5f5f5;
-  border-radius: 16rpx;
-}
-.invite-code-section {
-  margin: 20rpx 0;
-}
-.invite-code-label {
-  font-size: 24rpx;
-  color: #999;
-  display: block;
-  margin-bottom: 8rpx;
-}
-.invite-code-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16rpx;
-}
-.invite-code {
-  font-size: 48rpx;
-  font-weight: bold;
-  letter-spacing: 6rpx;
-  color: #333;
-}
-.copy-btn {
-  font-size: 24rpx;
-  color: #667eea;
-  background: #eef0ff;
-  border: none;
-  padding: 8rpx 20rpx;
-  border-radius: 8rpx;
-  line-height: 1.5;
-}
-.invite-tip {
-  font-size: 24rpx;
-  color: #94A3B8;
-  text-align: center;
-  margin: 20rpx 0;
-}
-.invite-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 12rpx;
-  padding: 0 30rpx 20rpx;
-}
-.share-card-btn {
-  background: #F97316;
-  color: #FFFFFF;
-  border: none;
-  border-radius: 12rpx;
-  padding: 20rpx;
-  font-size: 28rpx;
-  text-align: center;
-}
-.close-btn {
-  width: 100%;
-  background: #f5f5f5;
-  border: none;
-  border-radius: 12rpx;
-  padding: 18rpx 0;
-  font-size: 28rpx;
-  color: #666;
-}
-
 /* ===== 成员详情弹窗 ===== */
 .member-detail-card {
   background: #fff;
@@ -818,7 +502,7 @@ export default {
 }
 .detail-relation {
   font-size: 26rpx;
-  color: #667eea;
+  color: #F97316;
   margin-top: 4rpx;
   display: block;
 }
@@ -853,7 +537,7 @@ export default {
   display: block;
   margin-bottom: 12rpx;
   padding-left: 12rpx;
-  border-left: 4rpx solid #667eea;
+  border-left: 4rpx solid #F97316;
 }
 .detail-score-item {
   display: flex;
@@ -939,4 +623,4 @@ export default {
   font-size: 28rpx;
   color: #999;
 }
-</style>
+</style>