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

<script setup lang="ts">
import itemGoods from '../../components/goodsItem/index.vue'
import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
import router from '@/router'

const props = defineProps<{ error: any, lastPage: boolean, categoryList: Api.xsbCategories[], swiper: Api.xsbAdvertInfo[], hotText: Api.xsbSearchTerm[], recommendText: Api.xsbSearchTerm[], loading: boolean, goodsList: Api.xsbCategoryProductList[] }>()

const emit = defineEmits(['changeNav', 'scrollBottom'])

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const { topNavActive, leftActive, backTop, SelectShopInfo, ScrollDown } = storeToRefs(useSysXsbStore())
const swiperList = computed(() => props.swiper)
const navActive = ref(0)
const classfiylist = computed(() => props.categoryList.slice(0, 10))
const swiperClassList = computed(() => props.categoryList.slice(10, props.categoryList.length))
const scrollTop = ref()

const navList = ref([
  { title: '为你推荐' },
  { title: '疯狂折扣' },
  { title: '' },
  { title: '地道特产' },
  { title: '预售' },
])
const textArray = ref([
  '这是一条消息提示信息',
  '这是第二条消息',
  '这是第三条消息',
])

function handleChangeNav(idx: number) {
  navActive.value = idx
}
function handleScroll(e: UniHelper.ScrollViewOnScrollEvent) {
  if (e.detail.scrollTop >= 80) {
    ScrollDown.value = true
  }
  else {
    ScrollDown.value = false
  }
}
onMounted(() => {
  ScrollDown.value = false
})

function handleCommonClass(item: Api.xsbCategories) {
  topNavActive.value = item.code
  leftActive.value = item.children[0].code
  emit('changeNav')
}
function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
  handleCommonClass(e.item)
}
function handleGo(e: { index: number, item: Api.xsbAdvertInfo }) {
  console.log(e, '跳转消息')
}

const state = computed(() => {
  return props.error ? 'error' : !props.lastPage ? 'loading' : 'finished'
})

watch(() => backTop.value, () => {
  if (backTop.value) {
    scrollTop.value = null
    nextTick(() => {
      scrollTop.value = 0
    })
    backTop.value = false
  }
})
</script>

