ylrz_his_scrm_adminUI/src/views/live/liveConfig/index.vue

<template>
  <div class="live-config-container">
    <el-card class="box-card live-config-header">
      <div class="detail-header">
        <div class="header-left-area">
          <img :src="liveInfo.liveImgUrl" alt="直播封面">
          <!-- 加载遮罩 -->
          <div class="ss-loading-mask" style="display: none;">
            <div class="ss-loading-spinner is-module-loading">
              <div class="ss-loading-dot-flashing"></div>
            </div>
          </div>
        </div>

        <div class="header-middle-area">
          <div class="live-info-title">
            <div class="title-text">{{ liveInfo.liveName }}</div>
          </div>

          <div class="live-info-desc">
            <div class="live-type">{{ liveInfo.liveType == 1 ? '视频直播' : '录播' }}</div>
            <div class="line"></div>
            <div class="live-mode">{{ liveInfo.showType == 1 ? '横屏' : '竖屏' }}</div>
            <div class="big-screen-info">
              <div class="dataLarge">
                <a class="dataLarge__screen ss-popover__reference" aria-describedby="ss-popover-7614" tabindex="0" data-auth-id="818">
                  <span class="dataLarge__screen__icon"></span>
                  <span class="dataLarge__screen__txt">实时大屏</span>
                </a>
              </div>
            </div>
          </div>

          <div class="live-info-state">
            <div class="info-state-text live-time">直播时间：{{ liveInfo.startTime }} 至 {{ liveInfo.finishTime }}</div>
            <div class="line"></div>
            <div class="info-state-text live-state">{{ liveInfo.status == 3 ? '已结束' : liveInfo.status == 2 ? '直播中' : '未开始'}}</div>
            <div class="line"></div>
            <div class="info-state-text live-active-state">{{ liveInfo.isShow == 1 ? '上架' : '下架' }}</div>
            <div class="line"></div>
          </div>
        </div>


