|
|
@@ -3,14 +3,23 @@
|
|
|
<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="dockinfo.file_path != 'video'">
|
|
|
- <video :src="dockinfo.file_path" autoplay="" controls="controls">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="24" class="downVideo" v-if="videoData != ''">
|
|
|
+ <video :src="videoPath" autoplay="autoplay" controls="controls" loop="loop">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="downTxt" v-else>
|
|
|
+ <p>{{ dockInfo.title }}</p>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="videotwo" v-else>
|
|
|
- {{ dockinfo.videointro }}
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-col :span="12" class="left">
|
|
|
+ <el-link :underline="false" class="back" @click="back()">返回列表</el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="right">
|
|
|
+ <el-link :underline="false" class="back" @click="showPopup">选择视频</el-link>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="chat">
|
|
|
@@ -68,6 +77,18 @@
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <van-popup v-model="show" position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="视频信息"
|
|
|
+ v-model="show"
|
|
|
+ show-toolbar
|
|
|
+ :columns="videoData"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="onCancel"
|
|
|
+ @change="onChange"
|
|
|
+ value-key="videointro"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -92,7 +113,7 @@ export default {
|
|
|
// 展会id
|
|
|
dock_id: '',
|
|
|
//展会详情
|
|
|
- dockinfo: [],
|
|
|
+ dockInfo: [],
|
|
|
// 聊天
|
|
|
chatactive: 0,
|
|
|
// 图文直播
|
|
|
@@ -112,6 +133,11 @@ export default {
|
|
|
zxzdlist: [],
|
|
|
// 项目路演
|
|
|
xmlyList: [],
|
|
|
+ // 视频管理
|
|
|
+ show: false,
|
|
|
+ menuIndex: '0',
|
|
|
+ videoData: [],
|
|
|
+ videoPath: '',
|
|
|
};
|
|
|
},
|
|
|
async created() {
|
|
|
@@ -119,6 +145,7 @@ export default {
|
|
|
this.$set(this, `dock_id`, this.id);
|
|
|
}
|
|
|
await this.search();
|
|
|
+ await this.seachtVideo();
|
|
|
await this.seachLunbo();
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -134,7 +161,7 @@ export default {
|
|
|
async search() {
|
|
|
//展会详情
|
|
|
let res = await this.dockFetch(this.dock_id);
|
|
|
- if (this.$checkRes(res)) this.$set(this, `dockinfo`, res.data);
|
|
|
+ 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');
|
|
|
@@ -181,6 +208,51 @@ export default {
|
|
|
back() {
|
|
|
this.$router.push({ path: '/live/index' });
|
|
|
},
|
|
|
+ // 选择视频
|
|
|
+ showPopup() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ // 视频管理
|
|
|
+ async seachtVideo() {
|
|
|
+ let res = await this.dockFetch(this.dock_id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `videoData`, res.data.videodata);
|
|
|
+ this.changeMenu('0', this.videoData[0]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 确定
|
|
|
+ onConfirm(value, index) {
|
|
|
+ this.changeMenu(index, value);
|
|
|
+ this.onCancel();
|
|
|
+ },
|
|
|
+ // 选择
|
|
|
+ onChange(value, index) {
|
|
|
+ this.changeMenu(index, value);
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.channelvideo();
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
@@ -199,35 +271,84 @@ export default {
|
|
|
.main {
|
|
|
// 视频
|
|
|
.video {
|
|
|
- height: 215px;
|
|
|
+ height: 255px;
|
|
|
overflow: hidden;
|
|
|
- .back {
|
|
|
- position: fixed;
|
|
|
- z-index: 999;
|
|
|
- i {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: bold;
|
|
|
- margin: 5px 0 0px 5px;
|
|
|
- color: #409eff;
|
|
|
- }
|
|
|
- }
|
|
|
- .videoone {
|
|
|
+ .top {
|
|
|
height: 215px;
|
|
|
overflow: hidden;
|
|
|
- video {
|
|
|
+ .downVideo {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
width: 100%;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 215px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .downTxt {
|
|
|
+ height: 215px;
|
|
|
+ text-align: center;
|
|
|
+ background-image: url('~@/assets/dock1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ p {
|
|
|
+ font-size: 25px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 25px 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .videotwo {
|
|
|
- background: url('~@/assets/dock1.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- height: 215px;
|
|
|
+ .down {
|
|
|
+ height: 40px;
|
|
|
overflow: hidden;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- padding: 15% 3%;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ .left {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-right: 1px dashed #ccc;
|
|
|
+ text-align: center;
|
|
|
+ .el-link {
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ .el-link {
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ // .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/directBack.png');
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // height: 215px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-align: center;
|
|
|
+ // color: #fff;
|
|
|
+ // font-size: 20px;
|
|
|
+ // padding: 15% 3%;
|
|
|
+ // }
|
|
|
}
|
|
|
// 聊天
|
|
|
.chat {
|
