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>

        <div class="task-list">
          <div v-if="canCollect('village')" class="item">
            <i class="iconfont icon-task-summary"></i>
            <div class="info">
              <div class="title">村落概况</div>
              <div class="desc">探索村落的历史渊源与发生轨迹</div>
            </div>
            <a-button type="primary" @click="navTo('task/summary', nextPageData)">去完成</a-button>
          </div>
          <div v-if="canCollect('cultural')" class="item">
            <i class="iconfont icon-task-history"></i>
            <div class="info">
              <div class="title">历史文化</div>
              <div class="desc">传承百年文化遗产和精神财富</div>
            </div>
            <a-button type="primary" @click="navTo('task/history', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('ich')" class="item">
            <i class="iconfont icon-task-custom-1"></i>
            <div class="info">
              <div class="title">非物质文化遗产项目</div>
              <div class="desc">维护文化多样性</div>
            </div>
            <a-button type="primary" @click="goForm('ich', 0)">
              填写
            </a-button>
          </div>
          <div v-if="canCollect('environment')" class="item">
            <i class="iconfont icon-task-environment"></i>
            <div class="info">
              <div class="title">环境格局</div>
              <div class="desc">感受自然人文环境之美</div>
            </div>
            <a-button type="primary" @click="navTo('task/environment', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('building')" class="item">
            <i class="iconfont icon-task-building"></i>
            <div class="info">
              <div class="title">传统建筑</div>
              <div class="desc">领略古建筑的独特魅力</div>
            </div>
            <a-button type="primary" @click="navTo('task/building', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('folk_culture')" class="item">
            <i class="iconfont icon-task-custom"></i>
            <div class="info">
              <div class="title">民俗文化</div>
              <div class="desc">体验民间传统习俗与节庆</div>
            </div>
            <a-button type="primary" @click="navTo('task/custom', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('food_product')" class="item">
            <i class="iconfont icon-task-food"></i>
            <div class="info">
              <div class="title">美食物产</div>
              <div class="desc">正宗、传统地方特色美食</div>
            </div>
            <a-button type="primary" @click="navTo('task/food', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('food_product')" class="item">
            <i class="iconfont icon-task-mine"></i>
            <div class="info">
              <div class="title">物产资源</div>
              <div class="desc">特定地域的植物、矿物或手工艺</div>
            </div>
            <a-button type="primary" @click="navTo('task/mine', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="canCollect('route')" class="item">
            <i class="iconfont icon-task-trip"></i>
            <div class="info">
              <div class="title">旅游路线</div>
              <div class="desc">体验独特的文化魅力</div>
            </div>
            <a-button type="primary" @click="navTo('task/trip', nextPageData)">
              去完成
            </a-button>
          </div>
          <div v-if="!isAdmin && isEmpty" class="item">
            <i class="iconfont icon-task-summary"></i>
            <div class="info">
              <div class="title">您当前没有可完成的任务</div>
              <div class="desc">请联系管理员认领可采编栏目</div>
            </div>
          </div>
          <!-- <div class="item">
            <i class="iconfont icon-task-other"></i>
            <div class="info">
              <div class="title">其他</div>
              <div class="desc">更多文化传承相关信息</div>
            </div>
            <a-button type="primary" disabled @click="navTo('task/other', nextPageData)">
              待开放
            </a-button>
          </div> -->
        </div>

      </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';

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>