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:
@@ -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))
|
||||
|
||||
Reference in New Issue
Block a user