city-gather/src/pages/index/index.vue

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

definePage({
  name: 'smqjh-home',
  layout: 'tabbar',
  islogin: false,
  style: {
    navigationBarTitleText: '首页',
    navigationStyle: 'custom',
    backgroundColor: '#9ED605',
    backgroundColorTop: '#9ED605',
  },
})
const { show } = useGlobalToast()

const addressStore = useAddressStore()
const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
const { name } = storeToRefs(addressStore)
const { userInfo } = storeToRefs(useUserStore())
const { getTotalNum } = storeToRefs(useSmqjhCartStore())
const { data: goodsList, isLastPage, page, reload, error, loading } = usePagination((pageNum, pageSize) =>
  Apis.xsb.getSearchProductList({ data: { pageNum, pageSize, salesNum: 'DESC', shopId: 2, channelId: userInfo.value.channelId || 1 } }), {
  data: resp => resp.data?.list,
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
})
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
onShow(() => {
  useSmqjhCartStore().getCartList('XSB')
  useTabbar().setTabbarItem('smqjh-cart', getTotalNum.value)
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
const navList = ref([
  { icon: `${VITE_OSS_BASE_URL}2025/11/4dabcf9b8d794d3c99aa6b49be34f205.png`, title: '星闪豹', name: 'xsb-homeTabbar' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/40cb38e287234a83885d68f30c9c39bc.png`, title: '充电', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/9981d979739b4ae6b4eec941b7d2c9b0.png`, title: '电影演出', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/f2b15ec1048e4b5689fe1ba26f6058e1.png`, title: '视频权益', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/0e971577095c406a88c5ea10af419246.png`, title: '大牌点餐', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/95e2ea622dbd498a8a36ab74f00209f3.png`, title: '加油', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/f5178ca02e3e4ebb9072d9e129bb3fd4.png`, title: '酒店民宿', name: '' },
  { icon: `${VITE_OSS_BASE_URL}2025/11/d1f4d36d6fcc442a841f4f4f4927df19.png`, title: '代驾', name: '' },
])
onMounted(() => {
  addressStore.getLocation()
  opcity.value = 0
})
onPageScroll((e) => {
  const calculatedOpacity = e.scrollTop / 100
  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
})
function handleClick(name: string) {
  if (!name) {
    show({ msg: '敬请期待 !' })
    return
  }
  router.push({ name })
}
onShareAppMessage(() => {
  return {
    title: '市民请集合',
  }
})
function handleGo() {
  show({ msg: '敬请期待 !' })
}
</script>

<template>
  <view class="page-class box-border">
    <wd-navbar
      title="" :custom-style="`background-color: rgba(158,214,5,${opcity});`" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    >
      <template #left>
        <view class="relative z-10 h48rpx w-full w202rpx opacity-100">
          <image class="absolute left-0 top-0 h48rpx w202rpx" :src="`${StaticUrl}/logo.png`" />
        </view>
      </template>
    </wd-navbar>

    <view
      class="header-linear h320rpx px24rpx"
      :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
    >
      <view class="box-border flex items-center">
        <view class="flex items-center" @click="useAddressStore().getMapAddress()">
          <image :src="`${StaticUrl}/location-black.png`" class="h33.8rpx min-w28.97rpx w28.97rpx" />
          <view class="ml18rpx max-w-180rpx truncate text-32rpx">
            {{ name }}
          </view>
        </view>
        <view class="ml16rpx h60rpx w502rpx 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="ml12rpx text-24rpx text-gray">
              霸王茶姬
            </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>
      </view>
    </view>
    <view class="px24rpx -mt260rpx">
      <view class="grid grid-cols-4 mt24rpx gap12rpx rounded-16rpx bg-white py24rpx">
        <view
          v-for="item in navList" :key="item.icon" class="flex flex-col items-center justify-center"
          @click="handleClick(String(item.name))"
        >
          <view class="relative h120rpx w120rpx">
            <image :src="item.icon" class="h120rpx w120rpx" />
            <view
              v-if="item.title != '星闪豹'"
              class="linebg absolute left-0 top-0 h-full w-full flex items-center justify-center rounded-32rpx text-24rpx text-white font-semibold"
            >
              敬请期待
            </view>
          </view>
          <view class="text-24rpx">
            {{ item.title }}
          </view>
        </view>
      </view>
      <view class="mt20rpx w-full flex items-center justify-between" @click="handleGo">
        <image :src="`${StaticUrl}/smqjh-fl.png`" class="h346rpx w344rpx flex-shrink-0" />
        <view class="flex flex-1 flex-col items-end justify-center">
          <image :src="`${StaticUrl}/smqjh-hot-vip.png`" class="h180rpx w344rpx" />
          <image :src="`${StaticUrl}/smqjh-hot-vip.png`" class="mt14rpx h152rpx w344rpx" />
        </view>
      </view>
      <view class="mt20rpx">
        <wd-skeleton
          theme="image" animation="gradient" :loading="loading"
          :row-col="[[{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }], [{ height: '568rpx', width: '344rpx' }, { height: '568rpx', width: '344rpx' }]]"
        >
          <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">
                <view
                  v-for="item in goodsList" :key="item.id"
                  class="relative overflow-hidden rounded-16rpx bg-white pb16rpx"
                >
                  <view @click="router.push({ name: 'xsb-goods', params: { id: item.prodId } })">
                    <view class="relative h344rpx">
                      <image :src="item.pic" class="h344rpx w344rpx" />
                      <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                        <view class="rounded-tl-8rpx bg-#02ECFD pl4rpx">
                          星闪豹
                        </view>
                        <!-- <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                      峰10:00-13:00
                    </view> -->
                      </view>
                    </view>
                    <view class="mt16rpx pl20rpx pr6rpx">
                      <view class="flex items-center">
                        <!-- <view class="rounded-8rpx bg-#FF4D3A px12rpx text-24rpx text-white">
                      补贴
                    </view> -->
                        <view class="line-clamp-2 text-28rpx font-semibold">
                          {{ item.prodName }}
                        </view>
                      </view>
                      <view class="mt20rpx flex items-end text-#FF4D3A">
                        <view class="text-24rpx">
                          ￥
                        </view>
                        <view class="text-36rpx line-height-[36rpx]">
                          {{ item.channelProdPrice }}
                        </view>
                        <view class="text-24rpx">
                          元
                        </view>
                      </view>
                    </view>
                  </view>
                  <view
                    v-if="!item.spuStock"
                    class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,0.6)]"
                  >
                    <view
                      class="h156rpx w156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
                    >
                      商品已售罄
                    </view>
                  </view>
                </view>
                <!-- <view class="overflow-hidden rounded-16rpx bg-white pb16rpx">
                <view class="relative h344rpx">
                  <image :src="`${VITE_OSS_BASE_URL}2025/11/8177f50dc5f040188dbd40149831273a.png`" class="h344rpx w344rpx" />
                  <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                    <view class="rounded-tl-8rpx bg-#FCD22B pl4rpx pr8rpx">
                      酒店民宿
                    </view>
                    <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                      距您5km
                    </view>
                  </view>
                </view>
                <view class="mt16rpx pl20rpx pr6rpx">
                  <view class="flex">
                    <view class="h32rpx flex items-center rounded-8rpx bg-#FF4D3A px12rpx text-24rpx text-white">
                      <image :src="`${VITE_OSS_BASE_URL}2025/11/3437d2a44ffe4238b827c5472019d323.png`" class="mr8rpx h18rpx w20rpx" /> 直播中
                    </view>
                    <view class="ml8rpx text-28rpx font-semibold">
                      长白山雪景温
                    </view>
                  </view>
                  <view class="ml12rpx text-28rpx font-semibold">
                    泉度假酒店
                  </view>
                  <view class="mt20rpx flex items-end text-#FF4D3A">
                    <view class="text-24rpx">
                      ￥
                    </view>
                    <view class="text-36rpx line-height-[36rpx]">
                      398
                    </view>
                    <view class="text-24rpx">
                      元
                    </view>
                  </view>
                </view>
              </view>
              <view class="overflow-hidden rounded-16rpx bg-white pb16rpx">
                <view class="relative h344rpx">
                  <image :src="`${VITE_OSS_BASE_URL}2025/11/04433c8d7186465d929a03d89a652caa.png`" class="h344rpx w344rpx" />
                  <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                    <view class="rounded-tl-8rpx bg-#006CE8 pl4rpx pr8rpx text-white">
                      星闪豹
                    </view>
                    <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                      48分钟
                    </view>
                  </view>
                </view>
                <view class="mt16rpx pl20rpx pr6rpx">
                  <view class="flex items-center">
                    <view class="text-28rpx font-semibold">
                      海湾高盐特大白虾200g
                    </view>
                  </view>
                  <view class="mt20rpx flex items-center">
                    <view class="flex items-end text-#FF4D3A">
                      <view class="text-24rpx">
                        ￥
                      </view>
                      <view class="text-36rpx line-height-[36rpx]">
                        29
                      </view>
                      <view class="text-24rpx">
                        元
                      </view>
                      <view class="ml10rpx text-24rpx text-#aaa line-through">
                        ￥39
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="overflow-hidden rounded-16rpx bg-white pb16rpx">
                <view class="relative h344rpx">
                  <image :src="`${VITE_OSS_BASE_URL}2025/11/4e2d6f2096a643f18fb9d11dee764509.png`" class="h344rpx w344rpx" />
                  <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                    <view class="rounded-tl-8rpx bg-#FF4D3A pl4rpx pr8rpx text-white">
                      电影演出
                    </view>
                    <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                      评分8.9 1w+人想看
                    </view>
                  </view>
                </view>
                <view class="mt16rpx pl20rpx pr6rpx">
                  <view class="flex items-center">
                    <view class="rounded-8rpx bg-#FF4D3A px12rpx text-24rpx text-white">
                      折扣大促
                    </view>
                    <view class="ml12rpx text-28rpx font-semibold">
                      疯狂动物城2
                    </view>
                  </view>
                  <view class="mt20rpx flex items-center">
                    <view class="flex items-end text-#FF4D3A">
                      <view class="text-24rpx">
                        ￥
                      </view>
                      <view class="text-36rpx line-height-[36rpx]">
                        19.9
                      </view>
                      <view class="text-24rpx">
                        元
                      </view>
                      <view class="ml8rpx text-24rpx text-#aaa">
                        起
                      </view>
                    </view>
                  </view>
                  <view class="mt16rpx text-24rpx text-#aaa">
                    电影演出上新榜No.1
                  </view>
                </view>
              </view>
              <view class="overflow-hidden rounded-16rpx bg-white pb16rpx">
                <view class="relative h344rpx">
                  <image :src="`${VITE_OSS_BASE_URL}2025/11/52624954555942dbbbe8dabf872c29c4.png`" class="h344rpx w344rpx" />
                  <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                    <view class="rounded-tl-8rpx bg-#02ECFD pl4rpx pr8rpx">
                      大牌点餐
                    </view>
                    <view class="rounded-tr-8rpx bg-[rgba(0,0,0,0.5)] pl8rpx pr4rpx text-white">
                      距您1.2km
                    </view>
                  </view>
                </view>
                <view class="mt16rpx pl20rpx pr6rpx">
                  <view class="flex items-center">
                    <view class="truncate rounded-8rpx bg-#FF4D3A px12rpx text-nowrap text-24rpx text-white">
                      折扣大促
                    </view>
                    <view class="ml12rpx truncate text-nowrap text-28rpx font-semibold">
                      大堡口福三件套
                    </view>
                  </view>
                  <view class="mt20rpx flex items-end text-#FF4D3A">
                    <view class="text-24rpx">
                      ￥
                    </view>
                    <view class="text-36rpx line-height-[36rpx]">
                      22
                    </view>
                    <view class="text-24rpx">
                      元
                    </view>
                  </view>
                </view>
              </view> -->
              </grid-view>
            </scroll-view>
          </view>
        </wd-skeleton>
        <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page-class {
  :deep() {
    .wd-divider {
      margin: 0 !important;
    }
  }

  .flex-box-item {
    background: linear-gradient(180deg, #EBFFB4 0%, #FFFFFF 46%, #FFFFFF 100%);
  }

  .baoyou {
    background: url('https://zswl-shop.oss-cn-chengdu.aliyuncs.com/2025/11/771b8a09633448d8b62c0004a8928054.png') no-repeat;
    background-size: contain;
  }

  .linebg {
    background: rgba(0, 0, 0, .3);
  }

}
</style>