city-gather/src/subPack-djk/commonTab/components/index.vue

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

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())

const { data: goodsList, isLastPage, page, reload, error } = usePagination((pageNum, pageSize) =>
  Apis.djk.appletGoodsList({ data: { pageNum, pageSize } }), {
  data: resp => resp.data?.list,
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
})
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
function handleBottom() {
  if (!isLastPage.value) {
    page.value++
  }
}
</script>

<template>
  <view>
    <wd-navbar
      title="大健康"
      :bordered="false" :z-index="99"
      safe-area-inset-top placeholder left-arrow fixed @click-left="router.back()"
    />
    <scroll-view scroll-y :style="{ height: `calc(100vh - ${(statusBarHeight + MenuButtonHeight) * 4}rpx)` }" @scrolltolower="handleBottom">
      <view class="px24rpx">
        <view v-for="item in goodsList" :key="item.shopId" class="mt20rpx rounded-16rpx bg-white p24rpx">
          <view class="flex" @click="router.push({ name: 'djk-shopinfo', params: { id: `${item.shopId}` } })">
            <image
              :src="item.shopLogo?.split(',')[0]"
              class="h144rpx w144rpx flex-shrink-0 rounded-16rpx"
            />
            <view class="ml20rpx flex-1">
              <view class="text-32rpx font-semibold">
                {{ item.shopName }}
              </view>
              <view class="mt16rpx text-24rpx text-gray">
                总销量 {{ item.sales }}
              </view>
              <view class="mt16rpx text-24rpx text-gray">
                {{ item.shopAddress }}
              </view>
            </view>
          </view>
          <view class="ml164rpx">
            <view v-for="its in item.goodsList" :key="its.id" class="mt14rpx flex items-center justify-between" @click="router.push({ name: 'djk-goods', params: { id: `${its.id}`, type: '0' } })">
              <view class="text-28rpx text-#FF4D3A font-semibold">
                <text class="text-20rpx">
                  ￥
                </text> {{ its.price }}
              </view>
              <view class="text-24rpx">
                {{ its.goodsName }}
              </view>
              <view class="text-24rpx text-gray">
                已售 {{ its.sales }}
              </view>
            </view>
          </view>
        </view>
        <view class="h40rpx" />
      </view>
      <template v-if="goodsList.length > 10">
        <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
      </template>
      <StatusTip v-if="!goodsList.length" tip="暂无内容" />
    </scroll-view>
  </view>
</template>

<style scoped>

</style>