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