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

<template>
  <CommonTopBanner title="共编村史">
    <FlexCol v-if="isJoined || authStore.isAdmin || isManagement" :padding="30" :gap="20">
      <Image
        :src="bannerLoader.content.value?.[0].image"
        mode="widthFix"
        radius="radius.md"
        :width="690" 
      />
      <FlexRow justify="space-between" align="center" :gap="10" backgroundColor="white" :padding="20" radius="radius.md">
        <FlexRow>
          <Text :fontSize="30" :text="isJoined ? '已认领:' : '未认领:'" />
          <Width :width="20" />
          <Text :fontSize="30" color="primary" :text="decodeURIComponent(querys.name)" />
        </FlexRow>
        <FlexRow align="center">
          <Text :fontSize="30" color="text.content" :text="`文化积分: `" />
          <Width :width="20" />
          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="volunteerInfo?.points" />
          <Width :width="20" />
          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="`Lv.${volunteerInfo?.level}`" />
          <Width :width="20" />
          <Touchable direction="row" align="center" :gap="10" @click="navTo('/pages/dig/about/point')">
            <Icon icon="help-filling" color="primary" :size="40" />
          </Touchable>
        </FlexRow>
      </FlexRow>
      <BoxMid :padding="24">
        <Touchable 
          direction="column" 
          touchable 
          flex="1"
          padding="padding.md"
          align="center"
          @click="goCollect"
        >
          <Icon icon="edit-filling" color="primary" :size="100" />
          <Height :height="20" />
          <Text :fontSize="34">写随手记</Text>
          <Text :fontSize="22" color="gray">写随手记，记录下村社文化发现和思考，自动分类</Text>
          <Text :fontSize="22" color="gray">也可点击下方进入指定的分类采集信息</Text>
        </Touchable>
      </BoxMid>
      <FlexCol :gap="20">
        <Alert
          v-if="!authStore.isAdmin && isEmpty"
          type="warning"
          message="您当前没有可完成的任务"
          description="请联系管理员认领可采编栏目"
        />
        <CollectModuleList
          :villageId="querys.villageId"
          :villageVolunteerId="querys.villageVolunteerId"
          :taskName="''"
          :taskTitle="''"
          :taskPid="0"
        />
      </FlexCol>
      <XBarSpace />
    </FlexCol>
    <NotVolTip v-else @goJoin="goJoin">
    </NotVolTip>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useAuthStore } from '@/store/auth';
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from './forms/composeable/TaskEntryForm';
import { useUserTools } from '@/common/composeabe/UserTools';
import { onMounted, ref } from 'vue';
import { back, navTo } from '@/components/utils/PageAction';
import BannerApi from '@/api/system/Banner';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Height from '@/components/layout/space/Height.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CollectModuleList from './components/CollectModuleList.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import Width from '@/components/layout/space/Width.vue';
import Alert from '@/components/feedback/Alert.vue';
import Result from '@/components/feedback/Result.vue';
import Button from '@/components/basic/Button.vue';
import { CollectableModulesIdMap } from './forms/forms';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import NotVolTip from '../home/components/NotVolTip.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';

const { querys } = useLoadQuerys({ 
  name: '',
  villageId: 0,  
  villageVolunteerId: 0,
});

const authStore = useAuthStore();
const { canCollect, isEmpty } = useCollectStore();
const { getIsJoinedVillage, getIsManagement, getIsVolunteer, volunteerInfo } = useUserTools();
const { goForm } = useTaskEntryForm();
const isJoined = ref(false);
const isManagement = ref(false);

const bannerLoader = useSimpleDataLoader(async () => {
  return (await BannerApi.getBannerList({
    keywords: '亮乡源大众版挖掘内页',
  })).map(p => ({
    image: p.image,
    url: p.url,
  }));
});

function goCollect() {
  /* if (!canCollect('collect')) {
    uni.showToast({
      title: '您当前没有可采编随手记的权限',
      icon: 'none',
      duration: 2000
    });
    return;
  } */
  goForm(CollectableModulesIdMap['collect'], 1, '随手记')
}

function goJoin() {
  navTo('/pages/home/light/submit-volunteer', {
    villageId: querys.value.villageId,
  });
}
async function loadVolunteerInfo() {
  await getIsVolunteer();
  isManagement.value = await getIsManagement(querys.value.villageId);
  isJoined.value = await getIsJoinedVillage(querys.value.villageId);
}

onMounted(async () => {
  await loadVolunteerInfo();
});


defineExpose({
  onPageBack(name: string, param: any) {
    if (name === 'registerDone')
      loadVolunteerInfo();
  }
})
</script>