xiangyuan-app/src/pages/home/village/introd/card.vue

<template>
  <FlexCol :padding="[30,30,0,30]" gap="gap.lg">

    <!-- 卡片背景 -->
    <BackgroundBox 
      color1="#eecaa0"
      color2="white"
      color2Position="85%"
      color3="white"
      radius="radius.lg"
      direction="column"
      :padding="[35,30]"
      gap="gap.lg"
    >

      <!-- 标题 -->
      <FlexRow justify="space-between" align="flex-end" width="100%">
        <FlexCol gap="gap.md">
          <Text :text="villageInfoLoader.content.value?.title" fontConfig="primaryTitle" />
        </FlexCol>
        <FlexRow center gap="gap.lg">
          <BubbleTip
            v-model:show="showFollowTip"
            content="关注我，方便下次进入"
            @contentClick="isFollowed ? undefined : onFollow()"
            @close="handleCloseFollowTip"
          >
            <Button 
              icon="https://xy.wenlvti.net/app_static/images/village/IconJoin.png" 
              radius="radius.lgr"
              @click="isFollowed ? onUnFollow() : onFollow()"
            >
              {{ isFollowed ? '已关注' : '关注' }}
            </Button>
          </BubbleTip>
          <FlexRow 
            v-if="isJoined"
            gap="gap.md"
            radius="radius.lgr"
            backgroundColor="background.tertiary"
          >
            <Avatar 
              :src="authStore.userInfo?.avatar" 
              :size="65"
              defaultAvatar="https://xy.wenlvti.net/app_static/images/mine/DefaultAvatar.png"
            />
            <FlexCol gap="gap.sm" :padding="[0,30,0,0]">
              <Text :text="displayMyName" fontSize="23" :lines="1" :maxWidth="200" fontConfig="lightImportantTitle" />
              <IconButton icon="edit-filling" size="26" @click="changeNickRef?.show()">
                <Text text="改昵称" fontSize="22" fontConfig="subText" />
              </IconButton>
            </FlexCol>
          </FlexRow>
          <Button 
            v-else
            icon="https://xy.wenlvti.net/app_static/images/village/IconFollow.png"
            radius="radius.lgr"
            text="加入"
            @click="handleGoJoin()"
          />
        </FlexRow>
      </FlexRow>

      <!-- 简介 -->
      <TextEllipsis 
        fontConfig="secondText"
        :lines="2" 
        :expandable="(villageInfoLoader.content.value?.desc as string || '').length > 80"
        :text="(villageInfoLoader.content.value?.desc as string) || '暂无简介，欢迎您来编写完善！'"
      />

      <!-- 状态与申请 -->
      <FlexRow 
        backgroundColor="background.tertiary" 
        radius="radius.md" 
        padding="space.md" 
        justify="space-between" 
      >
        <FlexRow align="center">
          <FlexCol gap="gap.md"> 
            <Text :text="`${villageInfoLoader.content.value?.levelText || '默认级别'}`" fontConfig="secondText" />  
            <Text :text="`存储空间内存：${villageInfoLoader.content.value?.sizeText || ''}`" fontConfig="secondText" />
          </FlexCol>
        </FlexRow>
        <FlexRow align="center" gap="gap.md">
          <IconButton icon="help-filling" @click="navTo('/pages/article/details', { id: 7021, modelId: 18, showRecommend: false })" />
          <Button 
            icon="https://xy.wenlvti.net/app_static/images/village/IconUser.png" 
            radius="radius.lgr" 
            :padding="[10, 30]" 
            backgroundColor="white" 
            @click="upgradeRef?.show()"
          >
            升级村社
          </Button>
        </FlexRow>
      </FlexRow>
      
      <!-- 图片 -->
      <VillageGallery
        v-if="villageInfoLoader.content.value"
        ref="villageGalleryRef"
        :villageId="villageStore.currentVillage?.id ?? 0" 
        @goGallery="handleGoGallery"
      />

      <!-- 地址 -->
      <FlexRow justify="space-between" align="center">
        <FlexRow align="center" gap="gap.sm">
          <Icon name="https://xy.wenlvti.net/app_static/images/village/IconMap.png" size="fontSize.md" />
          <Text :text="villageInfoLoader.content.value?.address" fontConfig="contentText" />
        </FlexRow>
        <Button size="mini" icon="picture" text="村社相册" @click="handleGoGallery" />
      </FlexRow>
      <VillageMiniMap 
        v-if="villageInfoLoader.content.value"
        :lonlat="{ 
          longitude: villageInfoLoader.content.value.longitude, 
          latitude: villageInfoLoader.content.value.latitude 
        }" 
        :currentNoticeContent="currentNoticeContent"
      />

      <FlexRow justify="space-between" align="center">
        <FlexRow center gap="gap.lg" flexBasis="50%">
          <Text text="村社排名" fontConfig="contentText" />
          <Text text="No." fontConfig="lightTitle" />
          <Text :text="villageInfoLoader.content.value?.rankText" fontConfig="primaryTitle" />
        </FlexRow>
        <FlexRow center gap="gap.lg" flexBasis="50%">
          <Text text="村社等级" fontConfig="contentText" />
          <Text :text="`${villageInfoLoader.content.value?.level}级`" fontConfig="primaryTitle" />
        </FlexRow>
      </FlexRow>

      <FlexRow backgroundColor="background.tertiary" radius="radius.md" :padding="[30, 20]">
        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/task/index')">
          <Text text="乡源光" fontConfig="secondText" />
          <Text :text="villageInfoLoader.content.value?.light || '0'" fontConfig="importantTitle" />
          <Button type="text" size="mini" text="做任务" @click="navTo('/pages/home/village/task/index')" />
        </Touchable>
        <Divider type="vertical" />
        <FlexCol center gap="gap.sm" flexBasis="25%">
          <Touchable direction="column" center @click="navTo('/pages/home/village/volunteer/list', { villageId: villageStore.currentVillage?.id ?? undefined })">
            <Text text="乡源人数" fontConfig="contentText" />
            <Text :text="villageInfoLoader.content.value?.memberCount|| '0'" fontConfig="importantTitle" />
          </Touchable>
          <WxButton openType="share">
            <Button type="text" size="mini" text="邀请加入" @click="navTo('/pages/home/village/task/index')" />
          </WxButton>
        </FlexCol>
        <Divider type="vertical" />
        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/follow/list', {
          villageId: villageStore.currentVillage?.id ?? undefined,
        })">
          <Text text="关注人数" fontConfig="contentText" />
          <Text :text="villageInfoLoader.content.value?.followerCount|| '0'" fontConfig="importantTitle" />
          <Height :size="36" />
        </Touchable>
        <Divider type="vertical" />
        <Button 
          :padding="0" 
          type="text" 
          size="small" 
          textColor="text.title"
          text="新手上路" 
          rightIcon="arrow-right" 
          @click="handleGoNew()"
        />
      </FlexRow>
    </BackgroundBox>

    <!-- 排行榜 -->
    <HomeTitle 
      title="排行榜" 
      showMore 
      @moreClicked="navTo('/pages/home/village/rank/volunteer', {
        villageId: villageStore.currentVillage?.id ?? undefined,
      })" 
    />
    <!-- <RoundTags v-model:active="rankActiveTag" :tags="['乡源果', '乡源光', '文化积分' ]" /> -->
    <VillageUserRankList 
      :list="villageUserRankListLoader.content.value ?? []" 
      :scoreSuffix="rankActiveTag"
      @goDetails="navTo('/pages/home/village/volunteer/detail', { id: $event.id })"
    />

    <!-- 魅力乡源 -->
    <HomeTitle title="魅力乡源" showMore @moreClicked="handleGoCollect()">
      <template #right>
        <FlexRow align="center" gap="gap.md">
          <FrameButton
            text="管理" 
            size="small" 
            primary
            @click="handleGoDigManage()"
          />
          <FrameButton
            text="共编村史" 
            icon="https://xy.wenlvti.net/app_static/images/village/IconHistory.png"
            size="small"
            @click="handleGoCollect()"
          />
          <Width :size="15" />
        </FlexRow>
      </template>
    </HomeTitle>
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
      GridItemPaddingVertical: 8,
    }">
      <Grid :borderGrid="false" :mainAxisCount="4">
        <GridItem title="村社概况" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIntrod.png" touchable @click="handleGoCollect(11, '村社概况')" />
        <GridItem title="自然风光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeEnvirounment.png" touchable @click="handleGoCollect(13, '自然风光')" />
        <GridItem title="历史沿革" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png" touchable @click="handleGoCollect(2, '历史沿革')" />
        <GridItem title="特色产业" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIndustry.png" touchable @click="handleGoCollect(9, '特色产业'  )"    />
        <GridItem title="文艺活动" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeActivity.png" touchable @click="handleGoCollect(12, '文艺活动')" />
        <GridItem title="非遗展示" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeShow.png" touchable @click="handleGoCollect(10, '非遗展示')" />
        <GridItem title="民俗风采" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeFolkloreVibe.png" touchable @click="handleGoCollect(8, '民俗风采')" />
        <GridItem title="历史人物" icon="https://xy.wenlvti.net/app_static/images/village/IconGoods.png" touchable @click="handleGoCollect(7, '历史人物')" />
      </Grid>
    </ProvideVar>

    <!-- 活力乡源 -->
    <HomeTitle title="活力乡源" />
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
      GridItemPaddingVertical: 8,
    }">
      <Grid :borderGrid="false" :mainAxisCount="4">
        <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable @click="handleGoCollect(23, '乡源荣光')" />
        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable @click="navTo('/pages/home/village/goods/index', { villageId: villageStore.currentVillage?.id ?? undefined })" />
        <GridItem title="乡源树" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" touchable @click="emit('goTree')" />
        <!-- <GridItem title="政贤连心" icon="https://xy.wenlvti.net/app_static/images/village/IconGovAffairs.png" touchable @click="navTo('/pages/home/village/gov/index')" /> -->
        <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable @click="navTo('/pages/home/village/games/index')" />
      </Grid>
    </ProvideVar>

    <!-- 文脉乡源 -->
    <HomeTitle title="文脉乡源">
      <template #right>
        <FlexRow align="center" gap="gap.md">
          <BubbleTip
            v-model:show="showManageTip"
            position="bottom"
            crossPosition="left"
            arrowOffsetX="-140rpx"
            content="村社贴图太乱？点这里整理"
            @contentClick="handleCloseManageTip(true)"
            @close="handleCloseManageTip(false)"
          >
            <FrameButton
              text="管理" 
              size="small" 
              primary
              @click="handleGoOfficalManage()"
            />
          </BubbleTip>
          <FrameButton 
            text="乡源AI帮你写" 
            size="small" 
            icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png"
            @click="handleGoPublish()" 
          />
        </FlexRow>
      </template>
    </HomeTitle>
    <RoundTags v-model:active="listActiveTag" :tags="['广场', '老味道', '老手艺', '老物件', '老故事']" />
  </FlexCol>
  <OfficialAccountPublishWrap
    :topic="recommendTagName" 
    @publishsuccess="onPublishSuccess"
    @empty="isOfficialEmpty=true"
  />
  <UpgradeDialog 
    ref="upgradeRef"
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
  />
  <ChangeNickDialog 
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
    ref="changeNickRef"
  />  
  <Popup 
    :show="showUnLight"
    :zIndex="100"
    size="40%"
    position="bottom"
    backgroundColor="transparent"
  >
    <FlexCol center>
      <BackgroundBox 
        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDialog.png"
        :backgroundCutBorder="48"
        :backgroundCutBorderSize="48"
        :padding="40"
        direction="column"
        center
        width="600rpx"
        gap="gap.md"
      >
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
        <Text :text="`${villageStore.currentVillage?.name}暂未点亮`" fontConfig="primaryTitle" />
        <Text text="等你的加入，快来为家乡建设做贡献吧" fontConfig="contentText" />
        <Height :height="20" />
        <FlexRow gap="gap.lg">
          <FrameButton :text="isFollowed ? '已关注' : '先关注村社'" @click="isFollowed ? onUnFollow() : onFollow()" />
          <FrameButton text="去申请点亮" @click="handleGoJoin" primary />
        </FlexRow>
      </BackgroundBox>
      <Height :size="300" />
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useUserTools } from '@/common/composeabe/UserTools';
import { useOfficialAccount } from '../../composeabe/OfficialAccount';
import { useAuthStore } from '@/store/auth';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useVillageStore } from '@/store/village';
import { useRequireLogin } from '@/common/composeabe/RequireLogin';
import { useFollow } from '../composeabe/Follow';
import { useGetNotice } from '../composeabe/GetNotice';
import { assertNotNull, FormatUtils, waitTimeOut } from '@imengyu/imengyu-utils';
import { navTo } from '@/components/utils/PageAction';
import { confirm } from '@/components/dialog/CommonRoot';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import VillageMiniMap from '../../components/VillageMiniMap.vue';
import Divider from '@/components/display/Divider.vue';
import RoundTags from '@/common/components/parts/RoundTags.vue';
import VillageUserRankList from '../../components/VillageUserRankList.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import OfficialAccountPublishWrap from '@/common/components/OfficialAccountPublishWrap.vue';
import UpgradeDialog from '../dialogs/UpgradeDialog.vue';
import VillageGallery from '../components/VillageGallery.vue';
import WxButton from '@/components/basic/WxButton.vue';
import Height from '@/components/layout/space/Height.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Button from '@/components/basic/Button.vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import MemoryTimeOut from '@/components/composeabe/MemoryTimeOut';
import TextEllipsis from '@/components/display/TextEllipsis.vue';
import OfficialApi from '@/api/light/OfficialApi';
import FrameButton from '@/common/components/FrameButton.vue';
import Width from '@/components/layout/space/Width.vue';
import Popup from '@/components/dialog/Popup.vue';
import Image from '@/components/basic/Image.vue';
import Avatar from '@/components/display/Avatar.vue';
import ChangeNickDialog from '../dialogs/ChangeNickDialog.vue';

