图像识别

src/assets/styles/variable.scss

@@ -0,0 +1,4 @@
+$vw_base: 690; //设计稿宽度
+@function vw($px) {
+	@return ($px / $vw_base) * 100vw;
+}

src/components/imageAIVerifyErr.vue

@@ -12,22 +12,21 @@
         <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
         <template v-if="shopSignChange == 0">
           <div class="errorImg">
-            <img v-if="url" :src="url" height="200px" @click="previewsImg(url)" />
-            <img v-else :src="imageEmpty" width="100%" height="200px" />
+            <img v-if="url" :src="url" fit="contain" @click="previewsImg(url)" />
+            <img v-else :src="imageEmpty" width="100%" height="300px" />
           </div>
           <div class="AIVerify">
-            <span style="color: red">{{ contentMessage }}</span>
+            <span>{{ contentMessage }}</span>
           </div>
           <template v-if="shotsNum >= maxNum">
             <div class="feedbackMessage">
-              <div class="label">若图像识别不正确，可在下表反馈:</div>
+              <div class="label">若图像识别不正确，可在此反馈:</div>
               <div class="value">
                 <van-field
                   v-model="feedbackMessage"
-                  rows="1"
-                  autosize
+                  rows="3"
                   type="textarea"
-                  placeholder="请输入反馈意见" />
+                  placeholder="请输原因" />
               </div>
             </div>
           </template>
@@ -39,7 +38,7 @@
           </div>
           <template v-if="shotsNum >= maxNum">
             <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
-              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
+              <van-icon name="warning-o" />上传后作为本店标准店招，未来每次拜访时校验。
             </div>
           </template>
         </template>
@@ -85,10 +84,10 @@
             </div>
           </div>
           <div class="AIVerify">
-            <span style="color: red">{{ contentMessage }}</span>
+            <span>{{ contentMessage }}</span>
           </div>
           <div class="feedbackMessage">
-            <div class="label">若图像识别不正确，可在下表反馈:</div>
+            <div class="label">若图像识别不正确，可在此反馈:</div>
             <div class="value">
               <van-field
                 v-model="feedbackMessage"
@@ -103,7 +102,8 @@
             <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
           </div>
           <div class="tipsRemarkAIVerify">
-            <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div>
+            <!-- <div>若历史照片拍摄不规范，请选择<span style="color: #81b337">更新门店照</span></div> -->
+            <div><van-icon name="warning-o" />若历史照片拍摄不规范，请选择更新门店照</div>
             <div>本次拜访店招会作为本店标准店招，未来每次拜访时校验</div>
           </div>
         </template>
