xiangyuan-collect-web/src/pages/task/trip.vue

<template>
  <img class="head-img w-100 radius-base" src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_trip.jpg" />
  <TaskList>
    <TaskItem 
      title="旅游导览" 
      desc="" 
      icon="icon-task-trip-3" 
      :enabled="canCollect('travel_guide')"
      @click="goForm('travel_guide', 0)"
    />
    <TaskItem 
      title="游览路线" 
      desc="" 
      icon="icon-task-trip-1" 
      :enabled="canCollect('route')"
      @click="goForm('route', 1)"
    />
    <TaskItem 
      title="活动时间" 
      desc="" 
      icon="icon-task-trip-2" 
      :enabled="canCollect('route')"
      @click="goForm('route', 2)"
    />
    <TaskItem 
      title="路线特色" 
      desc="" 
      icon="icon-task-trip-4" 
      :enabled="canCollect('route')"
      @click="goForm('route', 3)"
    />
  </TaskList>
</template>

<script setup lang="ts">
import { useCollectStore } from '@/stores/collect';
import { useTaskEntryForm } from '../composeable/TaskEntryForm';
import TaskList from '../components/TaskList.vue';
import TaskItem from '../components/TaskItem.vue';

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

<style lang="scss" scoped>
.task-list {
  .item{
    .title{
      margin-bottom: 0;
    }
  }
}
</style>