图像识别

src/router/index.js

@@ -426,7 +426,7 @@ const router = new VueRouter({
           component: () => import('@/views/AIImage/list.vue'),
         },
         {
-          path: '/AIImage/AIImageDetail',
+          path: '/AIImageDetail',
           name: 'AIImageDetail',
           component: () => import('@/views/AIImage/AIImageDetail.vue'),
         },

src/views/AIImage/AIImageDetail.vue

@@ -1,14 +1,100 @@
 <template>
-  <div class="AIImageDetail">AIImageDetail</div>
+  <div class="AIImageDetail">
+    <div class="message">
+      <div class="storeTitle">
+        <div class="storeName">{{ data.storeName }}</div>
+        <div class="storeCode">
+          (<span style="color: #0057ba">{{ data.storeCode }}</span
+          >)
+        </div>
+      </div>
+      <div class="item">
+        <div class="label">门店类型：</div>
+        <div class="value">{{ data.storeType }}</div>
+      </div>
+      <div class="item">
+        <div class="label">地址：</div>
+        <div class="value">{{ data.storeAddress }}</div>
+      </div>
+      <div class="item">
+        <div class="label">拜访人：</div>
+        <div class="value">{{ data.visitName }}</div>
+      </div>
+      <div class="item">
+        <div class="label">拜访时间：</div>
+        <div class="value">{{ data.visitTime }}</div>
+      </div>
+      <div class="item">
+        <van-image
+          width="100%"
+          height="160"
+          :src="data.imageUrl"
+          @click="previewImgs(data.imageUrl)" />
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import { ImagePreview } from 'vant';
 export default {
   name: 'AIImageDetail',
   data() {
-    return {};
+    return {
+      data: {},
+      storeId: null,
+    };
+  },
+  mounted() {
+    this.storeId = this.$route.query.storeId;
+    this.getDeytail();
+  },
+  methods: {
+    getDeytail() {
+      this.toastLoading(0, '加载中...', true);
+      this.storeId;
+      setTimeout(() => {
+        this.toastLoading().clear();
+        this.data = {
+          storeName: '和兴建材',
+          storeCode: '123456',
+          storeType: '铂金店',
+          storeAddress:
+            '河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东河南省新乡市长葛县中心小学东20米路东',
+          visitName: '都雷闪',
+          visitTime: '2025-02-0614:41:53',
+          storeId: 882005,
+        };
+      }, 1000);
+    },
+    previewImgs(val) {
+      ImagePreview(val);
+    },
   },
-  mounted() {},
-  methods: {},
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.AIImageDetail {
+  .message {
+    padding: 10px;
+    background: #fff;
+    .storeTitle {
+      display: flex;
+      font-size: 16px;
+      font-weight: 600;
+      padding: 5px 0;
+    }
+    .item {
+      display: flex;
+      font-size: 14px;
+      padding: 3px 0;
+      .label {
+        width: 80px;
+        text-align: right;
+      }
+      .value {
+        flex: 1;
+      }
+    }
+  }
+}
+</style>