const emit = defineEmits<{
  (e: 'goTree'): void;
  (e: 'goJoin'): void;
}>();

const authStore = useAuthStore();
const { getIsVolunteer } = useUserTools();
const { requireLogin } = useRequireLogin();
const { onPublishSuccess } = useOfficialAccount(() => {
  return {
    villageId: villageStore.currentVillage?.id ?? 0,
    userId: authStore.userId,
    tag: recommendTagName.value,
  };
});
const villageStore = useVillageStore();
const { isFollowed, onFollow, onUnFollow } = useFollow();
const { getIsJoinedVillage } = useUserTools();
const isOfficialEmpty = ref(false);
const isJoined = ref(false);
const villageInfoLoader = useSimpleDataLoader(async () => {
  const village = villageStore.currentVillage;  
  try {
    if (village) 
      isJoined.value = await getIsJoinedVillage(village.id);
  } catch {
    isJoined.value = false;
  }
  handleShowFollowTip();
  isOfficialEmpty.value = false;
  showUnLight.value = !villageStore.currentVillage?.isLight;
  setTimeout(() => {
    handleManageFollowTip();
  }, 3000);
  return {
    title: village?.name || '',
    desc: village?.desc || '',
    address: village?.address,
    sizeText: `${FormatUtils.formatSize(village?.storageUsed || 0)}已用/${FormatUtils.formatSize(village?.storageLimit || 0)}空间`,
    level: village?.level.toString() || '',
    levelText: village?.levelText || '',
    rankText: village?.rank.toString() || '',
    light: village?.light || 0,
    memberCount: village?.volunteerCount || 0,
    followerCount: village?.followCount || 0,
    images: village?.images || [],
    longitude: village?.longitude || 0,
    latitude: village?.latitude || 0,
  };
});
const isLight = computed(() => {
  return villageStore.currentVillage?.isLight ?? false;
});
const displayMyName = computed(() => {
  const villageInfoInList = villageStore.myJoinedVillages.find(v => v.id === villageStore.currentVillage?.id);
  return villageInfoInList?.villageNickname || authStore.userInfo?.nickname || authStore.userInfo?.username || '暂无昵称';
});

