图像识别页面优化

src/components/imageAIVerifyErr.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="imageAIVerifyErr">
     <el-dialog
-      title="图像识别结果"
+      title=""
       :visible.sync="vanPopup"
       width="80%"
       :append-to-body="true"
@@ -10,36 +10,47 @@
       custom-class="AIVerifyErrdialog">
       <div class="AIVerifyErrMask">
         <div class="contentAIVerify">
-          <div class="AIVerify">{{ contentMessage }}</div>
-          <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
+          <!-- <div class="uploadImgAIVerify" @click="uploadImg(false)" v-if="shopSignChange == 0">
             <div class="labelAIVerify"><span class="van-f-red-AIVerify">*</span>重新拍照上传</div>
             <div class="iconAIVerify">
               <van-icon class="photoAIVerify" name="photograph" size="22px" color="#969696" />
             </div>
+          </div> -->
+          <div class="errorImg" v-if="shopSignChange == 0">
+            <img
+              v-if="imageAIVerifyData.url"
+              :src="imageAIVerifyData.url"
+              width="100%"
+              height="200px"
+              @click="previewsImg(imageAIVerifyData.url)" />
+            <img v-else :src="imageEmpty" width="100%" height="200px" />
+          </div>
+          <div class="AIVerify">
+            图像识别结果：<span style="color: red">{{ contentMessage }}</span>
           </div>
         </div>
         <!-- shopSignChange 与历史照片是否一致(是否要更换照片) 0一致(要更换)，1不一致(不要更换) -->
-        <template v-if="shopSignChange == 0 && shotsNum >= 3">
-          <!-- 拜访店招显示 -->
-          <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
-            <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
-          </div>
-          <div class="feedbackMessage">
-            <div class="label">反馈图像识别不正确:</div>
-            <div class="value">
-              <van-field
-                v-model="feedbackMessage"
-                rows="1"
-                autosize
-                type="textarea"
-                placeholder="请输入反馈意见" />
+        <template v-if="shopSignChange == 0">
+          <template v-if="shotsNum >= 3">
+            <!-- 拜访店招显示 -->
+            <div class="tipsAIVerify" v-if="npkpiData.recognizeType == 1">
+              <van-icon name="question-o" />上传后作为本店标准店招，未来每次拜访时校验。
             </div>
-          </div>
+            <div class="feedbackMessage">
+              <div class="label">反馈图像识别不正确:</div>
+              <div class="value">
+                <van-field
+                  v-model="feedbackMessage"
+                  rows="1"
+                  autosize
+                  type="textarea"
+                  placeholder="请输入反馈意见" />
+              </div>
+            </div>
+          </template>
           <div class="uploadBtnAIVerify">
-            <div
-              class="confirmUploadAIVerify"
-              @click="confirmUpload"
-              style="background-color: #0057ba">
+            <div class="confirmUploadAIVerify" @click="uploadImg(false)">重新拍照</div>
+            <div v-if="shotsNum >= 3" class="stillUploadAIVerify" @click="confirmUpload">
               仍要上传
             </div>
           </div>
@@ -86,6 +97,7 @@
                 width="100px"
                 height="100px"
                 @click="previewsImg(imageAIVerifyData.url)" />
+              <img v-else :src="imageEmpty" width="100px" height="100px" />
               <span>本次拜访店招</span>
             </div>
           </div>
@@ -106,12 +118,7 @@
           </div>
           <div class="uploadBtnAIVerify">
             <div class="confirmUploadAIVerify" @click="uploadImg(true)">重新拍照</div>
-            <div
-              class="changeImageAIVerify"
-              @click="confirmUpDataImage()"
-              style="background-color: #0057ba">
-              更新门店照
-            </div>
+            <div class="changeImageAIVerify" @click="confirmUpDataImage()">更新门店照</div>
           </div>
         </template>
       </div>
@@ -320,8 +327,8 @@ export default {
     .AIVerify {
       padding: 6px 0;
       font-size: 14px;
-      color: red;
-      text-align: center;
+      /* color: red; */
+      /* text-align: center; */
       /* border-top: 1px solid #cfcfcf; */
     }
     .uploadImgAIVerify {
@@ -334,6 +341,9 @@ export default {
         font-size: 14px;
       }
     }
+    .errorImg {
+      width: 100%;
+    }
   }
   .tipsAIVerify {
     border-top: 1px solid #cfcfcf;
@@ -349,7 +359,7 @@ export default {
     justify-content: center;
     padding: 8px 0;
     div {
-      width: 40%;
+      /* width: 40%; */
       display: flex;
       justify-content: center;
       align-items: center;
@@ -357,15 +367,21 @@ export default {
       color: #fff;
       border-radius: 10px;
       margin: 0 6px;
+      flex: 1;
     }
     .confirmUploadAIVerify {
-      background-color: red;
+      background-color: #0057ba;
       padding: 8px 0;
     }
     .changeImageAIVerify {
       background-color: #81b337;
       padding: 8px 0;
     }
+    .stillUploadAIVerify {
+      border: 1px solid #0057ba;
+      color: #0057ba;
+      padding: 8px 0;
+    }
   }
   .historyImageAIVerify {
     display: flex;