|
@@ -1,388 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="videoDetail">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="info">
|
|
|
- <el-col :span="24" class="video">
|
|
|
- <video :src="dockInfo.file_path" autoplay="" controls="controls" v-if="dockInfo.file_path != null || ''" class="videoinfo">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
- <div class="videointro" v-else>
|
|
|
- <p>{{ dockInfo.videointro }}</p>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="chat">
|
|
|
- <van-tabs v-model="active">
|
|
|
- <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="tab">
|
|
|
- <van-tabs v-model="infoactive">
|
|
|
- <van-tab title="技术成果">
|
|
|
- <el-col :span="24" class="two">
|
|
|
- <el-col :span="24" class="twoList" v-for="(item, index) in demandList" :key="index">
|
|
|
- <el-col :span="24" class="name">{{ item.name }}</el-col>
|
|
|
- <el-col :span="24" class="field">所属领域:{{ item.field }}</el-col>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- </van-tab>
|
|
|
- <van-tab title="科技需求">
|
|
|
- <el-col :span="24" class="two">
|
|
|
- <el-col :span="24" class="twoList" v-for="(item, index) in twoList" :key="index">
|
|
|
- <el-col :span="24" class="name">{{ item.name }}</el-col>
|
|
|
- <el-col :span="24" class="field">所属领域:{{ item.field }}</el-col>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- </van-tab>
|
|
|
- <van-tab title="专家智库">
|
|
|
- <el-col :span="24" class="two">
|
|
|
- <el-col :span="24" class="twoList" v-for="(item, index) in expertList" :key="index">
|
|
|
- <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-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="4" class="img4">
|
|
|
- <img :src="item.picture" style="width: 100%; height: 100%" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="20" 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>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-import chat from '@/components/parts/chat.vue';
|
|
|
-import textVideo from '@/components/parts/textVideo.vue';
|
|
|
-const { mapActions: dock } = createNamespacedHelpers('dock');
|
|
|
-const { mapActions: exportuser } = createNamespacedHelpers('exportuser');
|
|
|
-const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
|
|
|
-const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
|
|
|
-const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
|
|
|
-import moment from 'moment';
|
|
|
-export default {
|
|
|
- name: 'videoDetail',
|
|
|
- props: {},
|
|
|
- components: {
|
|
|
- chat,
|
|
|
- textVideo,
|
|
|
- },
|
|
|
- data: function() {
|
|
|
- return {
|
|
|
- infoactive: 4,
|
|
|
- // 项目路演
|
|
|
- xmlyList: [],
|
|
|
- //科技需求
|
|
|
- twoList: [],
|
|
|
- //技术成果
|
|
|
- demandList: [],
|
|
|
- //专家智库
|
|
|
- expertList: [],
|
|
|
- expertimage: require('@/assets/222.png'),
|
|
|
- // 展会详情
|
|
|
- dockInfo: {},
|
|
|
- times: 5,
|
|
|
- // 聊天
|
|
|
- active: 0,
|
|
|
- // 图文直播
|
|
|
- lunboList: [],
|
|
|
- // 嘉宾访谈
|
|
|
- zxzdlist: [],
|
|
|
- };
|
|
|
- },
|
|
|
- async created() {
|
|
|
- await this.seachdock();
|
|
|
- await this.seachInfo();
|
|
|
- await this.seachLunbo();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
|
|
|
- ...exportuser({ expertQuery: 'query' }),
|
|
|
- ...marketuser({ operaFetch: 'operaFetch' }),
|
|
|
- ...newsroadshow({ newsroadshowquery: 'query' }),
|
|
|
- ...newsguidance({ danceQuery: 'query' }),
|
|
|
- async seachInfo({ skip = 0, limit = 5, ...info } = {}) {
|
|
|
- let res = await this.dockFetch(this.id);
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- 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, `twoList`, jishuData);
|
|
|
- //技术成果
|
|
|
- var chanpinData = czxmNew.filter(item => item.type === '1');
|
|
|
- if (chanpinData) this.$set(this, `demandList`, chanpinData);
|
|
|
- // 专家智库
|
|
|
- let exportdata = await this.expertQuery({ role: 6 });
|
|
|
- if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
|
|
|
- // 项目路演
|
|
|
- let xmly = await this.newsroadshowquery({ dock_id: this.id });
|
|
|
- if (this.$checkRes(xmly)) this.$set(this, `xmlyList`, xmly.data);
|
|
|
- //嘉宾访谈dock id
|
|
|
- let jbftData = await this.danceQuery({ dock_id: this.id, role: 6, limit: 6 });
|
|
|
- if (this.$checkRes(jbftData)) this.$set(this, `zxzdlist`, jbftData.data);
|
|
|
- }
|
|
|
- },
|
|
|
- // 文字/视频倒计时
|
|
|
- daojishi() {
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.times--;
|
|
|
- if (this.times === 0) {
|
|
|
- this.seachdock();
|
|
|
- this.times = 5;
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- async seachdock() {
|
|
|
- if (this.id) {
|
|
|
- let res = await this.dockFetch(this.id);
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- // 对接会详情
|
|
|
- this.$set(this, `dockInfo`, res.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);
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['user']),
|
|
|
- id() {
|
|
|
- return this.$route.query.id;
|
|
|
- },
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- times: {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- handler(val) {
|
|
|
- if (val && val == 5) {
|
|
|
- this.daojishi();
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.info {
|
|
|
- padding: 10px;
|
|
|
- .video {
|
|
|
- background: #fff;
|
|
|
- padding: 10px;
|
|
|
- margin: 0 0 10px 0;
|
|
|
- height: 250px;
|
|
|
- .videoinfo {
|
|
|
- width: 100%;
|
|
|
- height: 215px;
|
|
|
- background: #000;
|
|
|
- padding: 0px 0 15px 0px;
|
|
|
- }
|
|
|
- .videointro {
|
|
|
- background: url('~@/assets/directBack.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- color: #fff;
|
|
|
- padding: 0 15px;
|
|
|
- height: 230px;
|
|
|
- p:first-child {
|
|
|
- text-align: center;
|
|
|
- font-size: 30px;
|
|
|
- padding: 25% 0;
|
|
|
- }
|
|
|
- p:last-child {
|
|
|
- padding: 0;
|
|
|
- padding-top: 30px;
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- line-height: 35px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 7;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .chat {
|
|
|
- background: #fff;
|
|
|
- padding: 10px;
|
|
|
- .chatList {
|
|
|
- border: 1px solid #ccc;
|
|
|
- min-height: 300px;
|
|
|
- margin: 0 0 10px 0;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 5px 10px;
|
|
|
- }
|
|
|
- .chatInput {
|
|
|
- .el-button {
|
|
|
- width: 100%;
|
|
|
- padding: 13px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tab {
|
|
|
- background-color: #fff;
|
|
|
- .two {
|
|
|
- height: 510px;
|
|
|
- overflow-y: auto;
|
|
|
- .twoList {
|
|
|
- padding: 5px 0px;
|
|
|
- // font-size: 14px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- .jiabinlist {
|
|
|
- .jiabin {
|
|
|
- padding: 5px 0px;
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- .img4 {
|
|
|
- height: 75px;
|
|
|
- }
|
|
|
- .info {
|
|
|
- padding: 0;
|
|
|
- padding-left: 10px;
|
|
|
- .title {
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bolder;
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- .con {
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- margin-top: 5px;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .xmly {
|
|
|
- height: 510px;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 5px 10px;
|
|
|
- .xmlylist {
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- padding: 0px 0 8px 0;
|
|
|
- margin: 0 0 5px 0;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/.video-js {
|
|
|
- height: 190px !important;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-</style>
|