|
|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-button
|
|
|
+ <!-- <el-button
|
|
|
v-if="isShowBtn"
|
|
|
class="instructionBtn"
|
|
|
@click="showInstructions"
|
|
|
type="danger"
|
|
|
plain
|
|
|
- >说明书</el-button
|
|
|
- >
|
|
|
+ >操作手册</el-button
|
|
|
+ > -->
|
|
|
<!-- :w="w" -->
|
|
|
<vue-drag-resize
|
|
|
v-if="isShow"
|
|
|
@@ -28,19 +28,18 @@
|
|
|
>
|
|
|
<div class="wall"></div>
|
|
|
<div class="showBtnList">
|
|
|
- <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
|
|
|
- <!-- <i class="el-icon-minus minus" @click="showInstructions"></i> -->
|
|
|
+ <a class='newPageBtn' target="_blank" :href="url">新窗口打开</a>
|
|
|
<i
|
|
|
- class="iconfont icon-fullscreen fullscreen"
|
|
|
+ class="icon iconfont icon-fullscreen fullscreen"
|
|
|
@click="fullPageBook"
|
|
|
v-if="!fullscreen"
|
|
|
></i>
|
|
|
<i
|
|
|
- class="iconfont icon-tubiao-huanyuan huanyuan"
|
|
|
+ class="icon iconfont icon-tubiao-huanyuan huanyuan"
|
|
|
@click="resetBook"
|
|
|
v-else
|
|
|
></i>
|
|
|
- <i class="el-icon-close" @click="showInstructions"></i>
|
|
|
+ <i class="icon el-icon-close" @click="showInstructions"></i>
|
|
|
<!-- -->
|
|
|
<!-- <i class="iconfont icon-tubiao-huanyuan"></i> -->
|
|
|
</div>
|
|
|
@@ -68,7 +67,8 @@
|
|
|
:parentH="docY"
|
|
|
:preventActiveBehavior="true"
|
|
|
class="videoWrap"
|
|
|
- @resizing="onResizing"
|
|
|
+ :AspectRatio='true'
|
|
|
+ @resizing="onResizingVideo"
|
|
|
@dragging="onResizing"
|
|
|
@resizestop="resizeVideostop"
|
|
|
@dragstop="resizeVideostop"
|
|
|
@@ -76,17 +76,6 @@
|
|
|
<!-- -->
|
|
|
<div class="videowall"></div>
|
|
|
<div class="showBtnList">
|
|
|
- <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
|
|
|
- <!-- <i
|
|
|
- class="iconfont icon-fullscreen fullscreen"
|
|
|
- @click="fullPageVideo"
|
|
|
- v-if="!fullscreenVideo"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- class="iconfont icon-tubiao-huanyuan huanyuan"
|
|
|
- @click="resetVideo"
|
|
|
- v-else
|
|
|
- ></i> -->
|
|
|
<i class="el-icon-close" @click="showVideo = false"></i>
|
|
|
</div>
|
|
|
<video
|
|
|
@@ -104,8 +93,8 @@
|
|
|
<script>
|
|
|
import screenfull from "screenfull";
|
|
|
import VueDragResize from "vue-drag-resize";
|
|
|
-import { instructionList } from "@/constant/instructionList";
|
|
|
-import { operationLog } from "./api"
|
|
|
+import { instructionList, keyOfValue } from "@/constant/instructionList";
|
|
|
+import { operationLog } from "./api";
|
|
|
const defaultSettings = require("@/settings.js");
|
|
|
|
|
|
export default {
|
|
|
@@ -129,15 +118,26 @@ export default {
|
|
|
videoW: 640,
|
|
|
videoH: 390,
|
|
|
isShowBtn: false,
|
|
|
+ str: "",
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initSize();
|
|
|
- this.setBtnStatus(this.$route)
|
|
|
+ this.setBtnStatus(this.$route);
|
|
|
// document.onfullscreenchange = this.resizeI;
|
|
|
+ window.addEventListener("resize", this.resizeWindow);
|
|
|
},
|
|
|
beforeDestroy() {},
|
|
|
methods: {
|
|
|
+ resizeWindow() {
|
|
|
+ if (this.isShow) {
|
|
|
+ this.isShow = false;
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ this.initSize();
|
|
|
+ this.isShow = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
initSize() {
|
|
|
let clientWidth =
|
|
|
document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
@@ -160,11 +160,14 @@ export default {
|
|
|
this.isResizing = false;
|
|
|
}, 500);
|
|
|
},
|
|
|
+ onResizingVideo(e){
|
|
|
+ this.isResizing = true;
|
|
|
+ this.videoH = Math.abs(e.height);
|
|
|
+ this.videoW = Math.abs(e.width);
|
|
|
+ },
|
|
|
resizeVideostop(e) {
|
|
|
- if (!this.fullscreenVideo) {
|
|
|
this.videoH = Math.abs(e.height);
|
|
|
this.videoW = Math.abs(e.width);
|
|
|
- }
|
|
|
setTimeout(() => {
|
|
|
this.isResizing = false;
|
|
|
}, 500);
|
|
|
@@ -198,62 +201,96 @@ export default {
|
|
|
this.isShow = true;
|
|
|
});
|
|
|
},
|
|
|
- fullPageVideo() {
|
|
|
- this.isShow = false;
|
|
|
- this.$nextTick((res) => {
|
|
|
- const bodyEle = document.querySelector(".app-main");
|
|
|
- this.videoH = this.docY - this.y;
|
|
|
- // document.querySelector('#instructions .content-container').style.width = this.w+'px'
|
|
|
- this.videoW = bodyEle.clientWidth;
|
|
|
- this.x = 210;
|
|
|
- this.y = 130;
|
|
|
- this.isShow = true;
|
|
|
- });
|
|
|
- },
|
|
|
+ // fullPageVideo() {
|
|
|
+ // this.isShow = false;
|
|
|
+ // this.$nextTick((res) => {
|
|
|
+ // const bodyEle = document.querySelector(".app-main");
|
|
|
+ // this.videoH = this.docY - this.y;
|
|
|
+ // // document.querySelector('#instructions .content-container').style.width = this.w+'px'
|
|
|
+ // this.videoW = bodyEle.clientWidth;
|
|
|
+ // this.x = 210;
|
|
|
+ // this.y = 130;
|
|
|
+ // this.isShow = true;
|
|
|
+ // });
|
|
|
+ // },
|
|
|
// onDragging(e){
|
|
|
|
|
|
// },
|
|
|
// onDragstop(e){},
|
|
|
- showInstructions() {
|
|
|
+ async showInstructions() {
|
|
|
+ this.initSize()
|
|
|
+ if (!this.isShow) {
|
|
|
+ // 埋点
|
|
|
+ try {
|
|
|
+ const res = await operationLog({
|
|
|
+ operateName: this.str,
|
|
|
+ interfaceUrl: this.$route.path,
|
|
|
+ });
|
|
|
+ } catch (e) {}
|
|
|
+ // console.log("埋点");
|
|
|
+ }
|
|
|
this.isShow = !this.isShow;
|
|
|
},
|
|
|
- setBtnStatus(to){
|
|
|
- let str = ''
|
|
|
+ setBtnStatus(to) {
|
|
|
+ this.str = "";
|
|
|
if (instructionList.hasOwnProperty(to.path)) {
|
|
|
this.isShowBtn = true;
|
|
|
+ // this.$emit('checkShow',this.isShowBtn)
|
|
|
// console.log(Object.prototype.toString.call(instructionList[to.path]),instructionList[to.path])
|
|
|
if (
|
|
|
Object.prototype.toString.call(instructionList[to.path]) ===
|
|
|
"[object Object]"
|
|
|
) {
|
|
|
// 对象 肯定是详情页
|
|
|
+ // console.log('状态',to.query[keyOfValue[to.path]])
|
|
|
+ let obj = {};
|
|
|
+ if (instructionList[to.path][to.query[keyOfValue[to.path]]]) {
|
|
|
+ let parameter = to.query[keyOfValue[to.path]];
|
|
|
+ obj = { ...instructionList[to.path][parameter] };
|
|
|
+ } else {
|
|
|
+ obj = instructionList[to.path];
|
|
|
+ }
|
|
|
+
|
|
|
if (!to.query.tabrouter) {
|
|
|
- let some = Object.keys(instructionList[to.path])[0]
|
|
|
- this.url = `/html/index.html#g=1&p=${
|
|
|
- instructionList[to.path][some]
|
|
|
- }`;
|
|
|
- str = instructionList[to.path][some]
|
|
|
+ let some = Object.keys(obj)[0];
|
|
|
+ this.url = `/html/index.html#g=1&p=${obj[some]}`;
|
|
|
+ this.str = obj[some];
|
|
|
} else {
|
|
|
- if(instructionList[to.path][to.query.tabrouter]){
|
|
|
- this.url = `/html/index.html#g=1&p=${
|
|
|
- instructionList[to.path][to.query.tabrouter]
|
|
|
- }`;
|
|
|
- str = instructionList[to.path][to.query.tabrouter]
|
|
|
- }else{
|
|
|
+ this.str = obj[to.query.tabrouter];
|
|
|
+ // if (
|
|
|
+ // to.path == "/business/resetTeaming" &&
|
|
|
+ // to.query.tabrouter == "11"
|
|
|
+ // ) {
|
|
|
+ // to.query.team_status == "APPLY"
|
|
|
+ // ? (this.str = "乐团报名")
|
|
|
+ // : (this.str = "乐团缴费");
|
|
|
+ // }
|
|
|
+ // if (
|
|
|
+ // to.path == "/business/resetTeaming" &&
|
|
|
+ // (to.query.tabrouter == "3" || to.query.tabrouter == "6") &&
|
|
|
+ // to.query.team_status == "PROGRESS"
|
|
|
+ // ) {
|
|
|
+ // this.str = "缴费项目创建";
|
|
|
+ // }
|
|
|
+
|
|
|
+ if (obj[to.query.tabrouter]) {
|
|
|
+ this.url = `/html/index.html#g=1&p=${this.str}`;
|
|
|
+
|
|
|
+ // 判断一下 如果是乐团详情 就判断
|
|
|
+ } else {
|
|
|
this.isShowBtn = false;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
} else {
|
|
|
// 字符串
|
|
|
this.url = `/html/index.html#g=1&p=${instructionList[to.path]}`;
|
|
|
- str = instructionList[to.path]
|
|
|
+ this.str = instructionList[to.path];
|
|
|
}
|
|
|
-
|
|
|
} else {
|
|
|
this.isShowBtn = false;
|
|
|
}
|
|
|
- console.log(str)
|
|
|
+ console.log(this.isShowBtn);
|
|
|
+ this.$emit("checkShow", this.isShowBtn);
|
|
|
},
|
|
|
showFullPage() {},
|
|
|
resetVideo() {},
|
|
|
@@ -286,25 +323,23 @@ export default {
|
|
|
this.y == 130
|
|
|
);
|
|
|
},
|
|
|
- fullscreenVideo() {
|
|
|
- const bodyEle = document.querySelector(".app-main");
|
|
|
- return (
|
|
|
- this.videoH == this.docY - this.y &&
|
|
|
- this.videoW == bodyEle.clientWidth &&
|
|
|
- this.x == 210 &&
|
|
|
- this.y == 130
|
|
|
- );
|
|
|
- },
|
|
|
-
|
|
|
+ // fullscreenVideo() {
|
|
|
+ // const bodyEle = document.querySelector(".app-main");
|
|
|
+ // return (
|
|
|
+ // this.videoH == this.docY - this.y &&
|
|
|
+ // this.videoW == bodyEle.clientWidth &&
|
|
|
+ // this.x == 210 &&
|
|
|
+ // this.y == 130
|
|
|
+ // );
|
|
|
+ // },
|
|
|
},
|
|
|
watch: {
|
|
|
$route(to, from) {
|
|
|
this.isShow = false;
|
|
|
- this.setBtnStatus(to)
|
|
|
+ this.setBtnStatus(to);
|
|
|
},
|
|
|
isShow(val) {
|
|
|
if (val) {
|
|
|
-
|
|
|
this.$nextTick((res) => {
|
|
|
let outFrame = this.$refs.iframe;
|
|
|
let outFrameWindow = this.$refs.iframe.contentWindow;
|
|
|
@@ -323,6 +358,12 @@ export default {
|
|
|
);
|
|
|
this.src = e.path[i].getAttribute("selectiongroup");
|
|
|
this.showVideo = true;
|
|
|
+ this.$nextTick(res=>{
|
|
|
+ this.isShow = false;
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // this.isShow = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
@@ -359,11 +400,20 @@ export default {
|
|
|
}
|
|
|
.content-container {
|
|
|
.showBtnList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
font-size: 20px;
|
|
|
position: absolute;
|
|
|
right: 5px;
|
|
|
- top: 5px;
|
|
|
+ top: 0;
|
|
|
background-color: #ccc;
|
|
|
+ height: 30px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.wall {
|
|
|
@@ -376,13 +426,21 @@ export default {
|
|
|
background-color: #ccc;
|
|
|
}
|
|
|
.fullscreen {
|
|
|
- margin-left: 10px;
|
|
|
+ padding:0 5px;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
.huanyuan {
|
|
|
- margin-left: 10px;
|
|
|
+ padding:0 5px;
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
+.newPageBtn {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #14928A;
|
|
|
+ height: 30px;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.instructionBtn {
|
mo