const rankActiveTag = ref('文化积分');
const listActiveTag = ref('广场');

const villageUserRankListLoader = useSimpleDataLoader(async () => {
  const res = (await LightVillageApi.getVolunteerRankList({ 
    num: 3,
    village_id: villageStore.currentVillage?.id ?? undefined,
  }))
    .map((item, i) => ({
      id: item.id,
      image: item.avatar ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
    }));
  return res
});

const showFollowTipTimeout = new MemoryTimeOut('FollowTip', 1000 * 3600);//1h
const showFollowTip = ref(false);

function handleShowFollowTip() {
  if (!isFollowed.value && showFollowTipTimeout.isTimeout()) {
    showFollowTip.value = true;
  }
}
function handleCloseFollowTip() {
  showFollowTipTimeout.recordTime();
}

const showUnLight = ref(false);
const showManageTipTimeout = new MemoryTimeOut('VillageManageTip', 1000 * 3600 * 20);//30h
const showManageTip = ref(false);

function handleManageFollowTip() {
  if (showManageTipTimeout.isTimeout() && !isOfficialEmpty.value)
    showManageTip.value = true;
}
function handleCloseManageTip(goComp: boolean) {
  showManageTipTimeout.recordTime();
}

watch(rankActiveTag, () => {
  villageUserRankListLoader.reload();
});

