设备列表对接接口

.env

@@ -0,0 +1 @@
+VUE_APP_API_URL_PREFIX=https://haidebao.4dage.com

src/api.js

@@ -0,0 +1,12 @@
+import axios from "axios"
+
+export default {
+  async getDeviceList() {
+    const res = await axios({
+      method: 'get',
+      url: `${process.env.VUE_APP_API_URL_PREFIX}/api/show/product/getTree`
+    })
+    console.assert(res.data.code === 0, 'getDeviceList error')
+    return res.data.data
+  },
+}

src/views/DeviceList.vue

@@ -28,151 +28,46 @@
 
     <h1>Equipment</h1>
     <div class="content-wrapper">
-      <div class="level2-wrapper">
-        <h2>Sheetfed</h2>
+      <div
+        v-for="(itemLevel2) in deviceList"
+        :key="itemLevel2.id"
+        class="level2-wrapper"
+      >
+        <h2>{{ itemLevel2.name }}</h2>
 
-        <div class="level3-wrapper">
+        <div
+          v-for="(itemLevel3) in itemLevel2.children"
+          :key="itemLevel3.id"
+          class="level3-wrapper"
+        >
           <h3 class="size">
-            30 x 50 Format
+            {{ itemLevel3.name }}
           </h3>
           <ul>
             <li
-              @click="onClickItem"
+              v-for="(itemLevel4, index) in itemLevel3.children"
+              :key="itemLevel4.id"
             >
               <img
                 class="icon"
                 src="@/assets/images/device-item-icon.png"
                 alt=""
                 draggable="false"
+                @click="onClickDeviceIcon"
               >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
+              <a
+                v-if="itemLevel4.fileName && itemLevel4.filePath"
+                :href="itemLevel4.filePath"
+                :download="itemLevel4.fileName"
               >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
+                {{ itemLevel4.fileName }}
+              </a>
+              <router-link
+                v-else
+                :to="{name: 'WillContactTip'}"
               >
-              <span>Speedmaster SX 52</span>
-            </li>
-          </ul>
-        </div>
-
-        <div class="level3-wrapper">
-          <h3 class="size">
-            30 x 50 Format
-          </h3>
-          <ul>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="level2-wrapper">
-        <h2>Sheetfed</h2>
-
-        <div class="level3-wrapper">
-          <h3 class="size">
-            30 x 50 Format
-          </h3>
-          <ul>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-          </ul>
-        </div>
-
-        <div class="level3-wrapper">
-          <h3 class="size">
-            30 x 50 Format
-          </h3>
-          <ul>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
-            </li>
-            <li>
-              <img
-                class="icon"
-                src="@/assets/images/device-item-icon.png"
-                alt=""
-                draggable="false"
-              >
-              <span>Speedmaster SX 52</span>
+                {{ itemLevel4.name }}
+              </router-link>
             </li>
           </ul>
         </div>
@@ -183,12 +78,22 @@
 
 <script>
 export default {
+  data() {
+    return {
+      deviceList: [],
+    }
+  },
+  mounted() {
+    globalApi.getDeviceList().then((res) => {
+      this.deviceList = res
+    })
+  },
   methods: {
     onClickClose() {
       this.$router.go(-1)
     },
-    onClickItem() {
-      this.$router.push({ name: 'WillContactTip' })
+    onClickDeviceIcon(e) {
+      e.target.nextSibling.click()
     }
   }
 }

src/views/WillContactTip.vue

@@ -23,6 +23,7 @@
       src="@/assets/images/check.png"
       alt=""
       draggable="false"
+      @click="onClickClose"
     >
   </div>
 </template>

vue.config.js

@@ -1,3 +1,19 @@
+const webpack = require('webpack')
+
 module.exports = {
-  publicPath: "./"
-};
+  publicPath: "./",
+  lintOnSave: false,
+  productionSourceMap: false,
+  configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+        globalMapState: ['vuex', 'mapState'],
+        globalMapMutations: ['vuex', 'mapMutations'],
+        globalMapGetters: ['vuex', 'mapGetters'],
+        globalConfig: ['/src/config.js', 'default'],
+        globalApi: ['/src/api.js', 'default'],
+        globalUtils: ['/src/utils/index.js', 'default'],
+      }),
+    ],
+  },
+}