编辑器-基础 提取组件：图片，可取消。

src/components/selectedImageInEditor.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="img-wrapper">
+    <img :src="imgSrc || defaultImgSrc" alt="">
+    <div v-if="imgSrc" class="cancel-btn-background" @click="$emit('cancel')">
+      <i class="iconfont icon-pop-ups_shut-down"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imgSrc: {
+      type: String,
+      default: '',
+    },
+    defaultImgSrc: {
+      type: String,
+      require: true,
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.img-wrapper {
+  flex: 0 0 auto;
+  position: relative;
+  width: 136px;
+  height: 136px;
+  margin-right: 16px;
+  background: #1A1B1D;
+  border-radius: 4px;
+  border: 1px solid #404040;
+  overflow: hidden;
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  > .cancel-btn-background {
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    top: -28px;
+    right: -28px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      color: #FA5555;
+    }
+    > i {
+      font-size: 12px;
+      transform: scale(0.8);
+      position: absolute;
+      left: 9px;
+      bottom: 9px;
+    }
+  }
+}
+</style>

src/views/base/customLogoSettings.vue

@@ -7,12 +7,11 @@
       <Switcher :value="info.isLogo" @change="onSwitcherChange"></Switcher>
     </div>
     <div class="bottom" :class="{disabled: !info.isLogo}">
-      <div class="img-wrapper">
-        <img class="logo-img" :src="info.logo || require('@/assets/images/default/img_logo_default.png')" alt="" />
-        <div v-if="info.logoChange" class="cancel-btn-background" @click="onClickCancelCustomLogo">
-          <i class="iconfont icon-pop-ups_shut-down"></i>
-        </div>
-      </div>
+        <SelectedImage
+          :imgSrc="info.logo"
+          :defaultImgSrc="require('@/assets/images/default/img_logo_default.png')"
+          @cancel="onClickCancelCustomLogo"
+        ></SelectedImage>
       <div class="bottom-right">
         <img 
           class="select-pic-btn"
@@ -48,11 +47,13 @@ import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher";
 import Table2 from "@/components/tableSelect2.vue";
 import { getUserInfo } from "@/api";
+import SelectedImage from "@/components/selectedImageInEditor.vue";
 
 export default {
   components: {
     Switcher,
     Table2,
+    SelectedImage,
   },
   data() {
     return {

src/views/base/openingTipSettings.vue

@@ -12,20 +12,28 @@
     <div class="image-selection">
       <div class="title">PC端</div>
       <div class="bottom">
-        <img :src="info.pcIcon || require('@/assets/images/default/img_tipspc_default.png')" alt="">
+        <SelectedImage
+          :imgSrc="info.pcIcon"
+          :defaultImgSrc="require('@/assets/images/default/img_tipspc_default.png')"
+          @cancel="onCancelPcTip"
+        ></SelectedImage>
         <div class="bottom-right">
           <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'pc'">选择图片</button>
-          <div class="ui-remark">建议300*300px，600kb以内，支持jpg/png格式</div>
+          <div class="ui-remark">建议300*300px，600kb以内，<br/>支持jpg/png格式</div>
         </div>
       </div>
     </div>
     <div class="image-selection">
       <div class="title">移动端</div>
       <div class="bottom">
-        <img :src="info.appIcon || require('@/assets/images/default/img_tipsmb_default.png')" alt="">
+        <SelectedImage
+          :imgSrc="info.appIcon"
+          :defaultImgSrc="require('@/assets/images/default/img_tipsmb_default.png')"
+          @cancel="onCancelAppTip"
+        ></SelectedImage>
         <div class="bottom-right">
           <button class="ui-button submit" @click="isShowSelectionWindow = true, selectingFor = 'mobile'">选择图片</button>
-          <div class="ui-remark">建议300*300px，600kb以内，支持jpg/png格式</div>
+          <div class="ui-remark">建议300*300px，600kb以内，<br/>支持jpg/png格式</div>
         </div>
       </div>
     </div>
@@ -56,13 +64,15 @@ import Table2 from "@/components/tableSelect2.vue";
 import { mapGetters } from "vuex";
 import Switcher from "@/components/shared/Switcher";
 import RangeItem from "@/components/rangeItem/index.vue";
+import SelectedImage from "@/components/selectedImageInEditor.vue";
 
 export default {
   components: {
     TooltipInEditor,
     Table2,
     Switcher,
-    RangeItem
+    RangeItem,
+    SelectedImage,
   },
   data() {
     return {
@@ -93,6 +103,12 @@ export default {
       }
       this.isShowSelectionWindow = false
     },
+    onCancelPcTip() {
+      this.info.pcIcon = ''
+    },
+    onCancelAppTip() {
+      this.info.appIcon = ''
+    },
     onSwitcherChange(data){
       this.info.isRemind = data
     },
@@ -132,15 +148,6 @@ export default {
     .bottom {
       display: flex;
       align-items: flex-start;
-      img {
-        width: 136px;
-        height: 136px;
-        background: #1A1B1D;
-        border-radius: 4px;
-        border: 1px solid #404040;
-        margin-right: 16px;
-        object-fit: cover;
-      }
       .bottom-right {
         display: inline-block;
         button {