<template>
|
<view :class="['app', theme]">
|
<view style="padding-top: 10rpx;">
|
<up-search height="70rpx" placeholder="搜索" search-icon-size="40rpx" margin="0rpx 30rpx" v-model="search"
|
:show-action="true" @search="onSearch" />
|
</view>
|
<view class="list-view">
|
<up-waterfall v-model="films">
|
<template #left="{ leftList }">
|
<LocaltionCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick(item)" />
|
</template>
|
<template #right="{ rightList }">
|
<LocaltionCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick(item)" />
|
</template>
|
</up-waterfall>
|
<up-loadmore :status="filmStatus" :line="true" />
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
import { FilmLocationVO, FilmLocationQueryDTO } from '@/types/index'
|
import { useGlobal } from '@/composables/useGlobal'
|
const { $http, $message } = useGlobal()
|
import { useNavigator } from '@/composables/useNavigator'
|
const { navigateTo } = useNavigator()
|
import { getFilmLocationBase } from '@/sub-pages/utils/api'
|
import LocaltionCard from "../../components/card/localtion-card.vue";
|
|
const theme = ref('light')
|
const search = ref('')
|
const films = ref<FilmLocationVO[]>([])
|
const filmPage = ref(1)
|
const filmSize = 10
|
const filmStatus = ref('loading')
|
|
const onSearch = () => {
|
filmPage.value = 1
|
films.value = []
|
filmStatus.value = 'loadmore'
|
getFilmLocation(search.value)
|
}
|
|
const handleDetailClick = (item: FilmLocationVO) => {
|
const url = `/sub-pages/hot-spot/spot-detail?id=${item.id}`
|
navigateTo(url)
|
}
|
|
onLoad(() => {
|
const storedTheme = uni.getStorageSync('theme') || 'light'
|
theme.value = storedTheme
|
})
|
|
onShow(() => {
|
getFilmLocation()
|
})
|
|
onPullDownRefresh(async () => {
|
filmPage.value = 1
|
getFilmLocation()
|
uni.stopPullDownRefresh()
|
})
|
|
onReachBottom(() => {
|
getFilmLocation()
|
})
|
|
const getFilmLocation = async (keyword = '') => {
|
if (filmStatus.value === 'nomore') return
|
filmStatus.value = 'loading'
|
|
try {
|
const query: FilmLocationQueryDTO = {
|
locationName: keyword,
|
current: filmPage.value,
|
size: filmSize,
|
isEnabled: 1
|
}
|
const records = await getFilmLocationBase(query)
|
if (records && records.length > 0) {
|
const existingIds = new Set(films.value.map(item => item.id))
|
const uniqueRecords = records.filter(item => !existingIds.has(item.id))
|
films.value = [...films.value, ...uniqueRecords]
|
if (records.length < filmSize) {
|
filmStatus.value = 'noMore'
|
}
|
filmPage.value++
|
} else {
|
filmStatus.value = 'noMore'
|
}
|
} catch (e) {
|
filmStatus.value = 'loadmore' // 重置状态允许重试
|
$message.error('加载失败，请重试')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
