shop_app/pages/groups/video.vue

<template>
	<view class="video-contain">
		<!-- 自定义头部 -->
		<view class="nav-myself" :style="{'height': navigationBarHeight + 'px'}">
			<view class="status-title" :style="{'height': statusBarHeight + 'px'}"></view>
			<view class="title-content">
				<view class="icon" @click="toPage('/pages/index/index', 0)" v-if="pagesLength === 1"><up-icon name="home" size="22" color="#333" /></view>
				
				<view class="icon" @click="toPage('', -1)" v-if="pagesLength > 1"><up-icon name="arrow-left" size="22" color="#333" /></view>
			</view>
		</view>
		
		<view v-if="isLoading" class="loadbox">
			<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
		</view>
		
		<!-- @transition="transition" -->
		<swiper :vertical="true" :current="swiperCurrent" :circular="false" @animationfinish="finishSwiper">
			<swiper-item v-for="(item, index) in videoList" :key="item.id" :item-id="index">
				<view class="videoBox">
					<view class="poster">
						<image :src="item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast'" mode="widthFix"></image>
					</view>
					
					<!-- <video v-if="index == swiperCurrent || (index + 1 == swiperCurrent) || (index - 1 == swiperCurrent)"
						:src="item.explain_video_convert || item.explain_video"
						:autoplay="index == swiperCurrent"
						objectFit="contain"
						:controls="false"
						:loop="true"
						:id="'myvideo' + index"
						:poster="index == 0 ? item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast' : ''"
						@timeupdate="timeupdate"
						@loadedmetadata="load"
						@error="error"
						:showCenterPlayBtn="false"
						:custom-cache="false">
					</video> -->
					
					<view class="videoDom" v-if="index == swiperCurrent || (index + 1 == swiperCurrent) || (index - 1 == swiperCurrent)">
					    <DomVideoPlayer
					        :ref="el => getVideoPlayerRef(el, index)"
					        object-fit="contain"
							:isLoading="true"
							:muted="false"
					        :controls="false"
					        :autoplay="index == swiperCurrent"
							@timeupdate="timeupdate"
							@durationchange="onDurationChange"
							@loadedmetadata="load"
					        :loop="true"
							:poster="index == 0 ? item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast' : ''"
					        :src="item.explain_video_convert || item.explain_video" />
					</view>
					
					<view class="touch-cover" @click="changeStatus"></view>
					
					<!-- 暂停按钮 -->
					<view class="play-btn" v-if="!playState && index == swiperCurrent" @click="changeStatus"><up-icon name="play-right-fill" color="#fff" size="30" /></view>
					
					<!-- 右侧工具 -->
					<view class="tools">
						<view class="item" @click="handleCollection(item)">
							<up-icon v-if="!item.is_collect" name="heart-fill" size="26" color="#fff" />
							<up-icon v-else name="heart-fill" size="26" :color="Color" />
							<view class="txt">收藏</view>
						</view>
					    <button class="item" @click="handleShare()">
							<up-icon name="share" color="#fff" size="26" />
							<view class="txt">分享</view>
						</button>
						<view class="item" @click="showComment = true">
							<up-icon name="chat" color="#fff" size="26" />
							<view class="txt">评价</view>
						</view>
					</view>
					
					<!-- 商品信息 -->
					<view class="vanBox">
						<view class="descBox">
							<!-- 跟团记录 -->
							<view class="record" v-if="record.length && index == swiperCurrent" :style="{opacity: opacity}">
								<view :class="{ top: animate == true }">
									<view class="row" v-for="(it, index) in record" :key="index">
										<view class="box">
											<image v-if="it.user" :src="it.user.avatar"></image>
											<text>{{it.time}}跟团下单</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 商品描述 -->
							<view class="desc">
								<expandable-text :longText="item.description" :line="2" :collapsev="item.collapse" :lineHeight="40" expandText="展开" foldText="收起"/>
							</view>
						</view>
						
						<view class="goodBox" @click="showGoods = true">
							<image class="img" :src="item.face_img" mode="aspectFill"></image>
							<view class="box">
								<view class="tit">{{item.title}}</view>
								<view class="text">{{item.visitor}}人看过 | {{item.order_count}}人跟团</view>
								<view class="flex">
									<view class="price" v-if="item.min_price == item.max_price">￥{{item.min_price}}</view>
									<view class="price" v-else>￥{{item.min_price}}-{{item.max_price}}</view>
									<button class="buy">立即跟团</button>
								</view>
							</view>
						</view>
					</view>
					
					<view class="bar" v-if="index == swiperCurrent">
						<view class="on" :style="{'width': schedule + '%'}"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 本团评价 -->
		<comment :id="orign_id" :show="showComment" @close="showComment = false" />
		
		<!-- 跟团商品 -->
		<goods :id="orign_id" :show="showGoods" @close="showGoods = false" :sales="total" />
	
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, nextTick } from 'vue'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	import { showToast, formatDate, uniShare, whetherLogin } from '@/components/common.js'
	import comment from '@/components/ktt/comment.vue'
	import goods from '@/components/ktt/goods.vue'
	import expandableText from '@/components/ktt/expandable-text.vue'
	import DomVideoPlayer from '@/components/DomVideoPlayer/index.vue'
	
	export default {
		components: { comment, goods, expandableText, DomVideoPlayer },
		setup() {
			const data = reactive({
				orign_id: 0,
				videoUrl: '',
				goodsInfo: {},
				isLoading: true,
				playState: true,
				navigationBarHeight: 0,
				statusBarHeight: 0,
				Color: '',
				priceColor: '',
				pagesLength: 0,
				poster: '',
				showComment: false,
				animate: false,
				timer: null,
				record: [],
				opacity: 1,
				showGoods: false,
				shareUrl: '',
				schedule: 0,
				startY: 0,
				moveY: 0,
				last_id: 0,
				has_more: true,
				videoList: [],
				lastIndex: 0,
				duration: 0,
				total: 0
			})
			
			const swiperCurrent = ref(0)
			
			let pages = getCurrentPages()
			data.pagesLength = pages.length
			
			async function getVideo() {
				await get(`/api/app/goods/videos/${data.orign_id}`).then((ress) => {
					data.videoUrl = ress.data.explain_video_convert || ress.data.explain_video
					data.videoList.push(ress.data)
				})
			}
			
			async function getDetail() {
				await get(`/api/v1/goods/group/detail/${data.orign_id}`).then((res) => {
					data.isLoading = false
					data.goodsInfo = res.data
					data.videoList[swiperCurrent.value].is_collect = res.data.is_collect
				}).catch(() => {
					data.isLoading = false
				})
			}
			
			function getList() {
				get(`/api/app/goods/videos`, {last_id: data.last_id, pageSize: 10}).then((res) => {
					res.data.forEach((it) => {
						it.collapse = false
					})
					data.videoList = data.videoList.concat(res.data)
					data.last_id = res.last_id
					data.has_more = res.has_more
				})
			}
			
			function load(e) {
				const that = this
				nextTick(() => {
					console.log('视频load')
					// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, that)
					let videoObj = videoPlayerRefList.value[swiperCurrent.value]
					videoObj.play()
					data.playState = true
				})
			}
			
			function error(e) {
				console.log('视频出错', e)
			}
			
			function transition(e) {
				console.log('滑动开始', e)
			}
			
			function finishSwiper(e) {
				// console.log('滑动完成', e)
				const that = this
				if(swiperCurrent.value != e.detail.current) {
					data.playState = true
					data.lastIndex = swiperCurrent.value
					swiperCurrent.value = e.detail.current
					console.log(data.lastIndex)
					// let videoObj = uni.createVideoContext('myvideo' + data.lastIndex, that)
					// let videoObj = videoPlayerRefList.value[data.lastIndex]
					videoPlayerRefList.value.forEach((itm) => {
					    itm.pause()
					})
					console.log('swiperCurrent.value', swiperCurrent.value)
					data.schedule = 0
					handleFn()
					if(data.videoList.length - 2 == swiperCurrent.value && data.has_more) {
						console.log('加载下一页')
						getList()
					}
				}
			}
			
			async function handleFn() {
				data.orign_id = data.videoList[swiperCurrent.value].id
				console.log('orign_id', data.orign_id)
				await getDetail()
				clearInterval(data.timer)
				data.timer = null
				getRecord()
				getShareUrl()
			}
			
			// 点击暂停
			function changeStatus(e) {
				if(e.type == 'tap' || e.type == 'click' || e.type == 'onClick') {
					data.playState = !data.playState
					if (data.playState) {
						nextTick(() => {
							// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, this)
							let videoObj = videoPlayerRefList.value[swiperCurrent.value]
							videoObj.play()
						})
					} else {
						nextTick(() => {
							// let videoObj = uni.createVideoContext('myvideo' + swiperCurrent.value, this)
							let videoObj = videoPlayerRefList.value[swiperCurrent.value]
							videoObj.pause()
						})
					}
				}
			}
			
			function toPage(url, type) {
				if (type == 1) {
					uni.navigateTo({ url })
				} else if(type == 0) {
					uni.switchTab({ url })
				} else {
					uni.navigateBack({ delta: 1 })
				}
			}
			
			// 收藏
			const handleCollection = (item) => {
				if(whetherLogin()) {
					if(item.is_collect) {
						// 取消收藏
						post('/api/v1/users/collect/cancel', { type: 1, extend_id: data.orign_id }).then((res) => {
							item.is_collect = false
							showToast('已取消收藏')
						})
					} else {
						post('/api/v1/users/collect', { type: 1, extend_id: data.orign_id }).then((res) => {
							item.is_collect = true
							showToast('收藏成功')
						})
					}
				}
			}
			
			function getRecord() {
				get(`/api/app/goods/record/${data.orign_id}`, { page: 1, pageSize: 30 }).then((res) => {
					res.data.forEach((item) => {
						item.time = formatDate(Date.parse(item.created_at.replace(/-/g, '/')))
					})
					data.record = res.data
					data.total = res.meta.total
					if(data.record.length > 1) {
						startAnimate()
					}
				})
			}
			
			function startAnimate() {
				data.timer = setInterval(() => {
					data.animate = true
					setTimeout(() => {
						data.record.push(data.record[0])
						data.record.shift()
						data.animate = false
					}, 1000)
				}, 2000)
			}
			
			function timeupdate(event) {
				data.schedule = ((event / data.duration) * 100).toFixed(2)
			}
			
			const onDurationChange = (e) => {
			  data.duration = e
			}
			
			const getShareUrl = () => {
				post('/api/app/user/share', {
					page: 'pages/groups/video',
					query: `id=${data.orign_id}`
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			
			const videoPlayerRefList = ref([])
			const getVideoPlayerRef = (el, index) => {
				if (el) {
					videoPlayerRefList.value[index] = el
					if(index !== swiperCurrent.value) {
						el.pause()
					}
				}
			}
			
			const handleShare = () => {
				let title = data.goodsInfo.description
				let imageUrl = data.goodsInfo.face_img
				let path = data.shareUrl
				uniShare(title, imageUrl, path)
			}
			
			return {
				uniShare,
				whetherLogin,
				videoPlayerRefList,
				...toRefs(data),
				getVideo,
				getDetail,
				changeStatus,
				toPage,
				handleCollection,
				getRecord,
				startAnimate,
				getShareUrl,
				onDurationChange,
				timeupdate,
				load,
				getList,
				finishSwiper,
				transition,
				error,
				swiperCurrent,
				getVideoPlayerRef,
				handleShare
			}
		},
		async onLoad(options) {
			const _this = this
			this.orign_id = options.id * 1
			// await this.$onLaunched
			uni.getSystemInfo({
				success: res => {
					_this.navigationBarHeight = res.statusBarHeight + 44
					_this.statusBarHeight = res.statusBarHeight
				}
			})
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.last_id = options.id * 1
			await this.getVideo()
			await this.getDetail()
			this.getList()
			this.getRecord()
			this.getShareUrl()
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
</script>

<style lang="scss" scoped>
	.video-contain{
		width: 100%;
		height: 100%;
		swiper{
			height: 100vh;
			width: 100%;
		}
		.videoBox{
			height: 100vh;
			width: 100%;
			position: relative;
			.poster{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background-color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.videoDom{
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 2;
			}
			.bar{
				background-color: rgba(0, 0, 0, 0.4);
				position: fixed;
				height: 2px;
				bottom: 16rpx;
				left: 24rpx;
				width: calc(100vw - 48rpx);
				z-index: 10;
				.on{
					height: 100%;
					background-color: #fff;
				}
			}
		}
		.nav-myself{
			position: fixed;
			top: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			z-index: 999;
		}
		.title-content{
			display: flex;
			flex: 1;
			align-items: center;
			padding-left: 20rpx;
			.icon{
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(255, 255, 255, 0.7);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
		}
		
		.tools{
			position: absolute;
			right: 0;
			bottom: 400rpx;
			display: flex;
			flex-direction: column;
			width: 130rpx;
			z-index: 10;
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				background-color: transparent;
				color: #fff;
				line-height: 50rpx;
				font-size: 28rpx;
				margin-bottom: 30rpx;
				.txt{
					line-height: 50rpx;
				}
			}
		}
		
		.touch-cover{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-size:100% 100%;
		}
		
		.play-btn{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: 128rpx;
			width: 128rpx;
			z-index: 200;
			background-color: rgba(0, 0, 0, 0.4);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}
		.record{
			margin-bottom: 10rpx;
			height: 62rpx;
			overflow: hidden;
			image{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-right: 6rpx;
			}
			.row{
				padding: 6rpx 0;
				height: 62rpx;
				box-sizing: border-box;
				.box{
					background-color: #333;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					height: 100%;
					border-radius: 50rpx;
					width: fit-content;
					padding: 0 12rpx 0 7rpx;
				}
			}
			.top{
			    transition: all 1s;
			    margin-top: -62rpx;
			}
		}
		.descBox{
			width: calc(100% - 140rpx);
			.desc{
				font-size: 26rpx;
				line-height: 40rpx;
				color: #fff;
				&.hide{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: break-spaces;
				}
			}
		}
		.vanBox{
			position: absolute;
			left: 24rpx;
			width: calc(100vw - 48rpx);
			bottom: 40rpx;
			z-index: 20;
			.goodBox{
				margin-top: 20rpx;
				padding: 16rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.img{
					width: 140rpx;
					height: 140rpx;
					object-fit: cover;
				}
				.box{
					width: calc(100% - 160rpx);
					.tit{
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.text{
						font-size: 24rpx;
						margin: 6rpx 0 10rpx;
						color: #999;
					}
					.flex{
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
					.price{
						color: v-bind('priceColor');
						font-size: 30rpx;
						font-weight: 600;
					}
					.buy{
						color: #fff;
						font-size: 26rpx;
						width: 150rpx;
						height: 54rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: v-bind('Color');
						border-radius: 10rpx;
					}
				}
			}
		}
	}
	.loadbox{
		padding: 200rpx 0;
		text-align: center;
		color: #666;
		position: fixed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #fff;
		left: 0;
		top: 0;
		z-index: 100;
	}
</style>