designer-hub/packages/merchant/src/layouts/tabbar.vue

<script setup lang="ts">
import TabbarEvo from '@/components/tabbar-evo.vue'
import { currRoute } from '../utils'
import { defaultThemeVars } from '../core/themes/default'
import DataForm from '@designer-hub/app/src/components/data-form.vue'
import { useUserStore } from '../store'
import { storeToRefs } from 'pinia'
import {
  addBlue,
  channelTabbarHome,
  channelTabbarHomeActive,
  channelTabbarMine,
  channelTabbarMineActive,
} from '@designer-hub/assets/src/assets/svgs'

const userStore = useUserStore()
const { userInfo, isChannel, isMerchant } = storeToRefs(userStore)
const publishState = ref(false)
const items = computed(() => {
  if (isChannel?.value) {
    return [
      {
        title: '首页',
        iconPath: channelTabbarHome,
        selectedIconPath: channelTabbarHomeActive,
        path: '/pages/home/index',
      },
      {
        title: '发布',
        iconPath: addBlue,
        selectedIconPath: addBlue,
        path: '/pages/publish/index',
        // hiddenTitle: true,
        main: true,
      },
      {
        title: '我的',
        iconPath: channelTabbarMine,

        selectedIconPath: channelTabbarMineActive,
        path: '/pages/mine/index',
      },
    ]
  }
  return [
    {
      title: '首页',
      iconPath: channelTabbarHome,
      selectedIconPath: channelTabbarHomeActive,
      path: '/pages/home/index',
    },
    {
      title: '我的',
      iconPath: channelTabbarMine,
      selectedIconPath: channelTabbarMineActive,
      path: '/pages/mine/index',
    },
  ]
})

const schema = ref({
  user: {
    type: 'TextField',
    label: '设计师',
  },
  dateTime: {
    type: 'TextField',
    label: '时间',
  },
  type: {
    type: 'TextField',
    label: '类型',
  },
  remark: {
    type: 'TextField',
    label: '备注',
  },
  location: {
    type: 'TextField',
    label: '地址',
  },
  images: {
    type: 'ImageUploader',
    label: '图片',
    max: 9,
  },
})
const handleTabbarItemClick = (path: string) => {
  if (path === '/pages/publish/index') {
    publishState.value = true
    return
  }
  uni.switchTab({ url: path })
}
onMounted(async () => {})
</script>

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

    <TabbarEvo
      :items="items"
      fixed
      safeAreaInsetBottom
      :current-path="currRoute().path"
      @click="handleTabbarItemClick"
    />
    <wd-action-sheet v-model="publishState" title="创建跟进" @close="publishState = false">
      <view class="flex flex-col p-4">
        <div><DataForm :schema="schema" direction="horizontal"></DataForm></div>
        <div><wd-button block :round="false">提交</wd-button></div>
      </view>
    </wd-action-sheet>
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<style lang="scss">
/* stylelint-disable-next-line selector-type-no-unknown */
layout-tabbar-uni {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
</style>