xiangyuan-app/src/pages/index.vue

<template>
	<view class="index" :style="{
    backgroundImage: tabIndex === 4 ? 
      `url('https://xy.wenlvti.net/app_static/images/mine/TopBanner.png')` 
      : `url('https://xy.wenlvti.net/app_static/images/home/BannerHome.png')`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: '100% auto',
    backgroundPosition: 'top center',
    backgroundColor: themeContext.resolveThemeColor('background.primary'),
  }">
    <CommonRoot>
      <StatusBarSpace backgroundColor="transparent" />
      <NavBar
        :titleScroll="false"
        backgroundColor="transparent"
        textColor="whweixinite"
        align="left"
        :zIndex="200"
      />
      <HomeIndex 
        ref="homeIndex" 
        v-show="tabIndex === 0"
        :currentScrollTop="currentScrollTop"
        @goVillage="tabIndex = 1" 
        @goDig="tabIndex = 2" 
      />
      <VillageIndex 
        v-if="tabIndex === 1"
        ref="villageIndex" 
        showSwitch
        @goHome="tabIndex=0" 
        @goMap="homeIndex?.goMap()"
        @goDiscover="tabIndex = 3"
      />
      <DigIndex v-show="tabIndex === 2" />
      <DiscoverIndex v-show="tabIndex === 3" @goVillage="tabIndex = 1" />
      <UserIndex v-show="tabIndex === 4" @goSubmit="tabIndex = 2" />
      <TabBar
        v-model:selectedTabIndex="tabIndex"
        fixed
        xbarSpace
        :innerStyle="{
          zIndex: 201,
          backgroundColor: '#ffead8',
        }"
      >
        <TabBarItem icon="https://xy.wenlvti.net/app_static/images/tabs/TabIconHome.png" activeIcon="https://xy.wenlvti.net/app_static/images/tabs/TabIconHomeActive.png" text="首页" :iconSize="70" />
        <TabBarItem icon="https://xy.wenlvti.net/app_static/images/tabs/TabIconVillage.png" activeIcon="https://xy.wenlvti.net/app_static/images/tabs/TabIconVillageActive.png" text="乡源" :iconSize="70" />
        <TabBarItem icon="https://xy.wenlvti.net/app_static/images/tabs/TabIconDig.png" activeIcon="https://xy.wenlvti.net/app_static/images/tabs/TabIconDigActive.png" text="挖掘" :iconSize="70" />
        <TabBarItem icon="https://xy.wenlvti.net/app_static/images/tabs/TabIconDiscover.png" activeIcon="https://xy.wenlvti.net/app_static/images/tabs/TabIconDiscoverActive.png" text="发现" :iconSize="70" />
        <TabBarItem icon="https://xy.wenlvti.net/app_static/images/tabs/TabIconMine.png" activeIcon="https://xy.wenlvti.net/app_static/images/tabs/TabIconMineActive.png" text="我的" :iconSize="70" />
      </TabBar>
    </CommonRoot>

    <BackToTop 
      ref="backToTop"
      customScrollValue
      :bottom="200"
      @click="handleScrollTop"
      @scroll="(v) => currentScrollTop = v"
    />
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { useTheme } from '@/components/theme/ThemeDefine';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useVillageStore } from '@/store/village';
import { useAuthStore } from '@/store/auth';
import { useShareLink } from './home/composeabe/ShareLink';
import { isDevEnv } from '@/common/config/AppCofig';
import { navTo } from '@/components/utils/PageAction';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
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 './home/dig.vue';
import UserIndex from './user/index.vue';
import HomeIndex from './home/index.vue';
import DiscoverIndex from './home/discover/index.vue';
import VillageIndex from './home/village/index.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import BackToTop from '@/components/feedback/BackToTop.vue';
import OfficialApi from '@/api/light/OfficialApi';

const tabIndex = ref(0);
const themeContext = useTheme();
const villageStore = useVillageStore();
const authStore = useAuthStore();
const appConfiguration = injectAppConfiguration();
const { recommendUserId, setRecommendUserId } = useShareLink();
const currentScrollTop = ref(0);

