xiangyuan-app/src/pages/home/village/index.vue

<template>
  <CommonRoot>
    <FlexCol v-if="showSwitch" position="absolute" :left="0" :top="0">
      <StatusBarSpace />
      <Button
        @click="showMyFollowPopup = true"
        icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
        :text="villageStore.currentVillage?.name || '未选择村庄'"
        type="custom"
        color="transparent"
      />
    </FlexCol>
    <FlexCol v-if="villageStore.currentVillage" gap="gap.md">
      <FlexCol v-if="!isLight" center :padding="[60,0]" gap="gap.md">
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
        <Text text="本村暂未点亮" fontConfig="primaryTitle" />
        <Text text="您可以申请成为志愿者，点亮村庄" fontConfig="contentText" />
        <Height :height="20" />
        <FlexRow gap="gap.lg">
          <FrameButton :text="isFollowed ? '已关注' : '先关注村庄'" @click="isFollowed ? onUnFollow() : onFollow()" />
          <FrameButton text="去申请点亮" @click="handleGoApply()" primary />
        </FlexRow>
      </FlexCol>
      <template v-else>
        <FlexRow center :padding="[0,30]" gap="gap.md">
          <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
          <HomeLargeTitle title="乡源树" :active="tab === 'tree'" @click="tab = 'tree'">
            <template #icon>
              <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin.gif" :width="45" :height="46" mode="heightFix" />
            </template>
          </HomeLargeTitle>
        </FlexRow>
        <Card v-if="tab === 'card'" />
        <Tree v-if="tab === 'tree'" />
      </template>
      <Popup 
        v-model:show="showMyFollowPopup" 
        closeable
        position="bottom"
        round
        size="80vh"
      >
        <VillageMyFollow @goDetails="onSelectVillage" />
      </Popup>
      <Height :height="150" />
    </FlexCol>
    <Around v-else />
  </CommonRoot>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useVillageStore } from '@/store/village';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import Image from '@/components/basic/Image.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Card from './introd/card.vue';
import Tree from './introd/tree.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import Button from '@/components/basic/Button.vue';
import Popup from '@/components/dialog/Popup.vue';
import VillageMyFollow from '../components/VillageMyFollow.vue';
import type { VillageListItem } from '@/api/light/LightVillageApi';
import Around from './recommed/around.vue';
import Text from '@/components/basic/Text.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import { navTo } from '@/components/utils/PageAction';
import { useFollow } from './composeabe/Follow';

const tab = ref('card');
const villageStore = useVillageStore();
const showMyFollowPopup = ref(false);
const { isFollowed, onFollow, onUnFollow } = useFollow();

const props = withDefaults(defineProps<{
  showSwitch?: boolean;
}>(), {
  showSwitch: false,
});

const isLight = computed(() => {
  return villageStore.currentVillage?.isLight ?? false;
});

onMounted(() => {
  if (!props.showSwitch) {
    uni.setNavigationBarTitle({
      title: villageStore.currentVillage?.name || '未选择村庄',
    });
  }
});

function handleGoApply() {
  navTo('/pages/home/light/submit', {
    villageId: villageStore.currentVillage?.id ?? undefined,
    unit: (villageStore.currentVillage?.city as string) + (villageStore.currentVillage?.district as string) + (villageStore.currentVillage?.township as string),
    regionId: villageStore.currentVillage?.region ?? undefined,
  });
}

function onSelectVillage(village: VillageListItem) {
  villageStore.setCurrentVillage(village);
  showMyFollowPopup.value = false;
}
</script>