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

<script setup lang="ts">
import CouponArrivalPopup from './components/couponArrivalPopup.vue'
import indexHome from './components/index.vue'
import cart from './components/cart.vue'
import classfiy from './components/classfiy.vue'
import my from './components/my.vue'

definePage({
  name: 'xsb-homeTabbar',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹首页',
    backgroundColorBottom: '#fff',
    disableScroll: true,
  },
})
const sysXsbStore = useSysXsbStore()
const {
  opcity,
  backTop,
  SelectShopInfo,
  allShopHasPermission,
  xsbShopList,
  isClassfiyPageOpen,
} = storeToRefs(sysXsbStore)
const { userInfo } = storeToRefs(useUserStore())
const commonCategoryData = ref<Api.xsbCategories[]>([])
const { data: goodsList, isLastPage, page, error, reload, refresh } = usePagination((pageNum, pageSize) =>
  Apis.xsb.getSearchProductList({ data: { pageNum, pageSize, salesNum: 'DESC', shopId: Number(SelectShopInfo.value?.shopId) || 1, channelId: userInfo.value.channelId || 1 } }), {
  data: resp => resp.data?.list,
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
  immediate: false,
})
const tabbarItems = ref([
  { name: 'xsb-home', value: null, active: true, title: '首页', icon1: '' },
  { name: 'xsb-classfiy', value: null, active: false, title: '分类', icon1: '' },
  { name: 'xsb-cart', value: null, active: false, title: '购物车', icon1: '' },
  { name: 'xsb-my', value: null, active: false, title: '我的', icon1: '' },
])
const tabbarName = ref('xsb-home')
const swiperList = ref<Api.xsbAdvertInfo[]>([])
const hotText = ref<Api.xsbSearchTerm[]>([])
const recommendText = ref<Api.xsbSearchTerm[]>([])
const isShow = ref(true)
function handleTabbarChange({ value }: { value: string }) {
  setTabbarItemActive(value)
  tabbarName.value = value
}
watch(() => isClassfiyPageOpen.value, () => {
  console.log('isClassfiyPageOpen')
  if (isClassfiyPageOpen.value) {
    handleChange('xsb-classfiy')
    isClassfiyPageOpen.value = false
  }
}, { deep: true, immediate: true })
function setTabbarItemActive(name: string) {
  tabbarItems.value.forEach((item) => {
    if (item.name === name) {
      item.active = true
    }
    else {
      item.active = false
    }
  })
}
function handleClick() {
  backTop.value = true
}
onLoad((options: any) => {
  opcity.value = 0
  if (options.name) {
    handleTabbarChange({ value: options.name })
  }
})
const loading = ref(true)
async function getCategories() {
  const res = await Apis.xsb.categories({ data: { shopId: unref(SelectShopInfo).shopId, channelId: unref(userInfo).channelId || 1 } })
  commonCategoryData.value = res.data
}
async function getCurrentImg() {
  const res = await Apis.xsb.appAdvertInfo({})
  swiperList.value = res.data
}
async function getSearchData(type: number) {
  const { data } = await Apis.xsb.SearchTerm({ data: { type } })
  return data
}

function handleCouponArrivalUse() {
  handleChange('xsb-classfiy')
}

onMounted(async () => {
  allShopHasPermission.value = false
  await useSysXsbStore().getAllShopList()
  hotText.value = await getSearchData(2)
  recommendText.value = await getSearchData(3)
  getCurrentImg()
  // reload()
  getCategories()
  loading.value = false
  queryPopupConfig()
})
onShow(() => {
  refresh()
})

watch(() => SelectShopInfo.value.shopId, () => {
  getCategories()
  refresh()
})

onShareAppMessage(() => {
  return {
    title: '市民请集合',
  }
})
function handleScrollBottom() {
  if (error.value) {
    reload()
    return
  }
  if (!isLastPage.value) {
    page.value++
  }
}
function handleChange(name: string) {
  tabbarItems.value = tabbarItems.value.map((it) => {
    if (it.name === name) {
      it.active = true
    }
    else {
      it.active = false
    }
    return it
  })
  tabbarName.value = name
}
function beforeleave() {
  if (tabbarName.value === 'xsb-classfiy') {
    isShow.value = false
    handleChange('xsb-home')
    nextTick(() => {
      isShow.value = true
    })
  }
}

const curtainInfo = ref({
  enabled: false,
  imageUrl: '',
})

