Feat:康养列表加载优化
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user