fix: 订场页时间标签显示修复 + 约课页列表刷新修复
- private/index.vue: 时间标签改为单时间+竖线样式,第一行加 margin-top 防止被表头遮挡 - courses/index.vue: 修复切换Tab/日期列表不刷新问题(竞态条件+不清空旧数据+无错误处理) - .env: 冰场馆URL修正
This commit is contained in:
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
VITE_ICE_API_BASE_URL=https://venue.test.chatgqt.top
|
VITE_ICE_API_BASE_URL=https://venue.test.chatgqt.top
|
||||||
VITE_COMPREHENSIVE_API_BASE_URL=https://8002.frp.chatgqt.top
|
VITE_COMPREHENSIVE_API_BASE_URL=https://venue2.test.chatgqt.top
|
||||||
@@ -118,6 +118,7 @@ const pageSize = 20
|
|||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
const isLoadingMore = ref(false)
|
const isLoadingMore = ref(false)
|
||||||
|
let loadRequestId = 0
|
||||||
|
|
||||||
const ticketProduct = ref(null)
|
const ticketProduct = ref(null)
|
||||||
const ticketQty = ref(1)
|
const ticketQty = ref(1)
|
||||||
@@ -143,6 +144,7 @@ const dateOptions = computed(() => {
|
|||||||
const hasMore = computed(() => sessions.value.length < total.value)
|
const hasMore = computed(() => sessions.value.length < total.value)
|
||||||
|
|
||||||
const switchTab = (tab) => {
|
const switchTab = (tab) => {
|
||||||
|
if (activeTab.value === tab) return
|
||||||
activeTab.value = tab
|
activeTab.value = tab
|
||||||
if (tab === 'tickets') {
|
if (tab === 'tickets') {
|
||||||
loadTicketProduct()
|
loadTicketProduct()
|
||||||
@@ -153,15 +155,22 @@ const switchTab = (tab) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onDateSelect = (date) => {
|
const onDateSelect = (date) => {
|
||||||
|
if (selectedDate.value === date) return
|
||||||
selectedDate.value = date
|
selectedDate.value = date
|
||||||
loadSessions(true)
|
loadSessions(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadSessions = async (reset) => {
|
const loadSessions = async (reset) => {
|
||||||
if (activeTab.value === 'membership' && !session.isLoggedIn) return
|
if (activeTab.value === 'membership' && !session.isLoggedIn) {
|
||||||
|
sessions.value = []
|
||||||
|
total.value = 0
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const requestId = ++loadRequestId
|
||||||
if (reset) {
|
if (reset) {
|
||||||
page.value = 1
|
page.value = 1
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
|
sessions.value = []
|
||||||
} else {
|
} else {
|
||||||
isLoadingMore.value = true
|
isLoadingMore.value = true
|
||||||
}
|
}
|
||||||
@@ -172,11 +181,20 @@ const loadSessions = async (reset) => {
|
|||||||
} else {
|
} else {
|
||||||
data = await courseApi.getSessions({ page: page.value, pageSize, date: selectedDate.value })
|
data = await courseApi.getSessions({ page: page.value, pageSize, date: selectedDate.value })
|
||||||
}
|
}
|
||||||
|
if (requestId !== loadRequestId) return
|
||||||
sessions.value = reset ? data.items : [...sessions.value, ...data.items]
|
sessions.value = reset ? data.items : [...sessions.value, ...data.items]
|
||||||
total.value = data.total
|
total.value = data.total
|
||||||
|
} catch {
|
||||||
|
if (requestId !== loadRequestId) return
|
||||||
|
if (reset) {
|
||||||
|
sessions.value = []
|
||||||
|
total.value = 0
|
||||||
|
}
|
||||||
} finally {
|
} finally {
|
||||||
isLoading.value = false
|
if (requestId === loadRequestId) {
|
||||||
isLoadingMore.value = false
|
isLoading.value = false
|
||||||
|
isLoadingMore.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -50,8 +50,11 @@
|
|||||||
v-for="(slot, si) in grid.time_slots"
|
v-for="(slot, si) in grid.time_slots"
|
||||||
:key="si"
|
:key="si"
|
||||||
class="grid-row"
|
class="grid-row"
|
||||||
|
:class="{ 'grid-row-first': si === 0 }"
|
||||||
>
|
>
|
||||||
<view class="time-label-cell">{{ slot.start }}</view>
|
<view class="time-label-cell">
|
||||||
|
<text class="time-text">{{ slot.start }}</text>
|
||||||
|
</view>
|
||||||
<view
|
<view
|
||||||
v-for="court in grid.courts"
|
v-for="court in grid.courts"
|
||||||
:key="court.id"
|
:key="court.id"
|
||||||
@@ -489,24 +492,38 @@ defineExpose({
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-row-first {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.time-label-cell {
|
.time-label-cell {
|
||||||
width: 128rpx;
|
width: 128rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 107rpx;
|
height: 107rpx;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: $bg-color-main;
|
background: $bg-color-main;
|
||||||
border-right: 1rpx solid $border-color;
|
border-right: 1rpx solid $border-color;
|
||||||
border-bottom: 1rpx solid $bg-color-hover;
|
border-bottom: 1rpx solid $bg-color-hover;
|
||||||
color: $text-color-muted;
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-weight: 700;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.time-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: $bg-color-main;
|
||||||
|
padding: 0 6rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-color-muted;
|
||||||
|
line-height: 1;
|
||||||
|
z-index: 6;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-cell {
|
.grid-cell {
|
||||||
width: 149rpx;
|
width: 149rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user