修改拍照样式

src/components/Adult/preview/components/Freewrite.vue

@@ -28,19 +28,42 @@
     <div class="imgsave">
       <div class="image">
         <div
-          class="character-target-div"
+          :class="['character-target-div', i == imgIndex ? 'select' : '']"
           v-for="(item, i) in imgarr"
           :key="'img' + i"
+          @click="play(i)"
         >
-          <img class="img" :src="item" alt="" @click="play(i)" />
+          <img class="img" :src="item" alt="" />
         </div>
       </div>
-      <div class="xj">
-        <img
-          @click="handleGenerate"
-          src="../../../../assets/NPC/xj.png"
-          alt=""
-        />
+
+      <div style="display: flex">
+        <div
+          class="xj"
+          style="margin-right: 8px"
+          v-if="imgarr.length > 0"
+          @click="removeImage"
+        >
+          <img src="../../../../assets/NPC/word-remove.png" alt="" />
+        </div>
+        <!-- 
+                  @mouseover="saveShow = true"
+          @mouseout="saveShow = false"
+         -->
+        <div :class="['xj', saveShow ? 'click' : '']">
+          <img
+            v-if="!saveShow"
+            @click="handleGenerate"
+            src="../../../../assets/NPC/xj.png"
+            alt=""
+          />
+          <img
+            v-else
+            @click="handleGenerate"
+            src="../../../../assets/NPC/xj-xz.png"
+            alt=""
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -61,6 +84,8 @@ export default {
       isCrop: false,
       history: [],
       imgarr: [],
+      imgIndex: null,
+      saveShow: false,
     };
   },
   computed: {},
@@ -71,7 +96,12 @@ export default {
   },
   //方法集合
   methods: {
+    removeImage() {
+      this.imgarr.splice(this.imgIndex, 1);
+      this.imgIndex = null;
+    },
     play(index) {
+      this.imgIndex = index;
       let c = document.getElementById("esign");
       let cxt = document.getElementById("esign").getContext("2d");
       cxt.clearRect(0, 0, c.width, c.height);
@@ -91,17 +121,23 @@ export default {
       this.$refs.esign.reset();
     },
     handleGenerate() {
+      this.saveShow = true;
       this.$refs.esign
         .generate()
         .then((res) => {
           let Book_img = res.replace("data:image/png;base64,", "");
           this.history.push(this.$refs.esign.history);
           this.imgarr.push("data:image/png;base64," + Book_img);
+          this.saveShow = false;
+
           //console.log(Book_img);
           // this.textOcr(res.replace("data:image/png;base64,", ""));
         })
         .catch((err) => {
+          this.saveShow = false;
+
           console.log(err);
+          this.$message.warning("请先书写在保存");
         });
     },
   },
@@ -137,6 +173,10 @@ export default {
         background-size: 100% 100%;
         border-radius: 4px;
       }
+      .select {
+        background: rgba(222, 68, 68, 0.1);
+        border: 1px solid #f26c6c;
+      }
       .img {
         width: 100%;
         height: 100%;
@@ -148,7 +188,7 @@ export default {
       height: 28px;
       border-radius: 4px;
       cursor: pointer;
-      background: rgba(0, 0, 0, 0.08);
+      background: rgba(0, 0, 0, 0.04);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -157,6 +197,9 @@ export default {
         height: 16px;
       }
     }
+    .click {
+      background: rgba(222, 68, 68, 0.1);
+    }
   }
   .strockred {
     position: relative;