designer-hub/src/layouts/tabbar.vue

<script setup lang="ts">
import TabbarEvo from '@/components/tabbar-evo.vue'
import { iconCamera, iconWallet } from '@/core/libs/pngs'
import type { ConfigProviderThemeVars } from 'wot-design-uni'

const themeVars: ConfigProviderThemeVars = {
  // colorTheme: 'red',
  buttonPrimaryBgColor: '#000',
  // buttonPrimaryColor: '#07c160',
}
const publishState = ref(false)
const items = [
  { title: '首页', icon: 'home', iconPath: '/static/tabbar/home.svg', path: '/pages/home/index' },
  {
    title: '材料',
    icon: 'home',
    iconPath: '/static/tabbar/material.svg',
    path: '/pages/material/index',
  },
  {
    title: '发布',
    icon: 'home',
    iconPath: '/static/tabbar/publish.svg',
    path: '/pages/publish/index',
    hiddenTitle: true,
  },
  {
    title: '消息',
    icon: 'home',
    iconPath: '/static/tabbar/message.svg',
    path: '/pages/messages/index',
  },
  { title: '我的', icon: 'home', iconPath: '/static/tabbar/mine.svg', path: '/pages/mine/index' },
]
const handleTabbarItemClick = (path: string) => {
  if (path === '/pages/publish/index') {
    publishState.value = true
    return
  }
  uni.switchTab({ url: path })
}
</script>

<template>
  <wd-config-provider :themeVars="themeVars">
    <view class="bg-[#f6f6f6] pb-20">
      <slot />
    </view>

    <TabbarEvo :items="items" fixed safeAreaInsetBottom @click="handleTabbarItemClick" />
    <div
      v-if="publishState"
      class="bg-white/80 backdrop-blur-[100px] fixed top-0 left-0 right-0 bottom-0 z-1"
    >
      <div class="w-full h-full flex flex-col justify-around px-7 box-border">
        <div class="text-black/40 text-3xl font-normal font-['PingFang SC'] leading-[45px]">
          发布记录，
          <br />
          成为更好的自己！
        </div>
        <div class="flex flex-col">
          <div class="flex justify-around">
            <div class="flex flex-col items-center">
              <wd-img :src="iconCamera" width="66" mode="widthFix"></wd-img>
              <div class="text-black text-sm font-normal font-['PingFang SC'] leading-[21px]">
                个人动态
              </div>
            </div>
            <div class="flex flex-col items-center">
              <wd-img :src="iconWallet" width="66" mode="widthFix"></wd-img>
              <div class="text-black text-sm font-normal font-['PingFang SC'] leading-[21px]">
                设计案例
              </div>
            </div>
          </div>
          <wd-button
            custom-class="mt-15"
            type="icon"
            icon="close"
            @click="publishState = false"
          ></wd-button>
        </div>
      </div>
    </div>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<style lang="scss"></style>