xiangyuan-app/src/pages/home/dig.vue

<template>
  <FlexCol>
    <FlexCol :padding="30">
      <HomeLargeTitle title="挖掘" />
      <Image 
        mode="aspectFill" 
        src="https://xy.wenlvti.net/app_static/images/dig/IntrodBanner.png"
        width="100%"
        :height="300"
        radius="radius.md"
        :innerStyle="{
          border: '1px solid #fff',
        }"
      />
      <HomeTitle title="我的村社" />
      <RequireLogin unLoginMessage="欢迎您成为志愿者！在这之前您需要登录或者注册完善基础信息后才能投稿和查看我认领的村社哦">
        <FlexCol 
          v-if="notVolunteerError"
          gap="gap.lg" 
          padding="padding.md"
          center
        >
          <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
          <CommonDivider />
          <Text 
            textAlign="center"
            text="认领属于你的村庄，参与建设家乡 或者先随便看看，了解更多乡村故事" 
            fontConfig="contentSpeicalText" 
          />
          <FlexRow justify="space-around" gap="gap.md">
            <FrameButton primary text="去认领村庄" @click="navTo('/pages/home/light/submit-map')" width="220rpx" />
          </FlexRow>
        </FlexCol>
        <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"
              radius="radius.md"
              :padding="20"
              align="center"
              justify="space-between"
              :innerStyle="{
                border: '1px solid #fff',
              }"
            >
              <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" />
      <HomeTitle v-if="authStore.isLogged" title="我的贡献" />
      <FlexRow v-if="authStore.isLogged" backgroundColor="white" radius="radius.md" :padding="[40,20]">
        <FlexCol :flex="1" :gap="10" center>
          <Text fontConfig="lightGoldTitle">{{ volunteerInfoLoader.content.value?.points || 0 }}</Text>
          <Touchable direction="row" align="center" :gap="10" @click="navTo('/pages/dig/about/point')">
            <Text>文化积分</Text>
            <Icon icon="help-filling" color="primary" :size="40" />
          </Touchable>
        </FlexCol>
        <FlexCol :flex="1" :gap="10" center>
          <Text fontConfig="lightGoldTitle">Lv.{{ volunteerInfoLoader.content.value?.level || 1 }}</Text>
          <Text>等级</Text>
        </FlexCol>
      </FlexRow>
    </FlexCol>

    <CommonDialog
      ref="onlinePreviewDialogRef"
      v-model:show="showOnlinePreviewDialog"
    >
      <FlexCol :padding="[40,20]" :gap="10" center>
        <Image src="https://mn.wenlvti.net/app_static/xiangyuan/images/home/UnOpenIcon.png" width="300" mode="widthFix" />
        <Height :size="20" />
        <Text textAlign="center">尊敬的用户，您未开通线上村史的使用权限，开通后即可使用!</Text>
        <Height :size="20" />
        <Button size="large" type="primary" @click="showOnlinePreviewDialog = false; navTo('/pages/home/about/contract')">
          联系客服开通功能
        </Button>
      </FlexCol>
    </CommonDialog>
  </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 '@/components/composeabe/loader/SimpleDataLoader';
import VillageApi, { VillageListItem } from '@/api/inhert/VillageApi';
import RequireLogin from '@/common/components/RequireLogin.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import Button from '@/components/basic/Button.vue';
import Image from '@/components/basic/Image.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';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import type { RequestApiError } from '@imengyu/imengyu-utils';
import FrameButton from '@/common/components/FrameButton.vue';
import CommonDivider from '@/common/components/CommonDivider.vue';
import CommonDialog from '@/common/components/CommonDialog.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Icon from '@/components/basic/Icon.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);

function checkIsNotVolunteerError(e: unknown) {
  return (e as RequestApiError).errorMessage.includes('请认领')
}

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

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>