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

<template>
  <FlexCol :padding="30" :gap="20">
    <Image
      src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg" 
      :radius="20"
      round
      mode="widthFix"
      :width="690" 
    />
    <FlexRow align="center" :gap="10" backgroundColor="white" :padding="20" :radius="20">
      <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="20"
      :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>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/common/composeabe/LoadQuerys';
import { useAuthStore } from '@/store/auth';
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from './forms/composeable/TaskEntryForm';
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';

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

const authStore = useAuthStore();
const { canCollect, isEmpty } = useCollectStore();
const { goForm } = useTaskEntryForm();

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