|
| xqd
@@ -14,6 +14,7 @@
|
|
|
</view>
|
|
|
<!--按钮-->
|
|
|
<view class="status-bar dir-top-wrap main-center">
|
|
|
+ <!--喜欢-->
|
|
|
<view
|
|
|
class="item fav dir-top-wrap main-center cross-center"
|
|
|
:class="{active: isFav}"
|
|
| xqd
@@ -22,6 +23,7 @@
|
|
|
<u-icon name="heart-fill" size="58rpx" :color="isFav?$colors.primaryColor:$colors.defaultColor" />
|
|
|
<text>{{ episode.user_favorite_count }}</text>
|
|
|
</view>
|
|
|
+ <!--收藏-->
|
|
|
<view
|
|
|
class="item collect dir-top-wrap main-center cross-center"
|
|
|
:class="{active: isCollect}"
|
|
| xqd
@@ -30,7 +32,7 @@
|
|
|
<u-icon name="star-fill" size="58rpx" :color="isCollect?$colors.primaryColor:$colors.defaultColor" />
|
|
|
<text>{{ episode.user_collect_count }}</text>
|
|
|
</view>
|
|
|
-
|
|
|
+ <!--分享-->
|
|
|
<view class="item share dir-top-wrap main-center cross-center">
|
|
|
<button open-type="share" />
|
|
|
<u-icon name="share-fill" size="58rpx" :color="$colors.defaultColor" />
|
|
| xqd
@@ -49,16 +51,16 @@
|
|
|
<view v-if="isPlaying" class="progress-container">
|
|
|
<view class="progress" :style="{width: progress+'%'}" />
|
|
|
</view>
|
|
|
+ <!--视频容器-->
|
|
|
<video
|
|
|
id="video"
|
|
|
- :show-play-btn="playBtn"
|
|
|
- :show-fullscreen-btn="fullscreenBtn"
|
|
|
- :controls="controls"
|
|
|
+ :show-play-btn="video.playBtn"
|
|
|
+ :show-fullscreen-btn="video.fullscreenBtn"
|
|
|
+ :controls="video.controls"
|
|
|
object-fit="contain"
|
|
|
style="width: 100%;height: 100%;"
|
|
|
:poster="episode.cover_img"
|
|
|
:src="src"
|
|
|
- @binderror="binderror"
|
|
|
@timeupdate="timeupdate"
|
|
|
/>
|
|
|
</view>
|
|
| xqd
@@ -75,6 +77,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="episode-container dir-top-wrap">
|
|
|
+ <!--分集 横向滚动-->
|
|
|
<scroll-view
|
|
|
class="header-box dir-left-nowrap cross-center"
|
|
|
scroll-x
|
|
| xqd
@@ -88,6 +91,7 @@
|
|
|
@click="episodesIndex=index"
|
|
|
>{{ item.title }}</view>
|
|
|
</scroll-view>
|
|
|
+ <!--几集选择-->
|
|
|
<view class="content dir-left-wrap main-left">
|
|
|
<view
|
|
|
v-for="(item, index) in episodes[episodesIndex].lists"
|
|
| xqd
@@ -97,63 +101,92 @@
|
|
|
>
|
|
|
<image :src="episode.cover_img" />
|
|
|
<text>第{{ item.sort }}集</text>
|
|
|
- <view v-if="activeIndex === item.index" class="playing" />
|
|
|
- <view v-if="!item.is_free" class="lock main-center cross-center">
|
|
|
+ <view v-if="activeIndex === item.index && isPlaying" class="playing" />
|
|
|
+ <view v-if="!item.is_free && buyRecord.indexOf(item.id) === -1" class="lock main-center cross-center">
|
|
|
<u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <!--toast-->
|
|
|
- <view
|
|
|
- v-if="toast.show"
|
|
|
- class="toast dir-top-wrap main-center cross-center"
|
|
|
- :class="toast.status"
|
|
|
- >
|
|
|
- <u-icon
|
|
|
- :name="toast.status === 'success' ? 'checkmark-circle' : 'close-circle'"
|
|
|
- :color="toast.status === 'success' ? $colors.primaryColor : $colors.defaultColor"
|
|
|
- size="80rpx"
|
|
|
+ <!--toast-->
|
|
|
+ <view
|
|
|
+ v-if="toast.show"
|
|
|
+ class="toast dir-top-wrap main-center cross-center"
|
|
|
+ :class="toast.status"
|
|
|
+ >
|
|
|
+ <u-icon
|
|
|
+ :name="toast.status === 'success' ? 'checkmark-circle' : 'close-circle'"
|
|
|
+ :color="toast.status === 'success' ? $colors.primaryColor : $colors.defaultColor"
|
|
|
+ size="80rpx"
|
|
|
+ />
|
|
|
+ <text>{{ toast.text }}</text>
|
|
|
+ </view>
|
|
|
+ <!--购买弹窗-->
|
|
|
+ <u-modal
|
|
|
+ :show="modal.show"
|
|
|
+ :content="`确定购买【第${modal.item.sort}集】？`"
|
|
|
+ show-cancel-button
|
|
|
+ @confirm="handleBuy"
|
|
|
+ @cancel="modal.show = false"
|
|
|
+ />
|
|
|
+ <!--充值-->
|
|
|
+ <recharge
|
|
|
+ :show.sync="rechargeShow"
|
|
|
+ type="play"
|
|
|
+ mode="bottom"
|
|
|
+ :episode="episode"
|
|
|
+ :list="modal.item"
|
|
|
/>
|
|
|
- <text>{{ toast.text }}</text>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import Recharge from '../../components/Recharge/index'
|
|
|
export default {
|
|
|
name: 'Play',
|
|
|
+ components: { Recharge },
|
|
|
data() {
|
|
|
return {
|
|
|
id: null,
|
|
|
listId: null,
|
|
|
isPlaying: false,
|
|
|
videoContext: null,
|
|
|
- controls: false,
|
|
|
- fullscreenBtn: false,
|
|
|
- playBtn: false,
|
|
|
progress: 0,
|
|
|
episode: null,
|
|
|
activeIndex: 0,
|
|
|
loading: true,
|
|
|
isCollect: false,
|
|
|
isFav: false,
|
|
|
+ video: {
|
|
|
+ controls: false,
|
|
|
+ fullscreenBtn: false,
|
|
|
+ playBtn: false
|
|
|
+ },
|
|
|
toast: {
|
|
|
status: 'success',
|
|
|
text: '收藏成功',
|
|
|
show: false
|
|
|
},
|
|
|
footerShow: false,
|
|
|
- episodesIndex: 0
|
|
|
+ episodesIndex: 0,
|
|
|
+ buyRecord: [],
|
|
|
+ modal: {
|
|
|
+ show: false,
|
|
|
+ item: {}
|
|
|
+ },
|
|
|
+ rechargeShow: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+ ...mapState({
|
|
|
+ userInfo: seate => seate.user.info
|
|
|
+ }),
|
|
|
src() {
|
|
|
- if (this.episode) {
|
|
|
- return this.episode.lists[this.activeIndex].url
|
|
|
- }
|
|
|
+ if (!this.episode) return ''
|
|
|
+ return this.episode.lists[this.activeIndex].url
|
|
|
},
|
|
|
episodes() {
|
|
|
const list = []
|
|
| xqd
@@ -183,18 +216,52 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 播放进度
|
|
|
timeupdate({ detail }) {
|
|
|
// currentTime, duration
|
|
|
if (detail.duration) {
|
|
|
this.progress = (detail.currentTime / detail.duration * 100).toFixed(2)
|
|
|
}
|
|
|
},
|
|
|
+ // 播放
|
|
|
handlePlay() {
|
|
|
+ const item = this.episode.lists[this.activeIndex]
|
|
|
+ this.modal.item = item
|
|
|
+ // 检查是否购买
|
|
|
+ if (!this.checkBeforePlay(item)) {
|
|
|
+ // 余额是否购买
|
|
|
+ if (!this.checkOverage(item)) {
|
|
|
+ this.rechargeShow = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.modal.show = true
|
|
|
+ this.footerShow = true
|
|
|
+ return
|
|
|
+ }
|
|
|
this.isPlaying = true
|
|
|
this.videoContext.play()
|
|
|
this.watched(this.id, this.listId)
|
|
|
},
|
|
|
+ // 暂停
|
|
|
+ handlePause() {
|
|
|
+ if (!this.isPlaying) return
|
|
|
+ this.isPlaying = false
|
|
|
+ this.videoContext.pause()
|
|
|
+ },
|
|
|
+ // 选择剧集
|
|
|
handleSelectEpisode(index) {
|
|
|
+ const item = this.episode.lists[index]
|
|
|
+ this.modal.item = item
|
|
|
+ // 检查是否购买
|
|
|
+ if (!this.checkBeforePlay(item)) {
|
|
|
+ // 余额是否购买
|
|
|
+ if (!this.checkOverage(item)) {
|
|
|
+ this.rechargeShow = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.modal.show = true
|
|
|
+ return
|
|
|
+ }
|
|
|
this.activeIndex = index
|
|
|
this.footerShow = false
|
|
|
this.$loading()
|
|
| xqd
@@ -205,22 +272,16 @@ export default {
|
|
|
this.watched(this.id, this.episode.lists[this.activeIndex].id)
|
|
|
}, 1000)
|
|
|
},
|
|
|
- handlePause() {
|
|
|
- if (!this.isPlaying) return
|
|
|
- this.isPlaying = false
|
|
|
- this.videoContext.pause()
|
|
|
- },
|
|
|
+ // 获取剧集详情
|
|
|
getEpisode() {
|
|
|
this.loading = true
|
|
|
this.$api.episode.detail(this.id).then(res => {
|
|
|
this.loading = false
|
|
|
this.episode = res.data
|
|
|
- console.log('-->data', this.listId)
|
|
|
if (this.listId) {
|
|
|
this.episode.lists.forEach((obj, index) => {
|
|
|
if (parseInt(this.listId) === parseInt(obj.id)) {
|
|
|
this.activeIndex = index
|
|
|
- console.log('-->data', this.activeIndex)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
| xqd
@@ -228,11 +289,13 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 检查是否收藏当前剧集
|
|
|
checkCollect() {
|
|
|
this.$api.user.collect.check(this.id).then(res => {
|
|
|
this.isCollect = res.data
|
|
|
})
|
|
|
},
|
|
|
+ // 收藏相关 处理
|
|
|
handleCollect() {
|
|
|
const method = this.isCollect ? 'destroy' : 'add'
|
|
|
const num = this.isCollect ? -1 : 1
|
|
| xqd
@@ -246,11 +309,13 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 检查是否喜欢当前短剧
|
|
|
checkFavorite() {
|
|
|
this.$api.user.favorite.check(this.id).then(res => {
|
|
|
this.isFav = res.data
|
|
|
})
|
|
|
},
|
|
|
+ // 喜欢剧集 处理
|
|
|
handleFavorite() {
|
|
|
const method = this.isFav ? 'destroy' : 'add'
|
|
|
const num = this.isFav ? -1 : 1
|
|
| xqd
@@ -264,25 +329,62 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ // 观看记录
|
|
|
watched(id, list_id) {
|
|
|
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
|
|
|
})
|
|
|
+ },
|
|
|
+ // 当前剧集购买记录
|
|
|
+ async getBuyRecord() {
|
|
|
+ await this.$api.user.episode.buyRecord(this.id).then(res => {
|
|
|
+ this.buyRecord = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 购买
|
|
|
+ handleBuy() {
|
|
|
+ this.$loading('购买中...')
|
|
|
+ this.$api.user.episode.buyHandle(this.id, this.modal.item.id).then(res => {
|
|
|
+ this.$hideLoading()
|
|
|
+ if (typeof res.overage !== 'undefined') {
|
|
|
+ this.rechargeShow = true
|
|
|
+ } else {
|
|
|
+ this.$u.toast('购买成功')
|
|
|
+ this.modal.show = false
|
|
|
+ this.getBuyRecord()
|
|
|
+ this.$api.user.info().then(res => {
|
|
|
+ this.$store.dispatch('user/info', res.data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$hideLoading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 播放前检查是否购买/免费
|
|
|
+ checkBeforePlay(item) {
|
|
|
+ return item.is_free || (!item.is_free && this.buyRecord.indexOf(item.id) !== -1)
|
|
|
+ },
|
|
|
+ // 检查余额是否足够支付
|
|
|
+ checkOverage(item) {
|
|
|
+ return this.userInfo.info.integral >= item.sale_price
|
|
|
}
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
+ async onLoad(options) {
|
|
|
this.videoContext = uni.createVideoContext('video', this)
|
|
|
this.id = options.id
|
|
|
this.listId = options?.list_id
|
|
|
+ await this.getBuyRecord()
|
|
|
this.getEpisode()
|
|
|
this.checkCollect()
|
|
|
this.checkFavorite()
|
|
|
},
|
|
|
+ // 分享
|
|
|
onShareAppMessage(res) {
|
|
|
if (res.from === 'button') { // 来自页面内分享按钮
|
|
|
console.log(res.target)
|
|
| xqd
@@ -297,8 +399,8 @@ export default {
|
|
|
path: `/pages/episode/play?id=${this.id}`,
|
|
|
imageUrl: this.episode.cover_img,
|
|
|
desc: this.episode.name,
|
|
|
- success() {
|
|
|
-
|
|
|
+ success: res => {
|
|
|
+ this.shared(this.id, this.listId)
|
|
|
}
|
|
|
}
|
|
|
}
|
