|
|
@@ -15,7 +15,10 @@ const tabList = ref([
|
|
|
{ label: '价格从低到高', value: 1 },
|
|
|
])
|
|
|
const currentTab = ref(0)
|
|
|
-const { data, send } = usePagination((pageNum, pageSize) => Apis.general.post_smqjh_pms_app_api_v1_product_oil_page({ data: { pageNum, pageSize, lat: useUserStore().lat, lon: useUserStore().lng, sort: currentTab.value } }), {
|
|
|
+const { data, send, isLastPage, page } = usePagination((pageNum, pageSize) =>
|
|
|
+ Apis.general.post_smqjh_pms_app_api_v1_product_oil_page(
|
|
|
+ { data: { pageNum, pageSize, lat: useUserStore().lat, lon: useUserStore().lng, sort: currentTab.value } },
|
|
|
+ ), {
|
|
|
initialPage: 1,
|
|
|
initialPageSize: 10,
|
|
|
immediate: false,
|
|
|
@@ -35,59 +38,64 @@ onMounted(async () => {
|
|
|
await useUserStore().getLocationH5()
|
|
|
send()
|
|
|
})
|
|
|
-
|
|
|
+onReachBottom(() => {
|
|
|
+ if (!isLastPage.value) {
|
|
|
+ page.value++
|
|
|
+ }
|
|
|
+})
|
|
|
watch(() => currentTab.value, () => {
|
|
|
send()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="px24rpx py20px">
|
|
|
- <view class="w132rpx">
|
|
|
+ <view>
|
|
|
+ <!-- <view class="w132rpx">
|
|
|
轮播图展位
|
|
|
- </view>
|
|
|
- <wd-sticky :offset-top="-44">
|
|
|
- <view class="w-100vw flex items-center bg-#f9f9f9 pb20rpx pt20rpx">
|
|
|
+ </view> -->
|
|
|
+ <view class="box-border px24rpx py20px">
|
|
|
+ <!-- <wd-sticky :offset-top="-44"> -->
|
|
|
+ <view class="sticky top-0 z999 box-border w-full flex items-center bg-#f9f9f9 pb20rpx pt20rpx">
|
|
|
<view v-for="item in tabList" :key="item.value" class="mr28rpx rounded-24rpx px16rpx py8rpx text-24rpx" :class="[currentTab === item.value ? 'bg-[var(--them-color)] text-white ' : 'bg-white']" @click="currentTab = item.value">
|
|
|
{{ item.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- </wd-sticky>
|
|
|
-
|
|
|
- <view v-for="item in data" :key="item.storeId" class="relative mb20rpx rounded-16rpx bg-white p24rpx" @click="handleView(item)">
|
|
|
- <view class="mt80rpx flex items-center justify-between">
|
|
|
- <view class="text-36rpx font-semibold">
|
|
|
- {{ item.storeName }}
|
|
|
- </view>
|
|
|
- <view class="flex items-center text-24rpx">
|
|
|
- <image :src="`${staticUrl}/smqjh-jy-dh.png`" class="mr3 h18.34rpx w18.34rpx" /> {{ item.distanceShow }}km
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="mt20rpx text-#aaa">
|
|
|
- {{ item.address }}
|
|
|
- </view>
|
|
|
- <view class="mt20rpx flex items-center justify-between">
|
|
|
- <view v-if="!item.allowanceClientScheme" class="flex items-center rounded-8rpx bg-#E6E6E6 px12rpx py8rpx">
|
|
|
- <view class="text-22rpx text-#AAAAAA">
|
|
|
- 不支持优惠券
|
|
|
+ <!-- </wd-sticky> -->
|
|
|
+ <view v-for="item in data" :key="item.storeId" class="relative mb20rpx box-border rounded-16rpx bg-white p24rpx" @click="handleView(item)">
|
|
|
+ <view class="mt80rpx flex items-center justify-between">
|
|
|
+ <view class="text-36rpx font-semibold">
|
|
|
+ {{ item.storeName }}
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center text-24rpx">
|
|
|
+ <image :src="`${staticUrl}/smqjh-jy-dh.png`" class="mr3 h18.34rpx w18.34rpx" /> {{ item.distanceShow }}km
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex items-end">
|
|
|
- <view class="text-28rpx">
|
|
|
- {{ item.itemName }}
|
|
|
+ <view class="mt20rpx text-#aaa">
|
|
|
+ {{ item.address }}
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center justify-between">
|
|
|
+ <view v-if="!item.allowanceClientScheme" class="flex items-center rounded-8rpx bg-#E6E6E6 px12rpx py8rpx">
|
|
|
+ <view class="text-22rpx text-#AAAAAA">
|
|
|
+ 不支持优惠券
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="mx8rpx ml12rpx flex items-end text-#ff4d3a">
|
|
|
- 特惠价 <view class="font-semibold">
|
|
|
- <text class="text-20rpx">
|
|
|
- ¥
|
|
|
- </text> <text class="text-36rpx">
|
|
|
- {{ item.vipPrice }}L
|
|
|
- </text>
|
|
|
+ <view class="flex items-end">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ {{ item.itemName }}
|
|
|
+ </view>
|
|
|
+ <view class="mx8rpx ml12rpx flex items-end text-#ff4d3a">
|
|
|
+ 特惠价 <view class="font-semibold">
|
|
|
+ <text class="text-20rpx">
|
|
|
+ ¥
|
|
|
+ </text> <text class="text-36rpx">
|
|
|
+ {{ item.vipPrice }}L
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
<!-- <image :src="`${staticUrl}/smqjh-jy-cz.png`" class="absolute left-0 top-0 h80rpx w234rpx" /> -->
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<image
|
|
|
:src="`${staticUrl}/smqjh-jy-dkj.png`"
|