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> |