@@ -156,7 +156,7 @@ export default {
       createStoreUrl: '', //	建店时店招
       lastVisitUrl: '', //	上次拜访时店招
       storeIDCardUrl: '', //	门店身份证
-      maxNum: 2,
+      maxNum: 1,
     };
   },
   methods: {
@@ -291,6 +291,14 @@ export default {
     width: 95% !important;
     margin-top: 1vh !important;
     border-radius: 8px !important;
+    font-size: vw(32) !important;
+    .el-dialog__headerbtn {
+      width: vw(44);
+      height: vw(44);
+      background-color: #e1e1e1;
+      border-radius: 50%;
+      margin-top: -3px;
+    }
   }
   .AIVerifyErrMask {
     width: 100%;
@@ -302,13 +310,20 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      img {
+        width: vw(235);
+      }
     }
     .AIVerify {
-      padding: 6px 0;
-      font-size: 16px;
-      /* color: red; */
-      text-align: center;
-      /* border-top: 1px solid #cfcfcf; */
+      font-size: vw(30);
+      margin-top: vw(45);
+      display: flex;
+      justify-content: center;
+      span {
+        color: #9e0202;
+        display: block;
+        max-width: 60%;
+      }
     }
   }
   .van-popup {
@@ -346,41 +361,43 @@ export default {
     }
   }
   .tipsAIVerify {
-    /* border-top: 1px solid #cfcfcf; */
-    padding: 5px 0;
-    font-size: 14px;
-    color: red;
-    /* white-space: nowrap; */
+    padding: vw(28) 0;
+    font-size: vw(22);
+    color: #999999;
   }
   .uploadBtnAIVerify {
-    /* border-top: 1px solid #cfcfcf; */
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 8px 0;
+    padding: vw(8) 0;
+    margin-top: vw(30);
     div {
-      /* width: 40%; */
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 14px;
+      font-size: vw(28);
       color: #fff;
       border-radius: 10px;
-      margin: 0 6px;
-      flex: 1;
+      /* margin: 0 6px; */
+      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-color: #0057ba;
-      padding: 8px 0;
+      background-image: linear-gradient(180deg, #ffa1a1 0%, #f6695f 35%, #ed301d 100%),
+        linear-gradient(#aed0f9, #aed0f9);
+      margin-right: 6px;
     }
     .changeImageAIVerify {
-      background-color: #81b337;
-      padding: 8px 0;
+      background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
+        linear-gradient(#0356b9, #0356b9);
+      margin-left: 6px;
     }
     .stillUploadAIVerify {
-      border: 1px solid #0057ba;
-      color: #0057ba;
-      padding: 8px 0;
+      background-image: linear-gradient(180deg, #3b89e6 0%, #1e6acb 35%, #014baf 100%),
+        linear-gradient(#0356b9, #0356b9);
+      margin-left: 6px;
     }
   }
   .historyImageAIVerify {
@@ -400,17 +417,29 @@ export default {
     }
   }
   .tipsRemarkAIVerify {
-    border-top: 1px solid #cfcfcf;
-    padding: 3px 0;
+    padding: vw(28) 0;
     div {
-      font-size: 12px;
-      padding: 3px 0;
+      font-size: vw(22);
+      color: #999999;
+      position: relative;
+      padding-left: 17px;
+    }
+    .van-icon {
+      position: absolute;
+      left: 0;
     }
   }
   .feedbackMessage {
-    border-top: 1px solid #cfcfcf;
-    padding: 5px 0;
-    /* width: 100%; */
+    margin-top: vw(45);
+    .label {
+      font-size: vw(26);
+      line-height: vw(50);
+    }
+    .value {
+      .van-cell {
+        padding: 0;
+      }
+    }
     .van-field__body {
       border: 1px solid #ccc;
       padding-left: 10px;

src/components/uploadImgVStore.vue

@@ -26,8 +26,7 @@
       <div class="progressClose" @click="progressClose">取消</div>
     </div>
     <imageAIVerifyErr
-      v-if="imageAIVerifyFlag"
-      :imageAIVerifyFlag="imageAIVerifyFlag"
+      :imageAIVerifyFlag="true"
       :imageAIVerifyData="imageAIVerifyData"
       @confirmUpload="confirmUpload"
       @uploadImgFun="uploadImg"
@@ -95,7 +94,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, //取消请求状态
     };
   },
@@ -112,10 +140,10 @@ export default {
       ImagePreview(this.imgUrlArr);
     },
     uploadImg() {
-      if (localStorage.getItem('chainName') == null) {
-        this.$toast('请输入名称！');
-        return;
-      }
+      // if (localStorage.getItem('chainName') == null) {
+      //   this.$toast('请输入名称！');
+      //   return;
+      // }
       this.wx.ready(() => {
         this.wx.chooseImage({
           count: this.count,

src/layout/index.vue

@@ -1,48 +1,47 @@
 <template>
   <div class="container bgcolor">
     <keep-alive>
-      <router-view :key="$route.fullPath"/>
+      <router-view :key="$route.fullPath" />
     </keep-alive>
   </div>
 </template>
 <script>
 export default {
   created() {
-    if(this.$route.query.token!=undefined){
-      localStorage.setItem("loginName",this.$route.query.token)
+    if (this.$route.query.token != undefined) {
+      localStorage.setItem('loginName', this.$route.query.token);
     }
-   if(process.env.NODE_ENV!="development"){
-     var ua= window.navigator.userAgent.toLowerCase();
-     if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
+    //  if(process.env.NODE_ENV!="development"){
+    //    var ua= window.navigator.userAgent.toLowerCase();
+    //    if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
 
-     }else{
-       if(localStorage.getItem("loginName")=="lihaoyang.sm"||localStorage.getItem("loginName")=="zhangjunyang.sm"||localStorage.getItem("loginName")=="wukang"){
+    //    }else{
+    //      if(localStorage.getItem("loginName")=="lihaoyang.sm"||localStorage.getItem("loginName")=="zhangjunyang.sm"||localStorage.getItem("loginName")=="wukang"){
 
-       }else{
-         this.$router.push("/err")
-       }
-     }
-   }
+    //      }else{
+    //        this.$router.push("/err")
+    //      }
+    //    }
+    //  }
   },
   watch: {
     $route(to, from) {
-      if(this.$route.query.token!=undefined){
-        localStorage.setItem("loginName",this.$route.query.token)
+      if (this.$route.query.token != undefined) {
+        localStorage.setItem('loginName', this.$route.query.token);
       }
-      if(process.env.NODE_ENV!="development"){
-        var ua= window.navigator.userAgent.toLowerCase();
-        if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
+      // if(process.env.NODE_ENV!="development"){
+      //   var ua= window.navigator.userAgent.toLowerCase();
+      //   if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
 
-        }else{
-          if(localStorage.getItem("loginName")=="lihaoyang.sm"||localStorage.getItem("loginName")=="zhangjunyang.sm"){
+      //   }else{
+      //     if(localStorage.getItem("loginName")=="lihaoyang.sm"||localStorage.getItem("loginName")=="zhangjunyang.sm"){
 
-          }else{
-            this.$router.push("/err")
-          }
-        }
-      }
-    }
-  }
-}
+      //     }else{
+      //       this.$router.push("/err")
+      //     }
+      //   }
+      // }
+    },
+  },
+};
 </script>
-

vue.config.js

@@ -1,15 +1,15 @@
-"use strict";
-const path = require("path");
+'use strict';
+const path = require('path');
 function resolve(dir) {
   return path.join(__dirname, dir);
 }
-const name = process.env.VUE_APP_TITLE || "门店拜访"; // 网页标题
+const name = process.env.VUE_APP_TITLE || '门店拜访'; // 网页标题
 const port = 8888; // 端口
 module.exports = {
   // publicPath: process.env.NODE_ENV === "production" ? "/mobile/" : "/",
-  publicPath: "/mobile/",
-  outputDir: "mobile",
-  assetsDir: "static",
+  publicPath: '/mobile/',
+  outputDir: 'mobile',
+  assetsDir: 'static',
   lintOnSave: false,
   productionSourceMap: false,
   devServer: {
@@ -20,7 +20,7 @@ module.exports = {
         target: process.env.VUE_APP_Target,
         changeOrigin: true,
         pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API + "",
+          ['^' + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API + '',
         },
       },
     },
@@ -30,19 +30,35 @@ module.exports = {
     name: name,
     resolve: {
       alias: {
-        "@": resolve("src"),
+        '@': resolve('src'),
       },
     },
   },
   chainWebpack(config) {
-    config.plugins.delete("preload"); // TODO: need test
-    config.plugins.delete("prefetch"); // TODO: need test
-    config.when(process.env.NODE_ENV !== "development", (config) => {
-      config.optimization.runtimeChunk("single"),
+    config.plugins.delete('preload'); // TODO: need test
+    config.plugins.delete('prefetch'); // TODO: need test
+    config.when(process.env.NODE_ENV !== 'development', (config) => {
+      config.optimization.runtimeChunk('single'),
         {
-          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
-          to: "./", //到根目录下
+          from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
+          to: './', //到根目录下
         };
     });
   },
+  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";`,
+      },
+    },
+  },
 };