删除背景图

src/views/yqrange/create-live.vue

@@ -114,41 +114,7 @@
                 <span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length }}/300</span>
                 <div style="color:#666666;font-size:12px;">文字版</div>
               </el-col>
-          <!--<el-col :span="12" class="basic-item-icon" style="margin-top:35px;">-->
-              <!--<el-upload-->
-                <!--v-model="formData.imageContent"-->
-                <!--class="bg-uploader"-->
-                <!--action="#"-->
-                <!--:show-file-list="false"-->
-                <!--:before-upload="beforeUploadPic1"-->
-              <!--&gt;-->
-                <!--<img-->
-                  <!--v-if="formData.imageContent"-->
-                  <!--:src="formData.imageContent"-->
-                  <!--@mouseover.stop="imgMouseOver1=true"-->
-                  <!--class="bg-img"-->
-                <!--/>-->
-                <!--<img-->
-                  <!--v-if="!formData.imageContent"-->
-                  <!--class="bg-img"-->
-                  <!--src="../../assets/image/small.png"-->
-                <!--/>-->
-                <!--<div-->
-                  <!--class="img-delete"-->
-                  <!--v-show="imgMouseOver1"-->
-                  <!--@click.stop="deleteImg(1)"-->
-                  <!--@mouseout.stop="imgMouseOver1=false"-->
-                <!--&gt;-->
-                  <!--<i class="el-icon-delete"></i>-->
-                <!--</div>-->
-                <!--<div class="limit-text">-->
-                  <!--<p>限制大小: 2mb</p>-->
-                  <!--<p>尺寸：750*（不限高度）</p>-->
-                  <!--<p>支持jpeg, png格式</p>-->
-                <!--</div>-->
-              <!--</el-upload>-->
-            <!--<div style="color:#666666;font-size:12px;">图片版</div>-->
-          <!--</el-col>-->
+
           </el-form-item>
           <div class="basic-item-icon">
             <el-form-item label="图片">
@@ -180,18 +146,7 @@
                   <p>尺寸:750*（高度<3000）</p>
                   <p>支持jpeg, png格式</p>
                 </div>
-                  <!--<img-->
-                    <!--@click="addIntroImage(index)"-->
-                    <!--class="edit-img"-->
-                    <!--src="../../assets/image/plus.png"-->
-                    <!--v-if="isPreview!=1"-->
-                  <!--/>-->
-                  <!--<img-->
-                    <!--@click="delIntroImage(index)"-->
-                    <!--v-if="index >= 1 && isPreview!=1"-->
-                    <!--class="edit-img"-->
-                    <!--src="../../assets/image/trash.png"-->
-                  <!--/>-->
+
                   <el-button size="danger" @click="delIntroImage(index, item)">删除</el-button>
 
                 </div>
@@ -246,6 +201,14 @@
                 <el-col :span="24">
                   <el-button size="small" type="primary" @click="setBackground()" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">选择背景图</el-button>
                 </el-col>
+                <el-col :span="16" v-if="formData.backgroundImageId">
+                  <div style="margin-left:0px;margin-top: 10px;min-width: 380px;display: flex;align-items: center">
+                      <img :src="backgroundImageUrl"
+                        style="float: left;width: 150px;height: 100px;"/>
+                    <el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)">删除</el-button>
+
+                  </div>
+                </el-col>
               </el-row>
             </el-form-item>
 
@@ -484,8 +447,9 @@
       <el-form ref="setForm" :model="setForm">
         <!--<input type="text" id="copyInput" class="hidden-input" />-->
         <el-radio-group v-model="backgroundImageIdTemp">
-          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index < 5" @change="changeImage">
+          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index < 5" @change="changeImage(item)">
           <el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
+            <el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
           </div>
           <!--<div class="radio-background">-->
             <!--<el-radio :label="6"></el-radio>-->
@@ -505,9 +469,9 @@
           <!--</div>-->
         </el-radio-group>
         <el-radio-group v-model="backgroundImageIdTemp" v-if="backgroundImages != null && backgroundImages.length > 5">
-          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index > 4">
+          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index > 4" @change="changeImage(item)">
             <el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
-
+            <el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
           </div>
         </el-radio-group>
 
@@ -617,7 +581,9 @@
           // backgroundImages: [],// 直播背景图
         },
         backgroundImageIdTemp: '0',
+        backgroundImageUrlTemp: "",
         backgroundImages: [],
+        backgroundImageUrl: "",
         introTextNum: 0,
         rtcIntroducesText:[],
         rtcIntroducesImages: [],
@@ -731,7 +697,7 @@
       // if(rtcId){
       //   this.curmbThird = "编辑直播";
       // }
-      // this.initImages();
+      this.initImages();
       if(this.rtcId){
         this.curmbThird = "编辑直播";
         this.initRtcInfo(this.rtcId);
@@ -1317,6 +1283,10 @@
         this.rtcIntroducesImages.splice(index, 1);
       },
 
+      // 删除背景图
+      delBackgroundImage(){
+        this.formData.backgroundImageId = "";
+      },
 
       //删除图片
       deleteImg(type) {
@@ -1453,6 +1423,20 @@
         this.formData.streamType = String(this.formData.streamType);
         this.changeStreamType();
 
+
+
+
+        // 背景图
+        if(this.formData.backgroundImageId != null){
+          let selectedImages = this.backgroundImages.filter(function (item) {
+            return item.backgroundImageId == vm.formData.backgroundImageId;
+          });
+
+          if(selectedImages != null){
+            this.backgroundImageUrl = selectedImages[0].imageUrl;
+          }
+        }
+
         this.formData.scope = String(this.formData.scope);
         this.formData.countRule = String(this.formData.countRule);
         this.formData.antiScreenCap = String(this.formData.antiScreenCap);
@@ -1649,18 +1633,20 @@
       setBackground(){
         this.dialogVisible = true;
         this.backgroundImageIdTemp = String(this.formData.backgroundImageId);
-        this.initImages();
+        // this.initImages();
       },
       // 提交设置背景图
       submitBackground(){
         this.dialogVisible = false;
         this.formData.backgroundImageId = this.backgroundImageIdTemp;
+        this.backgroundImageUrl = this.backgroundImageUrlTemp;
       },
       handleClose(){
         this.dialogVisible = false;
       },
 
-      changeImage(){
+      changeImage(item){
+        this.backgroundImageUrlTemp = item.imageUrl;
         console.log('选中值',this.backgroundImageIdTemp);
       },