292 lines
6.8 KiB
Vue
292 lines
6.8 KiB
Vue
<template>
|
|
<u-popup
|
|
:show="show"
|
|
round="20"
|
|
@open="open"
|
|
@close="show=false"
|
|
>
|
|
<view class="content px-30">
|
|
<view
|
|
class="flex-row mb-40"
|
|
style="justify-content: space-between; "
|
|
>
|
|
<view style="flex-direction:row;align-items: center;">
|
|
<text class="title">
|
|
{{ watchInfo.title }}
|
|
</text>
|
|
<text class="num ml-40">
|
|
全{{ listThen }}集
|
|
</text>
|
|
</view>
|
|
<image
|
|
src="@/static/icon/arrowBottom.png"
|
|
mode="aspectFill"
|
|
style="width:44rpx;height: 44rpx;"
|
|
@click="close"
|
|
/>
|
|
</view>
|
|
|
|
<u-tabs
|
|
:list="list"
|
|
line-width="0"
|
|
line-height="0"
|
|
:current="tabIndex"
|
|
:inactive-style="{
|
|
width: '150rpx',
|
|
height: '64rpx',
|
|
'border-radius': '32rpx',
|
|
background: '#f8f8f8',
|
|
'text-align': 'center',
|
|
'line-height': '64rpx',
|
|
color: '#666666',
|
|
padding: 0,
|
|
marginRight: '20rpx'
|
|
}"
|
|
:active-style="{
|
|
width: '150rpx',
|
|
height: '64rpx',
|
|
'border-radius': '32rpx',
|
|
background: '#FFE5EB',
|
|
'text-align': 'center',
|
|
'line-height': '64rpx',
|
|
color: '#FF779E',
|
|
padding: 0,
|
|
marginRight: '20rpx'
|
|
}"
|
|
:item-style="{
|
|
padding: 0
|
|
}"
|
|
@click="tabClick"
|
|
/>
|
|
|
|
<view class="sidContent flex-1">
|
|
<swiper
|
|
class="flex-1"
|
|
:current="tabIndex"
|
|
style="height: 900rpx;"
|
|
@change="swiperChange"
|
|
>
|
|
<swiper-item
|
|
v-for="(each, index) in anthologyList"
|
|
:key="index"
|
|
class="flex-1"
|
|
>
|
|
<scroll-view
|
|
scroll-y="true"
|
|
style="height: 900rpx;"
|
|
class="mt-30"
|
|
|
|
:scroll-into-view="toview"
|
|
:scroll-with-animation="true"
|
|
>
|
|
<view
|
|
class="flex-row"
|
|
style="flex-wrap: wrap;padding-bottom: 60rpx;"
|
|
>
|
|
<view
|
|
v-for="(item, i) in each"
|
|
:id="`video-${index}-${i}`"
|
|
:key="i"
|
|
class="sidContent-item"
|
|
:style="
|
|
(i + 1) % 3 != 0
|
|
? 'margin-right: 30rpx;'
|
|
: ''
|
|
"
|
|
:class="
|
|
item.id == current.id ? 'check' : ''
|
|
"
|
|
@click="seeSidContent(item.id)"
|
|
>
|
|
<image
|
|
style="width: 210rpx;height: 288rpx;"
|
|
:src="watchInfo.cover"
|
|
mode="aspectFill"
|
|
/>
|
|
<view
|
|
v-if="
|
|
item.isvip == 1 ||
|
|
item.id == current.id
|
|
"
|
|
class="flex-center"
|
|
style="width: 210rpx;height: 288rpx;position: absolute;top: 0;left:0;background-color: rgba(26, 26, 26, 0.4);"
|
|
>
|
|
<u-icon
|
|
v-if="item.isvip == 1"
|
|
name="/static/images/videoLock.png"
|
|
size="64rpx"
|
|
/>
|
|
<u-icon
|
|
v-else-if="item.id == current.id"
|
|
name="/static/images/playIcon.gif"
|
|
size="100rpx"
|
|
/>
|
|
</view>
|
|
<view class="jishu flex-center">
|
|
<text class="jishu-text">
|
|
第{{ item.order }}集
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
<script>
|
|
import {episode} from '@/config/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
tabIndex: 0,
|
|
list: [
|
|
|
|
],
|
|
anthologyList: [[], [], [], []],
|
|
reject: null,
|
|
resolve: null,
|
|
current: {},
|
|
timer: null,
|
|
dataList: [],
|
|
watchInfo: {},
|
|
listThen: 0,
|
|
toview: ''
|
|
};
|
|
},
|
|
methods: {
|
|
tabClick(e) {
|
|
if (this.tabIndex !== e.index) {
|
|
this.tabIndex = e.index;
|
|
}
|
|
},
|
|
swiperChange(e) {
|
|
const index = e.detail.current;
|
|
if (this.tabIndex !== index) {
|
|
this.tabIndex = index;
|
|
}
|
|
},
|
|
open(list, index, watchInfo) {
|
|
return new Promise((resolve, reject) => {
|
|
const data = list || [];
|
|
if (data.length) {
|
|
this.listThen = data.length;
|
|
this.current = data[index];
|
|
this.watchInfo = watchInfo;
|
|
this.list = [];
|
|
let arr = [];
|
|
for (var i = 0; i < data.length; i += episode) {
|
|
arr.push(data.slice(i, i + episode));
|
|
}
|
|
arr.forEach((r, i) => {
|
|
if (i === 0) {
|
|
this.list.push({
|
|
name: `01-${(i + 1) * episode}`
|
|
});
|
|
}
|
|
if (i > 0) {
|
|
this.list.push({
|
|
name: `${i * episode + 1}-${(i + 1) * episode}`
|
|
});
|
|
}
|
|
if (arr.length === i + 1) {
|
|
this.list[i].name = `${i === 0 ? '1' : i * episode + 1}-${
|
|
data.length
|
|
}`;
|
|
}
|
|
});
|
|
this.show = true;
|
|
arr.forEach((item, index) => {
|
|
item.forEach((each, i) => {
|
|
if (each.id === this.current.id) {
|
|
this.tabIndex = index;
|
|
this.toview = `video-${index}-${i}`;
|
|
|
|
}
|
|
});
|
|
});
|
|
this.anthologyList = arr || [[]];
|
|
this.reject = reject;
|
|
this.resolve = resolve;
|
|
}
|
|
});
|
|
},
|
|
close() {
|
|
this.reject();
|
|
this.show = false;
|
|
// console.log('close');
|
|
},
|
|
seeSidContent(id) {
|
|
clearTimeout(this.timer);
|
|
this.timer = setTimeout(() => {
|
|
this.resolve(id);
|
|
this.show = false;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.content {
|
|
width: 750rpx;
|
|
height: 1100rpx;
|
|
background: linear-gradient(180deg, #ffe2e2 0%, #ffffff 11%);
|
|
border-radius: 40rpx 40rpx 0px 0px;
|
|
box-shadow: 0px -11px 17px 0px rgba(0, 0, 0, 0.2);
|
|
padding-top: 56rpx;
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
}
|
|
.num {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #222222;
|
|
}
|
|
.select {
|
|
margin-top: 60rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.sidContent {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
.sidContent-item {
|
|
width: 210rpx;
|
|
height: 288rpx;
|
|
background: #eeeeee;
|
|
border-radius: 16rpx;
|
|
color: #1a1a1a;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 32rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.check {
|
|
background: #ff779e !important;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.jishu {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 210rpx;
|
|
height: 54rpx;
|
|
background-color: rgba(26, 26, 26, 0.7);
|
|
.jishu-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|