rt_fhyx_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>
          <div class="live-info-state">
            <!-- <div class="info-state-text live-state">
            {{ liveInfo.status == 3 ? '已结束' : liveInfo.status == 2 ? '直播中' : '未开始'}}
            </div> -->
            <el-tag type="warning" v-if="liveInfo.status == 1">待直播</el-tag>
            <el-tag style="color:#3491FA;background-color:#E8F7FF;border-color: #E8F7FF;" v-if="liveInfo.status == 2">直播中</el-tag>
            <el-tag type="info" v-if="liveInfo.status == 3">已结束</el-tag>
            <el-tag style="color:#9B6DDA;background-color:#F5E8FF;border-color: #F5E8FF;" v-if="liveInfo.status == 4">直播回放中</el-tag>
            <div class="info-state-text live-active-state" style="margin-left: 5px;">
            <el-tag v-if="liveInfo.isShow == 1">上架</el-tag>
            <el-tag type="info" v-if="liveInfo.isShow == 2">下架</el-tag>
            </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="watchReward" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item :index="item.index" v-for="item in menuList" >
              <i :class="item.icon"></i>
              <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 { 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
  },
  data() {
    return {
      activeTab: 'watchReward',
      liveId: null,
      liveInfo: {},
      currentComponent: WatchReward,
      menuList:[
        { name: '观看奖励', label: '观看奖励', index: 'watchReward',icon:'el-icon-coin'},
        { name: '直播预告', label: '直播预告', index: 'preview',icon:'el-icon-video-play'},
        { name: '红包配置', label: '红包配置', index: 'liveRedConf',icon:'el-icon-money'},
        { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf',icon:'el-icon-present'},
        { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon',icon:'el-icon-discount'},
        // { name: '答题', label: '答题', index: 'answer'},
        { name: '直播商品', label: '直播商品', index: 'goods',icon:'el-icon-shopping-bag-2'},
        { name: '回放设置', label: '回放设置', index: 'liveReplay',icon:'el-icon-set-up'},
        // { name: '观看积分', label: '观看积分', index: 'watchScore'},
        { name: '运营自动化', label: '运营自动化', index: 'task',icon:'el-icon-coordinate'},
        { name: '弹幕脚本', label: '弹幕脚本', index: 'barrage',icon:'el-icon-chat-dot-round'},
        { name: '身份认证', label: '身份认证', index: 'idCard',icon:'el-icon-postcard'},
      ],

    }
  },
  created() {
    this.liveId = this.$route.params.liveId
    this.getLiving()
  },
  methods: {
    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 100px;
  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: 18px;
  font-weight: 500;
  color: #303133;
}

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

.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: #999999;
}

.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; /* 不收缩 */
}
.el-menu-item{
  margin-right: 20px;
}
.el-menu-item.is-active,.el-menu-item:hover{
  background-color: rgba(19,194,194,0.1);
  border-radius: 8px 8px 8px 8px;
}
.right-info {
  flex: 1;
  padding: 20px;
}

.right-tabs {
  height: 100%;
}

</style>