const recommendTagName = computed(() => {
  return '亮乡源·' + villageInfoLoader.content.value?.title + '·' + listActiveTag.value;
});

function handleGoJoin() {
  if (isJoined.value)
    return;
  emit('goJoin');
}
function handleGoNew() {
  navTo('/pages/article/common/list', {
    modelId: 18,
    mainBodyColumnId: 356,
    title: '新手上路',
  });
}
function handleGoCollect(collectModuleId?: number, title?: string) {
  if (!collectModuleId) {
    navTo('/pages/dig/details', {
      villageId: villageStore.currentVillage?.id ?? undefined,
      name: villageInfoLoader.content.value?.title,
    });
    return;
  }
  navTo('/pages/dig/forms/list-ordinary', {
    villageId: villageStore.currentVillage?.id ?? undefined,
    collectModuleId: collectModuleId,
    title: title,
  });
}
function handleGoPublish() {
  requireLogin(async () => {
    navTo('/pages/home/chat/dependent/post/publish', {
      tag: recommendTagName.value,
      villageId: villageStore.currentVillage?.id ?? undefined,
    });
  }, '登录后以便发布文章使用更多功能哦！');
}
function handleGoGallery() {
  navTo('/pages/home/village/gallery/index', { 
    villageId: villageStore.currentVillage?.id ?? 0 ,
    maxCount: villageStore.currentVillage?.imageLimit || 3,
  });
}
async function handleGoOfficalManage() {
  assertNotNull(villageStore.currentVillage?.id)
  const isAdmin = await OfficialApi.checkTopicRule(villageStore.currentVillage.id);
  if (!isAdmin) {
    const goUpgrade = await confirm({
      title: '提示',
      content: '您还不是管理员，无法管理贴图哦。您可以联系村社管理员将你添加为管理员，若当前村社暂无管理员，您可以点击“去升级”将您升级为管理员。',
      confirmText: '去升级',
      cancelText: '取消',
    });
    if (goUpgrade) {
      navTo('/pages/home/village/upgrade/my-upgrade-management', {
        villageId: villageStore.currentVillage.id,
      });
    }
    return;
  }
  navTo('/pages/home/village/post/management-list', {
    villageId: villageStore.currentVillage.id,
    topic: recommendTagName.value,
  });
}
async function handleGoDigManage() {
  assertNotNull(villageStore.currentVillage?.id)
  const isAdmin = (authStore.isAdmin || await OfficialApi.checkTopicRule(villageStore.currentVillage.id));
  if (!isAdmin) {
    const goUpgrade = await confirm({
      title: '提示',
      content: '您还不是管理员，您可以联系村社管理员将你添加为管理员，若当前村社暂无管理员，您可以点击“去升级”将您升级为管理员。',
      confirmText: '去升级',
      cancelText: '取消',
    });
    if (goUpgrade) {
      navTo('/pages/home/village/upgrade/my-upgrade-management', {
        villageId: villageStore.currentVillage.id,
      });
    }
    return;
  }
  navTo('/pages/dig/details', {
    name: villageStore.currentVillage.title,
    villageId: villageStore.currentVillage.id,
  });
}

const { currentNoticeContent, noticeListLoader } = useGetNotice(() => villageStore.currentVillage?.id || 0);

const upgradeRef = ref<InstanceType<typeof UpgradeDialog>>();
const villageGalleryRef = ref<InstanceType<typeof VillageGallery>>();
const changeNickRef = ref<InstanceType<typeof ChangeNickDialog>>();

watch(() => villageStore.currentVillage, async () => {
  await waitTimeOut(100);
  await villageInfoLoader.reload();
  await waitTimeOut(100);
  await villageUserRankListLoader.reload();
  await waitTimeOut(100);
  await noticeListLoader.reload();
}, { immediate: true });

defineExpose({
  onPageBack: (name: string, data: Record<string, unknown>) => {
    if (name === 'refreshVillageGrallery') {
      villageGalleryRef.value?.refresh();
    } else if (name === 'showVillageUpgrade') {
      upgradeRef.value?.show();
    } else if (name === 'refreshOfficialAccount') {
      const tag = listActiveTag.value;
      listActiveTag.value = '';
      setTimeout(() => listActiveTag.value = tag, 100);
    }
  },
});
</script>