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

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

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

const addressStore = useAddressStore()
const { statusBarHeight, MenuButtonHeight, opcity, isOnlineAudit } = storeToRefs(useSysStore())
const { name } = storeToRefs(addressStore)
const { userInfo, userMemberInfo } = storeToRefs(useUserStore())
const xsbStore = ref<typeof import('@/subPack-xsb/store-xsb/sys')>()
const { data: goodsList, isLastPage, page, reload, error, refresh } = usePagination((pageNum, pageSize) =>
  Apis.xsb.getSearchProductList({ data: { pageNum, pageSize, salesNum: 'DESC', shopId: xsbStore.value?.useSysXsbStore().SelectShopInfo.shopId || 2, channelId: userInfo.value.channelId || 1 } }), {
  data: resp => resp.data?.list,
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
  immediate: false,
})
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
const currentIndex = ref(0)
const loading = ref(true)
onShow(async () => {
  useSysStore().getAudit()
  useUserStore().getUserMemberInfo()
  useSmqjhCartStore().getCartList('XSB')
  getSelectZhUser()
  xsbStore.value = await AsyncImport('@/subPack-xsb/store-xsb/sys')
  refresh()
})
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})

const navList = computed(() => {
  const list = [
    { icon: `${StaticUrl}/xsb.png`, title: '星闪豹', name: 'xsb-homeTabbar', show: true },
    { icon: `${StaticUrl}/smqjh-index-cd.png`, title: '充电', name: 'charge-index', show: true },
    { icon: `${StaticUrl}/smqjh-sp.png`, title: '电影演出', name: 'film-index', show: true },
    { icon: `${StaticUrl}/smqjh-vip.png`, title: '视频权益', name: 'video-rights-tabbar', show: !isOnlineAudit.value },
    { icon: `${StaticUrl}/smqjh-djk.png`, title: '大健康', name: 'djk-homeTabbar', show: true },
    { icon: `${StaticUrl}/smqjh-jiayou.png`, title: '加油', name: 'refueling-tabbar', show: true },
    { icon: `${StaticUrl}/smqjh-attractions.png`, title: '景区', name: 'attractions-tabbar', show: true },
    { icon: `${StaticUrl}/smqjh-diancan.png`, title: '大牌点餐', name: '', show: !isOnlineAudit.value },
    { icon: `${StaticUrl}/smqjh-jiudian.png`, title: '酒店民宿', name: '', show: !isOnlineAudit.value },
    { icon: `${StaticUrl}/smqjh-daijia.png`, title: '代驾', name: '', show: !isOnlineAudit.value },
  ]
  return list
})
const itemsPerPage = 8
const columnsCount = 4
const visibleNavList = computed(() => navList.value.filter(i => i.show))
const swiperHeight = computed(() => {
  const total = visibleNavList.value.length
  return calcNavSwiperHeight(total, currentIndex.value, { itemsPerPage, columns: columnsCount })
})
const swiperStyle = computed(() => ({ height: `${swiperHeight.value}rpx` }))
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
  }
  if (userInfo.value.channelId === 58 && name !== 'xsb-homeTabbar') {
    show({ msg: '您所属的企业暂无权限查看 !' })
    return
  }
  if (name === 'refueling-tabbar') { // 跳转至公众号
    // #ifdef MP-WEIXIN
    ;(wx as any).openOfficialAccountProfile({
      username: 'gh_6a682fa2ed1d',
    })
    // #endif

    // #ifdef H5
    router.push({ name: 'refueling-tabbar' })
    // #endif
    return
  }

  router.push({ name })
}
onShareAppMessage(() => {
  return {
    title: '市民请集合',
  }
})
const showoverlay = ref(false)
const showoverlay2 = ref(true)
async function getSelectZhUser() {
  const res = await Apis.sys.selectZhUser({})
  if (res.data.channelId === 54 && !res.data.isClaimed) {
    showoverlay.value = true
  }
}

async function getZhUserReceived() {
  useGlobalLoading().loading({ msg: '领取中...' })
  await Apis.sys.zhUserReceived({})
  useGlobalLoading().close()
  show({ msg: '领取成功 !' })
  showoverlay.value = false
}

