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