|
|
@@ -49,19 +49,38 @@
|
|
|
<span>直播</span>
|
|
|
</el-col>
|
|
|
<el-col :span="20" class="lefttopright">
|
|
|
- <p class="textOver">{{ dockInfo.videointro }}</p>
|
|
|
+ <p class="textOver">{{ dockInfo.title }}</p>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="leftvideo">
|
|
|
- <el-col :span="24" class="video">
|
|
|
+ <el-col :span="24" class="videoTop">
|
|
|
+ <video :src="videoPath" autoplay="autoplay" controls="controls" v-if="videoData != ''" loop="loop">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <div class="videointro" v-else>
|
|
|
+ <p>{{ dockInfo.title }}</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="videoDown">
|
|
|
+ <el-carousel :interval="4000" type="card" height="50px" :autoplay="false">
|
|
|
+ <el-carousel-item
|
|
|
+ v-for="(item, index) in videoData"
|
|
|
+ :key="index"
|
|
|
+ :class="menuIndex == index ? 'indexClass' : 'videodata'"
|
|
|
+ @click.native="changeMenu(index, item)"
|
|
|
+ >
|
|
|
+ {{ item.videointro }}
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="24" class="video">
|
|
|
<video :src="dockInfo.file_path" autoplay="" controls="controls" v-if="dockInfo.file_path != null || ''">
|
|
|
您的浏览器不支持 video 标签。
|
|
|
</video>
|
|
|
<div class="videointro" v-else>
|
|
|
<p>{{ dockInfo.videointro }}</p>
|
|
|
- <!-- <p>{{ dockInfo.videointroinfo }}</p> -->
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
+ </el-col> -->
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="right">
|
|
|
@@ -503,12 +522,16 @@ export default {
|
|
|
trainoneList: [],
|
|
|
traintwoList: [],
|
|
|
trainthreeList: [],
|
|
|
+ // 视频管理
|
|
|
+ menuIndex: '0',
|
|
|
+ videoData: [],
|
|
|
+ videoPath: '',
|
|
|
}),
|
|
|
+
|
|
|
async created() {
|
|
|
this.$set(this, `dock_id`, this.$route.query.id);
|
|
|
- // 对接会详情
|
|
|
- await this.dockdetail();
|
|
|
await this.searchdock();
|
|
|
+ await this.seachtVideo();
|
|
|
},
|
|
|
methods: {
|
|
|
...mapProduct({ mapProductQuery: 'newquery' }),
|
|
|
@@ -525,7 +548,7 @@ export default {
|
|
|
let res = await this.dockFetch(this.dock_id);
|
|
|
if (this.$checkRes(res)) {
|
|
|
// 对接会详情
|
|
|
- // this.$set(this, `dockInfo`, res.data);
|
|
|
+ this.$set(this, `dockInfo`, res.data);
|
|
|
// 对接会创建人id
|
|
|
this.$set(this, `user_id`, res.data.user_id);
|
|
|
}
|
|
|
@@ -738,28 +761,37 @@ export default {
|
|
|
else if (status == '4') return '交易待确定';
|
|
|
else return '暂无';
|
|
|
},
|
|
|
- async dockdetail() {
|
|
|
+ // 视频管理
|
|
|
+ // 查找视频
|
|
|
+ async seachtVideo() {
|
|
|
let res = await this.dockFetch(this.dock_id);
|
|
|
if (this.$checkRes(res)) {
|
|
|
- // 对接会详情
|
|
|
- this.$set(this, `dockInfo`, res.data);
|
|
|
+ this.$set(this, `videoData`, res.data.videodata);
|
|
|
+ this.changeMenu('0', this.videoData[0]);
|
|
|
}
|
|
|
},
|
|
|
- // 文字/视频倒计时
|
|
|
- daojishi() {
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.times--;
|
|
|
- if (this.times === 0) {
|
|
|
- this.dockdetail();
|
|
|
- // this.reload();
|
|
|
- this.times = 5;
|
|
|
- clearInterval(this.timer);
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.channel();
|
|
|
+ this.channelvideo();
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
@@ -770,16 +802,6 @@ export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
},
|
|
|
- watch: {
|
|
|
- times: {
|
|
|
- handler(val) {
|
|
|
- if (val == 5) {
|
|
|
- this.daojishi();
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
- },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -883,40 +905,92 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.leftvideo {
|
|
|
- .video {
|
|
|
- padding: 5px 10px 10px 10px;
|
|
|
- height: 390px;
|
|
|
+ height: 410px;
|
|
|
+ overflow: hidden;
|
|
|
+ .videoTop {
|
|
|
+ height: 360px;
|
|
|
overflow: hidden;
|
|
|
video {
|
|
|
width: 100%;
|
|
|
height: 360px;
|
|
|
background: #000;
|
|
|
- padding: 0px 0 15px 0px;
|
|
|
}
|
|
|
.videointro {
|
|
|
- background: url('~@/assets/directBack.png');
|
|
|
+ height: 360px;
|
|
|
+ text-align: center;
|
|
|
+ background: url(/img/directBack.70db6823.png);
|
|
|
background-size: 100% 100%;
|
|
|
- color: #fff;
|
|
|
- padding: 0 15px;
|
|
|
- height: 370px;
|
|
|
- p:first-child {
|
|
|
- text-align: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ p {
|
|
|
font-size: 30px;
|
|
|
- padding: 25% 0;
|
|
|
- }
|
|
|
- p:last-child {
|
|
|
- text-align: center;
|
|
|
- font-size: 30px;
|
|
|
- line-height: 35px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 7;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
+ color: #fff;
|
|
|
+ padding: 50px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .videoDown {
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ .videodata {
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #cccccc8f;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .videodata:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ background: #409eff;
|
|
|
+ }
|
|
|
+ .indexClass {
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .video {
|
|
|
+ // padding: 5px 10px 10px 10px;
|
|
|
+ // height: 390px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // video {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 360px;
|
|
|
+ // background: #000;
|
|
|
+ // padding: 0px 0 15px 0px;
|
|
|
+ // }
|
|
|
+ // .videointro {
|
|
|
+ // background: url('~@/assets/directBack.png');
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // color: #fff;
|
|
|
+ // padding: 0 15px;
|
|
|
+ // height: 370px;
|
|
|
+ // p:first-child {
|
|
|
+ // text-align: center;
|
|
|
+ // font-size: 30px;
|
|
|
+ // padding: 25% 0;
|
|
|
+ // }
|
|
|
+ // p:last-child {
|
|
|
+ // text-align: center;
|
|
|
+ // font-size: 30px;
|
|
|
+ // line-height: 35px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ // -webkit-line-clamp: 7;
|
|
|
+ // word-break: break-all;
|
|
|
+ // display: -webkit-box;
|
|
|
+ // -webkit-box-orient: vertical;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
.right {
|
