Feat:康养列表加载优化

This commit is contained in:
LinCyJang
2026-06-01 01:22:20 +08:00
parent 4eb12b7a70
commit 0c738a2dc5
2 changed files with 119 additions and 46 deletions
+60 -23
View File
@@ -164,10 +164,13 @@
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
</view>
</view>
<view v-if="items.length > 0" class="load-more-status">
{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}
</view>
</view>
</template>
<script>
import { getCategory,getWellnessPlace } from '@/api/health'
import { getCategory } from '@/api/health'
import { getJiaLouList } from '@/api/qianxian'
import { getWellnessTopImage } from '@/api/health'
export default {
@@ -176,12 +179,15 @@ export default {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabs: [],
items: [],
traveItems: [],
actived: 0,
cityId: '',
cityName: '',
categoryId: null,
topImageConfig: {}
topImageConfig: {},
page: 1,
pageSize: 10,
loading: false,
hasMore: true
}
},
computed: {
@@ -208,11 +214,13 @@ export default {
getCategory().then(res => {
this.tabs = res.data
this.categoryId = res.data[0].id
this.getList()
this.getList(true)
})
this.getTop()
this.getTopImage()
},
onReachBottom() {
this.getList()
},
onUnload() {
// uni.navigateBack({
// delta: 0
@@ -220,9 +228,10 @@ export default {
},
methods: {
handleTab(index, tab) {
if (this.actived === index) return
this.actived = index
this.categoryId = tab.id
this.getList()
this.getList(true)
},
toSanctun() {
uni.redirectTo({
@@ -234,18 +243,52 @@ export default {
url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
})
},
getList() {
getPageList(data) {
if (Array.isArray(data)) {
return data
}
return (data && (data.records || data.list || data.data)) || []
},
getHasMore(data, list, page) {
const pageCount = Number(
data && (data.pages || data.totalPage || data.last_page || data.pageCount || 0)
)
const total = Number(
data && (data.total || data.totalCount || data.count || 0)
)
if (pageCount > 0) {
return page < pageCount
}
if (total > 0) {
return page * this.pageSize < total
}
return list.length >= this.pageSize
},
getList(reset = false) {
if (this.loading) return
if (!reset && !this.hasMore) return
const page = reset ? 1 : this.page
if (reset) {
this.page = 1
this.hasMore = true
this.items = []
}
const params = {
// countyId: this.cityId,
goodCityId: this.cityId,
wellnessPlaceCateId : this.categoryId,
shopType: 'wellnessCate',
page: 1,
limit: 9999
page,
limit: this.pageSize
}
this.loading = true
getJiaLouList(params).then(res => {
// console.log(res);
this.items = res.data.records
const list = this.getPageList(res.data)
this.items = page === 1 ? list : this.items.concat(list)
this.hasMore = this.getHasMore(res.data, list, page)
this.page = page + 1
}).finally(() => {
this.loading = false
})
},
search() {
@@ -253,18 +296,6 @@ export default {
url: '/pkg_product/views/healthSearch?city=' + this.cityId + '&cityName=' + this.cityName
})
},
getTop() {
const params = {
goodCityId: this.cityId,
shopType: 'wellnessTop',
page: 1,
limit: 9999
}
getJiaLouList(params).then(res => {
// console.log(res);
this.traveItems = res.data.records
})
},
toStore(item) {
if(item.dataType === 'wellnessPlace'){
this.$yrouter.push({
@@ -436,4 +467,10 @@ export default {
border-radius: 100rpx;
padding: 4rpx 20rpx;
}
.load-more-status{
padding: 24rpx 0 40rpx;
text-align: center;
font-size: 24rpx;
color: #999;
}
</style>
+59 -23
View File
@@ -134,24 +134,27 @@
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
</view>
</view>
<view v-if="items.length > 0" class="load-more-status">
{{ loading ? '加载中...' : (hasMore ? '上拉加载更多' : '没有更多了') }}
</view>
</view>
</template>
<script>
import { getCategory,getWellnessPlace } from '@/api/health'
import { getJiaLouList } from '@/api/qianxian'
import { getWellnessTopImage } from '@/api/health'
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
tabs: [],
items: [],
traveItems: [],
actived: 0,
cityId: '',
cityName: '',
categoryId: null,
topImageConfig: {}
topImageConfig: {},
page: 1,
pageSize: 10,
loading: false,
hasMore: true
}
},
computed: {
@@ -175,41 +178,69 @@ export default {
this.cityId = opts.city
this.cityName = decodeURIComponent(decodeURIComponent(opts.cityName))
getCategory().then(res => {
this.tabs = res.data
this.categoryId = res.data[0].id
this.getList()
})
this.getList(true)
this.getTop()
this.getTopImage()
},
onReachBottom() {
this.getList()
},
onUnload() {
// uni.navigateBack({
// delta: 0
// })
},
methods: {
handleTab(index, tab) {
this.actived = index
this.categoryId = tab.id
this.getList()
},
toFoods() {
uni.redirectTo({
url: '/pkg_product/views/healthFoods?city=' + this.cityId + '&cityName=' + this.cityName
})
},
getList() {
getPageList(data) {
if (Array.isArray(data)) {
return data
}
return (data && (data.records || data.list || data.data)) || []
},
getHasMore(data, list, page) {
const pageCount = Number(
data && (data.pages || data.totalPage || data.last_page || data.pageCount || 0)
)
const total = Number(
data && (data.total || data.totalCount || data.count || 0)
)
if (pageCount > 0) {
return page < pageCount
}
if (total > 0) {
return page * this.pageSize < total
}
return list.length >= this.pageSize
},
getList(reset = false) {
if (this.loading) return
if (!reset && !this.hasMore) return
const page = reset ? 1 : this.page
if (reset) {
this.page = 1
this.hasMore = true
this.items = []
}
const params = {
// countyId: this.cityId,
goodCityId: this.cityId,
shopType: 'wellnessTravel',
page: 1,
limit: 9999
page,
limit: this.pageSize
}
this.loading = true
getJiaLouList(params).then(res => {
// console.log(res);
this.items = res.data.records
const list = this.getPageList(res.data)
this.items = page === 1 ? list : this.items.concat(list)
this.hasMore = this.getHasMore(res.data, list, page)
this.page = page + 1
}).finally(() => {
this.loading = false
})
},
search() {
@@ -222,11 +253,10 @@ export default {
goodCityId: this.cityId,
shopType: 'wellnessTop',
page: 1,
limit: 9999
limit: 10
}
getJiaLouList(params).then(res => {
// console.log(res);
this.traveItems = res.data.records
this.traveItems = this.getPageList(res.data)
})
},
toStore(item) {
@@ -390,4 +420,10 @@ export default {
border-radius: 6rpx;
bottom: 5rpx;
}
.load-more-status{
padding: 24rpx 0 40rpx;
text-align: center;
font-size: 24rpx;
color: #999;
}
</style>