148 lines
6.2 KiB
HTML
148 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<link rel="stylesheet" href="css/reset.css">
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<!--<link rel="stylesheet" href="css/video-js.min.css">-->
|
||
|
|
<script src="js/rem.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<div class="hide"></div>
|
||
|
|
<div class="main">
|
||
|
|
<div class="left" :class="{full: sideList.length == 1}">
|
||
|
|
<video id="player" autoplay controls :poster="url + sourcePath + playing.dataItemPhotoId" :src="url + sourcePath + playing.dataItemFileId"></video>
|
||
|
|
</div>
|
||
|
|
<div class="right" v-if="sideList && sideList.length > 1">
|
||
|
|
<ul>
|
||
|
|
<li v-for="(video,idx) in sideList" @click="changeVideo(idx)" :class="{active: curPlaying == idx}">
|
||
|
|
<img :src="url + sourcePath + video.dataItemPhotoId" alt="">
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="js/vue.js"></script>
|
||
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
||
|
|
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
|
||
|
|
<script src="js/nicescroll.js"></script>
|
||
|
|
<script src="js/ajax.js"></script>
|
||
|
|
<script>
|
||
|
|
var vue = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
url: '',
|
||
|
|
deviceCode: '',
|
||
|
|
curPlaying: 0,
|
||
|
|
playing: {},
|
||
|
|
toTop: 0,
|
||
|
|
sideList: [],
|
||
|
|
sourcePath: '/route/file/downloadfile/true/'
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeVideo: function (idx) {
|
||
|
|
var self = this
|
||
|
|
self.curPlaying = idx
|
||
|
|
self.playing = self.sideList[self.curPlaying]
|
||
|
|
$('#player').prop('src', self.playing.dataItemFileId)
|
||
|
|
$('#player').get(0).play()
|
||
|
|
$('.right ul li').eq(self.curPlaying).addClass('active').siblings('li').removeClass('active')
|
||
|
|
self.toTop += $('.right ul li').eq(self.curPlaying).position().top
|
||
|
|
if (self.curPlaying == 0) {
|
||
|
|
self.toTop = 0
|
||
|
|
}
|
||
|
|
$(".right ul").animate({
|
||
|
|
"scrollTop": self.toTop
|
||
|
|
},500);
|
||
|
|
},
|
||
|
|
getList: function () {
|
||
|
|
var self = this
|
||
|
|
doGetForm(self.url + '/app/showdata/getshowdatabydevicecoderelease/' + self.deviceCode, {}, null, function (code, data) {
|
||
|
|
self.saveList(code, data)
|
||
|
|
}) // 2图片 4视频 1文字 3音乐
|
||
|
|
},
|
||
|
|
saveList: function (code, data) {
|
||
|
|
var self = this
|
||
|
|
if (code == 200) {
|
||
|
|
if (data.dataType == 2 && data.typesettingCode == 'C0001') {
|
||
|
|
window.location.href = 'img-mid.html'
|
||
|
|
} else if (data.dataType == 4) {
|
||
|
|
var isExist
|
||
|
|
if (JSON.stringify(self.playing) != '{}') {
|
||
|
|
for (var i = 0; i < data.fileList.length; i++) {
|
||
|
|
if (data.fileList[i].dataItemFileId == self.playing.dataItemFileId) {
|
||
|
|
isExist = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!isExist) {
|
||
|
|
self.sideList = data.fileList
|
||
|
|
self.playing = self.sideList[0]
|
||
|
|
self.curPlaying = 0
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
self.sideList = data.fileList
|
||
|
|
self.playing = self.sideList[0]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function () {
|
||
|
|
var self = this
|
||
|
|
self.url = window.AppInterface.getBaseUrl()
|
||
|
|
self.deviceCode = window.AppInterface.getDeviceCode()
|
||
|
|
// self.url = 'https://www.wgink.ink/show'
|
||
|
|
// self.deviceCode = 'RKZ01H13'
|
||
|
|
localStorage.setItem('url', self.url)
|
||
|
|
localStorage.setItem('deviceCode', self.deviceCode)
|
||
|
|
self.getList()
|
||
|
|
setInterval(function () {
|
||
|
|
self.getList()
|
||
|
|
}, 600000)
|
||
|
|
$('#player').on('ended', function () {
|
||
|
|
self.curPlaying++
|
||
|
|
if (self.curPlaying >= self.sideList.length) {
|
||
|
|
self.curPlaying = 0
|
||
|
|
}
|
||
|
|
self.playing = self.sideList[self.curPlaying]
|
||
|
|
$('#player').prop('src', self.playing.dataItemFileId)
|
||
|
|
setTimeout(function () {
|
||
|
|
$('#player').get(0).play()
|
||
|
|
}, 10)
|
||
|
|
if (self.sideList.length > 1) {
|
||
|
|
$('.right ul li').eq(self.curPlaying).addClass('active').siblings('li').removeClass('active')
|
||
|
|
self.toTop += $('.right ul li').eq(self.curPlaying).position().top
|
||
|
|
if (self.curPlaying == 0) {
|
||
|
|
self.toTop = 0
|
||
|
|
}
|
||
|
|
$(".right ul").animate({
|
||
|
|
"scrollTop": self.toTop
|
||
|
|
},500);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$('.right ul').niceScroll()
|
||
|
|
var timer
|
||
|
|
$('.hide').on({
|
||
|
|
touchstart: function (e) {
|
||
|
|
timer = setTimeout(function () {
|
||
|
|
timer = ''
|
||
|
|
AppInterface.showPwdDialog()
|
||
|
|
}, 2000)
|
||
|
|
},
|
||
|
|
touchmove: function () {
|
||
|
|
clearTimeout(timer)
|
||
|
|
timer = ''
|
||
|
|
},
|
||
|
|
touchend: function () {
|
||
|
|
clearTimeout(timer)
|
||
|
|
timer = ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|