|
|
@@ -5,7 +5,10 @@
|
|
|
<view class="family-header-content">
|
|
|
<text class="family-header-icon">🏠</text>
|
|
|
<view class="family-header-text">
|
|
|
- <text class="family-name">{{ familyName || '我的家庭' }}</text>
|
|
|
+ <view class="family-name-row">
|
|
|
+ <text class="family-name">{{ familyName || '我的家庭' }}</text>
|
|
|
+ <text class="family-name-edit" v-if="isAdmin" @click="openRenameModal">✏️</text>
|
|
|
+ </view>
|
|
|
<text class="family-member-count">{{ filteredMembers.length }} 位成员</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -150,6 +153,21 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- ===== 编辑家庭名称弹窗(仅管理员) ===== -->
|
|
|
+ <view class="modal-mask" v-if="showRenameModal" @click="closeRenameModal">
|
|
|
+ <view class="rename-modal-card" @click.stop>
|
|
|
+ <view class="perm-header">
|
|
|
+ <text class="perm-title">✏️ 编辑家庭名称</text>
|
|
|
+ <text class="perm-close" @click="closeRenameModal">×</text>
|
|
|
+ </view>
|
|
|
+ <input class="rename-input" v-model="renameInput" maxlength="20" placeholder="请输入家庭名称" />
|
|
|
+ <view class="rename-actions">
|
|
|
+ <button class="rename-btn rename-cancel" @click="closeRenameModal">取消</button>
|
|
|
+ <button class="rename-btn rename-save" :loading="renameSaving" @click="saveRename">保存</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- ===== 底部操作栏 ===== -->
|
|
|
<view class="bottom-bar">
|
|
|
<button class="bottom-btn btn-add" @click="onAddMember">+ 添加成员</button>
|
|
|
@@ -180,7 +198,8 @@ import {
|
|
|
getMemberGrantedUsers,
|
|
|
grantReportMemberPermission,
|
|
|
revokeReportMemberPermission,
|
|
|
- reportAppEnter
|
|
|
+ reportAppEnter,
|
|
|
+ renameFamily
|
|
|
} from '../../utils/api.js'
|
|
|
import store from '../../store/index.js'
|
|
|
import GenerationPicker from '@/components/GenerationPicker.vue'
|
|
|
@@ -219,6 +238,11 @@ export default {
|
|
|
permMembers: [], // 可选被授权成员(有绑定userId的)
|
|
|
permGranting: false,
|
|
|
|
|
|
+ // ===== 家庭名称编辑弹窗状态 =====
|
|
|
+ showRenameModal: false,
|
|
|
+ renameInput: '',
|
|
|
+ renameSaving: false,
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -429,6 +453,37 @@ export default {
|
|
|
closeReportPermission() {
|
|
|
this.showPermModal = false
|
|
|
},
|
|
|
+ // ===== 家庭名称编辑(仅管理员) =====
|
|
|
+ openRenameModal() {
|
|
|
+ this.renameInput = this.familyName || ''
|
|
|
+ this.showRenameModal = true
|
|
|
+ },
|
|
|
+ closeRenameModal() {
|
|
|
+ this.showRenameModal = false
|
|
|
+ },
|
|
|
+ saveRename() {
|
|
|
+ var self = this
|
|
|
+ if (this.renameSaving) return
|
|
|
+ var name = (this.renameInput || '').trim()
|
|
|
+ if (!name) {
|
|
|
+ uni.showToast({ title: '家庭名称不能为空', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.renameSaving = true
|
|
|
+ renameFamily({ name: name }).then(function(res) {
|
|
|
+ self.renameSaving = false
|
|
|
+ if (res && res.code === 200) {
|
|
|
+ self.familyName = res.data
|
|
|
+ self.showRenameModal = false
|
|
|
+ uni.showToast({ title: '已更新', icon: 'success' })
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: (res && res.message) || '更新失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ self.renameSaving = false
|
|
|
+ uni.showToast({ title: '更新失败', icon: 'none' })
|
|
|
+ })
|
|
|
+ },
|
|
|
permUserNickname(uid) {
|
|
|
var self = this
|
|
|
var found = (this.members || []).filter(function(m) {
|
|
|
@@ -1339,4 +1394,14 @@ $c-elm-danger-text: $el-danger; // Element UI 危险文字
|
|
|
font-size: calc(28rpx * var(--font-scale, 1));
|
|
|
color: $facade-text-muted;
|
|
|
}
|
|
|
+
|
|
|
+/* ===== 家庭名称编辑 ===== */
|
|
|
+.family-name-row { display: flex; align-items: center; }
|
|
|
+.family-name-edit { margin-left: 10rpx; font-size: calc(26rpx * var(--font-scale, 1)); }
|
|
|
+.rename-modal-card { width: 600rpx; background: $app-surface; border-radius: 24rpx; padding: 40rpx; }
|
|
|
+.rename-input { border: 1rpx solid $facade-border-soft; border-radius: 12rpx; padding: 20rpx; font-size: calc(30rpx * var(--font-scale, 1)); margin-top: 24rpx; }
|
|
|
+.rename-actions { display: flex; gap: 20rpx; margin-top: 32rpx; }
|
|
|
+.rename-btn { flex: 1; border-radius: 24rpx; font-size: calc(28rpx * var(--font-scale, 1)); }
|
|
|
+.rename-cancel { background: $facade-fill-2; color: $facade-text-body; }
|
|
|
+.rename-save { background: $brand-primary; color: $app-surface; }
|
|
|
</style>
|