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

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

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const classfiylist = ref([
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
])
const topNavActive = ref(0)
const sortClassBtn = ref(1)
const show = ref(false)
definePage({
  name: 'xsb-classfiy',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹分类',
    disableScroll: true,
  },
})
const navHeight = computed(() => {
  return (`${Number(MenuButtonHeight.value) + Number(statusBarHeight.value)}px`)
})
function handleTopNavChange(idx: number) {
  topNavActive.value = idx
}
function handleOpen() {
  show.value = true
  console.log(navHeight.value, '打开')
}

const active = ref<number>(1)
const scrollTop = ref<number>(0)
const itemScrollTop = ref<number[]>([])

const subCategories = Array.from({ length: 24 }).fill({ title: '标题文字', label: '这是描述这是描述' }, 0, 24)
const categories = ref([
  {
    label: '分类一',
    title: '标题一',
    items: subCategories,
  },
  {
    label: '分类二',
    title: '标题二',
    items: subCategories,
  },
  {
    label: '分类三',
    title: '标题三',
    items: subCategories.slice(0, 18),
  },
  {
    label: '分类四',
    title: '标题四',
    items: subCategories.slice(0, 21),
  },
  {
    label: '分类五',
    title: '标题五',
    items: subCategories,
  },
  {
    label: '分类六',
    title: '标题六',
    items: subCategories.slice(0, 18),
  },
  {
    label: '分类七',
    title: '标题七',
    items: subCategories,
  },
])

function handleChange({ value }) {
  active.value = value
  scrollTop.value = itemScrollTop.value[value]
}
function onScroll(e) {
  const { scrollTop } = e.detail
  const threshold = 50 // 下一个标题与顶部的距离
  if (scrollTop < threshold) {
    active.value = 0
    return
  }
  const index = itemScrollTop.value.findIndex(top => top > scrollTop && top - scrollTop <= threshold)
  if (index > -1) {
    active.value = index
  }
}
</script>

<template>
  <view class="page-xsb">
    <wd-navbar
      title="" custom-style="background-color:#F4FFD1" :bordered="false" :z-index="99" safe-area-inset-top
      fixed
    >
      <template #left>
        <view class="flex items-center">
          <view class="h60rpx w-474rpx flex items-center justify-between border-2rpx border-[var(--them-color)] rounded-40rpx border-solid bg-white pr6rpx">
            <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="flex items-center pr28rpx">
              <wd-divider vertical />
              <view class="ml6rpx text-28rpx text-[var(--them-color)] font-semibold">
                搜索
              </view>
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <view
      class="h162rpx flex items-center justify-between bg-#F4FFD1 pl24rpx"
      :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
    >
      <scroll-view scroll-x class="scrollx w-90% flex-shrink-0 whitespace-nowrap">
        <view class="flex items-end pb10rpx">
          <view v-for="item, idx in classfiylist" :key="idx" class="mr24rpx flex flex-col items-center justify-center" @click="handleTopNavChange(idx)">
            <image
              :src="item.icon"
              :class="[topNavActive == idx ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h84rpx w-84rpx' : 'h72rpx w-72rpx']"
            />
            <view class="mt16rpx text-22rpx" :class="[topNavActive == idx ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']">
              {{ item.title }}
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="right-nav box-border h144rpx w64rpx flex flex-shrink-0 flex-col items-center justify-center px20rpx text-24rpx font-semibold" @click="handleOpen">
        展开
        <image
          :src="`${StaticUrl}/xia.png`"
          class="mt20rpx h20rpx w20rpx"
        />
      </view>
      <wd-popup v-model="show" position="top" custom-style="border-radius:32rpx;">
        <view class="box-border bg-#F4FFD1 p24rpx" :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }">
          <view class="mb24rpx mt24rpx text-28rpx font-semibold">
            全部一级分类
          </view>
          <view class="h400rpx overflow-y-scroll">
            <view class="grid grid-cols-5 box-border gap-x-24rpx gap-y-24rpx">
              <view v-for="item, idx in classfiylist" :key="idx" class="box-border h150rpx w114rpx flex flex-col items-center justify-center" @click="handleTopNavChange(idx)">
                <image
                  :src="item.icon"
                  :class="[topNavActive == idx ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h88rpx w-88rpx' : 'h76rpx w-76rpx']"
                />
                <view class="mt16rpx whitespace-nowrap text-nowrap text-22rpx" :class="[topNavActive == idx ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']">
                  {{ item.title }}
                </view>
              </view>
            </view>
          </view>
          <view class="mt24rpx w-full flex items-center justify-center" @click="show = false">
            <view class="mr8rpx text-24rpx">
              点击收起
            </view>
            <wd-icon name="arrow-down" size="18px" />
          </view>
        </view>
      </wd-popup>
    </view>
    <view class="wraper">
      <wd-sidebar v-model="active" @change="handleChange">
        <wd-sidebar-item v-for="(item, index) in categories" :key="index" :value="index" :label="item.label" />
      </wd-sidebar>
      <view class="content">
        <view class="p20rpx">
          <image
            :src="`${StaticUrl}/class.png`"
            class="h144rpx w-full"
          />
          <view class="my20rpx flex items-center justify-end rounded-16rpx bg-#F6F6F6 px20rpx py8rpx">
            <view class="mr40rpx text-24rpx">
              销量
            </view>
            <wd-sort-button v-model="sortClassBtn" :line="false" title="价格" />
          </view>
        </view>
        <scroll-view :style="{ height: `calc(100vh - ${navHeight} - 600rpx)` }" scroll-y scroll-with-animation :scroll-top="scrollTop" :throttle="false" @scroll="onScroll">
          <view class="p20rpx">
            <view v-for="item in 20" :key="item">
              <view class="flex">
                <view class="mr20rpx h172rpx w172rpx flex-shrink-0 rounded-16rpx bg-#F6F6F6" />
                <view>
                  <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="text-22rpx text-#AAAAAA">
                    <view class="mt10rpx flex items-center">
                      <view>一年一季</view>
                      <wd-divider vertical />
                      <view>新鲜翠绿</view>
                    </view>
                    <view class="mt6rpx">
                      已售3.6万+
                    </view>
                  </view>
                  <view class="flex items-center justify-between">
                    <view class="text-#FF4D3A font-semibold">
                      <text class="text-24rpx">
                        ￥
                      </text> <text class="text-36rpx">
                        9.99
                      </text>
                    </view>
                    <view>
                      <image
                        :src="`${StaticUrl}/cart-yes.png`"
                        class="h52rpx w52rpx"
                      />
                    </view>
                  </view>
                </view>
              </view>
              <view class="line">
                <wd-divider color="#F0F0F0" />
              </view>
            </view>
            <view class="h60rpx" />
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.right-nav{
  background: linear-gradient( 180deg, #FAFFEC 0%, #F6FFDE 11%, #E7FFA5 100%);
  box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0,0,0,0.07);
}
.wraper {
  display: flex;
  height: calc(100vh - var(--window-top) - v-bind(navHeight) - 290rpx);
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - v-bind(navHeight) - 290rpx);
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - v-bind(navHeight) - 290rpx);
}

.content {
  flex: 1;
  background: #fff;
}
</style>