xiangyuan-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="欢迎您成为志愿者！在这之前您需要登录或者注册完善基础信息后才能投稿和查看我认领的村社哦">
        <Result
          v-if="notVolunteerError"
          status="warning"
          title="您还不是志愿者"
          subTitle="请联系管理员认领，或者绑定已有志愿者账号"
        >
          <FlexCol center>
            <Height :size="20" />
            <Button type="primary" text="绑定已有志愿者账号" @click="navTo('/pages/dig/sharereg/bind')" />
          </FlexCol>
        </Result>
        <SimplePageContentLoader
          v-else
          :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"
              align="center"
              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: 'edit-filling',
                    text: '采编',
                    onClick: () => goSubmitDigPage(item),
                  },
                  {
                    icon: 'browse',
                    text: '我的投稿',
                    onClick: () => goMyDigPage(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 v-if="!authStore.isAdmin" icon="edit-filling" size="small">采编</Button>
                </BubbleBox>
                <Button type="primary" size="small" icon="edit-filling" @click="showOnlinePreviewDialog = true">线上展示</Button>            
              </ButtonGroup>
            </FlexRow>
          </FlexCol>
        </SimplePageContentLoader>
      </RequireLogin>

      <Height :height="20" />
      <SubTitle v-if="authStore.isLogged" title="我的贡献" />
      <FlexRow v-if="authStore.isLogged" 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>
    </FlexCol>

    <Dialog 
      v-model:show="showOnlinePreviewDialog"
      :showConfirm="false"
    >
      <FlexCol :padding="[40,20]" :gap="10" center>
        <Image src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/UnOpenIcon.png" width="300" mode="widthFix" />
        <Text textAlign="center">尊敬的用户，您未开通线上村史的使用权限，开通后即可使用!</Text>
        <Button size="large" type="primary" @click="showOnlinePreviewDialog = false">去开通</Button>
      </FlexCol>
    </Dialog>
  </FlexCol>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { useAuthStore } from '@/store/auth';
import { useCollectStore } from '@/store/collect';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { checkIsNotVolunteerError } from './forms/bind';
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';
import Result from '@/components/feedback/Result.vue';
import Dialog from '@/components/dialog/Dialog.vue';

const showOnlinePreviewDialog = ref(false);
const authStore = useAuthStore();
const collectStore = useCollectStore();

const notVolunteerError = ref(false);
const villageListLoader = useSimpleDataLoader(async () => await VillageApi.getClaimedVallageList(), true);
const volunteerInfoLoader = useSimpleDataLoader(async () => {
  try {
    const res = await VillageApi.getVolunteerInfo()
    notVolunteerError.value = false;
    return res;
  } catch (error) {
    notVolunteerError.value = checkIsNotVolunteerError(error);
    throw error;
  }
}, true);
const rankListLoader = useSimpleDataLoader(async () => await VillageApi.getVolunteerRanklist(), true);

watch(() => authStore.isLogged, (newVal) => {
  if (newVal) {
    villageListLoader.loadData();
    volunteerInfoLoader.loadData();
    rankListLoader.loadData();
  }
})

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/index', { 
    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>