jiuyiUniapp/jiuyi2/components/index/indexVideo.vue

<script setup>
	/**
	 * 首页视频组件
	 * @property {Object} item 视频数据对象
	 * @property {Number} index 当前视频列表索引
	 * @property {Number} current 当前预览索引
	 */

	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		watch,
		defineEmits,
		computed,
		nextTick
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance()
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar.vue'
	// 工具库
	import util from '@/common/js/util';
	// 
	import api from '@/api/index.js';
	// 视频进度条
	import videoProgress from '@/components/index/videoProgress';

	const props = defineProps({
		// 当前视频对象
		item: {
			type: Object,
		},
		// 列表中的视频下标
		index: {
			type: Number,
		},
		// 当前列表的index
		current: {
			type: Number,
		},
		// 当前tab的index
		tabIndex: {
			type: Number,
		},
		// 模式 list列表 detail详情
		mode: {
			type: String,
			default: 'list'
		},
		// 是否我自己 0不是 1是
		isMine: {
			type: [String, Number],
			default: 0,
		},
		width: {
			type: Number,
			default: 0,
		},
		height: {
			type: Number,
			default: 0,
		},
		// 是否统计 0不是 1是
		statistic: {
			type: [String, Number],
			default: 0,
		},
	})

	// 
	const emit = defineEmits(['showTime', 'showComment', 'showCollect', 'showFastCollect', 'showShareFirend', 'onPlay',
		'onPause', 'like', 'detailMenu', 'onEnd', 'longtap', 'dataCenter', 'showProduct', 'proBuy'
	])

	// 视频上下文对象
	const videoCtx = ref(null)
	// 是否播放
	const playState = ref(true)
	// 是否显示快速收藏列表
	const collectFirst = ref(false)
	// 视频时间
	const videoTime = ref({
		// 总长
		duration: 0,
		// 当前时间
		currentTime: 0,
	})
	// 记录点击的数组
	const tapList = reactive([])
	// 点击时间戳
	const tapTimer = ref(null)
	// 是否在计数
	const isTap = ref(false)
	// 长按
	const isLong = ref(false)
	// 收藏按钮判定
	const collectBtnActive = ref(false)
	// 是否显示广告
	const showAd = ref(false)
	// 设置时间
	const alarmTime = computed(() => {
		let result = uni.$store.state.alarmTime
		return result
	})
	// 填充
	const fit = computed(() => {
		const ratio1 = parseInt(props.width) / parseInt(props.height)
		const ratio2 = props.item.breadth / props.item.height
		let result = 'contain'
		if (Math.abs(formatNumber(ratio2) - formatNumber(ratio1)) < 1) result = 'cover'
		return result
	})
	const userinfo = uni.$store.state.userinfo

	watch(() => props.current, (nV) => {
		if (nV == props.index) play()
		else pause()
	})

	// 挂载后调用
	onMounted(() => {
		// 视频上下文对象
		videoCtx.value = uni.createVideoContext(`video${props.tabIndex}${props.index}`)
	})

	// 格式化
	function formatNumber(result) {
		result = parseFloat(result) * 10
		return result
	}

	// 手指触摸视频容器
	function onTouchStart() {
		//  是否计数
		if (isTap.value) {
			return
			tapList.length = 0
			changeVideoPlay()
		} else {
			isTap.value = true
			// 时间
			let time = new Date().getTime()
			tapList.push(time)
		}
		clearTimeout(tapTimer.value)
	}

	// 手指离开视频容器
	function onTouchEnd() {
		// 如果不是重复点击的状态
		if (isTap.value) {
			isTap.value = false

			let time = new Date().getTime()
			let diff = time - tapList[tapList.length - 1]

			// 判断长按
			if (diff > 350) {
				// 取消视频倍速播放的状态
				if (isLong.value) {
					isLong.value = false
					videoCtx.value.playbackRate(1)
				}
				// 清空计数
				tapList.length = 0
				return
			}

			// 
			tapTimer.value = setTimeout(() => {
				let a = tapList.length
				tapList.length = 0
				// 目标点赞
				let targetLike = {
					0: 1,
					1: 0
				} [props.item.isLike]

				switch (a) {
					case 1:
						changeVideoPlay()
						break;
					case 2:
						console.log('公开赞')
						if (props.item.likeType == 0) {
							emit('like', {
								likeType: 0,
								index: props.index,
								isLike: targetLike
							})
						} else {
							emit('like', {
								likeType: 0,
								index: props.index,
								isLike: 0
							})
						}
						break;
					case 3:
						console.log('隐私赞')
						if (props.item.likeType == 1) {
							emit('like', {
								likeType: 1,
								index: props.index,
								isLike: targetLike
							})
						} else {
							emit('like', {
								likeType: 1,
								index: props.index,
								isLike: 0
							})
						}
						break;
				}
			}, 200)
		}
	}

	// 手指中断视频容器
	function onTouchCancel() {
		isTap.value = false
		tapList.length = 0
		clearTimeout(tapTimer.value)
	}

	// 切换视频播放
	function changeVideoPlay() {
		// 根据播放状态切换播放暂停
		if (playState.value) pause()
		else play()
	}

	// 视频播放
	function play() {
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		if (props.index != props.current || !['pages/index/index', 'pages/index/videoDetail'].includes(page.route)) return
		videoCtx.value.play()
	}

	// 视频暂停
	function pause() {
		videoCtx.value.pause()
	}

	// 视频播放回调
	function onVideoPlay() {
		playState.value = true
		emit('onPlay')
	}

	// 视频暂停回调
	function onVideoPause() {
		playState.value = false
		emit('onPause')
	}

	// 打开评论
	function handleComment() {
		emit('showComment', props.item)
	}

	// 打开计时闹钟
	function handleTime() {
		emit('showTime')
	}

	// 打开收藏弹窗
	function showCollect() {
		util.isLogin().then(rs => {
			emit('showCollect', props.item)
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone'
			})
		})
	}

	// 切换快速收藏
	function handleCollectFirst(ev) {
		// 获取当前元素的宽高
		const changedTouches = ev.changedTouches[0]
		let x = getNumber(props.width) - getNumber(changedTouches.screenX) + getNumber(changedTouches.pageX)
		let y = getNumber(changedTouches.screenY) - getNumber(changedTouches.pageY)
		emit('showFastCollect', {
			item: props.item,
			position: {
				x,
				y,
			}
		})
		return
	}

	/**
	 * 手指触摸收藏
	 * @param {Object} ev
	 */
	function handleCollectStar(ev) {
		collectBtnActive.value = true

		util.isLogin().then(rs => {
			// 
			setTimeout(() => {
				// 判断是否抬起
				if (!collectBtnActive.value) {
					// 收藏状态
					if (!props.item.isCollect) {
						// 单击出菜单
						handleCollectFirst(ev)
						return
					} else cancelCollect()
				} else {
					setTimeout(() => {
						// 长按出弹窗
						showCollect()
					}, 350)
				}
			}, 350)
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone'
			})
		})
	}

	/**
	 * 手指触摸结束
	 * @param {Object} str
	 */
	function handleCollectEnd() {
		collectBtnActive.value = false
	}

	// 获取数字
	function getNumber(str) {
		let result = Math.floor(Number(str))
		return result
	}

	// 取消收藏
	function cancelCollect() {
		const detail = {
			...props.item
		}

		// 取消收藏
		api.video.deleteVideo({
			data: {
				// 视频id
				videoId: detail.id,
			},
		}).then(rs => {
			if (rs.code == 200) {
				uni.$emit('updateVideo', {
					...detail,
					...rs.data,
				})
				return
			}
			// 
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 分享到好友
	function handleShareFirend() {
		util.isLogin().then(rs => {
			emit('showShareFirend', props.item)
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone'
			})
		})
	}

	/**
	 * 点赞
	 * @param {Number} index 操作的视频下标
	 * @param {Number|String} likeType 点赞类型 0.公开赞  1.隐私赞
	 * @param {Number|String} isLike 0.点赞  1.取消点赞
	 */
	function handleLike(index, likeType, isLike) {
		util.isLogin().then(rs => {
			emit('like', {
				index,
				likeType,
				isLike,
			})
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone'
			})
		})
	}

	/**
	 * 私密赞
	 * @param {Object} index
	 */
	function handlePrivateLike(index) {
		util.isLogin().then(rs => {
			util.alert({
				title: '提示',
				content: '请确认，是否为隐私赞(隐私赞仅自己和作者可见)?',
				confirmText: '隐私赞',
				cancelText: '公开赞',
			}).then(rs => {
				if (rs.confirm) emit('like', {
					index,
					likeType: 1,
					isLike: 0,
				})
				else emit('like', {
					index,
					likeType: 2,
					isLike: 0,
				})
			})
		}).catch(() => {
			uni.navigateTo({
				url: '/pages/login/loginPhone'
			})
		})
	}

	/**
	 * 详情菜单
	 * @param {Object} item
	 */
	function handleDetailMenu(item) {
		emit('detailMenu')
	}

	// 播放变化
	function handleTimeupdate(ev) {
		videoTime.value = ev.detail
		// 如果有商品id 并且 当前播放时间大于商家设定的广告弹出时间
		if (props.item.productId && (videoTime.value.currentTime > props.item.popupTime)) {
			showAd.value = true
		}
		// console.log('videoTime.value', videoTime.value)
	}

	// 进度条拖拽结束
	function onProgressEnd(ev) {
		videoCtx.value.seek(parseInt(ev.time))
	}

	/**
	 * 查看用户主页
	 * @param {Object} item
	 */
	function handleUser(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoHome', {
				userId: item.userId
			})
		})
	}

	// 视频出现缓冲
	function handleWaiting(ev) {
		if (props.index == props.current) play()
		else pause()
	}

	// 长按
	function longtap(ev) {
		if (isLong.value) return
		play()
		isLong.value = true
		videoCtx.value.playbackRate(2)
	}

	// 前往数据中心
	function handleData() {
		emit('dataCenter', props.item)
	}

	// 点击商品广告
	function handleShowProduct() {
		emit('showProduct', props.item)
	}

	// 点击商品广告购买
	function handleProBuy() {
		emit('proBuy', props.item)
	}

	// 
	defineExpose({
		play,
		pause,
		videoTime,
		item: props.item,
		playState,
		videoCtx: () => videoCtx.value,
	})
