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

<template>
  <FlexCol>
    <FlexCol :margin="[10,0,0,0]">
      <Text textAlign="center" text="一人添果，全村增光；乡源树茂，故土名扬" fontConfig="primaryTitle" fontSize="35rpx"  />
    </FlexCol>
    <VillageTree />
    <FlexCol :padding="30">
      <FlexCol>
        <FlexRow center>
          <Progress 
            :value="60" 
            :backgroundStyle="{
              background: 'linear-gradient(to bottom, #280502, #a44e17)',
            }"
            :progressStyle="{
              borderImageSource: 'url(https://xy.wenlvti.net/app_static/images/village/ImageProgress.png)',
              borderImageSlice: `5 25 5 25 fill`,
              borderImageWidth: `0px 15px`,
              borderImageRepeat: 'stretch',
              borderRadius: '10px',
              overflow: 'hidden',
            }"
            :width="300" 
            :height="30" 

          />
        </FlexRow>
        <Height height="space.lg" />
        <FlexRow center gap="gap.md">
          <Icon icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" :size="50" />
          <Text text="乡源光 30%" fontConfig="contentText" fontSize="30rpx" color="#E79412" />
        </FlexRow>
        <Height height="space.md" />
        <Text textAlign="center" text="再浇水5次 可升级" fontConfig="secondText" />
      </FlexCol>

      <Height height="space.xl" />
      <FlexRow justify="space-around" :padding="[0, 30]">
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconCollect.png" :width="130" mode="widthFix" />
          <Text text="拾果" fontConfig="contentText" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconFertilization.png" :width="130" mode="widthFix" />
          <Text text="施肥" fontConfig="contentText" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" :width="130" mode="widthFix" />
          <Text text="浇水" fontConfig="contentText" textAlign="center" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%" @click="handleGoBless">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="130" mode="widthFix" />
          <Text text="赐福" fontConfig="contentText" textAlign="center" />
        </Touchable>
      </FlexRow>

      <HomeTitle title="最新动态" />
      <SimplePageContentLoader :loader="infoLoader" :emptyView="{ text: '冷冷清清，等你来添光加彩' }">
        <FlexCol gap="gap.lg">
          <FlexRow 
            v-for="item in infoLoader.content.value" :key="item.id"
            backgroundColor="background.tertiary"
            radius="radius.md"
            :padding="[20, 30]"
            gap="gap.lg"
            align="center"
          > 
            <Avatar  
              :url="item.head"
              defaultAvatar="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png"
              :size="80"
              radius="50%"
            />
            <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
            <BackgroundBox
              backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
              :backgroundCutBorder="[10, 10, 10, 10]"
              :backgroundCutBorderSize="[10, 10, 10, 10]"
              :padding="[15, 30]"
            >
              <Text :text="item.levelText" fontConfig="contentText" />
            </BackgroundBox>
          </FlexRow>
        </FlexCol>
      </SimplePageContentLoader>

      <HomeTitle title="乡源赐福" />
      <FlexRow wrap>
        <Touchable 
          v-for="(item, index) in blessingInfoLoader.content.value"
          :key="item.id" 
          center 
          flexBasis="30%"
          gap="gap.sm"
          direction="column"
          :margin="[10,0,0,0]"
          @click="handleBuyBless(item)"
        >
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
            backgroundPosition="center"
            :padding="[10, 20]"
          >
            <Text :text="index + 1" color="white" />
          </BackgroundBox>
          <Image :src="item.image" :width="210" :height="250" radius="radius.md" mode="aspectFill" />
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingBar.png"
            :padding="10"
            :width="210"
          >
            <Text textAlign="center" :text="item.name" fontConfig="contentText" fontFamily="SongtiSCBlack" color="white" />
          </BackgroundBox>
        </Touchable>
      </FlexRow>
    </FlexCol>
  </FlexCol>

  <BlessBuyDialog ref="blessBuyDialogRef" :currentBless="currentBless" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useVillageStore } from '@/store/village';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import VillageTree from '../components/VillageTree.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Image from '@/components/basic/Image.vue';
import Height from '@/components/layout/space/Height.vue';
import Avatar from '@/components/display/Avatar.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Progress from '@/components/display/Progress.vue';
import TreeApi, { type BlessPackageItem, type GrowthLogFeedItem } from '@/api/light/TreeApi';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import BlessBuyDialog from '../dialogs/BlessBuyDialog.vue';

const GROWTH_FEED_COUNT = 6;
const DEFAULT_AVATAR = 'https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png';

const villageStore = useVillageStore();

const blessBuyDialogRef = ref<InstanceType<typeof BlessBuyDialog>>();
const currentBless = ref<BlessPackageItem>();

const infoLoader = useSimpleDataLoader(async () => {
  const villageId = villageStore.currentVillage?.id;
  if (!villageId) return [];

  function mapGrowthFeedToInfoItem(feed: GrowthLogFeedItem) {
    const { item, logType } = feed;
    let content = item.remark?.trim() || '';
    let levelText = '';

    if (logType === 'task') {
      levelText = item.taskName || '任务';
      if (!content) {
        content = item.taskName ? `完成任务「${item.taskName}」` : '任务动态';
      }
    } else if (logType === 'fruit') {
      levelText = item.typeText || item.type || '乡源果';
      if (!content) {
        const delta = item.fruit > 0 ? `+${item.fruit}` : `${item.fruit}`;
        content = `${levelText} ${delta} 乡源果`;
      }
    } else {
      levelText = item.typeText || item.type || '乡源光';
      if (!content) {
        const delta = item.light > 0 ? `+${item.light}` : `${item.light}`;
        content = `${levelText} ${delta} 乡源光`;
      }
    }

    return {
      id: `${logType}-${item.id}`,
      head: DEFAULT_AVATAR,
      content,
      levelText,
    };
  }
  const { list } = await TreeApi.getRandomGrowthLogFeed(GROWTH_FEED_COUNT, { villageId });
  return list.map(mapGrowthFeedToInfoItem);
});

watch(() => villageStore.currentVillage?.id, () => {
  infoLoader.reload();
});
const blessingInfoLoader = useSimpleDataLoader(async () => {
  const res = await TreeApi.getBlessList({ page: 1, pageSize: 18 });
  return res.list;
});

function handleBuyBless(bless: BlessPackageItem) {
  currentBless.value = bless;
  blessBuyDialogRef.value?.show();
}
function handleGoBless() {
  uni.pageScrollTo({
    scrollTop: 1000,
    duration: 300,
  });
}
</script>