xiangyuan-gov-app/src/pages/dig/index.vue

<template>
  <FlexCol>
    <Image 
      mode="aspectFill" 
      src="https://mn.wenlvti.net/app_static/xiangyuan/images/index-banner.jpg"
      width="100%"
    />
    <FlexCol :padding="30">
      <SubTitle title="我的村社" />
      <RequireLogin unLoginMessage="登录后查看我认领的村社">
        <SimplePageContentLoader
          :loader="villageListLoader"
          :showEmpty="villageListLoader.content.value?.length == 0"
          :emptyView="{
            text: '你还没有认领的村社，请联系管理员认领',
            button: false,
          }"
        >
          <FlexCol :gap="10">
            <FlexRow 
              v-for="item in villageListLoader.content.value"
              :key="item.id"
              backgroundColor="white"
              :radius="20"
              :padding="20"
              justify="space-between"
            >
              <FlexRow align="center" :gap="20">
                <Image 
                  mode="aspectFill"
                  :src="item.image" 
                  round
                  :width="80"
                  :height="80"
                />
                <H3>{{ item.villageName }}</H3>
              </FlexRow>
              <ButtonGroup direction="row" align="center" :gap="0">
                <BubbleBox :items="[
                  {
                    icon: 'edit-filling',
                    text: '管理',
                    onClick: () => goManagePage(item),
                  },
                  {
                    icon: 'browse',
                    text: '预览',
                    onClick: () => goPreviewDigPage(item),
                  },
                ]">
                  <Button v-if="authStore.isAdmin" icon="edit-filling" size="small">管理</Button>
                </BubbleBox>
                <BubbleBox :items="[
                  {
                    icon: 'edit-filling',
                    text: '采编',
                    onClick: () => goSubmitDigPage(item),
                  },
                  {
                    icon: 'browse',
                    text: '我的投稿',
                    onClick: () => goMyDigPage(item),
                  },
                ]">
                  <Button type="primary" size="small" icon="edit-filling">采编</Button>
                </BubbleBox>
              </ButtonGroup>
            </FlexRow>
          </FlexCol>
        </SimplePageContentLoader>
      </RequireLogin>

      <Height :height="20" />
      <SubTitle title="我的贡献" />
      <RequireLogin unLoginMessage="登录后贡献，加入排行榜">
        <FlexRow backgroundColor="white" :radius="20" :padding="[40,20]">
          <FlexCol :flex="1" :gap="10" center>
            <Text :fontSize="60" fontFamily="Rockwell" color="primary">{{ volunteerInfoLoader.content.value?.points || 0 }}</Text>
            <Text>文化积分</Text>
          </FlexCol>
          <FlexCol :flex="1" :gap="10" center>
            <Text :fontSize="60" fontFamily="Rockwell" color="primary">Lv.{{ volunteerInfoLoader.content.value?.level || 1 }}</Text>
            <Text>等级</Text>
          </FlexCol>
        </FlexRow>
      </RequireLogin>
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useAuthStore } from '@/store/auth';
import { useCollectStore } from '@/store/collect';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import VillageApi, { VillageListItem } from '@/api/inhert/VillageApi';
import RequireLogin from '@/common/components/RequireLogin.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import Button from '@/components/basic/Button.vue';
import Image from '@/components/basic/Image.vue';
import SubTitle from '@/components/display/title/SubTitle.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import H3 from '@/components/typography/H3.vue';
import Text from '@/components/basic/Text.vue';
import Height from '@/components/layout/space/Height.vue';
import ButtonGroup from '@/components/basic/ButtonGroup.vue';
import BubbleBox from '@/components/feedback/BubbleBox.vue';

const authStore = useAuthStore();
const collectStore = useCollectStore();
const villageListLoader = useSimpleDataLoader(async () => await VillageApi.getClaimedVallageList(), true);
const volunteerInfoLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerInfo(), true);
const rankListLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerRanklist(), true);

function goSubmitDigPage(item: VillageListItem) {
  navTo('./dig/details', { 
    name: item.villageName,
    villageId: item.villageId,
    villageVolunteerId: item.villageVolunteerId,
    points: volunteerInfoLoader.content.value?.points,
    level: volunteerInfoLoader.content.value?.level,
  })
}
function goManagePage(item: VillageListItem) {
  navTo('./dig/admin', { 
    id: item.villageId,
    name: item.villageName,
    villageId: item.villageId,
    villageVolunteerId: item.villageVolunteerId,
    points: volunteerInfoLoader.content.value?.points,
    level: volunteerInfoLoader.content.value?.level,
  })
}
function goMyDigPage(item: VillageListItem) {
  navTo('./dig/forms/submits', { 
    villageName: item.villageName,
    villageId: item.villageId,
    villageVolunteerId: item.villageVolunteerId,
  })
}
function goPreviewDigPage(item: VillageListItem) {
  navTo('./dig/admin/preview', { 
    villageName: item.villageName,
    villageId: item.villageId,
    villageVolunteerId: item.villageVolunteerId,
  })
}
</script>