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

<script setup lang="ts">
import indexHome from './components/index.vue'
import cart from './components/cart.vue'
import classfiy from './components/classfiy.vue'
import my from './components/my.vue'
import icon2 from '@/static/tab/index1.png'
import icon1 from '@/static/tab/index2.png'
import icon3 from '@/static/tab/cart1.png'
import icon4 from '@/static/tab/cart2.png'
import class1 from '@/static/tab/class-tab0.png'
import class2 from '@/static/tab/class-tab1.png'
import icon5 from '@/static/tab/my1.png'
import icon6 from '@/static/tab/my2.png'

definePage({
  name: 'xsb-homeTabbar',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹首页',
    backgroundColorBottom: '#fff',
    disableScroll: true,
  },
})
const { ScrollDown } = storeToRefs(useSysXsbStore())
const tabbarItems = ref([
  { name: 'xsb-home', value: null, active: true, title: '首页', icon1: '', icon2: '' },
  { name: 'xsb-classfiy', value: null, active: false, title: '分类', icon1: class1, icon2: class2 },
  { name: 'xsb-cart', value: null, active: false, title: '购物车', icon1: icon3, icon2: icon4 },
  { name: 'xsb-my', value: null, active: false, title: '我的', icon1: icon5, icon2: icon6 },
])
const tabbarName = ref('xsb-home')
function handleTabbarChange({ value }: { value: string }) {
  setTabbarItemActive(value)
  tabbarName.value = value
}
function setTabbarItemActive(name: string) {
  tabbarItems.value.forEach((item) => {
    if (item.name === name) {
      item.active = true
    }
    else {
      item.active = false
    }
  })
}
function handleClick() {
  uni.pageScrollTo({
    duration: 50,
    scrollTop: 0,
  })
}
onLoad(() => {
  ScrollDown.value = false
})
</script>

<template>
  <view class="page-xsb">
    <indexHome v-if="tabbarName == 'xsb-home'" />
    <cart v-if="tabbarName == 'xsb-cart'" />
    <classfiy v-if="tabbarName == 'xsb-classfiy'" />
    <my v-if="tabbarName == 'xsb-my'" />
    <wd-tabbar
      :model-value="tabbarName" safe-area-inset-bottom placeholder fixed :bordered="false"
      custom-class="custom-tab" :custom-style="`box-shadow:${tabbarName == 'xsb-cart' ? '' : ' 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09)'}`"
      @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">
            <image src="@/static/tab/index.png" class="h44rpx w44rpx" />
          </template>
          <template v-else-if="index == 0 && active">
            <image v-if="ScrollDown" :src="icon1" class="h74rpx w74rpx" @click="handleClick" />
            <image v-else :src="icon2" class="h74rpx w74rpx" />
          </template>
          <template v-else-if="index != 0">
            <image v-if="active" :src="item.icon2" class="h44rpx w44rpx" />
            <image v-else :src="item.icon1" class="h44rpx w44rpx" />
          </template>
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
  </view>
</template>

<style scoped>

</style>