const backToTop = ref<InstanceType<typeof BackToTop>>();
const villageIndex = ref<InstanceType<typeof VillageIndex>>();
const homeIndex = ref<InstanceType<typeof HomeIndex>>();

const { querys } = useLoadQuerys({ 
  openLogin: false,
  villageId: 0,
  userId: 0,
  scene: '',
}, (_querys) => {
  if (_querys.openLogin) {
    navTo('/pages/user/login');
  }
  if (_querys.scene) {
    const sp = _querys.scene.split(':');
    switch (sp[0]) {
      case 'invg':
        //处理从二维码进入村社情况
        if (sp.length >= 2)
          querys.value.villageId = Number(sp[1]);
        if (sp.length >= 3)
          setRecommendUserId(Number(sp[2]));
        break;
      case 'offical':
        //处理从推广文章返回跳转小程序点击量情况
        if (sp.length >= 3) {
          OfficialApi.traceOfficalLogApi('offical_card_clickback', {
            user_id: Number(sp[1]),
            wechat_content_id: Number(sp[2]),
          });
          setRecommendUserId(Number(sp[1]));
        }
        break;
    }
  }
  if (_querys.userId) {
    setRecommendUserId(Number(_querys.userId));
  }
  //普通分享进入村社情况
  if (querys.value.villageId) {
    loadShareVillageInfo();
  }
});

async function loadShareVillageInfo(id?: number) {
  try {
    const res = await LightVillageApi.getVillageDetails(id ?? querys.value.villageId as number);
    villageStore.setCurrentVillage(res);
  } catch (error) {
    console.error(error);
    return;
  }
  tabIndex.value = 1;
}
function getShareVillageInfo() {
  if (villageStore.currentVillage) {
    //分享村社信息
    const villageInfoInList = villageStore.myJoinedVillages.find(v => v.id === villageStore.currentVillage?.id);
    const myNickName = villageInfoInList?.villageNickname || authStore.userInfo?.nickname || authStore.userInfo?.username || '老友';
    return {
      title: `同乡 ${myNickName} 邀您回 ${villageStore.currentVillage.name} 看看，心系故土，携手共建美好家乡`,
      path: `/pages/index?scene=invg:${villageStore.currentVillage.id}:${authStore.userInfo?.id || 0}`,
      imageUrl: villageStore.currentVillage.image || appConfiguration.value.sharePost.villageDefault,
    }
  }
  return {
    title: '村社文化资源挖掘平台',
    path: '/pages/index?userId=' + (authStore.userId || 0),
    imageUrl: appConfiguration.value.sharePost.default,
  };
}
async function paySuccessAndRefresh() {
  try {
    uni.showLoading({
      title: '请稍后...',
    });

    tabIndex.value = 0;
    await villageStore.reloadVillageInfo();
    await waitTimeOut(100);
    tabIndex.value = 1;
  } catch (error) {
    console.error(error);
    return;
  } finally {
    uni.hideLoading();
  }
}

watch(tabIndex, () => {
  uni.setStorageSync('lastTabIndex', tabIndex.value);
  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
});

onPageScroll((e) => {
  backToTop.value?.onScroll(e.scrollTop);
});
function handleScrollTop() {
  uni.pageScrollTo({ scrollTop: 0, duration: 300 });
}

defineExpose({
  onPageBack: (name: string, data: Record<string, unknown>) => {
    if (name === 'goVillage') {
      tabIndex.value = 1;
      if (data.id) {
        loadShareVillageInfo(data.id as number);
      }
      if (data.taskType) {
        setTimeout(() => {
          switch (data.taskType) {
            case 'collect':
              villageIndex.value?.goCollectPage();
              break;
            case 'post':
              break;
            case 'tree':
              villageIndex.value?.goTreePage();
              break;
          }
        }, 500);
      }
    } else if (name === 'paySuccessAndRefresh') {
      paySuccessAndRefresh();
    } else {
      villageIndex.value?.onPageBack(name, data);
    }
  }
})
onShareAppMessage(() => {
  return getShareVillageInfo();
})
onShareTimeline(() => {
  return getShareVillageInfo();
})
onMounted(() => {
  if (isDevEnv) {
    tabIndex.value = Number(uni.getStorageSync('lastTabIndex') ?? 0);
  }
})
</script>

<style>
.index {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>