|
@@ -38,7 +38,7 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--视频播放-->
|
|
<!--视频播放-->
|
|
- <view class="video-box main-center cross-center">
|
|
|
|
|
|
+ <view class="video-box main-center cross-center" :style="{zIndex: isPlaying?0:998}">
|
|
<!-- 控制按钮 - 播放 -->
|
|
<!-- 控制按钮 - 播放 -->
|
|
<view v-if="!isPlaying" class="play-layer main-center cross-center" @tap="handlePlay">
|
|
<view v-if="!isPlaying" class="play-layer main-center cross-center" @tap="handlePlay">
|
|
<u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
|
|
<u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
|
|
@@ -58,6 +58,7 @@
|
|
style="width: 100%;height: 100%;"
|
|
style="width: 100%;height: 100%;"
|
|
:poster="episode.cover_img"
|
|
:poster="episode.cover_img"
|
|
:src="src"
|
|
:src="src"
|
|
|
|
+ @binderror="binderror"
|
|
@timeupdate="timeupdate"
|
|
@timeupdate="timeupdate"
|
|
/>
|
|
/>
|
|
</view>
|
|
</view>
|
|
@@ -92,11 +93,12 @@
|
|
v-for="(item, index) in episodes[episodesIndex].lists"
|
|
v-for="(item, index) in episodes[episodesIndex].lists"
|
|
:key="index"
|
|
:key="index"
|
|
class="episode-item"
|
|
class="episode-item"
|
|
- @click="activeIndex = item.index"
|
|
|
|
|
|
+ @click="handleSelectEpisode(item.index)"
|
|
>
|
|
>
|
|
<image :src="episode.cover_img" />
|
|
<image :src="episode.cover_img" />
|
|
<text>第{{ item.sort }}集</text>
|
|
<text>第{{ item.sort }}集</text>
|
|
- <view class="lock main-center cross-center">
|
|
|
|
|
|
+ <view v-if="activeIndex === item.index" class="playing" />
|
|
|
|
+ <view v-if="!item.is_free" class="lock main-center cross-center">
|
|
<u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
|
|
<u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -173,7 +175,6 @@ export default {
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
'toast.show'(val) {
|
|
'toast.show'(val) {
|
|
- console.log('-->data1', val)
|
|
|
|
if (val) {
|
|
if (val) {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
this.toast.show = false
|
|
this.toast.show = false
|
|
@@ -191,6 +192,18 @@ export default {
|
|
handlePlay() {
|
|
handlePlay() {
|
|
this.isPlaying = true
|
|
this.isPlaying = true
|
|
this.videoContext.play()
|
|
this.videoContext.play()
|
|
|
|
+ this.watched(this.id, this.listId)
|
|
|
|
+ },
|
|
|
|
+ handleSelectEpisode(index) {
|
|
|
|
+ this.activeIndex = index
|
|
|
|
+ this.footerShow = false
|
|
|
|
+ this.$loading()
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$hideLoading()
|
|
|
|
+ this.isPlaying = true
|
|
|
|
+ this.videoContext.play()
|
|
|
|
+ this.watched(this.id, this.episode.lists[this.activeIndex].id)
|
|
|
|
+ }, 1000)
|
|
},
|
|
},
|
|
handlePause() {
|
|
handlePause() {
|
|
if (!this.isPlaying) return
|
|
if (!this.isPlaying) return
|
|
@@ -202,16 +215,17 @@ export default {
|
|
this.$api.episode.detail(this.id).then(res => {
|
|
this.$api.episode.detail(this.id).then(res => {
|
|
this.loading = false
|
|
this.loading = false
|
|
this.episode = res.data
|
|
this.episode = res.data
|
|
|
|
+ console.log('-->data', this.listId)
|
|
if (this.listId) {
|
|
if (this.listId) {
|
|
this.episode.lists.forEach((obj, index) => {
|
|
this.episode.lists.forEach((obj, index) => {
|
|
- if (parseInt(this.listId) === obj.id) {
|
|
|
|
|
|
+ if (parseInt(this.listId) === parseInt(obj.id)) {
|
|
this.activeIndex = index
|
|
this.activeIndex = index
|
|
|
|
+ console.log('-->data', this.activeIndex)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
this.listId = this.episode.lists[0].id
|
|
this.listId = this.episode.lists[0].id
|
|
}
|
|
}
|
|
- this.watched(this.id, this.listId)
|
|
|
|
})
|
|
})
|
|
},
|
|
},
|
|
checkCollect() {
|
|
checkCollect() {
|
|
@@ -254,15 +268,41 @@ export default {
|
|
this.$api.user.episode.watched(id, list_id).then(res => {
|
|
this.$api.user.episode.watched(id, list_id).then(res => {
|
|
|
|
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ shared(id, list_id) {
|
|
|
|
+ this.$api.episode.shared(id, list_id).then(res => {
|
|
|
|
+ this.episode.share_count += 1
|
|
|
|
+ })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
onLoad(options) {
|
|
this.videoContext = uni.createVideoContext('video', this)
|
|
this.videoContext = uni.createVideoContext('video', this)
|
|
this.id = options.id
|
|
this.id = options.id
|
|
- this.listId = options?.list_Id
|
|
|
|
|
|
+ this.listId = options?.list_id
|
|
this.getEpisode()
|
|
this.getEpisode()
|
|
this.checkCollect()
|
|
this.checkCollect()
|
|
this.checkFavorite()
|
|
this.checkFavorite()
|
|
|
|
+ },
|
|
|
|
+ onShareAppMessage(res) {
|
|
|
|
+ if (res.from === 'button') { // 来自页面内分享按钮
|
|
|
|
+ console.log(res.target)
|
|
|
|
+ }
|
|
|
|
+ let options = {
|
|
|
|
+ title: '',
|
|
|
|
+ path: `/pages/episode/play?id=${this.id}`
|
|
|
|
+ }
|
|
|
|
+ if (this.episode) {
|
|
|
|
+ options = {
|
|
|
|
+ title: this.episode.name,
|
|
|
|
+ path: `/pages/episode/play?id=${this.id}`,
|
|
|
|
+ imageUrl: this.episode.cover_img,
|
|
|
|
+ desc: this.episode.name,
|
|
|
|
+ success() {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return options
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -366,7 +406,7 @@ export default {
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
color: $info-color;
|
|
color: $info-color;
|
|
border-radius: 20rpx;
|
|
border-radius: 20rpx;
|
|
- z-index: 100;
|
|
|
|
|
|
+ z-index: 999;
|
|
transition: .3s;
|
|
transition: .3s;
|
|
&.episode{
|
|
&.episode{
|
|
bottom: 700rpx;
|
|
bottom: 700rpx;
|
|
@@ -436,6 +476,16 @@ export default {
|
|
&:nth-child(3n){
|
|
&:nth-child(3n){
|
|
margin-right: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
+ .playing{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ background: rgba(0,0,0,.5) url("/static/image/playing.png") no-repeat center;
|
|
|
|
+ background-size: 40rpx;
|
|
|
|
+ z-index: 2;
|
|
|
|
+ }
|
|
image{
|
|
image{
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 260rpx;
|
|
height: 260rpx;
|
|
@@ -448,7 +498,7 @@ export default {
|
|
color: $default-color;
|
|
color: $default-color;
|
|
padding: 20rpx 0;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
text-align: center;
|
|
- background: rgba(0,0,0,.5);
|
|
|
|
|
|
+ background: rgba(0,0,0,.3);
|
|
z-index: 1;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.lock{
|
|
.lock{
|
|
@@ -457,7 +507,7 @@ export default {
|
|
left: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
right: 0;
|
|
- background: rgba(0,0,0,.7);
|
|
|
|
|
|
+ background: rgba(0,0,0,.5);
|
|
z-index: 2;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|