【元宇宙】对接借口

src/api.js

@@ -70,5 +70,17 @@ export default {
     }).then((res) => {
       return res.data.data
     })
-  }
+  },
+  getMetaverseList() {
+    return axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/meta/pageList`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {}
+    }).then((res) => {
+      return res.data.data.records
+    })
+  },
 }

src/views/Metaverse.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="metaverse-root">
     <button
-      v-for="(item, index) in rawDataReactive['Sheet1']"
-      :key="item['序号']"
+      v-for="(item, index) in rawData.value"
+      :key="item.id"
       class="mock-star"
       @click="onClickStar(index)"
     >
-      {{ item['工业体系名称'] }}
+      {{ item.name }}
     </button>
     <article v-if="isShowDesc">
       <button
@@ -35,25 +35,32 @@
 </template>
 
 <script>
-import { reactive, toRefs, ref } from 'vue'
-import rawData from "@/assets/mock/metaverse.json"
+import {
+  reactive,
+  toRefs,
+  ref,
+  onMounted,
+} from 'vue'
 
 export default {
   name: 'MetaverseView',
   setup () {
-    const rawDataReactive = reactive(rawData)
+    const rawData = reactive({ value: null })
+    onMounted(async () => {
+      rawData.value = await api.getMetaverseList()
+    })
 
     const isShowDesc = ref(false)
     const desc = reactive({})
 
     function onClickStar(idx) {
-      desc.name = rawDataReactive['Sheet1'][idx]['工业体系名称']
-      desc.detail = rawDataReactive['Sheet1'][idx]['简介']
+      desc.name = rawData.value[idx].name
+      desc.detail = rawData.value[idx].description
       isShowDesc.value = true
     }
 
     return {
-      rawDataReactive,
+      rawData,
       isShowDesc,
       desc,
       onClickStar,