451 lines
10 KiB
Vue
451 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<view style="height: 100vh;flex:1;width:100%">
|
|||
|
|
<view class="com-line">
|
|||
|
|
<image style="width: 380rpx; height: 330rpx;" src="../../static/coming.png" mode=""></image>
|
|||
|
|
<view class="com-text">系统建设中,敬请期待！</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- v-if="videoShow==true" -->
|
|||
|
|
<swiper v-if="videoShow==true" @animationfinish="qiehuan" :current="activeIndex" @change="swiper" :circular="index==0?true:false" vertical
|
|||
|
|
class="list">
|
|||
|
|
<swiper-item disable-programmatic-animation class="item" v-for="(item,index) in list" :key="index">
|
|||
|
|
<video @ended="end" @pause='item.active=false' @click="pause(item,index)"
|
|||
|
|
@timeupdate="long($event,item,index)" :id="'Video'+index" class="video"
|
|||
|
|
:show-center-play-btn='false' :controls="false" object-fit="cover" :autoplay='false' loop
|
|||
|
|
src="https://media.w3.org/2010/05/sintel/trailer.mp4">
|
|||
|
|
<cover-view class="back" v-if="item.active==false">
|
|||
|
|
<cover-image class="pauseIcon" src="../../static/bofang.png"></cover-image>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="iconList">
|
|||
|
|
<cover-view class="iconListClass">
|
|||
|
|
<cover-image class="icon" src="../../static/dituzhaoren3.png"></cover-image>
|
|||
|
|
<cover-view>
|
|||
|
|
<text class="context">12.5w</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="iconListClass">
|
|||
|
|
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
|
|||
|
|
<cover-view>
|
|||
|
|
<text class="context">12.5w</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="iconListClass">
|
|||
|
|
<cover-image class="icon" src="../../static/dituzhaoren4.png"></cover-image>
|
|||
|
|
<cover-view style="white-space: nowrap;lines:1;">
|
|||
|
|
<text class="context">12.5w</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="formation">
|
|||
|
|
<cover-view style="display: flex;align-items: center;flex-direction: row;">
|
|||
|
|
<cover-image class="header"
|
|||
|
|
src="https://i02piccdn.sogoucdn.com/a977a5bc3f44ffcf"></cover-image>
|
|||
|
|
<cover-view>
|
|||
|
|
<text class="context">作者</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view>
|
|||
|
|
<text class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</text>
|
|||
|
|
</cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
<cover-view class="duration">
|
|||
|
|
<cover-view class="long" :style="{width:item.percent+'rpx'}"></cover-view>
|
|||
|
|
</cover-view>
|
|||
|
|
</video>
|
|||
|
|
</swiper-item>
|
|||
|
|
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
videoShow:false,
|
|||
|
|
// 视频下标，记录播放到第几个
|
|||
|
|
index: 0,
|
|||
|
|
// 数据
|
|||
|
|
allList: [{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 3
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 4
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 5
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 6
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 7
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 8
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 9
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 10
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
list: [{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
|
|||
|
|
active: false,
|
|||
|
|
currentTime: 0,
|
|||
|
|
duration: 121,
|
|||
|
|
percent: 0,
|
|||
|
|
id: 2
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// 播放器下标
|
|||
|
|
activeIndex: 0,
|
|||
|
|
// 记录上一个播放器下标
|
|||
|
|
oldActiveIndex: 0,
|
|||
|
|
page:1,
|
|||
|
|
limit:10,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {},
|
|||
|
|
onLoad() {
|
|||
|
|
this.jiukou()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
jiukou(){
|
|||
|
|
var data={
|
|||
|
|
page:1,
|
|||
|
|
limit:10,
|
|||
|
|
// id:'1',
|
|||
|
|
shipinquanId:'1'
|
|||
|
|
}
|
|||
|
|
uni.request({
|
|||
|
|
url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
|
|||
|
|
method: 'POST',
|
|||
|
|
data:{
|
|||
|
|
info: 'get_video'
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
var msg = res.data.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// this.$Request.getT('/app/shipinquan/list',data).then(res => {
|
|||
|
|
// if (res.code == 0) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// this.$Request.post('/app/shipinquan/add',data).then(res => {
|
|||
|
|
// if (res.code == 0) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// this.$Request.post('/app/shipinquan/delete',data).then(res => {
|
|||
|
|
// if (res.code == 0) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// this.$Request.post('/app/shipinquan/addContent',data).then(res => {
|
|||
|
|
// if (res.code == 0) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// this.$Request.getT('/app/shipinquan/contentlist',data).then(res => {
|
|||
|
|
// if (res.code == 0) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
qiehuan(e) {
|
|||
|
|
if (this.oldActiveIndex < e.detail.current) {
|
|||
|
|
if (this.oldActiveIndex - e.detail.current != -2) {
|
|||
|
|
console.log('上滑');
|
|||
|
|
this.index++
|
|||
|
|
this.next(e.detail.current)
|
|||
|
|
} else {
|
|||
|
|
console.log("下滑");
|
|||
|
|
this.pre(e.detail.current)
|
|||
|
|
this.index--
|
|||
|
|
}
|
|||
|
|
} else if (this.oldActiveIndex > e.detail.current) {
|
|||
|
|
if (this.oldActiveIndex - e.detail.current != 2) {
|
|||
|
|
console.log('下滑');
|
|||
|
|
this.pre(e.detail.current)
|
|||
|
|
this.index--
|
|||
|
|
} else {
|
|||
|
|
console.log("上滑");
|
|||
|
|
this.index++
|
|||
|
|
this.next(e.detail.current)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.oldActiveIndex = e.detail.current
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
next(index) {
|
|||
|
|
if (Object.is(this.index, 2)) {
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 0)) {
|
|||
|
|
this.list[1] = this.allList[this.index + 1]
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 1)) {
|
|||
|
|
this.list[2] = this.allList[this.index + 1]
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 2)) {
|
|||
|
|
this.list[0] = this.allList[this.index + 1]
|
|||
|
|
}
|
|||
|
|
this.play(this.activeIndex)
|
|||
|
|
},
|
|||
|
|
pre(index) {
|
|||
|
|
if (Object.is(this.index, 2)) {
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 0)) {
|
|||
|
|
this.list[2] = this.allList[this.index - 2]
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 1)) {
|
|||
|
|
this.list[0] = this.allList[this.index - 2]
|
|||
|
|
}
|
|||
|
|
if (Object.is(index, 2)) {
|
|||
|
|
this.list[1] = this.allList[this.index - 2]
|
|||
|
|
}
|
|||
|
|
this.play(this.activeIndex)
|
|||
|
|
},
|
|||
|
|
play(index) {
|
|||
|
|
for (let i = 0; i < 3; i++) {
|
|||
|
|
uni.createVideoContext(`Video${i}`, this).pause()
|
|||
|
|
}
|
|||
|
|
this.videoContext = uni.createVideoContext('Video' + index, this)
|
|||
|
|
this.list[index].active = true
|
|||
|
|
this.videoContext.play()
|
|||
|
|
},
|
|||
|
|
swiper(e) {
|
|||
|
|
// console.log(e.detail.current);
|
|||
|
|
this.activeIndex = e.detail.current
|
|||
|
|
// this.play(e.detail.current)
|
|||
|
|
// this.play(this.activeIndex)
|
|||
|
|
},
|
|||
|
|
end(e) {
|
|||
|
|
this.activeIndex++
|
|||
|
|
if (Object.is(this.activeIndex, 3)) {
|
|||
|
|
this.activeIndex = 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
long(e, item, index) {
|
|||
|
|
item.currentTime = e.detail.currentTime
|
|||
|
|
item.percent = (e.detail.currentTime / e.detail.duration) * 750
|
|||
|
|
},
|
|||
|
|
pause(item, index) {
|
|||
|
|
this.videoContext = uni.createVideoContext('Video' + index, this)
|
|||
|
|
if (item.active) {
|
|||
|
|
this.videoContext.pause()
|
|||
|
|
} else {
|
|||
|
|
this.videoContext.play()
|
|||
|
|
}
|
|||
|
|
this.list[index].active = !this.list[index].active
|
|||
|
|
},
|
|||
|
|
videoClick() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.com-line{
|
|||
|
|
width:80%;
|
|||
|
|
margin: 45% auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.com-text{
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
.list {
|
|||
|
|
background-color: black;
|
|||
|
|
flex: 1;
|
|||
|
|
width:100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
background-color: rgba(225, 225, 225, 0.3);
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pauseIcon {
|
|||
|
|
position: absolute;
|
|||
|
|
left: calc(50% - 25px);
|
|||
|
|
top: calc(50% - 30px);
|
|||
|
|
width: 50px;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0px;
|
|||
|
|
bottom: 0px;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.long {
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.formation {
|
|||
|
|
flex-direction: column;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 10px;
|
|||
|
|
bottom: 10px;
|
|||
|
|
width: calc(100% - 80px);
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.iconListClass {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.context {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
width: 100rpx;
|
|||
|
|
color: white;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
width: 600rpx;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
color: white;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
lines: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.iconList {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 40px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
bottom: 161px;
|
|||
|
|
width: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
/deep/.uni-cover-view{
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
.context {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
</style>
|