mobile-official/src/views/live/detail(第一版).vue

<template>
  <div id="roomDetail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="video">
          <el-col :span="24" class="top">
            <el-col :span="24" class="downVideo" v-if="videoData != ''">
              <video :src="videoPath" autoplay="autoplay" controls="controls" loop="loop">
                您的浏览器不支持 video 标签。
              </video>
            </el-col>
            <el-col :span="24" class="downTxt" v-else>
              <p>{{ dockInfo.title }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" class="down">
            <el-col :span="12" class="left">
              <el-link :underline="false" class="back" @click="back()">返回列表</el-link>
            </el-col>
            <el-col :span="12" class="right">
              <el-link :underline="false" class="back" @click="showPopup">选择视频</el-link>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="chat">
          <van-tabs v-model="chatactive" type="card" animated>
            <van-tab title="图文直播">
              <textVideo :list="lunboList"></textVideo>
            </van-tab>
            <van-tab title="公共聊天">
              <chat></chat>
            </van-tab>
          </van-tabs>
        </el-col>
        <el-col :span="24" class="market">
          <van-tabs v-model="marketactive" type="card" animated>
            <van-tab title="技术成果">
              <el-col :span="24" class="one">
                <el-col :span="24" class="list" v-for="(item, index) in achieveList" :key="index">
                  <p class="textOver">{{ item.name }}</p>
                  <p class="textOver">领域：{{ item.field }}</p>
                  <p class="textOver">联系人：{{ item.contacts }}</p>
                </el-col>
              </el-col>
            </van-tab>
            <van-tab title="科技需求">
              <el-col :span="24" class="one">
                <el-col :span="24" class="list" v-for="(item, index) in techolList" :key="index">
                  <p class="textOver">{{ item.name }}</p>
                  <p class="textOver">领域：{{ item.field }}</p>
                  <p class="textOver">联系人：{{ item.contacts }}</p>
                </el-col>
              </el-col>
            </van-tab>
            <van-tab title="专家智库">
              <el-col :span="24" class="three">
                <el-col :span="24" class="expertList" v-for="(item, index) in expertList" :key="index" @click.native="expertBtn(item)">
                  <el-col :span="5" class="image">
                    <el-image
                      :src="item.expertimage"
                      style="width:70px;height: 70px;border: 1px solid #f1f1f1;"
                      v-if="item.expertimage != null || undefined"
                    ></el-image>
                    <el-image :src="expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-else></el-image>
                  </el-col>
                  <el-col :span="19" class="info1">
                    <el-col :span="24" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="24" class="txt textOver"> {{ item.zwzc || '暂无' }} </el-col>
                    <el-col :span="24" class="txt textOver"> {{ item.company || '暂无' }} </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </van-tab>
          </van-tabs>
        </el-col>
        <el-col :span="24" class="jbxm">
          <van-tabs v-model="jbxmactive" type="card" animated>
            <van-tab title="嘉宾访谈">
              <el-col :span="24" class="jiabinlist">
                <el-col
                  :span="24"
                  class="jiabin"
                  v-for="(item, index) in zxzdlist"
                  :key="index"
                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '1' } })"
                >
                  <el-col :span="5" class="img4">
                    <img :src="item.picture" style="width: 100%; height: 100%" />
                  </el-col>
                  <el-col :span="19" class="info">
                    <el-col :span="16" class="title">
                      {{ item.title }}
                    </el-col>
                    <el-col :span="8" class="time">
                      {{ item.publish_time }}
                    </el-col>
                    <el-col :span="24" class="con">{{ item.titlejj }}</el-col>
                  </el-col>
                </el-col>
              </el-col>
            </van-tab>
            <van-tab title="项目路演">
              <el-col :span="24" class="xmly">
                <el-col
                  :span="24"
                  class="xmlylist"
                  v-for="(item, index) in xmlyList"
                  :key="index"
                  @click.native="$router.push({ path: '/live/detail2', query: { id: item.id, type: '2' } })"
                >
                  <el-col :span="17" class="name textOver">
                    {{ item.title }}
                  </el-col>
                  <el-col :span="7" class="date">{{ item.publish_time }} </el-col>
                  <el-col :span="24" class="jianjie">
                    {{ item.titlejj }}
                  </el-col>
                </el-col>
              </el-col>
            </van-tab>
          </van-tabs>
        </el-col>
      </el-col>
    </el-row>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title="视频信息"
        v-model="show"
        show-toolbar
        :columns="videoData"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        value-key="videointro"
      />
    </van-popup>
  </div>
