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

<template>
  <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="Rockwell" color="primary" :text="querys.points" />
        <Width :width="20" />
        <Text :fontSize="40" fontFamily="Rockwell" color="primary" :text="`Lv.${querys.level}`" />
      </FlexRow>
    </FlexRow>
    <Touchable 
      direction="column" 
      touchable 
      radius="radius.md"
      :padding="30"
      align="center"
      backgroundColor="background.primary"
      @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>
    <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>
</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';

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('collect', 1, '随手记')
}

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