<!--        <div class="header-right-area">-->
<!--          <div class="operation-wrapper">-->
<!--            <div class="operation-item">-->
<!--              <div class="operation-item-icon sales-icon"></div>-->
<!--              <div class="operation-item-text">中控台</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">分享</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item" data-auth-id="975">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">恢复直播</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
<!--            <div class="operation-item ss-popover__reference" aria-describedby="ss-popover-6482" tabindex="0">-->
<!--              <span class="operation-item-icon xe-iconfont"></span>-->
<!--              <div class="operation-item-text">更多</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </el-card>
    <el-card class="box-card live-config-left">
      <div class="container">
      <!-- 左边菜单 -->
        <div class="left-menu">
          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item :index="item.index" v-for="item in menuList" >
              <span>{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- 右边信息 -->
        <div class="right-info">
          <!-- 动态组件 -->
          <component :is="currentComponent" ></component>
        </div>
      </div>
<!--      <el-tabs tab-position="left" style="height: 200px;">-->
<!--        <el-tab-pane label="营销内容">营销内容</el-tab-pane>-->
<!--        <el-tab-pane label="观看奖励">观看奖励</el-tab-pane>-->
<!--        <el-tab-pane label="答题红包">答题红包</el-tab-pane>-->
<!--        <el-tab-pane label="答题">答题</el-tab-pane>-->
<!--        <el-tab-pane label="直播商品">直播商品</el-tab-pane>-->
<!--        <el-tab-pane label="观看积分">观看积分</el-tab-pane>-->
<!--        <el-tab-pane label="身份认证">-->
<!--            <idCard :liveId="liveId" />-->
<!--        </el-tab-pane>-->
<!--      </el-tabs>-->
    </el-card>

  </div>
</template>
<script>
import WatchReward from './watchReward.vue';
import Answer from './answer.vue';
import Goods from './goods.vue';
import IdCard from './idCard.vue';
import Task from './task.vue';
import LiveRedConf from './liveRedConf.vue'
import LiveLotteryConf from './liveLotteryConf.vue'
import LiveReplay from './liveReplay.vue'
import Preview from './preview.vue'
import LiveCoupon from './liveCoupon.vue'
import Barrage from './barrage.vue'
import PasswordBag from './passwordBag.vue'
import Vote from './vote.vue'
import { listLive, getLive, delLive, addLive, updateLive, exportLive,selectCompanyTalent,handleShelfOrUn,handleDeleteSelected } from "@/api/live/live";


export default {
  name: 'LiveConfig',
  components: {
    WatchReward,
    LiveRedConf,
    LiveReplay,
    LiveLotteryConf,
    Answer,
    Goods,
    IdCard,
    Task,
    LiveCoupon,
    Barrage,
    Preview,
    PasswordBag,
    Vote
  },
  data() {
    return {
      activeTab: 'watchReward',
      liveId: null,
      liveInfo: {},
      socket:null,
      currentComponent: WatchReward,
      liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
      menuList:[
        { name: '观看奖励', label: '观看奖励', index: 'watchReward'},
        { name: '直播预告', label: '直播预告', index: 'preview'},
        { name: '红包配置', label: '红包配置', index: 'liveRedConf'},
        { name: '口令福袋', label: '口令福袋', index: 'passwordBag'},
        { name: '投票', label: '投票', index: 'vote'},
        { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf'},
        { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon'},
        { name: '直播间试题', label: '直播间试题', index: 'answer'},
        { name: '直播商品', label: '直播商品', index: 'goods'},
        { name: '回放设置', label: '回放设置', index: 'liveReplay'},
        // { name: '观看积分', label: '观看积分', index: 'watchScore'},
        { name: '运营自动化', label: '运营自动化', index: 'task'},
        { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage'},
        { name: '身份认证', label: '身份认证', index: 'idCard'},
      ],

    }
  },
  created() {
    this.liveId = this.$route.params.liveId
    this.getLiving()
    this.connectWebSocket()
  },
  computed: {
    userId() {
      return this.$store.state.user.user.userId
    },
  },
  methods: {
    connectWebSocket() {
      this.$store.dispatch('initLiveWs', {
        liveWsUrl: this.liveWsUrl,
        liveId: this.liveId,
        userId: this.userId
      })
      this.socket = this.$store.state.liveWs[this.liveId]
      this.socket.onmessage = (event) => this.handleWsMessage(event)
    },
    handleSelect(index){
      this.currentComponent = index; // 切换当前显示的组件
    },
    getLiving() {
      getLive(this.liveId).then(res => {
        this.liveInfo = res.data
      })
    },
  }
}
</script>


<style scoped>
.el-tabs__header .is-top {
  display: none !important;
}
.live-config-header{
  padding: 5px;
  border: 1px solid #ebeef5;
}
.detail-header {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.header-left-area {
  flex: 0 0 120px;
  position: relative;
}

.header-left-area img {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.header-middle-area {
  flex: 1;
  padding: 0 20px;
}

.header-right-area {
  flex: 0 0 200px;
}

.live-info-title .title-text {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
}

.live-info-desc {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.live-info-desc .line {
  width: 1px;
  height: 12px;
  background: #c0c4cc;
  margin: 0 10px;
}

.live-info-state {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.live-info-state .line {
  width: 1px;
  height: 12px;
  background: #c0c4cc;
  margin: 0 10px;
}

.live-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.live-state-dot-liveEnd {
  background: #909399;
}

.info-state-text {
  font-size: 14px;
  color: #606266;
}

.operation-wrapper {
  display: flex;
  align-items: center;
}

.operation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.operation-item-text {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
}

.operation-wrapper .line {
  width: 1px;
  height: 20px;
  background: #c0c4cc;
  margin: 0 10px;
}

.container {
  display: flex;
  height: 100%;
}
.left-menu {
  width: 200px;
  border-right: 1px solid #e4e7ed;
  flex-shrink: 0; /* 不收缩 */
}

.right-info {
  flex: 1;
  padding: 20px;
}

.right-tabs {
  height: 100%;
}

</style>