city-gather/src/subPack-xsb/home/index.vue

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

const { ScrollDown } = storeToRefs(useSysXsbStore())
definePage({
  name: 'xsb-home',
  style: {
    navigationStyle: 'custom',
    backgroundColor: '#9ED605',
    backgroundColorTop: '#9ED605',
    navigationBarTitleText: '星闪豹首页',
    backgroundColorBottom: '#fff',
  },
})
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
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 = 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 swiperClassList = ref([
  { title: '露营季', icon: `${StaticUrl}/zhi.png` },
  { title: '方便菜', icon: `${StaticUrl}/zhi.png` },
  { title: '日用清洁', icon: `${StaticUrl}/zhi.png` },
  { title: '个护美妆', icon: `${StaticUrl}/zhi.png` },
  { title: '轻食沙拉', icon: `${StaticUrl}/zhi.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
  { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
])
const navList = ref([
  { title: '为你推荐' },
  { title: '疯狂折扣' },
  { title: '' },
  { title: '地道特产' },
  { title: '预售' },
])
const textArray = ref([
  '这是一条消息提示信息',
  '这是第二条消息',
  '这是第三条消息',
])

function handleLoaction() {
  console.log('定位')
}
function handleChangeNav(idx: number) {
  navActive.value = idx
}
onPageScroll((e) => {
  if (e.scrollTop >= 80) {
    ScrollDown.value = true
  }
  else {
    ScrollDown.value = false
  }
})
function handleCommonName(name: string) {
  router.push({ name })
}
</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.replaceAll({ name: 'smqjh-home' })"
    >
      <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="handleLoaction">
            <image :src="`${StaticUrl}/location.png`" class="h33.8rpx w29rpx" />
            <view class="ml10rpx text-32rpx text-white">
              富力中心
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <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">
        <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">
                <image
                  :src="item.icon"
                  class="h100rpx w100rpx"
                />
                <view class="mt12rpx text-24rpx text-#222">
                  {{ item.title }}
                </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="title"
              image-mode="aspectFit"
            />
          </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>
    <xsbTabbar />
  </view>
</template>

<style scoped lang="scss">

</style>