拜访任务添加操作图片和电话

src/views/deviceWithin/addStoreVisit.vue

@@ -157,6 +157,12 @@
       <van-form ref="tabstoreVal">
         <div v-for="(item, index) in collectionItemList" :key="index">
           <div v-if="item.answerType == 'sz'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -188,6 +194,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'date'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -219,6 +231,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'tel'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -250,6 +268,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'zp'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -267,6 +291,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'wb'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -309,6 +339,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'duox'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.collectionName }}
@@ -323,24 +359,12 @@
                   @click="imgClick(item, 'A', index)" />
               </template>
             </van-cell>
-            <template v-if="item.contactPhone || item.examplePhoto">
-              <div class="tips">
-                <span
-                  class="examples"
-                  v-if="item.examplePhoto"
-                  @click="openExamplesImg(item.examplePhoto)"
-                  >示例</span
-                >
-                <span class="phone">
-                  <van-icon name="phone" size="18px" />
-                  <span
-                    ><a :href="'tel:' + item.contactPhone" class="call">{{
-                      item.contactPhone
-                    }}</a></span
-                  >
-                </span>
-              </div>
-            </template>
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <z-checkbox
               :answerType="item.answerType"
               :checkboxval="item.answerValue"
@@ -353,6 +377,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'sm'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <van-cell>
               <template #title>
                 <p style="margin: 0">
@@ -405,6 +435,12 @@
             <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
           </div>
           <div v-if="item.answerType == 'dx'" class="formLabel z-cell">
+            <!-- 操作说明图片和电话 -->
+            <taskTips
+              v-if="item.contactPhone || item.examplePhoto"
+              :contactPhone="item.contactPhone"
+              :examplePhoto="item.examplePhoto">
+            </taskTips>
             <div>
               <van-cell>
                 <template #title>
@@ -1330,9 +1366,10 @@ import storeCode from "@/components/storeCode";
 import deleteUploadImg from "@/components/deleteUploadImg1";
 import jianjie from "@/assets/jianjie.jpg";
 import { ImagePreview } from "vant";
+import taskTips from "./taskTips";
 export default {
   name: "abnormalVisit",
-  components: { zRadio, zCheckbox, uploadImg, storeCode, deleteUploadImg },
+  components: { zRadio, zCheckbox, uploadImg, storeCode, deleteUploadImg, taskTips },
   data() {
     return {
       value: "",
@@ -2749,12 +2786,6 @@ export default {
     onClickLeft() {
       this.$router.go(-1);
     },
-    // 点击查看示例图片
-    openExamplesImg(examplePhoto) {
-      if (!examplePhoto) return;
-      ImagePreview([examplePhoto]);
-      // this.examplePhotoImg = examplePhoto;
-    },
   },
 };
 </script>
@@ -2791,30 +2822,6 @@ export default {
   margin: 0 16px;
   border-bottom: 1px solid #f1f1f1;
   position: relative;
-  .tips {
-    position: absolute;
-    right: 0;
-    top: 16px;
-    height: 25px;
-    line-height: 25px;
-    .examples {
-      margin: 0 10px;
-      background: rgb(255, 151, 106);
-      color: #fff;
-      padding: 3px 5px;
-      border-radius: 2px 2px 8px 2px;
-    }
-    .phone {
-      i {
-        vertical-align: -2px;
-      }
-      a {
-        color: #0057ba;
-        // font-weight: bold;
-        text-decoration: underline;
-      }
-    }
-  }
 }
 
 .formLabel .van-cell {

src/views/deviceWithin/taskTips.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tips">
+    <span class="examples" v-if="examplePhoto" @click="openExamplesImg(examplePhoto)">示例</span>
+    <span class="phone">
+      <van-icon name="phone" size="18px" />
+      <span
+        ><a :href="'tel:' + contactPhone" class="call">{{ contactPhone }}</a></span
+      >
+    </span>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from "vant";
+export default {
+  props: {
+    contactPhone: {
+      type: [String, Number],
+      default: "",
+    },
+    examplePhoto: {
+      type: [String, Number],
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // 点击查看示例图片
+    openExamplesImg(examplePhoto) {
+      if (!examplePhoto) return;
+      ImagePreview([examplePhoto]);
+      // this.examplePhotoImg = examplePhoto;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tips {
+  position: absolute;
+  right: 0;
+  top: 11px;
+  height: 25px;
+  line-height: 25px;
+  .examples {
+    margin: 0 10px;
+    background: rgb(255, 151, 106);
+    color: #fff;
+    padding: 3px 5px;
+    border-radius: 2px 2px 8px 2px;
+  }
+  .phone {
+    i {
+      vertical-align: -2px;
+    }
+    a {
+      color: #0057ba;
+      text-decoration: underline;
+    }
+  }
+}
+</style>