|
@@ -34,26 +34,25 @@ export default {
|
|
|
isAuto: false,
|
|
|
timer: undefined
|
|
|
}
|
|
|
- }
|
|
|
- ,
|
|
|
+ },
|
|
|
created() {
|
|
|
//初始化数据
|
|
|
this.loadData()
|
|
|
//初始化websocket
|
|
|
this.initWebSocket()
|
|
|
+ //轮播手滑切换走马灯
|
|
|
this.$nextTick(() => {
|
|
|
- this.slideBanner() /*轮播手滑切换*/
|
|
|
+ this.slideBanner()
|
|
|
})
|
|
|
- }
|
|
|
- ,
|
|
|
+ },
|
|
|
methods: {
|
|
|
loadData() {
|
|
|
- let code = this.getParamByUrl('code');
|
|
|
+ let _this = this;
|
|
|
+ let code = _this.getParamByUrl('code');
|
|
|
if (!code) {
|
|
|
- this.$message({message: 'code无效', type: "error",})
|
|
|
+ _this.$message({message: 'code无效', type: "error",})
|
|
|
return
|
|
|
}
|
|
|
- let _this = this;
|
|
|
axios.get(_this.$baseUrl + '/api/explain/details/findByCode/' + code)
|
|
|
.then(function (res) {
|
|
|
let data = res.data.data
|
|
@@ -71,7 +70,7 @@ export default {
|
|
|
console.log(error)
|
|
|
});
|
|
|
},
|
|
|
- //幻灯片切换触发 index:当前幻灯片的index prevIndex上一个幻灯片的index
|
|
|
+ //幻灯片切换触发 index:当前幻灯片的index prevIndex:上一个幻灯片的index
|
|
|
carouselChange(index, prevIndex) {
|
|
|
let _this = this
|
|
|
//如果上一个幻灯片是最后一个,把自动播放标记改为false
|
|
@@ -96,12 +95,8 @@ export default {
|
|
|
playOrPause(index) {
|
|
|
let _this = this
|
|
|
//清除定时器
|
|
|
- if(_this.timer){
|
|
|
- _this.timer.clearTimeOut()
|
|
|
- _this.timer = undefined
|
|
|
- }
|
|
|
- //计算setTimeOut定时器时间
|
|
|
- let time = (_this.$refs.audio[index].duration - _this.$refs.audio[index].currentTime) * 1000
|
|
|
+ let interval = undefined;
|
|
|
+ window.clearInterval(interval);
|
|
|
//播放/暂停 音频
|
|
|
if (_this.$refs.audio[index].paused) {
|
|
|
_this.$refs.audio[index].play()
|
|
@@ -109,29 +104,46 @@ export default {
|
|
|
_this.$refs.audio[index].pause()
|
|
|
}
|
|
|
//如果当前是视频则播放视频
|
|
|
+ let videoIndex = -1;
|
|
|
if (_this.carouselDataList[index].explainType == 10) {
|
|
|
//找到当前下标之前的视频个数 就是当前视频组件的下标
|
|
|
- let videoIndex = _this.carouselDataList.filter((data, tempIndex) => {
|
|
|
+ videoIndex = _this.carouselDataList.filter((data, tempIndex) => {
|
|
|
return tempIndex < index && data.explainType == 10;
|
|
|
}).length
|
|
|
- //播放/暂停 视频
|
|
|
+ }
|
|
|
+ //播放/暂停 视频
|
|
|
+ if (videoIndex != -1) {
|
|
|
if (_this.$refs.video[videoIndex].paused) {
|
|
|
_this.$refs.video[videoIndex].play()
|
|
|
} else {
|
|
|
_this.$refs.video[videoIndex].pause()
|
|
|
}
|
|
|
- //计算setTimeOut定时器时间
|
|
|
- if (_this.$refs.video[videoIndex].duration > _this.$refs.audio[index].duration) {
|
|
|
- time = (_this.$refs.video[videoIndex].duration - _this.$refs.video[videoIndex].currentTime) * 1000
|
|
|
- }
|
|
|
}
|
|
|
- //如果是自动播放并且当前是播放就设置定时器
|
|
|
- if (_this.isAuto && !_this.$refs.audio[index].paused) {
|
|
|
- _this.timer = setTimeout(() => {
|
|
|
- _this.$refs.carousel.next()
|
|
|
- }, time)
|
|
|
+ if (!_this.isAuto) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //设置轮询器 轮询器终止触发时机: 较长的音频/视频结束
|
|
|
+ if (videoIndex != -1 && _this.$refs.video[videoIndex].duration > _this.$refs.audio[index].duration) {
|
|
|
+ if (!interval) {
|
|
|
+ interval = setInterval(() => {
|
|
|
+ if (_this.$refs.video[videoIndex].ended) {
|
|
|
+ _this.$refs.carousel.next()
|
|
|
+ window.clearInterval(interval);
|
|
|
+ interval = undefined
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!interval) {
|
|
|
+ interval = setInterval(() => {
|
|
|
+ if (_this.$refs.audio[index].ended) {
|
|
|
+ _this.$refs.carousel.next()
|
|
|
+ window.clearInterval(interval);
|
|
|
+ interval = undefined
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
//消息处理逻辑
|
|
|
handleMsg(msg) {
|
|
@@ -146,8 +158,13 @@ export default {
|
|
|
//手动触发change事件
|
|
|
_this.carouselChange(0, _this.carouselDataList.length - 1)
|
|
|
}
|
|
|
+ //收到切换方案的消息
|
|
|
+ if('replace' === msg.event){
|
|
|
+ console.log('收到重定向消息'+JSON.stringify(msg))
|
|
|
+ location.replace(msg.url)
|
|
|
+ }
|
|
|
},
|
|
|
- //走马灯高度返回方法
|
|
|
+ //走马灯高度返回
|
|
|
calculationHeight() {
|
|
|
return document.documentElement.clientHeight + 'px';
|
|
|
},
|
|
@@ -155,12 +172,12 @@ export default {
|
|
|
if (typeof WebSocket === 'undefined')
|
|
|
return console.log('您的浏览器不支持websocket')
|
|
|
this.websock = new WebSocket(this.$wsUrl + "/client_" + this.$uuid.v1().replace(/-/g, ""))
|
|
|
- this.websock.onmessage = this.websocketonmessage
|
|
|
- this.websock.onopen = this.websocketonopen
|
|
|
- this.websock.onerror = this.websocketonerror
|
|
|
- this.websock.onclose = this.websocketclose
|
|
|
+ this.websock.onmessage = this.onMessage
|
|
|
+ this.websock.onopen = this.onOpen
|
|
|
+ this.websock.onerror = this.onError
|
|
|
+ this.websock.onclose = this.onClose
|
|
|
},
|
|
|
- websocketonmessage(event) {
|
|
|
+ onMessage(event) {
|
|
|
let msg = JSON.parse(event.data)
|
|
|
console.log('收到消息:' + JSON.stringify(msg))
|
|
|
if (msg.type != 'smartExplain') {
|
|
@@ -168,14 +185,14 @@ export default {
|
|
|
}
|
|
|
this.handleMsg(msg);
|
|
|
},
|
|
|
- websocketonopen() {
|
|
|
+ onOpen() {
|
|
|
console.log('websocket连接成功')
|
|
|
},
|
|
|
- websocketonerror() {
|
|
|
+ onError() {
|
|
|
console.log('websocket异常')
|
|
|
|
|
|
},
|
|
|
- websocketclose() {
|
|
|
+ onClose() {
|
|
|
console.log('websocket关闭成功')
|
|
|
|
|
|
},
|
|
@@ -183,8 +200,8 @@ export default {
|
|
|
getParamByUrl(paramKey) {
|
|
|
let query = window.location.search.substring(1);
|
|
|
let vars = query.split("&");
|
|
|
- for (var i = 0; i < vars.length; i++) {
|
|
|
- var pair = vars[i].split("=");
|
|
|
+ for (let i = 0; i < vars.length; i++) {
|
|
|
+ let pair = vars[i].split("=");
|
|
|
if (pair[0] === paramKey) {
|
|
|
return pair[1];
|
|
|
}
|
|
@@ -205,16 +222,12 @@ export default {
|
|
|
slideBanner() {
|
|
|
let that = this
|
|
|
//选中item的盒子
|
|
|
- var box = document.querySelector('.el-carousel__container');
|
|
|
- //手指起点X坐标
|
|
|
- var startPoint = 0;
|
|
|
- //手指滑动重点X坐标
|
|
|
- var stopPoint = 0;
|
|
|
-
|
|
|
+ let box = document.querySelector('.el-carousel__container');
|
|
|
+ //手指起点和终点X坐标
|
|
|
+ let startPoint = 0, stopPoint = 0;
|
|
|
//重置坐标
|
|
|
- var resetPoint = function () {
|
|
|
- startPoint = 0;
|
|
|
- stopPoint = 0;
|
|
|
+ let resetPoint = function () {
|
|
|
+ startPoint = startPoint = 0;
|
|
|
}
|
|
|
//手指按下
|
|
|
box.addEventListener("touchstart", function (e) {
|
|
@@ -252,6 +265,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+
|
|
|
.img-class {
|
|
|
width: auto;
|
|
|
height: auto;
|