销售直播代码 修改直播间 样式

src/views/live/live/index.vue

@@ -182,7 +182,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="直播达人" prop="talentId">
-          <el-select v-model="form.talentId" placeholder="请选择达人">
+          <el-select filterable v-model="form.talentId" placeholder="请选择达人">
             <el-option
               v-for="item in talentList"
               :key="item.talentId"

src/views/live/liveConsole/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 直播中控台 start -->
-  <el-row type="flex" justify="center" class="live-console" :gutter="10">
+  <el-row type="flex" justify="center" class="live-console" :gutter="10" v-loading="loading">>
     <!-- 聊天 start -->
     <el-col class="live-console-col" :span="6">
       <el-tabs class="live-console-tab-left" v-model="tabRight.activeName" @tab-click="handleClick" :stretch="true">
@@ -63,7 +63,13 @@
     <!-- 直播/视频 start -->
     <el-col class="live-console-col" :span="12">
       <div style="background: #000; border-radius: 5px; overflow: hidden; margin: 10px 5px;">
-        <div style="border-radius: 5px; overflow: hidden;" v-if="liveType == 1">
+        <div style="border-radius: 5px; overflow: hidden;" v-if="!isAudit">
+          <img :src="require('@/assets/images/videoIsAudit.png')" style="width: 100%; height: 45vh;">
+        </div>
+        <div style="border-radius: 5px; overflow: hidden;" v-else-if="status != 2">
+          <img :src="require('@/assets/images/videoNotStart.png')" style="width: 100%; height: 45vh;">
+        </div>
+        <div style="border-radius: 5px; overflow: hidden;" v-else-if="liveType == 1">
           <video
             controls
             ref="livingPlayer"
@@ -86,12 +92,10 @@
             style="display: block; background: #000; height: 45vh;"
           ></video>
         </div>
-<!--        <div style="border-radius: 5px; overflow: hidden;" v-else-if="!isAudit">-->
-<!--          <img :src="require('@/assets/images/videoIsAudit.png')" style="width: 100%; height: 45vh;">-->
-<!--        </div>-->
-<!--        <div style="border-radius: 5px; overflow: hidden;" v-else>-->
-<!--          <img :src="require('@/assets/images/videoNotStart.png')" style="width: 100%; height: 45vh;">-->
-<!--        </div>-->
+        <div style="border-radius: 5px; overflow: hidden;" v-else>
+          <img :src="require('@/assets/images/videoNotStart.png')" style="width: 100%; height: 45vh;">
+        </div>
+
       </div>
       <!-- 底部导航栏 -->
       <div style="display: flex; justify-content: space-around; padding: 15px 0; background: #fff; border-top: 1px solid #f0f0f0;">
@@ -232,6 +236,7 @@ export default {
   components: { LiveLotteryConf,LiveRedConf,LiveGoods },
   data() {
     return {
+      loading: true,
       tabLeft: {
         activeName: "online",
       },
@@ -347,6 +352,7 @@ export default {
     },
     getLive(){
       getLive(this.liveId).then(res => {
+        this.loading = false
         if (res.code == 200) {
           if (res.data.isAudit != 1) {
             this.$message.error("当前直播间未经审核");
@@ -359,7 +365,10 @@ export default {
             return
           }
           if (res.data.liveType == 1) {
-            this.getLiveUrl();
+            this.livingUrl = res.data.flvHlsUrl
+            this.$nextTick(() => {
+              this.initPlayer()
+            })
           } else {
             this.liveType = 2
             this.videoUrl = res.data.videoUrl;
@@ -404,16 +413,6 @@ export default {
       };
       this.myChart.setOption(option);
     },
-    getLiveUrl(){
-      getLivingUrl(this.liveId).then(res=>{
-        if(res.code === 200) {
-          this.livingUrl = res.livingUrl
-          this.initPlayer()
-        } else {
-          this.msgError(res.msg);
-        }
-      })
-    },
 
     handleClickRed(){
       this.$router.push('/live/liveConfig/' + this.liveId)
@@ -444,8 +443,16 @@ export default {
     },
     initPlayer(){
       var isUrl = this.livingUrl === null || this.livingUrl.trim() === ''
+      if (isUrl) {
+        console.error('直播地址为空，无法初始化播放器')
+        return
+      }
       if (Hls.isSupported() && !isUrl) {
         const videoElement = this.$refs.livingPlayer
+        if (!videoElement) {
+          console.error('找不到 video 元素')
+          return
+        }
         this.hls = new Hls();
         this.hls.attachMedia(videoElement);
         this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
@@ -454,15 +461,15 @@ export default {
             videoElement.play();
           });
         });
+        this.hls.on(Hls.Events.ERROR, (event, data) => {
+          console.error('HLS 错误:', data);
+        });
+      } else {
+        console.error('浏览器不支持 HLS')
       }
     },
     handleClick(tab) {
 
-    },
-    getLiveVideo() {
-      getLiveVideoByLiveId(this.liveId).then(res => {
-        this.liveVideo = res.data
-      })
     },
     getList() {
       this.resetParams()