xiangyuan-app/src/pages/index.vue

<template>
	<view class="index">
    <CommonRoot>
      <StatusBarSpace backgroundColor="transparent" />
      <NavBar 
        :title="title"
        :titleScroll="false"
        backgroundColor="transparent"
        textColor="white"
        align="left"
      />
      <HomeIndex v-if="tabIndex === 0" @goDiscover="tabIndex = 1" />
      <DiscoverIndex v-else-if="tabIndex === 1" />
      <DigIndex v-else-if="tabIndex === 2" />
      <StoreIndex v-else-if="tabIndex === 3" />
      <UserIndex v-else-if="tabIndex === 4" @goSubmit="tabIndex = 2" />
      <TabBar
        v-model:selectedTabIndex="tabIndex"
        fixed
        xbarSpace
      >
        <TabBarItem icon="/static/images/tabs/home.png" activeIcon="/static/images/tabs/home-active.png" text="首页" />
        <TabBarItem icon="/static/images/tabs/discover.png" activeIcon="/static/images/tabs/discover-active.png" text="发现" />
        <TabBarItem icon="/static/images/tabs/dig.png" hump :humpHeight="[ 10, 10 ]" :humpSpace="[20,20]" :iconSize="140" />
        <TabBarItem icon="/static/images/tabs/store.png" activeIcon="/static/images/tabs/store-active.png" text="知识库" />
        <TabBarItem icon="/static/images/tabs/user.png" activeIcon="/static/images/tabs/user-active.png" text="我的" />
      </TabBar>
    </CommonRoot>
	</view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';
import DigIndex from './dig/index.vue';
import UserIndex from './user/index.vue';
import HomeIndex from './home/index.vue';
import DiscoverIndex from './home/discover/index.vue';
import StoreIndex from './home/store/index.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

const title = computed(() => {
  switch (tabIndex.value) {
    case 0:
      return '首页·村社文化资源挖掘平台';
    case 1:
      return '发现·村社文化资源挖掘平台';
    case 2:
      return '挖掘·村社文化资源挖掘平台';
    case 3:
      return '知识库·村社文化资源挖掘平台';
    case 4:
      return '我的·村社文化资源挖掘平台';
  }
  return '';
});
const tabIndex = ref(0);

onShareAppMessage(() => {
  return {
    title: '村社文化资源挖掘平台',
    path: '/pages/index',
    imageUrl: 'https://mn.wenlvti.net/app_static/xiangyuan/images/index-post.jpg',
  }
})
onShareTimeline(() => {
  return {
    title: '村社文化资源挖掘平台',
    path: '/pages/index',
    imageUrl: 'https://mn.wenlvti.net/app_static/xiangyuan/images/index-post.jpg',
  }
})
</script>

<style scoped>
.index {
  background-position: top left;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url('@/static/images/BackgroundMask.jpg');
  overflow-x: hidden;
}
</style>