<template>
  <view class="page-xsb">
    <wd-navbar
      title=""
      :custom-style="`background-color:${ScrollDown ? 'var(--them-color)' : 'transparent !important'}`"
      :bordered="false" :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
    >
      <template #left>
        <view class="h-full flex items-center">
          <wd-icon name="arrow-left" size="22px" color="#fff" />
          <view class="ml10rpx flex items-center" @click.stop="router.push({ name: 'xsb-selectAddress' })">
            <image :src="`${StaticUrl}/location.png`" class="h33.8rpx w29rpx" />
            <view class="ml10rpx max-w-280rpx truncate text-32rpx text-white">
              {{ SelectShopInfo?.shopName || '请选择位置' }}
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <scroll-view

      :lower-threshold="80"
      scroll-y enable-passive scroll-anchoring :scroll-top="scrollTop" class="content ios" @scroll="handleScroll" @scrolltolower="emit('scrollBottom')"
    >
      <view
        class="header-linear h320rpx px24rpx"
        :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
      >
        <wd-skeleton theme="image" :loading="loading" :row-col="[{ height: '30px', width: '100%' }]">
          <view class="h60rpx w-full flex items-center justify-between rounded-40rpx bg-white pr6rpx" @click="router.push({ name: 'xsb-search' })">
            <view class="flex items-center pb14rpx pl24rpx pt16rpx">
              <wd-icon name="search" size="14" color="#ccc" />
              <view class="search ml12rpx h-full w-full overflow-hidden">
                <wd-notice-bar
                  :text="hotText.map((it) => it.searchName)" custom-class="notice-bar" color="#ccc"
                  background-color="#fff" direction="vertical"
                />
              </view>
            </view>
            <view
              class="h50rpx w96rpx flex items-center justify-center rounded-26rpx bg-[var(--them-color)] text-24rpx text-white font-semibold"
            >
              搜索
            </view>
          </view>
        </wd-skeleton>
        <scroll-view v-if="recommendText.length" scroll-x class="mb20rpx mt20rpx h44rpx whitespace-nowrap">
          <view class="h-full flex items-center">
            <view
              v-for="item in recommendText"
              :key="item.id" class="mr32rpx h-full flex items-center justify-center rounded-22rpx bg-[rgba(255,255,255,.5)] px16rpx text-24rpx"
              @click="router.push({ name: 'xsb-search', params: { text: item.searchName } })"
            >
              {{ item.searchName }}
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="px24rpx" :class="[recommendText.length ? '-mt180rpx' : '-mt240rpx']">
        <wd-skeleton theme="image" :loading="loading" :row-col="[{ height: '138px', width: '100%' }]">
          <wd-swiper
            :autoplay="false" :list="swiperList" :height="138" :indicator="false" value-key="advertImg" @click="handleGo"
          />
        </wd-skeleton>
        <view class="mt20rpx">
          <wd-card title="" custom-class="card-zt">
            <view :class="[loading ? 'p24rpx' : '']">
              <wd-skeleton
                :loading="loading"
                theme="image" :row-col="[
                  [
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                  ],
                  [
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                  ],
                  [
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                    { width: '48px', height: '48px' },
                  ],
                ]"
              >
                <view class="px24rpx pt24rpx">
                  <view class="grid grid-cols-5 gap-x-38rpx gap-y-24rpx">
                    <view v-for="item, index in classfiylist" :key="index" @click="handleCommonClass(item)">
                      <image :src="item.icon" class="h100rpx w100rpx" />
                      <view class="mt12rpx text-24rpx text-#222">
                        {{ item.name }}
                      </view>
                    </view>
                  </view>
                </view>

                <view class="swiper-img swiper pb20rpx">
                  <wd-swiper
                    :list="swiperClassList" :indicator="{ type: 'dots-bar' }" height="80"
                    :display-multiple-items="5" :autoplay="false" :loop="false"
                    custom-indicator-class="custom-indicator-class" value-key="icon" text-key="name"
                    image-mode="aspectFit"
                    @click="handleSwiperClick"
                  />
                </view>
              </wd-skeleton>
            </view>
          </wd-card>
        </view>
        <view class="mt20rpx">
          <wd-notice-bar direction="vertical" :text="textArray" :delay="3" color="#222222" background-color="#fff">
            <template #prefix>
              <view class="mr20rpx">
                <wd-icon name="sound" size="22px" color="var(--them-color)" />
              </view>
            </template>
          </wd-notice-bar>
        </view>
        <view class="mt20rpx">
          <image :src="`${VITE_OSS_BASE_URL}2025/12/6671332ceef64985858aa8b548027bd3.png`" class="h236rpx w-full" />
        </view>
        <view class="my20rpx">
          <scroll-view scroll-x class="whitespace-nowrap">
            <view class="h40rpx flex items-center">
              <view v-for="item, idx in navList" :key="idx" class="relative mr44rpx" @click="handleChangeNav(idx)">
                <image v-if="idx == 2" :src="`${StaticUrl}/chaozhi.png`" class="relative z-2 h-29.06rpx w-105.34rpx" />
                <text
                  v-show="idx != 2" class="relative z-2 text-32rpx"
                  :class="[navActive == idx ? 'text-36rpx font-semibold' : '']"
                >
                  {{ item.title }}
                </text>
                <view
                  v-show="navActive == idx"
                  class="nav-line absolute bottom-0rpx left-50% z-1 h18rpx w80rpx rounded-10rpx -translate-x-50%"
                />
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="mt20rpx">
          <view class="flex items-center">
            <scroll-view scroll-y type="custom">
              <grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
                <wd-swiper
                  :autoplay="false" :list="[
                    `${StaticUrl}/xsb-swiper1.png`,
                  ]" :height="231"
                />
                <view v-for="it in goodsList" :key="it.id">
                  <itemGoods :item-goods="it" />
                </view>
              </grid-view>
            </scroll-view>
          </view>
        </view>
        <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="emit('scrollBottom')" />
      </view>
      <view class="h60rpx" />
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.content {
  height: calc(100vh - var(--window-top) - 100rpx);
}
.nav-line{
  background: linear-gradient( 90deg, #9ED605 0%, rgba(158,214,5,0.7) 43%, rgba(158,214,5,0.2) 79%, rgba(158,214,5,0) 100%);
}
</style>