</template>

<script>
// 图文直播
import textVideo from '@/components/parts/textVideo.vue';
// 公共聊天
import chat from '@/components/parts/chat.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
import moment from 'moment';
export default {
  name: 'roomDetail',
  props: {},
  components: {
    textVideo,
    chat,
  },
  data: function() {
    return {
      // 展会id
      dock_id: '',
      //展会详情
      dockInfo: {},
      // 聊天
      chatactive: 0,
      // 图文直播
      lunboList: [],
      // 科技超市
      marketactive: 0,
      // 技术成果
      achieveList: [],
      // 科技需求
      techolList: [],
      // 专家智库
      expertList: [],
      expertimage: require('@/assets/222.png'),
      // 嘉宾，项目
      jbxmactive: 0,
      // 嘉宾访谈
      zxzdlist: [],
      // 项目路演
      xmlyList: [],
      // 选择视频
      show: false,
      // 视频管理
      menuIndex: '0',
      videoData: [],
      videoPath: '',
    };
  },
  async created() {
    if (this.id) {
      this.$set(this, `dock_id`, this.id);
    }
    await this.search();
    await this.seachtVideo();
    await this.seachLunbo();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    ...exportuser({ expertQuery: 'query' }),
    ...marketuser({ operaFetch: 'operaFetch' }),
    ...newsguidance({ danceQuery: 'query' }),
    ...newsroadshow({ newsroadshowquery: 'query' }),
    // 查询
    async search() {
      //展会详情
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) this.$set(this, `dockInfo`, res.data);
      let czxm = res.data.apply.map(item => item.goodsList);
      czxm = _.flattenDeep(czxm);
      var czxmNew = czxm.filter(item => item.dockStatus == '1');
      //科技需求
      var jishuData = czxmNew.filter(item => item.type === '0');
      this.$set(this, `techolList`, jishuData);
      //技术成果
      var chanpinData = czxmNew.filter(item => item.type === '1');
      if (chanpinData) this.$set(this, `achieveList`, chanpinData);
      // 专家智库
      let exportdata = await this.expertQuery({ role: 6 });
      if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
      //嘉宾访谈
      let jbftData = await this.danceQuery({ dock_id: this.id });
      if (this.$checkRes(jbftData)) this.$set(this, `zxzdlist`, jbftData.data);
      // 项目路演
      let xmly = await this.newsroadshowquery({ dock_id: this.id });
      if (this.$checkRes(xmly)) this.$set(this, `xmlyList`, xmly.data);
    },
    // 查询图文直播
    async seachLunbo() {
      let res = await this.operaFetch({ dockid: this.id });
      for (const val of res.data) {
        var date = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.date = date;
      }
      if (this.$checkRes(res)) {
        this.$set(this, `lunboList`, res.data);
      }
    },
    // 专家详情
    expertBtn(data) {
      this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
    },
    // 返回
    back() {
      this.$router.push({ path: '/live/index' });
    },
    // 选择视频
    showPopup() {
      this.show = true;
    },
    // 视频管理
    async seachtVideo() {
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) {
        this.$set(this, `videoData`, res.data.videodata);
        this.changeMenu('0', this.videoData[0]);
      }
    },
    channelvideo() {
      this.$stomp({
        [`/exchange/dock_video/${this.dock_id}`]: this.onMessageVideo,
      });
    },
    onMessageVideo(message) {
      let arr = JSON.parse(message.body);
      this.$set(this, `videoData`, arr);
      let num = this.videoData.length - 1;
      let newarr = _.last(arr);
      this.changeMenu(num, newarr);
    },
    changeMenu(index, item) {
      if (item) {
        this.menuIndex = index;
        this.$set(this, `videoPath`, item.file_path);
      }
    },
    // 确定
    onConfirm(value, index) {
      this.changeMenu(index, value);
      this.onCancel();
    },
    // 选择
    onChange(value, index) {
      this.changeMenu(index, value);
    },
    onCancel() {
      this.show = false;
    },
  },
  mounted() {
    this.channelvideo();
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },

  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  // 视频
  .video {
    height: 255px;
    overflow: hidden;
    .top {
      height: 215px;
      overflow: hidden;
      .downVideo {
        position: fixed;
        z-index: 1;
        width: 100%;
        video {
          width: 100%;
          height: 215px;
        }
      }
      .downTxt {
        height: 215px;
        text-align: center;
        background-image: url('~@/assets/directBack.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        p {
          font-size: 25px;
          color: #fff;
          padding: 25px 10px;
        }
      }
    }
    .down {
      height: 30px;
      overflow: hidden;
      background-color: #f1f1f1;
      .left {
        height: 30px;
        line-height: 30px;
        border-right: 1px dashed #ccc;
        text-align: center;
        .el-link {
          color: #333;
          font-weight: bold;
        }
      }
      .right {
        text-align: center;
        height: 30px;
        line-height: 30px;
        .el-link {
          color: #333;
          font-weight: bold;
        }
      }
    }
  }
  // 聊天
  .chat {
    margin: 15px 0 0 0;
    height: 400px;
    overflow: hidden;
  }
  // 科技超市
  .market {
    margin: 15px 0 0 0;
    .one {
      max-height: 550px;
      overflow-y: auto;
      padding: 0 16px;
      min-height: 102px;
      .list {
        border-bottom: 1px dashed #ccc;
        padding: 10px 0;
        p {
          font-size: 16px;
          color: #666;
          padding: 5px 0 0 0;
        }
        p:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
          color: #000;
        }
      }
    }
    .three {
      max-height: 550px;
      overflow-y: auto;
      padding: 0 16px;
      min-height: 92px;
      .expertList {
        padding: 5px 0px;
        border-bottom: 1px dashed #ccc;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .name {
          font-size: 18px;
          font-weight: bolder;
        }
        .field {
          margin-top: 8px;
          font-size: 16px;
          color: #666;
        }
        .image {
          margin-top: 5px;
          .el-image {
            border-radius: 90%;
          }
        }
        .info1 {
          padding: 6px 0px 1px 20px;
        }
      }
    }
  }
  // 嘉宾，项目
  .jbxm {
    margin: 15px 0 0 0;
    // height: 500px;
    overflow: hidden;
    margin-bottom: 20px;
    .jiabinlist {
      max-height: 450px;
      margin-top: 10px;
      padding: 0px 16px;
      overflow-y: auto;
      min-height: 70px;
      .jiabin {
        height: 70px;
        margin-bottom: 6px;
        border-bottom: 1px dashed #ccc;
        .img4 {
          height: 65px;
        }
        .info {
          padding-left: 10px;
          .title {
            font-size: 18px;
            font-weight: bolder;
            text-overflow: ellipsis;
            font-size: 18px;
            font-weight: bolder;
          }
          .title:hover {
            color: #409eff;
            cursor: pointer;
          }
          .time {
            text-align: right;
          }
          .con {
            font-size: 16px;
            color: #666;
            margin-top: 3px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
      .jiabin:last-child {
        margin-bottom: 0px;
      }
    }
    .xmly {
      max-height: 450px;
      margin-top: 10px;
      padding: 0px 16px;
      overflow-y: auto;
      min-height: 70px;
      .xmlylist {
        border-bottom: 1px dashed #ccc;
        height: 70px;
        margin-bottom: 5px;
        .name {
          font-size: 18px;
          font-weight: bold;
        }
        .name:hover {
          color: #409eff;
          cursor: pointer;
        }
        .date {
          font-size: 16px;
          text-align: right;
        }
        .jianjie {
          height: 45px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .xmlylist:last-child {
        margin-bottom: 0px;
      }
    }
  }
}
// 标签样式重定义
/deep/.van-tab {
  font-size: 16px;
}
/deep/.van-tabs--card > .van-tabs__wrap {
  height: 35px;
}
/deep/.van-tabs__nav--card {
  height: 35px;
  // margin: 0;
}
/deep/.van-tabs__nav--card {
  border: 1px solid #409eff;
}
/deep/.van-tabs__nav--card .van-tab {
  color: #666;
  border-right: 1px solid #409eff;
}
/deep/.van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #409eff;
  color: #fff;
}
</style>