|
|
@@ -5,16 +5,10 @@
|
|
|
<view class="nav-back" @click="goBack">
|
|
|
<text class="nav-back-icon">←</text>
|
|
|
</view>
|
|
|
- <!-- 我的 / 全家 切换 Tab -->
|
|
|
- <view class="nav-tabs">
|
|
|
- <view class="nav-tab" :class="{ active: currentView !== 'family' }" @click="switchView('self')">
|
|
|
- <text class="nav-tab-icon">{{ currentMemberIcon }}</text>
|
|
|
- <text class="nav-tab-label">{{ currentTabLabel }}</text>
|
|
|
- </view>
|
|
|
- <view class="nav-tab" :class="{ active: currentView === 'family' }" @click="switchView('family')">
|
|
|
- <text class="nav-tab-icon">🏠</text>
|
|
|
- <text class="nav-tab-label">全家</text>
|
|
|
- </view>
|
|
|
+ <view class="nav-right" @click="toggleView">
|
|
|
+ <text class="nav-right-icon">{{ currentView === 'family' ? '🏠' : (currentMemberIcon) }}</text>
|
|
|
+ <text class="nav-right-label">{{ currentView === 'family' ? '全家' : currentTabLabel }}</text>
|
|
|
+ <text class="nav-right-arrow">⇄</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -350,6 +344,31 @@ export default {
|
|
|
}
|
|
|
this.showMemberPicker = false
|
|
|
},
|
|
|
+ toggleView() {
|
|
|
+ if (this.currentView === 'family') {
|
|
|
+ this.switchView('self')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 进入全家态前检查成员数
|
|
|
+ var members = this.familySandboxData && this.familySandboxData.members
|
|
|
+ ? this.familySandboxData.members
|
|
|
+ : this.familyMembers
|
|
|
+ if (!members || members.length < 2) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '需要更多家庭成员',
|
|
|
+ content: '至少需要 2 位家庭成员才能查看全家能量,快去添加吧!',
|
|
|
+ confirmText: '去添加',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({ url: '/pages/profile-extra/family-members' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.switchView('family')
|
|
|
+ },
|
|
|
selectMember(member) {
|
|
|
this.selectedMemberId = member.memberId
|
|
|
this.currentView = 'self'
|
|
|
@@ -380,19 +399,51 @@ export default {
|
|
|
background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
+.nav-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ padding-top: env(safe-area-inset-top);
|
|
|
+ position: relative;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+}
|
|
|
+.nav-back {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
.nav-back-icon {
|
|
|
- font-size: 32rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
.nav-right {
|
|
|
- position: absolute;
|
|
|
- right: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 8rpx;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
+ gap: 6rpx;
|
|
|
+ background: rgba(255,255,255,0.15);
|
|
|
padding: 10rpx 20rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+}
|
|
|
+.nav-right:active {
|
|
|
+ background: rgba(255,255,255,0.25);
|
|
|
+}
|
|
|
+.nav-right-icon {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.nav-right-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.nav-right-arrow {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(255,255,255,0.5);
|
|
|
}
|
|
|
.nav-current-member {
|
|
|
font-size: 24rpx;
|