play-video-app/pages/play/index.vue

<template>
	<view class="play">
		<video-player v-if="videoUrl" :videoUrl="videoUrl" :initialTime="durationSeconds" @timeUpdate="handleTimeUpdate"></video-player>
		<image v-else :src="videoData.thumbnail" class="cover_img"></image>
		<view class="anthologys_detail">
			<view class="anthology" @click="show = true">
				<view class="ant">
					<image :src="play_img" class="play"></image>
					<text class="ant-text">{{videoData.name}}(1/{{list.length}})</text>
				</view>
				<view class="ant">
					<text>选集</text>
					<pv-icon name="icon-shangla" color='#fff'
						:customStyle="{ fontSize: '32rpx',marginLeft:'8rpx'}"></pv-icon>
				</view>
			</view>
			<!-- <view class="hot">
				<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '32rpx'}"></pv-icon>
				<text>12.8W</text>
			</view> -->

		</view>
		<u-popup :show="show" @close="close" @open="open" safeAreaInsetBottom :round="15">
			<view class="opera">
				<view class="opera-top">
					<view class="title">
						<image class="cover" :src="videoData.thumbnail"></image>
						<view class="name">
							<text>{{videoData.name}}</text>
							<text>共{{list.length}}集</text>
						</view>
					</view>
					<view @click="close">
						<pv-icon name="icon-xiala"
							:customStyle="{ fontSize: '40rpx',fontWeight: 'bold'}"></pv-icon>
					</view>
				</view>
				<view class="serice">
					<!-- <u-tabs :list="tabs" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
                            color: '#62C5C6',
                            transform: 'scale(1)'
                        }" :inactiveStyle="{
                            color: '#000',
                            transform: 'scale(1)'
                        }" itemStyle="padding-left: 0px; padding-right: 20px; height: 34px;">
					</u-tabs> -->
					<view class="numbers">
						<view class="num">
							<view class="num_item" :class="{ num_item_select: item.sort == sort }" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
								<text class="num_text">{{item.sort}}</text>
								<view v-if="item.sort === sort" class="num_play">
									<view></view>
									<view></view>
									<view></view>
								</view>
								<view v-if="!item.isPay" class="lock">
									<pv-icon name="icon-v-locked" color="#A37449"
										:customStyle="{ fontSize: '20rpx',fontWeight: 'bold'}"></pv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isPayShow" @open="openPlay" @close="closePlay" safeAreaInsetBottom :round="15">
			<view class="pay_video">
				<view class="tit flex aic">
					<pv-icon name="icon-v-locked" color="#fff" :customStyle="{ fontSize: '30rpx',fontWeight: 'bold'}"></pv-icon>
					<text class="tips">当前视频没有播放权限</text>
				</view>
				<view class="pays flex jcsa aic">
					<view class="pay_item single" :class="{ pay_item_select: !type }" @click="changeType(0)">
						<text>单集购买</text>
					</view>
					<view class="pay_item all" :class="{ pay_item_select: type }" @click="changeType(1)">
						<text>整集购买</text>
					</view>
				</view>
				<u-button class="btn" type="primary" shape="circle" @click="confirm">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import defaultConfig from '@/config/default.js'
	import { getServerShipVideoUrl,getServerShipVideoList } from '@/apis/index'
	import { buyShipVideo,syncWatchHistory } from '@/apis/video'
	export default {
		data() {
			return {
				id:'',
				type: 0,
				watchVo:{},
				videoData:{},
				sort:0,
				show: false,
				isPayShow: false,
				videoUrl: '', //路径
				play_img: defaultConfig.ossImgUrl + '/playVideo/video/ic_search.png',
				coverImg: 'https://obs-fanxing.obs.cn-east-3.myhuaweicloud.com/retail/main/img_bgtop.png',
				tabs: [{
					name: '1-50',
				}, {
					name: '51-94'
				}],
				list: [],
				shipVideoId:'',
				durationSeconds:'',
			}
		},
		onLoad(params){
			this.id = params.id
			this.videoData = JSON.parse(params.data)
			this.getVideoList(this.id)
		},
		onUnload(){
			this.setWatch()
		},
		methods: {
			toPlay(item){
				if(item.sort === this.sort) return
				this.getUrl(item)
			},
			// 获取视频url
			async getUrl(item){
				if(!item.isPay){
					this.isPayShow = true
					this.shipVideoId = item.id
					return
				}
				const res = await getServerShipVideoUrl(item.id)
				this.sort = item.sort
				this.videoUrl = res
				this.show = false
			},	
			// 查看视频列表
			async getVideoList(id){
				const res = await getServerShipVideoList(id)
				this.watchVo = res.serverVideoWatchVo
				// this.videoUrl = res.serverVideoWatchVo.url
				// this.sort = res.serverVideoWatchVo.sort
				this.list = res.videoVos
				let item
				if(this.watchVo){
					item = this.watchVo
					this.shipVideoId = item.shipVideoId
					this.sort = item.sort
					this.videoUrl = item.url
					this.durationSeconds = item.durationSeconds

				}else{
					item = this.list[0]
					this.getUrl(item)
				}
				
				
			},	
			
			// 购买视频
			async confirm(){
				let params = {
					shipVideoId: this.shipVideoId,
					type: this.type
				}
				const res = await buyShipVideo(params)
				this.isPayShow = false
				this.getVideoList(this.id)
				console.log(res);

			},
			
			// 观看同步
			async setWatch(){
				let params = {
					shipVideoId: this.shipVideoId,
					shipProgramId: this.id,
					durationSeconds: this.durationSeconds
				}
				const res = await syncWatchHistory(params)
			},
			// 获取当前播放时间
			handleTimeUpdate(time){
				this.durationSeconds = time
			},
			// 切换整集/单集
			changeType(type){
				
				if(type == this.type) return
				type?this.type = 1:this.type = 0
			},
			open() {
			},
			close() {
				this.show = false
			},
			closePlay() {
				this.isPayShow = false
				// this.show = true
			},
			openPlay(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.play {
		width: 100%;
		height: 100%;
		.cover_img{
			width: 100%;
			height: 100%;
		}
		.anthologys_detail {
			box-sizing: border-box;
			width: 100%;
			padding: 0 24rpx 0 34rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			position: absolute;
			bottom: calc(70rpx + constant(safe-area-inset-bottom));
			bottom: calc(70rpx);
			z-index: 99;

			.anthology {
				flex-grow: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// height: 72rpx;
				background: #1A1A1A;
				border-radius: 72rpx;
				padding: 16rpx 20rpx;
				font-size: 32rpx;

				// width: 572rpx;
				.ant {
					display: flex;
					align-items: center;

					.ant-text {
						margin-left: 16rpx;
					}
				}

				.play {
					width: 40rpx;
					height: 40rpx;

				}
			}

			.hot {
				width: 150rpx;
				text-align: right;

				text {
					margin-left: 8rpx;
				}
			}
		}

		.opera {
			padding: 20rpx 30rpx;
			.opera-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.title {
					display: flex;

					.cover {
						width: 80rpx;
						height: 108rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.name {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						text:nth-child(1) {
							color: #000;
							font-size: 40rpx;
							font-weight: bold;
						}

						text:nth-child(2) {
							color: #999;
							font-size: 30rpx;
						}
					}
				}
			}

			.serice {
				overflow: hidden;

				.numbers {
					height: 500rpx;
					overflow: scroll;

					.num {
						display: flex;
						flex-wrap: wrap;
						.num_item_select{
							background: #E9F9F9 !important;
							.num_text {
								color: #62C5C6;
							}
						}
						.num_item {
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							width: calc(20% - 20rpx);
							height: 110rpx;
							margin: 10rpx;
							background: #FAFAFA;
							color: #000;
							box-sizing: border-box;
							

							.num_play {
								position: absolute;
								left: 10rpx;
								bottom: 10rpx;
								display: flex;
								align-items: flex-end;

								view {
									width: 6rpx;
									background: #62C5C6;
									margin-right: 6rpx;
									border-radius: 6rpx;
								}

								view:nth-child(1) {
									height: 21rpx;
								}

								view:nth-child(2) {
									height: 16rpx;
								}

								view:nth-child(3) {
									height: 18rpx;
								}
							}

							.lock {
								position: absolute;
								top: 0;
								right: 0;
								width: 40rpx;
								height: 40rpx;
								background: #F9E2B7;
								border-radius: 0rpx 12rpx 0rpx 12rpx;
								// text-align: center;
								// line-height: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}

				}
			}
		}
		.pay_video{
			background: linear-gradient( 180deg, #216CFF 10%, #C7F0FF 50%);
			padding: 30rpx 20rpx;
			// margin-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
            margin-bottom: calc(env(safe-area-inset-bottom)) !important;
			// height: 300rpx;
			.tit{
				color: #fff;
				.tips{
					margin-left: 5rpx;
				}
			}
			.pays{
				margin: 30rpx 0;
				.pay_item{
					background: #fff;
					width: 40%;
					height: 100rpx;
					border-radius: 12rpx;
					text-align: center;
					line-height: 100rpx;
				}
				.pay_item_select{
					background: #216CFF;
					color: #fff;
				}
			}
			.btn{
				// margin-bottom: 30rpx;
			}
		}
	}
</style>