xiangyuan-app/src/pages/dig/task/building.vue

<template>
  <FlexCol :padding="30" :gap="10">
    <Image
      src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_building.jpg"
      :radius="20"
      mode="widthFix"
      :width="690"
    />
    <FlexCol :gap="20">
      <TaskList
        icon="icon-task-building-1"
        title="建筑分布"
        desc="村落内传统建筑分布情况"
        :enable="canCollect('distribution')"
        @click="goForm('distribution', 0, undefined, undefined, '建筑分布')"
      />
      <TaskList
        icon="icon-task-building-2"
        title="文物建筑"
        desc="历史、艺术、科学价值"
        :enable="canCollect('building')"
        @click="goForm('building', 1, 'nature', undefined, '文物建筑')"
      />
      <TaskList
        icon="icon-task-building-3"
        title="历史建筑"
        desc="重大历史事件记录"
        :enable="canCollect('building')"
        @click="goForm('building', 2, 'nature', undefined, '历史建筑')"
      />
      <TaskList
        icon="icon-task-building-4"
        title="重要传统建筑"
        desc="重要传统建筑的信息"
        :enable="canCollect('building')"
        @click="goForm('building', 3, 'nature', undefined, '重要传统建筑')"
      />
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from '../composeable/TaskEntryForm';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import TaskList from '../components/TaskList.vue';

const { goForm } = useTaskEntryForm();
const { canCollect } = useCollectStore();
</script>