</script>

<template>
	<view class="container f1 pr" ref="videoBoxRef">
		<!-- 视频层 -->
		<view class="main f1">
			<view class="videoBox f1" @touchmove.stop="" @touchstart="onTouchStart" @touchend="onTouchEnd"
				@touchcancel="onTouchCancel" @longpress="longtap">
				<statusBar />

				<!-- 视频 增加判断防止重复加载 -->
				<template v-if="item.videoUrl">
					<video class="video f1" :id="'video' + tabIndex + index" :src="item.videoUrl"
						:poster="item.coverUrl" :http-cache="true" :show-fullscreen-btn="false"
						:enable-progress-gesture="false" :controls="false" @play="onVideoPlay" @pause="onVideoPause"
						:show-center-play-btn="false" @timeupdate="handleTimeupdate" @waiting="handleWaiting"
						:play-strategy="2" :loop="true" :object-fit="fit" />
				</template>
			</view>

			<!-- 视频进度条 -->
			<view class="videoProgress" @touchmove.stop="" @touchstart.stop="" @touchend.stop="">
				<videoProgress :time="videoTime" @change="onProgressEnd" :viewWidth="width" />
			</view>
		</view>

		<!-- 倍速播放提示 -->
		<view class="speedBox" v-if="isLong">
			<view class="speed ptb5 plr10">
				<text class="f22 cfff">2倍速播放中...</text>
			</view>
		</view>

		<!-- 暂停蒙版 -->
		<view class="pausePanel pfull fmid" v-if="!playState">
			<!-- 暂停按钮 -->
			<image class="pauseImg" src="@/static/pause.png" mode="aspectFit" />
		</view>

		<!-- 右侧操作区 -->
		<view class="panelRight pa t0 b0 r0">
			<statusBar />
			<view class="head"></view>
			<view class="f1 jcr pl5 pt40 pr20">

				<!-- 操作台 -->
				<view class="operate f1">
					<!-- 数据中心 -->
					<view class="item fmid" @click="handleData" v-if="0">
						<view class="col">
							<image class="wh50" src="/static/statistic.png" mode="aspectFit" />
						</view>

						<view class="txt mt20"></view>
					</view>

					<!-- 用户头像 -->
					<navigator :url="util.setUrl('/pages/index/videoHome',{userId:item.userId})" class="item pr mb10">
						<view class="col">
							<image class="wh80 cir" :src="item.avatar" mode="aspectFill" />
							<view class="focus pa" v-if="item.isAttention !== 0">
								<image class="wh40" src="@/static/indexAtt.png" mode="aspectFit" />
							</view>
						</view>
					</navigator>

					<!-- 点赞 -->
					<view class="item">
						<view class="col">
							<view class="pr">
								<template v-if="item.isLike == 0">
									<!-- 公开赞 -->
									<image class="wh50" src="/static/indexLike1.png" mode="aspectFit"
										v-if="item.likeType == 0" @click="handleLike(index,0, 1)" />
									<!-- 私密赞的图标 -->
									<image class="wh50" src="/static/privateLike.png" mode="aspectFit"
										v-else-if="item.likeType == 1" @click="handleLike(index,1,1)" />
								</template>
								<template v-else>
									<image class="wh50" src="/static/indexLike.png" mode="aspectFit"
										@click="handleLike(index, 0, 0)" @longpress="handlePrivateLike(index)" />
								</template>
							</view>

							<!-- 只有公开赞显示点赞数 -->
							<view class="txt mt10" v-if="item.isLike && item.likeType == 0">
								<text class="text">{{ item.likeCount }}</text>
							</view>
							<view class="txt mt10" v-else>
								<text class="text">点赞</text>
							</view>
						</view>
					</view>

					<!-- 留言 -->
					<view class="item" @click="handleComment">
						<view class="col">
							<image class="wh50" src="@/static/indexMsg.png" mode="aspectFit" />
							<view class="txt mt10">
								<text class="text">{{ item.reviewCount }}</text>
							</view>
						</view>
					</view>

					<!-- 收藏 -->
					<view class="item df fdr">
						<view class="col" @touchstart="handleCollectStar" @touchend="handleCollectEnd" ref="collectBtn">
							<image class="wh50" src="@/static/indexCollect1.png" mode="aspectFit"
								v-if="item.isCollect" />
							<image class="wh50" src="@/static/indexCollect.png" mode="aspectFit" v-else />
							<view class="txt mt10">
								<text class="text">收藏</text>
								<!-- <text class="text">{{ item.collectCount }}</text> -->
							</view>
						</view>
					</view>

					<!-- 分享 -->
					<view class="item" @click="handleShareFirend">
						<view class="col">
							<image class="wh50" src="@/static/indexShare.png" mode="aspectFit" />
							<view class="txt mt10">
								<text class="text">分享</text>
							</view>
						</view>
					</view>

					<!-- 闹钟 -->
					<view class="item money" @click="handleTime" v-if="mode == 'list'">
						<view class="col">
							<image class="wh80" src="/static/indexMoney1.png" mode="aspectFit" v-if="alarmTime" />
							<image class="wh80" src="/static/indexMoney.png" mode="aspectFit" v-else />
						</view>
					</view>

					<!-- 详情菜单 -->
					<view class="item money" @click="handleTime" v-if="mode == 'detail' && isMine == 1">
						<view class="col wh90 fmid tac" @click="handleDetailMenu">
							<uni-icons type="more-filled" color="#d8d8d8" size="70rpx" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部用户信息 -->
		<view class="panelBottom pa l0 r0 b0 pl40 pb30">
			<!-- 商品信息 -->
			<view class="goods df fdr mb20 br10" :class="{'active': showAd}" v-if="showAd"
				@click.stop="handleShowProduct">
				<!-- 商品图片 -->
				<image class="image wh100 mr15 br10" :src="item.productImage" mode="aspectFill" />

				<view class="df fdc jcsb f1">
					<view class="name">
						<text class="text c333 f30">{{item.productName}}</text>
					</view>
					<view class="info df fdr aic mr10">
						<text class="price mr10 c333 f28 b">￥{{item.productPrice}}</text>
						<text class="c666 f1 f20">已售{{item.sales}}单</text>
						<!-- <uni-icons type="close" color="#fff" /> -->
					</view>

					<view class="btn sm warm">
						<text class="cfff f24 tac" @click.stop="handleProBuy">立即购买</text>
					</view>
				</view>
			</view>

			<!-- 用户 -->
			<view class="user" @click="handleUser(item)">
				<text class="cfff f36">@{{ item.userNickname }}</text>
			</view>

			<!-- 简介 -->
			<view class="desc mt5">
				<text class="t2hd cfff f28">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 视频盒子
	.container {
		background-color: #000;
	}

	// 视频时长
	.duration {
		margin-top: 120rpx;
		width: 750rpx;
		background-color: rgba(255, 255, 255, .3);

		// 时间时长
		.line {
			width: 0;
			height: 2rpx;
			background-color: rgba(255, 255, 255, .8);
			transition-duration: .25s;
		}
	}

	// 倍速播放
	.speedBox {
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		align-items: center;

		// 倍速
		.speed {
			background-color: rgba(0, 0, 0, .8);
			border-radius: 5rpx;
			opacity: .6;
		}
	}

	// 暂停蒙层
	.pausePanel {
		background-color: rgba(0, 0, 0, .5);

		// 
		.pauseImg {
			width: 140rpx;
			height: 140rpx;
		}
	}

	// 右侧屏幕
	.panelRight {
		align-items: flex-end;

		.text {
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}

		// 操作台
		.operate {
			flex: 1;
			justify-content: flex-end;
			align-items: flex-end;
			text-align: center;
			padding-bottom: 130rpx;

			.item {
				margin: 5rpx 0;
				padding: 10rpx 5rpx;

				&.money {
					padding: 0;
				}

				// 
				.col {
					align-items: center;
					justify-content: center;
					width: 80rpx;
				}
			}
		}

		// 关注的小加号
		.focus {
			align-items: center;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	// 底部
	.panelBottom {
		padding-right: 100rpx;

		// 图片
		.image {
			width: 200rpx;
			height: 200rpx;
		}

		// 产品
		.goods {
			padding: 10rpx;
			width: 550rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			opacity: 0;
			transition-duration: .5s;

			// 
			&.active {
				opacity: 1;
			}
		}

		// 产品图片
		.name .text {
			lines: 2;
			text-overflow: ellipsis;
		}
	}

	// 视频播放进度条
	.videoProgress {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>