zhiyu_uni_duanju/pages/video/index.nvue

<template>
	<view class="content">
		<u-navbar :title="topTitle" @leftClick="leftClick" titleStyle="color:#fff;" bgColor="#000" leftIconColor="#fff"
			:autoBack="false">
		</u-navbar>
		<swiper :style="'width: '+ windowWidth +'px; height:100vh; background-color: #000;'" class="swiper"
			:circular='false' @change="swiperChange" :current="swiperCurrent" :vertical="true" duration="200">
			<block v-for="content in videoInfo.updated_episode_num">
				<swiper-item :key="content">
					<view :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
						<!-- @controlstoggle="controlstoggle" -->
						<video v-if="isShowVideo(content)" autoplay :key="content" id="myVideo" :controls="controls"
							:loop="!isplay" preload="auto" :enable-progress-gesture="true" :show-center-play-btn="false"
							:show-loading="false" :show-fullscreen-btn="false" @ended="ended" @click="tapVides()"
							:style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
							:src="currentVideoInfo.video_url" class="tsvideo">
						</video>
						<view v-if="isqp" class="userInfo">
							<!-- 2.点赞 -->
							<view style="opacity: 0.9; margin-top: 17px;">
								<image v-if="currentVideoInfo.is_zan" src="@/static/aixinRed.png" @click="myLike(2)"
									style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
								<image v-else src="@/static/aixin.png" @click="myLike(1)"
									style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
								<text
									style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;">{{currentVideoInfo.total_zan}}</text>
							</view>
							<!-- 3.分享 -->
							<!-- <view style="opacity: 0.9; margin-top: 17px;">
							<image src="@/static/share-fill.png"
								style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
							<text
								style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
							<button open-type="share"
								style="position: absolute; background: none; width: 100%; height: 100%;"
								@click.stop="share"></button>
						</view> -->
							<!-- 4.追剧 -->
							<view class="comment" style="opacity: 0.9; margin-top: 17px;">
								<view v-if="videoInfo.is_binge_watch" @click="unBingewatch">
									<image src="@/static/scRed.png"
										style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
									<text
										style="color: #ff0000; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">已追</text>
								</view>
								<view v-else @click="bingewatch">
									<image src="@/static/sc.png"
										style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
									<text
										style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">追剧</text>
								</view>
							</view>

						</view>
						<!-- 最底下的文字部分 -->
						<view v-if="isqp" class="contentcd" @click.stop="sellxj()">
							<text class="userName">《{{videoInfo.name}}》</text>
							<text class="userName">更新到第{{videoInfo.updated_episode_num}}集</text>
							<text class="userName">|</text>
							<text class="userName">选集</text>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="true">
			<view v-if="fenji==1" class="pop-my">
				<view class="ju-top">
					<view style="display: flex; flex-direction: column; ">
						<view style="display: flex; flex-direction: column;">
							<view style="display: flex; flex-direction: column;">
								<view class="utabs-top">
									<u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
										:inactiveStyle="inactiveStyle" class="utabs-top" :list="list1"
										:current="current"></u-tabs>
								</view>
								<view class="ju-top-title">
									{{videoInfo.name}}
								</view>
								<view class="ju-top-update"> 已更新至{{videoInfo.updated_episode_num}}集 </view>
							</view>
							<u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
								:inactiveStyle="inactiveStyle" :current="tabcurrent" :list="labelList"
								@click="labelListClick"></u-tabs>
						</view>
						<view class="down" @click="down">
							<text class="down-text">收起</text>
							<image class="down-img" src="@/static/img/index/down.png">
							</image>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-my" :scroll-y="true" :scroll-top="scrollTop">
					<view class="ju-wrapper">
						<block v-for="content in labelList[tabcurrent].content">
							<view class="ju-content" :class="activeIndex ==content?'active':'' "
								@click="playTest(content)">
								<!-- <view :class="isShowUpdate(content)?'lock-wrapper-no':'lock-wrapper'" -->
								<view class="lock-wrapper" v-if="isShowUpdate(content)">
									<text class="update-title">待更新</text>
								</view>
								<text class="title">第{{content}}集 </text>
								<view class="lock-wrapper" v-if="isShowVip(content)">
									<image class="lock-img" src="@/static/shilu-login/2.png"></image>
								</view>
							</view>
						</block>
					</view>
					<view style="width: 1px; height: 1px; margin-top: 30px;"></view>
				</scroll-view>
			</view>
			<view v-if="fenji==2"
				:style="'width: '+ windowWidth +'px;height:500px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
				<view class="charge-wrapper">
					<view class="top">
						<text class="charge-title">充值购买后可继续观看{{topTitle}} </text>
						<text class="charge-info">为保护创作者权益，当前内容需要付费观看。</text>
						<view class="charge-coin">
							<text class="ji">本集:</text>
							<text class="bi">{{videoInfo.charge_coin}}k币</text>
						</view>
					</view>
					<view class="bottom">
						<text></text>
						<text></text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<script>
	import {
		getVideoInfo,
		videoEpisodePlay,
		videoEpisodeZan,
	} from '@/common/apis/video.js';
	import {
		delShelf,
		storeshelf
	} from '@/common/apis/zju.js'
	import configs from "@/common/config.js"
	export default {
		data() {
			return {
				limitPage: 15,
				top_height: 0,
				episode: 1,
				swiperCurrent: 0,
				videoContext: '',
				currentVideoInfo: {},
				activeStyle: {
					color: '#f95d27',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#606266',
					transform: 'scale(1)'
				},
				activeIndex: 1,
				tabcurrent: 0,
				videoInfo: {},
				labelList: [],
				list1: [{
					name: '当前剧集',
				}, {
					name: '相似好剧',
				}],
				sharedata: {
					type: 2,
					strShareUrl: "",
					strShareTitle: "分享标题",
					strShareSummary: "分享总结",
					strShareImageUrl: ""
				},
				isShow: true,
				fenji: 0,
				controls: true,
				windowWidth: 0,
				windowHeight: 0,
				current: 0,
				isplay: true, //是否自动播放下一个视频
				duration: 500,
				isqp: true,
				urls: configs.webUrl,
				scrollTop: 0,
				video_id: 0,
				safeArea: 0,
				ttuop: 0,
				heightxw: 100,
			};
		},
		computed: {
			isShowVideo(item) {
				return (item) => {
					return this.swiperCurrent == item && this.isShow
				}
			},
			isShowVip(item) {
				return (item) => {
					return item >= this.videoInfo.charge_sequence && item <= this.videoInfo.updated_episode_num
				}
			},
			isShowUpdate(item) {
				return (item) => {
					return item > this.videoInfo.updated_episode_num
				}
			},
			topTitle() {
				return `《${this.videoInfo.name}》 第${this.episode}集`
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		mounted() {
			this.initSwiperData(this.swiperCurrent + 1)
			getVideoInfo({
				video_id: this.video_id
			}).then(res => {
				// console.log(res, 'getVideoInfogetVideoInfogetVideoInfo')
				this.videoInfo = res.data
				this.initTabs();
			})
		},
		onLoad(e) {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.top_height = res.statusBarHeight; //data中 声明 top_height:0 
				}
			});
			if (e.video_id) {
				this.video_id = Number(e.video_id)
			}
			uni.getSystemInfo({
				success: res => {
					this.safeArea = res.safeAreaInsets.bottom;
					if (this.safeArea > 0) {
						this.heightxw = 97
					}
				}
			})
			// #ifdef MP-TOUTIAO
			this.ttuop = 64
			// #endif
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
			console.log(this.windowHeight)
		},
		onShow() {

		},
		onShareAppMessage: function(res) {
			// #ifdef MP-WEIXIN
			var href = '/pages/video/index?video_id=' + this.video_id
			console.log(res)
			let that = this;
			const obj = {
				title: "发送给好友",
				imageUrl: '',
				path: href,
				success: function(res) {
					console.log(res, "转发成功")
				},
				fail: function(res) {
					wx.showToast({
						title: '发送失败',
						icon: 'none'
					})
				}
			}
			return obj
			// #endif
		},
		watch: {
			activeIndex(newVal, oldVal) {
				let index = this.labelList.findIndex(el => el.content.includes(newVal))
				this.tabcurrent = index
			}
		},
		onBackPress() {},
		methods: {
			bingewatch() {
				storeshelf(this.video_id).then(res => {
					console.log(res, 'storeshelfstoreshelfstoreshelf')
					this.videoInfo.is_binge_watch = !Boolean(this.videoInfo.is_binge_watch)
					uni.showToast({
						title: '追剧成功',
						duration: 1000,
						icon: 'none'
					});
				})
			},
			unBingewatch() {
				delShelf(this.video_id).then(res => {
					console.log(res, 'delShelfdelShelfdelShelfdelShelfdelShelf')
					this.videoInfo.is_binge_watch = !Boolean(this.videoInfo.is_binge_watch)
				})
			},
			leftClick(e) {
				if (!this.videoInfo?.is_binge_watch) {
					uni.showModal({
						title: '加入追剧',
						content: '喜欢就加入追剧吧',
						confirmText: '加入追剧',
						confirmColor: '#FFA500',
						cancelText: '不用了',
						success: (res) => {
							if (res.confirm) {
								this.bingewatch()
								uni.navigateBack()
								// 用户点击了确定按钮
								// 执行加入追剧的逻辑
							} else if (res.cancel) {
								// 用户点击了取消按钮
								// 执行取消逻辑
								uni.navigateBack()
							}
						}
					});
				} else {
					uni.navigateBack()
				}
			},
			myLike(like) {
				videoEpisodeZan({
					episode_id: this.currentVideoInfo.id,
					zan: like
				}).then(res => {
					console.log(res, 'VideoEpisodeZanVideoEpisodeZanVideoEpisodeZan')
					this.$nextTick(() => {
						this.currentVideoInfo.is_zan = !Boolean(this.currentVideoInfo.is_zan)
						if (this.currentVideoInfo.is_zan) {
							this.currentVideoInfo.total_zan++
						} else {
							this.currentVideoInfo.total_zan--
						}
					})

				})
			},
			initTabs() {
				function innit(i, num) {
					let arr = [];
					for (i; i <= num; i++) {
						arr.push(i)
					}
					return arr
				}
				const pageSize = this.limitPage;
				const total = this.videoInfo.total_episode_num;
				const pageCount = Math.ceil(total / pageSize);
				for (let i = 0; i < pageCount; i++) {
					const start = i * pageSize + 1;
					const end = i === pageCount - 1 ? total : (i + 1) * pageSize;
					let label;
					if (i === pageCount - 1) {
						if (start === total) {
							label = `${total}`
						} else {
							label = `${start}-${total}`
						}
					} else {
						label = `${start}-${end}`
					}
					let index;
					if (label.split('-')[1]) {
						index = label.split('-')[1]
					} else {
						index = total
					}
					this.labelList.push({
						name: label,
						page: pageCount,
						content: innit(start, index)
					})
				}

			},
			playTest(item) {
				console.log(item)
				if (this.isShowVip(item)) {
					this.fenji = 2
					this.activeIndex = ''
				} else if (this.isShowUpdate(item)) {
					this.activeIndex = ''
					uni.showToast({
						title: '剧集暂未更新',
						duration: 1000,
						icon: 'none'
					});
				} else {
					this.activeIndex = item;
					this.swiperCurrent = item - 1;
					this.episode = this.swiperCurrent
					// this.initSwiperData(item)
					this.down();
				}
			},
			labelListClick(item) {
				this.tabcurrent = item.index
				console.log('itemitemitemitemitem', item);
			},
			share() {
				var href = '/pages/video/index?video_id=' + this.video_id
				// #ifdef H5
				uni.setClipboardData({
					data: this.urls + '/h5/#' + href,
					complete() {
						uni.showToast({
							title: "分享连接已复制到剪贴板"
						})
					}
				})
				// #endif
				// #ifndef H5
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: href,
					title: '分享标题',
					summary: '分享总结',
					imageUrl: '',
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
				// #endif
			},
			down() {
				this.$refs.select.close();
			},
			sellxj() {
				this.fenji = 1
				this.$refs.select.open('bottom');
				this.$nextTick(() => {
					let num1 = (this.windowHeight / 1.6) * 0.85;
					let num2 = num1 / 4.78;
					this.scrollTop = num2 * Number(this.k);
				})
			},
			tapVideoHover(index, pays) {
				this.videoContext.play()
				// this.$refs.select.open('bottom');
			},
			tapVides() {
				this.isqp = !this.isqp
			},
			ended() {
				//console.log('isplay----',this.isplay)
				// 1.播放当前视频结束时触发，自动切换下一个视频
				if (this.isplay) {
					if (this.displayIndex < 2) {
						this.current = this.displayIndex + 1
					} else {
						this.current = 0
					}
					this.isqp = true
					console.log('显示swiper Index:', this.displayIndex)
				}
			},
			initSwiperData(originIndex) {
				this.episode = originIndex;
				this.isqp = true
				videoEpisodePlay({
					video_id: this.video_id,
					sequence: originIndex
				}).then(res => {
					if (res.code == 0) {
						this.currentVideoInfo = res.data
						this.activeIndex = this.episode;
						this.isShow = true
					} else if (res.code == 500101) {
						console.log(this.currentVideoInfo, 'res.code == 500101res.code == 500101')
						this.currentVideoInfo.video_url = ""
						this.isShow = false
						this.isqp = true
						this.videoContext.stop()
						this.fenji = 2
						this.$refs.select.open('bottom');
						// this.currentVideoInfo = {}
					} else {
						this.currentVideoInfo.video_url = ""
						this.isShow = false
					}

					console.log(res, 'getVideoEpisodePlaygetVideoEpisodePlay')
				})
			},
			/**
			 * swiper滑动时候
			 */
			swiperChange(event) {
				const {
					current
				} = event.detail;
				this.swiperCurrent = current
				console.log(this.swiperCurrent, 'this.swiperCurrentthis.swiperCurrent')
				this.initSwiperData(current + 1)
			},
			controlstoggle(e) {
				console.log(e.detail.show);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background: #000000;
	}

	.userInfo {
		position: absolute;
		z-index: 99;
		bottom: 30%;
		right: 10px;
		width: 100rpx;
		text-align: center;
		flex-direction: column;

	}

	.contentcd {
		background-color: rgba(255, 255, 255, .3);
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		padding: 15rpx;
		border-radius: 8px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		color: #ffffff;
		margin: 0 auto;
	}

	.userName {
		color: #fff;
		font-size: 30rpx;
		color: #ffffff;
		margin: 0 6rpx;
	}

	.tsvideo {
		animation: showDivAni 2s 1;
	}

	@keyframes showDivAni {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>

<style lang="scss" scoped>
	.charge-wrapper {
		margin-top: 15px;
		width: 100%;

		.top {
			width: 100%;
			display: flex;
			align-items: center;

			.charge-title {
				font-size: 18px;
				font-weight: bold;
			}

			.charge-info {
				font-size: 15px;
				color: #868686;
				margin: 8px 0;
			}

			.charge-coin {
				display: flex;
				flex-direction: row;

				.ji {
					font-size: 18px;
				}

				.bi {
					font-size: 18px;
					color: $accent-color;
				}
			}
		}
	}

	.down {
		display: flex;
		flex-direction: row;
		width: 60px;
		height: 30px;
		margin-top: 5px;
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);

		.down-text {
			font-size: 12px;
			color: #000;
		}

		.down-img {
			width: 35rpx;
			height: 35rpx;
			object-fit: contain;
		}
	}

	.ju-top {

		// background-color: ;
		.ju-top-title {
			font-size: 16px;
			font-weight: bold;
			color: #000;
			margin-top: 9px;
			height: 22px;
			margin-left: 20px;
			// width: '+ (windowWidth*0.6) +' px;
			overflow: hidden;
		}

		.ju-top-update {
			font-size: 12px;
			color: #000;
			margin-top: 9px;
			height: 22px;
			margin-left: 20px;
		}
	}

	.pop-my {
		background-color: #FFFFFF;
	}

	.scroll-my {
		height: 50vh;
	}

	.ju-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: start;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		// margin: 6rpx;

		.ju-content.active {
			background-color: #ff7f02;
		}

		.ju-content {
			flex-grow: 1;
			position: relative;
			border-radius: 12rpx;
			background-color: #f6f6f6;
			width: 31%;
			height: 25rpx;
			align-items: center;
			justify-content: center;
			padding: 45rpx 68rpx;
			margin: 6rpx;

			.lock-wrapper,
			.lock-wrapper-no {
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				background-color: rgba(0, 0, 0, .3);

				.lock-img {
					position: absolute;
					left: 3rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 50rpx;
					height: 50rpx;
					margin-left: 20rpx;
				}

				.update-title {
					width: fit-content;
					height: fit-content;
					border-radius: 8rpx;
					font-size: 10px;
					padding: 6rpx;
					background-color: #868686;
					color: #fff;
				}
			}

			.lock-wrapper-no {
				background-color: #f6f6f6;
			}

			.title {
				font-size: 16px;
			}
		}
	}

	.utabs-top /deep/ .u-tabs {
		align-items: flex-start;
	}
</style>