smqjh-refuel/src/pages/index/index.vue

<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'home',
  layout: 'tabbar',
  type: 'home',
  style: {
    navigationBarTitleText: '加油',
    navigationStyle: 'custom',
  },
})
const tabList = ref([
  { label: '距离优先', value: 0 },
  { label: '价格从低到高', value: 1 },
])
const currentTab = ref(0)
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,
  data: res => res.data?.list,
  append: true,
})
const staticUrl = import.meta.env.VITE_STATIC_BASE_URL

function handleView(_item: any) {
  router.push({
    name: 'refuelDetaile',
    params: { id: _item.storeId },
  })
}

onMounted(async () => {
  await useUserStore().getLocationH5()
  send()
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
watch(() => currentTab.value, () => {
  send()
})
</script>

<template>
  <view>
    <!-- <view class="w132rpx">
      轮播图展位
    </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 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="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="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>
      <!-- <image :src="`${staticUrl}/smqjh-jy-cz.png`" class="absolute left-0 top-0 h80rpx w234rpx" /> -->
      </view>
    </view>
    <image
      :src="`${staticUrl}/smqjh-jy-dkj.png`"
      class="fixed bottom-524rpx right-24rpx h114rpx w124rpx"
      @click="router.push({ name: 'activityList' })"
    />
  </view>
</template>