fix(app): prevent modal disappearing when switching to edit tab

Root cause: there was a stale loading overlay outside the tab content
(added by a previous subagent) that rendered when editLoading was true,
covering the entire modal body. Also loadDetailMembership incorrectly
managed editLoading causing state inconsistencies.

Fix:
- Remove the orphaned loading overlay outside tab content blocks
- loadDetailMembership no longer touches editLoading (switchTab owns it)
- switchTab uses Promise.all for parallel loading with formReady guard
- openDetail resets editLoading/formReady to clean state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
richarjiang
2026-04-07 10:22:02 +08:00
parent 0a20aef678
commit 91abedcb86

View File

@@ -115,11 +115,6 @@
</view>
</view>
<!-- Loading overlay for edit tab -->
<view v-if="editLoading" class="edit-loading">
<text class="edit-loading-text">加载中...</text>
</view>
<!-- Detail tab content -->
<view v-if="activeTab === 'detail'" class="tab-content">
<!-- User info -->
@@ -195,7 +190,13 @@
<!-- Edit tab content -->
<view v-if="activeTab === 'edit'" class="tab-content">
<view class="edit-form">
<!-- Loading -->
<view v-if="editLoading" class="edit-loading">
<text class="edit-loading-text">加载中...</text>
</view>
<!-- Form -->
<view v-else-if="formReady" class="edit-form">
<!-- Card type -->
<view class="form-item">
<text class="form-label">卡类型</text>
@@ -303,6 +304,7 @@ const detailMembership = ref<any>(null)
const editLoading = ref(false)
const editSubmitting = ref(false)
const editCardTypes = ref<any[]>([])
const formReady = ref(false)
const editForm = ref({
cardTypeIndex: 0,
@@ -394,6 +396,8 @@ function openDetail(m: MemberSummary) {
showDetail.value = true
detailMembership.value = null
activeTab.value = 'detail'
editLoading.value = false
formReady.value = false
loadDetailMembership(m.userId)
}
@@ -419,30 +423,36 @@ function statusLabel(status: string): string {
}
async function loadDetailMembership(userId: string) {
detailMembership.value = null
editLoading.value = true
try {
const result = await adminStore.getUserMembership(userId)
detailMembership.value = result.membership
} catch {
} finally {
editLoading.value = false
}
}
async function switchTab(tab: 'detail' | 'edit') {
activeTab.value = tab
if (tab === 'edit') {
// Always fetch card types if not yet loaded
if (!editCardTypes.value.length) {
await adminStore.fetchCardTypes()
editCardTypes.value = adminStore.cardTypes
}
// Load membership if not yet loaded
if (!detailMembership.value) {
await loadDetailMembership(detailMember.value!.userId)
}
// Reset form state and show loading immediately
formReady.value = false
editLoading.value = true
// Load card types and membership in parallel
const loadCardTypes = editCardTypes.value.length
? Promise.resolve()
: adminStore.fetchCardTypes().then(() => {
editCardTypes.value = adminStore.cardTypes
})
const loadMembership = detailMembership.value
? Promise.resolve()
: loadDetailMembership(detailMember.value!.userId)
await Promise.all([loadCardTypes, loadMembership])
initEditForm()
editLoading.value = false
formReady.value = true
}
}
@@ -565,6 +575,7 @@ function closeModal() {
showDetail.value = false
activeTab.value = 'detail'
detailMembership.value = null
formReady.value = false
}
onMounted(() => loadMembers(true))