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">
          聊天
        </el-col>
        <el-col :span="24" class="market">
          科技超市
        </el-col>
        <el-col :span="24" class="jbxm">
          <van-tabs v-model="jbxmactive" type="card" animated>
            <van-tab title="嘉宾访谈">
              嘉宾访谈
            </van-tab>
            <van-tab title="项目路演">
              项目路演
            </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 { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
export default {
  name: 'videoDetail2',
  props: {},
  components: {},
  data: function() {
    return {
      // 展会id
      dock_id: '',
      // 视频信息
      videodock: {},
      // 倒计时查询详情
      times: 5,
      //展会详情
      dockinfo: [],
      // 嘉宾，项目
      jbxmactive: 0,
    };
  },
  async created() {
    if (this.id) {
      this.$set(this, `dock_id`, this.id);
    }
    await this.search();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    // 查询
    async search() {
      //展会详情
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) this.$set(this, `dockinfo`, 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 {
  }
  // 科技超市
  .market {
  }
  // 嘉宾，项目
  .jbxm {
    height: 500px;
    overflow: hidden;
  }
  // 主办方
  .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>