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

<script setup lang="ts">
import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
import router from '@/router'

const props = defineProps<{ categoryList: Api.xsbCategories[] }>()

const emit = defineEmits(['changeNav'])

const { ScrollDown } = storeToRefs(useSysXsbStore())

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const { name } = storeToRefs(useAddressStore())
const { topNavActive, leftActive } = storeToRefs(useSysXsbStore())
const current = ref(0)
const swiperList = ref([
  'https://wot-ui.cn/assets/redpanda.jpg',
  'https://wot-ui.cn/assets/capybara.jpg',
  'https://wot-ui.cn/assets/panda.jpg',
  'https://wot-ui.cn/assets/moon.jpg',
  'https://wot-ui.cn/assets/meng.jpg',
])
const navActive = ref(0)
const classfiylist = computed(() => props.categoryList.slice(0, 10))
const swiperClassList = computed(() => props.categoryList.slice(10, props.categoryList.length))
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
  }
}
function handleCommonName(name: string) {
  router.push({ name })
}
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)
}
</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: 'common-selectAddress' })">
            <image :src="`${StaticUrl}/location.png`" class="h33.8rpx w29rpx" />
            <view class="ml10rpx max-w-280rpx truncate text-32rpx text-white">
              {{ name }}
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <scroll-view scroll-y class="content" @scroll="handleScroll">
      <view
        class="header-linear h320rpx px24rpx"
        :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
      >
        <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="['霸王茶姬', '牛奶', '洗衣机']" 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>
        <scroll-view scroll-x class="mb20rpx mt20rpx h44rpx whitespace-nowrap">
          <view class="h-full flex items-center">
            <view
              v-for="item in 10" :key="item"
              class="mr32rpx h-full flex items-center justify-center rounded-22rpx bg-[rgba(255,255,255,.5)] px16rpx text-24rpx"
            >
              {{ item }}苹果
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="px24rpx -mt180rpx">
        <wd-swiper v-model:current="current" :autoplay="false" :list="swiperList" :height="138" :indicator="false" />
        <view class="mt20rpx">
          <wd-card title="" custom-class="card-zt">
            <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-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>
        <scroll-view scroll-x class="mb20rpx mt20rpx whitespace-nowrap">
          <view class="flex items-center">
            <view v-for="item, idx in navList" :key="idx" class="relative mr44rpx" @click="handleChangeNav(idx)">
              <image v-show="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 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 v-model:current="current" :autoplay="false" :list="swiperList" :height="231" />
                <view
                  v-for="it in 20" :key="it" class="overflow-hidden rounded-16rpx bg-white pb16rpx"
                  @click="handleCommonName('xsb-goods')"
                >
                  <view class="relative h344rpx">
                    <image
                      :src="`${VITE_OSS_BASE_URL}2025/11/9d42892888304abf85487deea0271f62.png`"
                      class="h344rpx w344rpx"
                    />
                  </view>
                  <view class="mt20rpx px20rpx">
                    <view class="text-left text-28rpx font-semibold">
                      <view v-for="i in 2" :key="i" class="mr5px inline-block">
                        <wd-tag type="primary">
                          新品{{ i }}
                        </wd-tag>
                      </view>
                      海湾高盐特大白虾200g
                    </view>
                    <view class="mt12rpx text-22rpx text-#AAAAAA">
                      已售5999
                    </view>

                    <view class="mt10rpx flex items-center justify-between">
                      <view>
                        <view class="mt20rpx flex items-end text-#FF4D3A font-semibold">
                          <view class="text-24rpx">
                            ￥
                          </view>
                          <view class="text-36rpx line-height-[36rpx]">
                            1.395
                          </view>
                        </view>
                      </view>
                      <image :src="`${StaticUrl}/cart-yes.png`" class="h52rpx w52rpx" />
                    </view>
                  </view>
                </view>
              </grid-view>
            </scroll-view>
          </view>
        </view>
      </view>
      <view class="h100rpx" />
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.content {
  height: calc(100vh - var(--window-top) - 80rpx);
}
</style>