📦 其他级别非遗显示

src/api/CommonContent.ts

@@ -209,6 +209,9 @@ export class GetContentDetailItem extends DataModel<GetContentDetailItem> {
       flag: { clientSide: 'splitCommaArray', serverSide: 'commaArrayMerge' },
       tags: { clientSide: 'splitCommaArray', serverSide: 'commaArrayMerge' },
       type: { clientSide: 'number', serverSide: 'number' },
+      ichSitesList: { clientSide: 'array', clientSideChildDataModel: GetContentDetailItem },
+      inheritorsList: { clientSide: 'array', clientSideChildDataModel: GetContentDetailItem },
+      otherLevel: { clientSide: 'array', clientSideChildDataModel: GetContentDetailItem },
     }
     this._convertKeyType = (key, direction) => {
       if (key.endsWith('Time') || key.endsWith('At'))
@@ -265,6 +268,13 @@ export class GetContentDetailItem extends DataModel<GetContentDetailItem> {
   value = '';
   intro = '';
   publishAt = new Date();
+  associationMeList = [] as {
+    id: number,
+    title: string,
+    image: string,
+    thumbnail: string,
+  }[];
+  otherLevel : GetContentDetailItem[] = [];
 }
 
 export class CategoryListItem extends DataModel<CategoryListItem> {

src/composeable/SimpleDataLoader.ts

@@ -71,8 +71,8 @@ export async function useSSrSimpleDataLoader<T, P = any>(
   const { data: content, error } = (await useAsyncData(route.fullPath + '/' + name, () => loader(lastParams)))
 
 
-  async function loadData(params?: P) {
-    /* if (!import.meta.client)
+  async function loadData(params?: P, refresh: boolean = false) {
+    if (!import.meta.client)
       return;
     if (params)
       lastParams = params;
@@ -91,8 +91,7 @@ export async function useSSrSimpleDataLoader<T, P = any>(
       loadError.value = '' + e;
       loadStatus.value = 'error';
       console.log(e);
-      
-    } */
+    }
   }
 
   watch(error, (e) => {

src/pages/details/TabDetailView.vue

@@ -163,12 +163,15 @@ function handleShowImage(url: string) {
   imagePreviewSrc.value = url;
 }
 
-const loader = await useSSrSimpleDataLoader('details', async () => {
+const loader = await useSSrSimpleDataLoader('details' + route.query.id, async () => {
   if (!props.load)
     throw new Error("!props.load");
   return (await props.load(Number(route.query.id))).toJSON();
 }, false);
 
+watch(() => route.query.id, () => {
+  loader.loadData(undefined, true);
+})
 
 const currentTabIndex = ref(0);
 const currentTabId = computed(() => contentProps.value.tabs[currentTabIndex.value]?.id || 0);

src/pages/details/intangible.vue

@@ -4,7 +4,7 @@
     :load="loadData"
   >
     <template #extraInfo="{ content }">
-     <IntroBlock
+      <IntroBlock
         :descItems="[
           {
             label: '地址',
@@ -30,8 +30,34 @@
             label: '保护单位',
             value: content.unit 
           },
+          {
+            label: '保护单位',
+            value: content.unit 
+          },
+          {
+            label: '其他级别项目',
+            value: content.otherLevel && content.otherLevel.length > 0 ? `${content.otherLevel.length}个` : ''
+          },
         ]"
       />
+      <!-- 同级别非遗项目显示 -->
+      <div v-if=" content.otherLevel && content.otherLevel.length > 0" class="mt-2 mb-3 d-flex flex-column">
+        <span class="mb-2">其他级别项目</span>
+        <NuxtLink 
+          v-for="(item, k) in content.otherLevel"
+          :key="k"
+          class="simple-link-item"
+          :to="{ path: '/details/intangible', query: { id: item.id } }"
+        >
+          <div class="text">
+            <div class="tag-button active">
+              {{ item.levelText }}
+            </div>
+            <span class="ms-2">{{ item.title }}</span>
+          </div>
+          >
+        </NuxtLink>
+      </div>
     </template>
     <template #extraTab="{ currentTabId, content }">
       <!-- 非遗产品(作品) -->
@@ -152,3 +178,28 @@ async function loadData(id: number) {
 
 </script>
 
+<style lang="scss">
+.simple-link-item {
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  color: #000;
+  padding: 10px 20px;
+  cursor: pointer;
+
+  .text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .tag-button {
+    border-radius: 15px;
+    padding: 6px 10px;
+  }
+}
+
+</style>