图像识别

package.json

@@ -36,8 +36,8 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.32.13",
+    "sass-loader": "^10.4.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/components/imageAIVerifyErr.vue

@@ -3,7 +3,6 @@
     <el-dialog
       title="图像识别结果"
       :visible.sync="vanPopup"
-      width="80%"
       :append-to-body="true"
       :close-on-click-modal="false"
       @close="close"
@@ -12,7 +11,7 @@
         <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
         <template v-if="shopSignChange == 0">
           <div class="errorImg">
-            <img v-if="url" :src="url" fit="contain" @click="previewsImg(url)" />
+            <img v-if="url" :src="url" @click="previewsImg(url)" />
             <img v-else :src="imageEmpty" width="100%" height="300px" />
           </div>
           <div class="AIVerify">
@@ -30,7 +29,9 @@
               </div>
             </div>
           </template>
-          <div class="uploadBtnAIVerify">
+          <div
+            class="uploadBtnAIVerify"
+            :style="{ 'justify-content': shotsNum >= maxNum ? 'space-between' : center }">
             <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
             <div v-if="shotsNum >= maxNum" class="stillUploadAIVerify" @click="confirmUpload">
               仍要上传
@@ -282,13 +283,13 @@ export default {
   align-items: center;
   background: rgba(0, 0, 0, 0.5) !important;
   .el-dialog__body {
-    padding: 6px !important;
+    padding: 0px !important;
   }
   .el-dialog__header {
     text-align: center;
   }
   .AIVerifyErrdialog {
-    width: 95% !important;
+    width: vw(690);
     margin-top: 1vh !important;
     border-radius: 8px !important;
     font-size: vw(32) !important;
@@ -302,7 +303,7 @@ export default {
   }
   .AIVerifyErrMask {
     width: 100%;
-    padding: 8px;
+    padding: vw(30);
     overflow: hidden;
     /* min-height: 180px; */
     .errorImg {
@@ -312,10 +313,12 @@ export default {
       justify-content: center;
       img {
         width: vw(235);
+        height: vw(303);
+        border-radius: vw(10);
       }
     }
     .AIVerify {
-      font-size: vw(30);
+      font-size: vw(32);
       margin-top: vw(45);
       display: flex;
       justify-content: center;
@@ -368,7 +371,6 @@ export default {
   .uploadBtnAIVerify {
     display: flex;
     align-items: center;
-    justify-content: center;
     padding: vw(8) 0;
     margin-top: vw(30);
     div {
@@ -382,21 +384,23 @@ export default {
       width: vw(298);
       height: vw(68);
       background-blend-mode: normal, normal;
-      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
     }
     .confirmUploadAIVerify {
       background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
         linear-gradient(#aed0f9, #aed0f9);
+      box-shadow: 0px 3px 6px 0px rgba(183, 30, 14, 0.35);
       margin-right: 6px;
     }
     .changeImageAIVerify {
       background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
         linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
       margin-left: 6px;
     }
     .stillUploadAIVerify {
       background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
         linear-gradient(#0356b9, #0356b9);
+      box-shadow: 0px 3px 6px 0px rgba(6, 60, 131, 0.35);
       margin-left: 6px;
     }
   }

src/components/uploadImgVStore.vue

@@ -26,8 +26,8 @@
       <div class="progressClose" @click="progressClose">取消</div>
     </div>
     <imageAIVerifyErr
-      v-if="imageAIVerifyFlag"
-      :imageAIVerifyFlag="imageAIVerifyFlag"
+      v-if="true"
+      :imageAIVerifyFlag="true"
       :imageAIVerifyData="imageAIVerifyData"
       @confirmUpload="confirmUpload"
       @uploadImgFun="uploadImg"
@@ -101,7 +101,36 @@ export default {
       percentage: 0,
       timeFlag: null,
       imageAIVerifyFlag: false,
-      imageAIVerifyData: null, //图匠校验返回的数据
+      imageAIVerifyData: [
+        {
+          npkpiData: {
+            storeCode: null,
+            recognizeType: 1,
+            imageUrl:
+              'http://imagedt-nipponpaint.oss-cn-shenzhen.aliyuncs.com/77/772550faf0627de382d2336fb6c6ccfd.jpg',
+            shopSignInfo: {
+              name: null,
+              npStoreCode: null,
+              phone: '',
+              address: null,
+              contact: '',
+              businessScope: null,
+              mainBrand: null,
+            },
+            shopSignChange: 0,
+            checkInfo: {
+              cheatState: 0,
+              cheatType: null,
+              qualifiedState: 0,
+              unqualifiedReason: '纯色、非店招',
+            },
+            shopSignMatchList: [],
+          },
+          size: '82',
+          businessId: '8959656c-bd29-467a-b72a-6dc32a7e95f7',
+          url: 'https://cdn-svs-test.nipponpaint.com.cn/17401005962152025-02-21%E8%B0%88.jpg?Expires=2055633396&OSSAccessKeyId=LTAI5tG1DTJFA16BHkzHVxjz&Signature=8hlflptRBXlOfGIayDRZHRniKto%3D',
+        },
+      ], //图匠校验返回的数据
       controller: null, //取消请求状态
     };
   },

vue.config.js

@@ -48,16 +48,10 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        //注意：sass-loader将文件引用写入每个组件，适合全局引入变量，但不适合在单页面应用中添加样式，如果是全局样式（非变量），建议在main.js里引入
-        // 路径支持别名的写法，案例就是用了路径别名，如果你没有在项目里设置，也可以自己手动设置即可
-        // sass-loader v10以下老版本 用的是prependData，不是additionalData
-        // 给 sass-loader 传递选项
-        // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
-        // 因为 `scss` 语法在内部也是由 sass-loader 处理的
-        // 但是在配置 `data` 选项的时候
-        // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
-        // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
-        prependData: `@import "@/assets/styles/variable.scss";`,
+        // 使用 Dart Sass 配置
+        implementation: require('sass'),
+        // 更新为 additionalData 语法
+        additionalData: `@use "@/assets/styles/variable.scss" as *;`,
       },
     },
   },