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

<template>
  <CommonTopBanner title="共编村史">
    <FlexCol v-if="isJoined" :padding="30" :gap="20">
      <Image
        src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg" 
        mode="widthFix"
        radius="radius.md"
        :width="690" 
      />
      <FlexRow align="center" :gap="10" backgroundColor="white" :padding="20" radius="radius.md">
        <FlexRow flexBasis="50%">
          <Text :fontSize="30" text="已点亮:" />
          <Width :width="20" />
          <Text :fontSize="30" color="primary" :text="decodeURIComponent(querys.name)" />
        </FlexRow>
        <FlexRow flexBasis="50%" align="center">
          <Text :fontSize="30" color="text.content" :text="`文化积分: `" />
          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="querys.points" />
          <Width :width="20" />
          <Text :fontSize="40" fontFamily="SongtiSCBlack" color="primary" :text="`Lv.${querys.level}`" />
        </FlexRow>
      </FlexRow>
      <BackgroundBox
        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
        :backgroundCutBorder="32"
        :backgroundCutBorderSize="36"
        :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>
      </BackgroundBox>
      <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>
    <FlexCol v-else padding="padding.md">
      <FlexCol 
        center 
        gap="gap.lg" 
        border="primary" 
        backgroundColor="background.tertiary"
        radius="radius.md" 
        padding="padding.md"
      > 
        <Image 
          src="https://xy.wenlvti.net/app_static/images/village/PlaceholderVolunteer.png" 
          mode="widthFix" 
          :width="200" 
          :height="200" 
        />
        <Text>您还不是当前村社的志愿者</Text>
        <Text>欢迎注册，加入志愿者队伍，点亮村落</Text>
        <FlexRow gap="gap.md">
          <Button type="primary" @click="goJoin">去点亮村落</Button>
          <Button @click="back()">返回</Button>
        </FlexRow>
      </FlexCol>
    </FlexCol>
  </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 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';

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

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

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

function goJoin() {
  navTo('/pages/home/light/submit', {
    villageId: querys.value.villageId,
  });
}
onMounted(async () => {
  isJoined.value = await getIsJoinedVillage(querys.value.villageId);
});
</script>