背景图显示问题

src/views/yqrange/create-live.vue

@@ -484,7 +484,7 @@
       <el-form ref="setForm" :model="setForm">
         <!--<input type="text" id="copyInput" class="hidden-input" />-->
         <el-radio-group v-model="formData.backgroundImageIdTemp">
-          <div class="radio-background" v-for="(item, index) in formData.backgroundImages" :key="index" v-if="index < 5">
+          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index < 5" @change="changeImage">
           <el-radio :label="item.backgroundImageId"></el-radio>
           <img class="background-img" :src="item.imageUrl" />
           </div>
@@ -505,34 +505,12 @@
           <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
           <!--</div>-->
         </el-radio-group>
-        <el-radio-group v-model="formData.backgroundImageIdTemp" v-if="formData.backgroundImages && formData.backgroundImages.length > 5">
-          <div class="radio-background" v-for="(item, index) in formData.backgroundImages" :key="index" v-if="index > 4">
+        <el-radio-group v-model="formData.backgroundImageIdTemp" v-if="backgroundImages != null && backgroundImages.length > 5">
+          <div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index > 4">
             <el-radio :label="item.backgroundImageId"></el-radio>
             <img class="background-img" :src="item.imageUrl" />
           </div>
         </el-radio-group>
-        <!--<el-radio-group>-->
-          <!--<div class="radio-background">-->
-            <!--<el-radio :label="3"></el-radio>-->
-            <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
-          <!--</div>-->
-          <!--<div class="radio-background">-->
-            <!--<el-radio :label="6"></el-radio>-->
-            <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
-          <!--</div>-->
-          <!--<div class="radio-background">-->
-            <!--<el-radio :label="9"></el-radio>-->
-            <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
-          <!--</div>-->
-          <!--<div class="radio-background">-->
-            <!--<el-radio :label="12"></el-radio>-->
-            <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
-          <!--</div>-->
-          <!--<div class="radio-background">-->
-            <!--<el-radio :label="15"></el-radio>-->
-            <!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
-          <!--</div>-->
-        <!--</el-radio-group>-->
 
       </el-form>
 
@@ -607,7 +585,6 @@
           preImage: '', // 直播预告图url
           textContent: '', // 直播简介文字版
           imageContent: '',// 直播简介图片版
-          backgroundImages: [],// 直播背景图
           // imgUrl2: '',
           // imgUrl2More: {},
           // imgUrl3: '',
@@ -636,9 +613,10 @@
 
           },
           antiScreenCap: "0",
-          backgroundImageId: null,
-          backgroundImageIdTemp: null
+          backgroundImageId: "0",
+          backgroundImageIdTemp: "0"
         },
+        backgroundImages: [],// 直播背景图
         introTextNum: 0,
         rtcIntroducesText:[],
         rtcIntroducesImages: [],
@@ -745,13 +723,14 @@
       this.formData.circleId = this.circleId;
 
       this.jumPathThird = '/live-manage?id=' + this.circleId;
+
     },
     mounted() {
       this.rtcId = this.$route.query.rtcId;
       // if(rtcId){
       //   this.curmbThird = "编辑直播";
       // }
-      this.initImages();
+      // this.initImages();
       if(this.rtcId){
         this.curmbThird = "编辑直播";
         this.initRtcInfo(this.rtcId);
@@ -772,8 +751,14 @@
         getImages({
         }).then((res) => {
           if(res.code == "000000") {
-            this.formData.backgroundImages = res.data;
 
+            let images = res.data;
+            this.backgroundImages = images;
+            if(this.backgroundImages != null){
+              for(let i = 0; i < this.backgroundImages.length; i++){
+                this.backgroundImages[i].backgroundImageId = String(this.backgroundImages[i].backgroundImageId);
+              }
+            }
 
           }
         }).catch((error) => {
@@ -1466,7 +1451,7 @@
 
         this.formData.scope = String(this.formData.scope);
         this.formData.antiScreenCap = String(this.formData.antiScreenCap);
-        this.formData.backgroundImageIdTemp = String(this.formData.backgroundImageId);
+        this.formData.backgroundImageIdTemp = String(this.formData.backgroundImageId == null ? "0":this.formData.backgroundImageId);
         if(this.formData.scope == "2"){
           this.isCollectShow = true;
         }
@@ -1659,6 +1644,7 @@
       setBackground(){
         this.dialogVisible = true;
 
+        this.initImages();
       },
       // 提交设置背景图
       submitBackground(){
@@ -1669,6 +1655,11 @@
         this.dialogVisible = false;
       },
 
+      changeImage(){
+        console.log(this.formData.backgroundImageIdTemp);
+      },
+
+
       delFile(){
         if(this.uploadProgress1 > 0 && this.uploadProgress1 < 100){
           openLoading(this);