xiangyuan-collect-web/src/pages/details.vue

<template>
  <div class="details main-background main-background-type0">
    <div class="nav-placeholder">
    </div>
    <!-- 表单 -->
    <section class="main-section">
      <div class="content">
        <div class="title left-right">
          <a-button :icon="h(ArrowLeftOutlined)" class="mb-3" @click="router.back()">返回</a-button>
          <h2>{{ querys.name }}</h2>
          <span style="width:50px;"></span>
        </div>
               
        <img class="head-img w-100 radius-base" src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_1.jpg"/>
 
        <div class="mt-2 p-2 bg-primary radius-s rounded-3 d-flex flex-row align-center">
          <div class="flex-one d-flex flex-row justify-center align-baseline">
            <div class="label">已认领：</div>
            <div class="size-l ml-2 color-primary">
              {{ querys.name }}
              <span class="size-base">Lv.{{ querys.level }}</span>
            </div>
          </div>
          <div class="flex-one d-flex flex-row justify-center align-baseline">
            <div class="label">文化积分:</div>
            <div class="size-l ml-2 color-primary">{{ querys.points }}</div>
          </div>
        </div>

        <TaskList>
          <Alert
            v-if="!isAdmin && isEmpty" 
            class="mt-3"
            type="warning"
            showIcon
            message="您当前没有可完成的任务, 请联系管理员认领可采编栏目" 
          />

          <TaskItem 
            title="随手记" 
            desc="写随手记，记录下村庄文化发现和思考，自动分类。也可点击下方进入指定的分类采集信息" 
            icon="icon-task-summary" 
            :enabled="canCollect('collect')"
            @click="goForm('collect', 1)"
          />

          <TaskItem 
            title="村落概况" 
            desc="探索村落的历史渊源与发生轨迹" 
            icon="icon-task-summary" 
            :enabled="canCollect('village')"
            @click="navTo('task/summary', nextPageData)"
          />
          <TaskItem 
            title="历史文化" 
            desc="传承百年文化遗产和精神财富" 
            icon="icon-task-history" 
            :enabled="canCollect('cultural')"
            @click="navTo('task/history', nextPageData)"
          />
          <TaskItem 
            title="非物质文化遗产项目" 
            desc="维护文化多样性" 
            icon="icon-task-custom-1" 
            :enabled="canCollect('ich')"
            @click="goForm('ich', 0)"
          />
          <TaskItem 
            title="环境格局" 
            desc="感受自然人文环境之美" 
            icon="icon-task-environment" 
            :enabled="canCollect('environment')"
            @click="navTo('task/environment', nextPageData)"
          />
          <TaskItem 
            title="传统建筑" 
            desc="领略古建筑的独特魅力" 
            icon="icon-task-building" 
            :enabled="canCollect('building')"
            @click="navTo('task/building', nextPageData)"
          />
          <TaskItem 
            title="民俗文化" 
            desc="体验民间传统习俗与节庆" 
            icon="icon-task-custom" 
            :enabled="canCollect('folk_culture')"
            @click="navTo('task/custom', nextPageData)"
          />
          <TaskItem 
            title="美食物产" 
            desc="正宗、传统地方特色美食" 
            icon="icon-task-food" 
            :enabled="canCollect('food_product')"
            @click="navTo('task/food', nextPageData)"
          />
          <TaskItem 
            title="物产资源" 
            desc="特定地域的植物、矿物或手工艺" 
            icon="icon-task-mine" 
            :enabled="canCollect('food_product')"
            @click="navTo('task/mine', nextPageData)"
          />
          <TaskItem 
            title="旅游路线" 
            desc="体验独特的文化魅力" 
            icon="icon-task-trip" 
            :enabled="canCollect('route')"
            @click="navTo('task/trip', nextPageData)"
          />
        </TaskList>

      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@imengyu/imengyu-web-shared';
import { computed, h } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { useCollectStore } from '@/stores/collect';
import { useTaskEntryForm } from './composeable/TaskEntryForm';
import { useAuthStore } from '@/stores/auth';
import TaskList from './components/TaskList.vue';
import TaskItem from './components/TaskItem.vue';
import { Alert } from 'ant-design-vue';

const authStore = useAuthStore();
const router = useRouter();
const { querys } = useLoadQuerys({ 
  id: 0,  
  name: '',
  points: 0,
  level: 0,
  villageVolunteerId: 0,
});
const nextPageData = computed(() => ({
  villageId: querys.value.id,  
  villageVolunteerId: querys.value.villageVolunteerId,
}));
const { isAdmin } = useAuthStore();
const { canCollect, isEmpty } = useCollectStore();
const { goForm } = useTaskEntryForm();

function navTo(path: string, data: any) {
  router.push({
    path,
    query: data,
  })
}
</script>

<style lang="scss" scoped>
@use '../assets/scss/colors.scss' as *;

.head-img {
  height: 160px;
  object-fit: cover;
}

</style>