mobile-official/src/views/live/parts/videoDetail2.vue

<template>
  <div id="videoDetail2">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="video">
          <el-link :underline="false" class="back" @click="back()"><i class="el-icon-arrow-left"></i></el-link>
          <el-col :span="24" class="videoone" v-if="videodock.file_path != null || ''">
            <video :src="videodock.file_path" autoplay="" controls="controls">
              您的浏览器不支持 video 标签。
            </video>
          </el-col>
          <el-col :span="24" class="videotwo" v-else>
            {{ videodock.videointro }}
          </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="技术成果">
              技术成果
            </van-tab>
            <van-tab title="科技需求">
              科技需求
            </van-tab>
            <van-tab title="专家智库">
              专家智库
            </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">
                  <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">
                  <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 :span="24" class="company">
          <el-col :span="24" class="name">
            <p>主办单位</p>
            <p>{{ dockinfo.sponsor }}</p>
          </el-col>
          <el-col :span="24" class="name">
            <p>承办单位</p>
            <p>{{ dockinfo.organizer }}</p>
          </el-col>
          <el-col :span="24" class="name">
            <p>技术支持</p>
            <p>长春市福瑞科技有限公司</p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </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: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
import moment from 'moment';
export default {
  name: 'videoDetail2',
  props: {},
  components: {
    textVideo,
    chat,
  },
  data: function() {
    return {
      // 展会id
      dock_id: '',
      // 视频信息
      videodock: {},
      // 倒计时查询详情
      times: 5,
      //展会详情
      dockinfo: [],
      // 聊天
      chatactive: 1,
      // 图文直播
      lunboList: [],
      // 科技超市
      marketactive: 0,
      // 嘉宾，项目
      jbxmactive: 0,
      // 嘉宾访谈
      zxzdlist: [],
      // 项目路演
      xmlyList: [],
    };
  },
  async created() {
    if (this.id) {
      this.$set(this, `dock_id`, this.id);
    }
    await this.search();
    await this.seachLunbo();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    ...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 jbftData = await this.danceQuery({ dock_id: this.id, role: 6, limit: 6 });
      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);
      }
    },
    //倒计时查询展会视频详情
    counttime() {
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          this.searchvideo();
          this.times = 5;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    async searchvideo() {
      if (this.dock_id) {
        let res = await this.dockFetch(this.dock_id);
        if (this.$checkRes(res)) {
          // 对接会详情
          this.$set(this, `videodock`, res.data);
        }
      }
    },
    // 返回
    back() {
      this.$router.push({ path: '/live/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {
    times: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val == 5) {
          this.counttime();
        }
      },
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  // 视频
  .video {
    height: 215px;
    overflow: hidden;
    .back {
      position: fixed;
      i {
        font-size: 30px;
        font-weight: bold;
        margin: 5px 0 0px 5px;
        color: #409eff;
      }
    }
    .videoone {
      height: 215px;
      overflow: hidden;
      video {
        width: 100%;
      }
    }
    .videotwo {
      background: url('~@/assets/directBack.png');
      background-size: 100% 100%;
      height: 215px;
      overflow: hidden;
      text-align: center;
      color: #fff;
      font-size: 20px;
      padding: 15% 3%;
    }
  }
  // 聊天
  .chat {
    margin: 15px 0 0 0;
    height: 400px;
    overflow: hidden;
    // border: 1px solid red;
  }
  // 科技超市
  .market {
    margin: 15px 0 0 0;
  }
  // 嘉宾，项目
  .jbxm {
    margin: 15px 0 0 0;
    height: 500px;
    overflow: hidden;
    margin-bottom: 20px;
    .jiabinlist {
      height: 450px;
      margin-top: 10px;
      padding: 0px 16px;
      overflow-y: auto;
      .jiabin {
        height: 70px;
        margin-bottom: 6px;
        .img4 {
          height: 70px;
        }
        .info {
          padding-left: 10px;
          .title {
            font-size: 18px;
            font-weight: bolder;
            text-overflow: ellipsis;
            font-size: 18px;
            font-weight: bolder;
          }
          .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 {
      height: 450px;
      margin-top: 10px;
      padding: 0px 16px;
      overflow-y: auto;
      .xmlylist {
        border-bottom: 1px dashed #ccc;
        height: 70px;
        margin-bottom: 5px;
        .name {
          font-size: 18px;
          font-weight: bold;
        }
        .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;
        }
      }
    }
  }
  // 主办方
  .company {
    .name {
      margin: 0 0 20px 0;
      padding: 0 10px;
      p {
        text-align: center;
        color: #409eff;
      }
      p:nth-child(1) {
        font-family: cursive;
        font-size: 35px;
        font-weight: bolder;
        text-shadow: 5px 5px 2px #ccc;
      }
      p:nth-child(2) {
        padding: 10px 0 0 0;
        font-size: 20px;
      }
    }
  }
}
// 标签样式重定义
/deep/.van-tab {
  font-size: 18px;
}
/deep/.van-tabs--card > .van-tabs__wrap {
  height: 40px;
}
/deep/.van-tabs__nav--card {
  height: 40px;
  // 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>