s.esmaeiliandCursor
afb068c643
Add paged orders API and infinite scroll, short order numbers, and align the guest invite card with the logged-in hero shell. Co-authored-by: Cursor <cursoragent@cursor.com>
83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<!--
|
|
Vant PullRefresh with content locked in place — the luxury RefreshOverlay
|
|
carries all visual feedback (no page slide-down).
|
|
-->
|
|
<template>
|
|
<PullRefresh
|
|
v-model="model"
|
|
class="apr"
|
|
:head-height="0"
|
|
:pull-distance="PULL_DISTANCE"
|
|
v-bind="$attrs"
|
|
@change="onChange"
|
|
@refresh="emit('refresh')"
|
|
>
|
|
<template #pulling><span /></template>
|
|
<template #loosing><span /></template>
|
|
<template #loading><span /></template>
|
|
<template #success><span /></template>
|
|
<slot />
|
|
</PullRefresh>
|
|
<RefreshOverlay :show="overlayShow" :intensity="overlayIntensity" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
import { PullRefresh } from 'vant'
|
|
import RefreshOverlay from './RefreshOverlay.vue'
|
|
|
|
/** Must be set explicitly — Vant defaults pullDistance to headHeight, which is 0. */
|
|
const PULL_DISTANCE = 72
|
|
|
|
const props = defineProps<{ modelValue: boolean }>()
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'refresh'): void
|
|
}>()
|
|
|
|
const model = computed({
|
|
get: () => props.modelValue,
|
|
set: (v: boolean) => emit('update:modelValue', v),
|
|
})
|
|
|
|
/** 0…1 pull progress while the finger is down; 1 while loading. */
|
|
const pullProgress = ref(0)
|
|
|
|
const overlayShow = computed(() => model.value || pullProgress.value > 0.08)
|
|
const overlayIntensity = computed(() =>
|
|
model.value ? 1 : Math.min(1, pullProgress.value),
|
|
)
|
|
|
|
function onChange(payload: { status: string; distance: number }) {
|
|
if (payload.status === 'loading' || model.value) {
|
|
pullProgress.value = 1
|
|
return
|
|
}
|
|
if (payload.status === 'normal') {
|
|
pullProgress.value = 0
|
|
return
|
|
}
|
|
pullProgress.value = Math.min(1, payload.distance / PULL_DISTANCE)
|
|
}
|
|
|
|
watch(model, (v) => {
|
|
if (!v) pullProgress.value = 0
|
|
})
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
/* Keep page content still — Vant still tracks the gesture, just don't translate. */
|
|
.apr {
|
|
:deep(.van-pull-refresh__track) {
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
:deep(.van-pull-refresh__head) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|