function handleGo() {
  router.push({ name: 'bannerDetaile' })
}
function handleChangeSwiper(e: UniHelper.SwiperOnChangeEvent) {
  console.log(e.detail.current, 'e.detail.current')

  currentIndex.value = e.detail.current
}
function handleJyBanner() {
  // #ifdef MP-WEIXIN
  wx.openOfficialAccountArticle({
    url: 'https://mp.weixin.qq.com/s/lxpdZ6DUhgqg00AT9klu5Q',
  })
  // #endif
  // #ifdef H5
  window.open('https://mp.weixin.qq.com/s/lxpdZ6DUhgqg00AT9klu5Q')
  // #endif
}
</script>

<template>
  <view class="page-class box-border">
    <wd-navbar
      title="" :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, opcity)};`" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    >
      <template #left>
        <view class="relative z-10 h-48rpx w-202rpx w-full opacity-100">
          <image class="absolute left-0 top-0 h-48rpx w-202rpx" :src="`${StaticUrl}/logo.png`" />
        </view>
      </template>
    </wd-navbar>

    <view
      class="header-linear h-320rpx px-24rpx"
      :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
    >
      <view class="box-border w-full flex items-center">
        <view class="flex items-center" @click="useAddressStore().getMapAddress()">
          <image :src="`${StaticUrl}/location-black.png`" class="h-33.8rpx min-w-28.97rpx w-28.97rpx" />
          <view class="ml-18rpx max-w-180rpx truncate text-32rpx">
            {{ name }}
          </view>
        </view>
        <view class="ml-16rpx h-60rpx flex flex-1 items-center justify-between rounded-40rpx bg-white pr-6rpx">
          <view class="flex items-center pb-14rpx pl-24rpx pt-16rpx">
            <wd-icon name="search" size="14" color="#ccc" />
            <view class="ml-12rpx text-24rpx text-gray">
              霸王茶姬
            </view>
          </view>
          <view
            class="h-50rpx w-96rpx flex items-center justify-center rounded-26rpx bg-[var(--them-color)] text-24rpx text-white font-semibold"
          >
            搜索
          </view>
        </view>
      </view>
    </view>
    <view class="px-24rpx -mt260rpx">
      <view class="mt-24rpx rounded-16rpx bg-white py-24rpx" :class="[loading ? 'px-24rpx' : '']">
        <wd-skeleton
          :loading="loading"
          theme="image" :row-col="[
            [
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
            ],
            [
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
              { width: '120rpx', height: '120rpx' },
            ],

          ]"
        >
          <!-- h340rpx -->
          <swiper :duration="300" :style="swiperStyle" class="transition-height" @change="handleChangeSwiper">
            <swiper-item
              v-for="pageIndex in Math.ceil(navList.filter(i => i.show).length / 8)" :key="pageIndex"
            >
              <view class="grid grid-cols-4 gap-12rpx">
                <template
                  v-for="item in navList.filter(i => i.show).slice((pageIndex - 1) * 8, pageIndex * 8)"
                  :key="item.icon"
                >
                  <view
                    class="flex flex-col items-center justify-center"
                    @click="handleClick(String(item.name))"
                  >
                    <view class="relative h-120rpx w-120rpx">
                      <image :src="item.icon" class="h-120rpx w-120rpx" />
                      <view
                        v-if="item.name == ''"
                        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>
                </template>
              </view>
            </swiper-item>
          </swiper>
          <view class="w-full flex items-center justify-center">
            <view v-for="_pageIndex, index in Math.ceil(navList.filter(i => i.show).length / 8)" :key="index" class="mr14rpx transition-all transition-duration-400 ease-in" :class="[currentIndex == index ? 'rounded-12rpx w-40rpx h12rpx bg-[var(--them-color)]' : 'w12rpx h12rpx rounded-50% bg-#F0F0F0']" />
          </view>
        </wd-skeleton>
      </view>

      <view class="mt-20rpx w-full flex items-center justify-between">
        <image :src="`${StaticUrl}/smqjh-jy-banner.jpg`" class="h-346rpx w-344rpx flex-shrink-0 rounded-12rpx" @click="handleJyBanner" />
        <view class="flex flex-1 flex-col items-end justify-center" @click="handleGo">
          <image :src="`${StaticUrl}/smqjh-home-banner1.jpg`" class="h-180rpx w-344rpx rounded-12rpx" />
          <image :src="`${StaticUrl}/smqjh-home-banner2.jpg`" class="mt-14rpx h-152rpx w-344rpx rounded-12rpx" />
        </view>
      </view>
      <view class="mt-20rpx">
        <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">
            <view class="w-full columns-2 gap-[10px]">
              <view
                v-for="item in goodsList" :key="item.id"
                class="relative mb-[10px] break-inside-avoid overflow-hidden rounded-16rpx bg-white pb-16rpx"
              >
                <view @click="router.push({ name: 'xsb-goods', params: { id: item.prodId } })">
                  <view class="relative h-344rpx">
                    <image :src="item.pic" class="h-344rpx w-344rpx" />
                    <image
                      :src="`${StaticUrl}/xsb-shui-index.png`"
                      class="absolute left-0 top-0 h-344rpx w-344rpx"
                    />
                    <view class="absolute bottom-0 left-0 flex items-center text-22rpx">
                      <view class="rounded-tl-8rpx bg-[#02ECFD] pl-4rpx">
                        星闪豹
                      </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="mt-16rpx pl-20rpx pr-6rpx">
                    <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 v-if="item.isMember" class="mt-20rpx flex items-center gap-16rpx">
                      <view class="flex items-end text-[#FF4D3A]">
                        <view class="text-24rpx">
                          ￥
                        </view>
                        <view class="text-36rpx line-height-[36rpx]">
                          {{ item.memberPrice }}
                        </view>
                        <view class="text-24rpx">
                          元
                        </view>
                      </view>
                      <view class="rounded-8rpx bg-#FF4A39 px-8rpx py-4rpx text-22rpx text-#FFF">
                        会员价
                      </view>
                      <view class="text-24rpx text-#AAA line-through">
                        ￥{{ item.channelProdPrice }}
                      </view>
                    </view>
                    <view v-else class="mt-20rpx 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="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
                  >
                    商品已售罄
                  </view>
                </view>
                <view
                  v-if="!item.skuList.some((it) => it.saleStatus)"
                  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="h-156rpx w-156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white"
                  >
                    商品不可售
                  </view>
                </view>
              </view>
            </view>
          </view>
        </wd-skeleton>
      </view>
      <wd-loadmore v-if="goodsList.length > 9" :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
      <wd-overlay :show="showoverlay" @click="showoverlay = false">
        <view class="mt-280rpx flex items-center justify-center">
          <view class="relative h-906rpx w-644rpx flex flex-col justify-center text-center" :style="{ backgroundImage: `url(${StaticUrl}/home-overlay-img.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
            <view>
              <view class="text-80rpx text-#FF1B51 font-600">
                ￥200
              </view>
              <view class="text-28rpx font-800">
                现金抵扣券
              </view>
            </view>
            <view class="absolute bottom-110rpx left-42% text-60rpx text-#FF1B51 font-bold" @click="getZhUserReceived">
              领
            </view>
          </view>
        </view>
      </wd-overlay>
      <wd-overlay :show="showoverlay2 && userMemberInfo.isFirstLogin" @click="showoverlay2 = false">
        <view class="mt-280rpx flex items-center justify-center">
          <view class="relative h-906rpx w-644rpx flex flex-col items-center justify-center text-center" :style="{ backgroundImage: `url(${StaticUrl}/vip-index-popup.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
            <view class="absolute top-120rpx w-406rpx border-[1rpx_solid_#FFFFFF] rounded-50rpx border-solid px-30rpx py-8rpx text-center text-24rpx text-#FFF">
              您的会员权益已生效有效期至{{ userMemberInfo.expireTime }}
            </view>
            <image :src="`${StaticUrl}/vip-index-check.png`" class="absolute top-690rpx h-84rpx w-372rpx" @click="router.push({ name: 'smqjh-user-vip' })" />
            <image :src="`${StaticUrl}/vip-index-shopping.png`" class="absolute top-800rpx h-84rpx w-288rpx" @click="router.push({ name: 'xsb-homeTabbar' })" />
          </view>
        </view>
      </wd-overlay>
    </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);
  }

  .transition-height {
    transition: height 0.3s ease;
  }

}
</style>