async function queryPopupConfig() {
  try {
    const res = await Apis.xsb.popupConfig({})
    curtainInfo.value = res.data
  }
  catch (error) {
    console.error('获取弹窗配置失败:', error)
    curtainInfo.value = { enabled: false, imageUrl: '' }
  }
}
</script>

<template>
  <view class="page-xsb">
    <indexHome
      v-if="tabbarName == 'xsb-home'" :category-list="commonCategoryData" :swiper="swiperList"
      :hot-text="hotText" :recommend-text="recommendText" :loading="loading" :goods-list="goodsList"
      :last-page="isLastPage" :error="error" @change-nav="handleChange('xsb-classfiy')"
      @scroll-bottom="handleScrollBottom"
    />
    <cart v-if="tabbarName == 'xsb-cart'" @change-tab="handleChange('xsb-home')" />
    <classfiy v-if="tabbarName == 'xsb-classfiy'" :category-list="commonCategoryData" :hot-text="hotText" />
    <my v-if="tabbarName == 'xsb-my'" />
    <view v-if="tabbarName == 'xsb-classfiy'">
      <page-container :show="isShow" :overlay="false" @beforeleave="beforeleave" />
    </view>
    <wd-tabbar
      v-model="tabbarName" safe-area-inset-bottom placeholder fixed :bordered="false" custom-class="custom-tab"
      :custom-style="`box-shadow:${tabbarName == 'xsb-cart' || tabbarName == 'xsb-classfiy' ? '' : ' 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09)'}`"
      :z-index="99999" @change="handleTabbarChange"
    >
      <wd-tabbar-item
        v-for="(item, index) in tabbarItems" :key="index" :name="item.name"
        :value="useSysXsbStore().getTabbarItemValue(item.name)" :title="index == 0 && item.active ? '' : item.title"
        @change="handleTabbarChange"
      >
        <template #icon="{ active }">
          <template v-if="index == 0 && !active">
            <i class="iconfont text-44rpx">&#xe629;</i>
          </template>
          <template v-else-if="index == 0 && active">
            <i v-if="opcity == 1" class="iconfont text-76rpx text-[var(--them-color)]" @click="handleClick">&#xe62b;</i>
            <i v-else class="iconfont text-76rpx text-[var(--them-color)]">&#xe648;</i>
          </template>
          <template v-else-if="index != 0">
            <text :class="[active ? 'text-[var(--them-color)]' : '']" class="iconfont text-44rpx">
              {{ item.icon1 }}
            </text>
          </template>
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
    <wd-popup v-model="allShopHasPermission" custom-style="border-radius:32rpx;" :close-on-click-modal="false" :z-index="99999">
      <view class="p28rpx">
        <view class="text-center text-24rpx text-#AAAAAA">
          你没有该门店的商品数据查看权限，请切
          换其他门店
        </view>
        <view class="mt30rpx w420rpx">
          <view v-for="item in xsbShopList" :key="item.shopId" class="mb20rpx flex items-center text-28rpx" :class="[item.isPermiss ? 'text-[var(--them-color)] font-semibold' : 'text-#AAAAAA ']">
            {{ item.shopName }}
            <view v-if="!item.isPermiss" class="ml20rpx rounded-22rpx bg-#aaa px16rpx text-24rpx text-white">
              无权限
            </view>
          </view>
        </view>
      </view>
    </wd-popup>
    <wd-overlay :show="curtainInfo.enabled" :z-index="99999" @click="curtainInfo.enabled = false">
      <view class="h-full flex items-center justify-center">
        <image class="h-784rpx w-750rpx" :src="curtainInfo.imageUrl" />
      </view>
    </wd-overlay>
    <CouponArrivalPopup
      @use="handleCouponArrivalUse"
    />
  </view>
</template>

<style scoped lang="scss">
.page-xsb {
  :deep() {
    .login-btn {
      min-width: 0 !important;
      width: 180rpx;
    }

    .cell-title {
      padding-left: 20rpx;
    }

    .item-cell {
      .card {
        padding: 0 !important;
      }

      .cell-group {
        overflow: hidden;
        border-radius: 12rpx;
      }

      .wd-cell__right {
        width: 60rpx !important;
        flex: unset !important;
      }
    }
    .wd-swiper-nav__item--dots-bar.is-active{
      background-color: var(--them-color) !important;
    }
  }

}
</style>