sound-chain/common/components/s-tabbar/s-tabbar.vue

<template>
  <view class="u-page__item">
    <su-tabbar
      :value="path"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
	  :inactiveColor="state.tabbar.style.color"
	  :activeColor="state.tabbar.style.activeColor"
	  :midTabBar="state.tabbar.mode === 2"
	  :customStyle="tabbarStyle"
    >
      <su-tabbar-item
		v-for="(item, index) in state.tabbar.items"
		:key="item.text"
		:text="item.text"
		:name="item.url"
		:badge="item.badge"
		:dot="item.dot"
		:badgeStyle="state.tabbar.badgeStyle"
		:isCenter="getTabbarCenter(index)"
		:centerImage="item.iconUrl"
		@tap="sheep.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="item.activeIconUrl"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="item.iconUrl"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import sheep from '@/common';
  import SuTabbar from '@/common/ui/su-tabbar/su-tabbar.vue';

  const state = reactive({
    tabbar: {
		mode: 2,
		style:{
			bgType: 'color',
			bgColor: '#ffffff',
			bgImg: '',
			activeColor:'#35E89A',
			color:'#222222'
		},
		badgeStyle: {},
		items:[
			{
				text:'首页',
				url:'/pages/index/index',
				badge:0,
				dot: false,
				iconUrl:'/static/homeIconUrl.png',
				activeIconUrl:'/static/homeActiveIconUrl.png'
			},
			{
				text:'任务创建',
				url:'/pages/task/create',
				badge:0,
				dot: false,
				iconUrl:'/static/createIconUrl.png',
			},
			{
				text:'我的',
				url:'/pages/index/user',
				badge:10,
				dot: false,
				iconUrl:'/static/userIconUrl.png',
				activeIconUrl:'/static/userActiveIconUrl.png'
			}
		]
	},
  })

  const tabbarStyle = computed(() => {
    const backgroundStyle = state.tabbar.style;
    if (backgroundStyle.bgType === 'color') {
      return { background: backgroundStyle.bgColor };
    }
    if (backgroundStyle.bgType === 'img')
      return {
        background: `url(${backgroundStyle.bgImg}) no-repeat top center / 100% auto`,
      };
  });
  
  const getTabbarCenter = (index) => {
    if (state.tabbar.mode !== 2) return false;
    return state.tabbar.items.length % 2 > 0
      ? Math.ceil(state.tabbar.items.length / 2) === index + 1
      : false;
  };
  
  const props = defineProps({
    path: String,
    default: '',
  });
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>