更新概述总览页假数据

src/views/General.vue

@@ -47,7 +47,7 @@
           :class="{
             active: activeCorpId === corpItem.id
           }"
-          @click="activeCorpId = corpItem.id"
+          @click="onClickCorpItem(corpItem)"
         >
           <div class="item-icon" />
           <div class="verticle-line" />
@@ -58,17 +58,17 @@
             {{ corpItem.name }}
           </span>
           <span class="corp-time">
-            {{ corpItem.time }}
+            {{ corpItem.createTime }}
           </span>
         </div>
       </li>
     </ul>
-    <article v-show="isShowDesc">
+    <article v-if="activeCorpInfo && isShowDesc">
       <button
         class="close"
         @click="isShowDesc = false"
       />
-      <h2>了圣诞节分厘卡士大夫就</h2>
+      <h2>{{ activeCorpInfo.name }}</h2>
       <img
         class="splitter"
         src="@/assets/images/splitter.png"
@@ -81,25 +81,10 @@
         alt=""
         draggable="false"
       >
-      <div class="txt">
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
-      </div>
+      <div
+        class="txt"
+        v-html="activeCorpInfo.content || ''"
+      />
     </article>
   </div>
 </template>
@@ -108,10 +93,12 @@
 import {
   computed,
   onMounted,
+  watch,
   reactive,
   ref,
 } from 'vue'
 import deepClone from 'lodash/cloneDeep'
+import corpInfo from '@/assets/mock/corp-info.json'
 
 export default {
   name: 'GeneralView',
@@ -122,80 +109,18 @@ export default {
 
     const filterKeyword = ref('')
 
-    const corpListRaw = reactive([
-      {
-        name: '撒旦解放了',
-        time: '2022-12-03',
-        id: 1,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2022-11-03',
-        id: 2,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2022-07-03',
-        id: 3,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2021-12-03',
-        id: 4,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2021-07-03',
-        id: 5,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2020-12-03',
-        id: 6,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2020-05-03',
-        id: 7,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2019-05-03',
-        id: 8,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2011-07-03',
-        id: 9,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2009-07-03',
-        id: 10,
-      },
-      {
-        name: '撒旦解放了',
-        time: '2000-07-03',
-        id: 11,
-      },
-      {
-        name: '撒旦解放了',
-        time: '1995-11-03',
-        id: 12,
-      },
-    ])
+    const corpListRaw = reactive(corpInfo.data)
     const corpListMap = computed(() => {
       const corpListFiltered = corpListRaw.filter((item) => {
-        console.log(item.name, filterKeyword)
         return !filterKeyword.value || item.name.includes(filterKeyword.value)
       })
       const afterSort = deepClone(corpListFiltered)
       afterSort.sort((a, b) => {
-        return Date.parse(b.time) - Date.parse(a.time)
+        return Date.parse(b.createTime) - Date.parse(a.createTime)
       })
       const ret = new Map()
       afterSort.forEach(element => {
-        const t = element.time[2]
+        const t = element.createTime[2]
         const decade = Number(t) < 3 ? `本世纪${t}0年代` : `上世纪${t}0年代`
         if (!ret.get(decade)) {
           ret.set(decade, [])
@@ -205,13 +130,26 @@ export default {
       return ret
     })
     const activeCorpId = ref(null)
+    const activeCorpInfo = computed(() => {
+      return corpListRaw.find((item) => {
+        return item.id === activeCorpId.value
+      })
+    })
+    function onClickCorpItem(corpItem) {
+      activeCorpId.value = corpItem.id
+      isShowDesc.value = true
+    }
 
     const isShowDesc = ref(true)
 
     return {
       filterKeyword,
+
       corpListMap,
       activeCorpId,
+      activeCorpInfo,
+      onClickCorpItem,
+
       isShowDesc,
     }
   },