|
|
@@ -0,0 +1,361 @@
|
|
|
+<template>
|
|
|
+ <div id="detailtwo">
|
|
|
+ <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="技术成果">
|
|
|
+ <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>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 公共聊天
|
|
|
+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: 'detailtwo',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ chat,
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ // 展会id
|
|
|
+ dock_id: '',
|
|
|
+ // 视频信息
|
|
|
+ videodock: {},
|
|
|
+ // 倒计时查询详情
|
|
|
+ times: 5,
|
|
|
+ //展会详情
|
|
|
+ dockinfo: [],
|
|
|
+ // 聊天
|
|
|
+ chatactive: 0,
|
|
|
+ // 图文直播
|
|
|
+ lunboList: [],
|
|
|
+ // 科技超市
|
|
|
+ marketactive: 0,
|
|
|
+ // 技术成果
|
|
|
+ achieveList: [],
|
|
|
+ // 科技需求
|
|
|
+ techolList: [],
|
|
|
+ // 专家智库
|
|
|
+ expertList: [],
|
|
|
+ expertimage: require('@/assets/222.png'),
|
|
|
+ // 嘉宾，项目
|
|
|
+ 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' }),
|
|
|
+ ...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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //倒计时查询展会视频详情
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 专家详情
|
|
|
+ expertBtn(data) {
|
|
|
+ this.$router.push({ path: '/market/exportDetail', query: { id: data.id } });
|
|
|
+ },
|
|
|
+ // 返回
|
|
|
+ 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;
|
|
|
+ z-index: 999;
|
|
|
+ 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/dock1.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;
|
|
|
+ }
|
|
|
+ // 科技超市
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 主办方
|
|
|
+ .company {
|
|
|
+ margin: 15px 0 0 0;
|
|
|
+ .name {
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+ padding: 0 10px;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-family: cursive;
|
|
|
+ font-size: 30px;
|
|
|
+ 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: 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>
|
