canvasScreen/pages/show/show.vue

<template>
	<view class="main_container">
		<view class="show-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
				<image
					:class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
					v-show="item.material_type == 0 && itemIndex == index"
					:src="linkUrl"
					mode="aspectFill"
				></image>				
				<video v-if="item.material_type == 1 && itemIndex == index" :src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd">
				</video>
			</view>
		</view>
		<!-- <swiper @change="changeMaterial()"  style="height: 100%;">
				<swiper-item v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
					<view class="item"  v-if="item.material_type == 1 && itemIndex == index">
						<video id="myVideo" ref="myVideo" 
							:src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd"></video>
						<cover-view
							style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
							<image style="width: 40px;height: 40px;"></image>
						</cover-view>
					</view>
					<view class="item" v-if="item.material_type == 0 && itemIndex == index">
							<image  :src="linkUrl" :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect:'']"></image>
					</view>
				</swiper-item>
		</swiper> -->
		<view class="show-audio"></view>
		<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{ infoTxt }}--{{ audioName }}</view>

		<!-- <view v-if="!deviceInfoShow" class="local-data">
			<text class="title">欢迎使用数字新视窗</text>
			<view class="data-info">设备ID : 123456789</view>
			<view class="data-info">设备账号 : 123456789</view>
			<view class="data-info">设备名称 : CVBBN2</view>
			<view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
		</view> -->
	</view>
</template>

<script>
import one from './show2.js';
let innerAudioContext = uni.createInnerAudioContext();
export default {
	components: {},
	data() {
		return {
			// 已登录情况显示6S得设备信息
			count: 6,
			deviceInfoShow: false,
			autoplay: false,
			// 素材
			materialsCont: [],
			show_materials: [],
			contentIndex: 0,
			itemIndex: 0,
			linkUrl: '',
			timer: null,
			duration: null,
			audioSrc: null,
			audioName: null,
			itemLength: [],
			flagIndex: 0,
			infoTxt: '',
			// 刚触碰的时间
			startTime: 0,
			// 刚触碰的位置
			startPosition: 0,
			// 结束的位置
			endPosition: 0,
			startY: 0,
			startX: 0,
			elePosition: null,
			isAutoSwitch: true,
			moveX: 0, //滑动的x轴距离
			moveY: 0, //滑动的y轴距离
			like_state: 0, //-1：左滑，0：没滑动，1：右滑
		};
	},
	onLoad() {
		const _this = this;
		let result = one.data.data;
		this.materialsCont = result;
		this.materialsCont.map(item => {
			this.itemLength = this.itemLength.concat(item.show_materials.length);
			this.show_materials = this.show_materials.concat(item.show_materials);
		});
		// 初始化
		this.changIndex();
	},
	created() {
		this.atuo();
	},
	mounted() {
		// this.countdown();
		this.changeMaterial();
	},
	methods: {
		touchStart(event) {
				this.startX = event.touches[0].pageX;
				this.startY = event.touches[0].pageY;
				console.log('开始触摸：', this.startX, this.startY);
			},
			touchMove(event) {
				
				var currentX = event.touches[0].pageX;
				var currentY = event.touches[0].pageY;
				var moveX = currentX - this.startX;
				var moveY = currentY - this.startY;
				var text = '';
				var state = 0; //-1：左滑，0：没滑动，1：右滑
				// //左右方向滑动
				if (Math.abs(moveX) > Math.abs(moveY)) {
					if (moveX < -10) {
						text = '左滑';
						state = 1;
					} else if (moveX > 10) {
						text = '右滑';
						state = -1;
					}
				} else { //上下方向滑动
					if (moveY < 0) {
						text = '上滑';
						state = -2;
					} else if (moveY > 0){
						 text = '下滑'; 
						 state = 2;
					}
				}
				this.like_state = state;
				this.moveX = moveX;
				this.moveY = moveY;
				console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
			},
			touchEnd(event) {
				console.log(`移动距离:${Math.abs(this.moveX)}`)
				// if (Math.abs(this.moveX) > 60 ) {
				// 	console.log(this.like_state)
				// 	if(this.like_state == -1){
				// 		this.isAutoSwitch = false;
				// 		this.itemIndex--;
				// 		this.flagIndex--;
				// 		this.changIndex()
				// 	}else if(this.like_state == 1){
				// 		this.itemIndex++;
				// 		this.flagIndex++;
				// 		this.isAutoSwitch = true;
				// 		this.changIndex()
				// 	}
				// }
				if(Math.abs(this.moveY) > 60){
					innerAudioContext.stop();
					if(this.like_state == -2){
						this.itemIndex++;
						this.flagIndex++;
						this.isAutoSwitch = true;
					}else if(this.like_state == 2){
						this.itemIndex--;
						this.flagIndex--;
						this.isAutoSwitch = false;
					}
					this.changIndex()
				}
			},
		changeMaterial() {
			const _this = this;
			clearInterval(_this.timer);
			_this.timer = setInterval(() => {
				_this.duration -= 1;
				if (_this.duration == 0) {
					_this.itemIndex++;
					_this.flagIndex++;
					this.changIndex();
				}
			}, 1000);
		},
		changIndex() {
			const _this = this;
			if (_this.itemIndex == this.show_materials.length) {
				// clearInterval(_this.timer);
				this.itemIndex = 0;
				this.flagIndex = 0;
				this.contentIndex = 0;
				innerAudioContext.stop();
			}
			if(this.itemIndex == -1){
				this.itemIndex = this.show_materials.length-1
				this.contentIndex = this.itemLength.length-1
				this.flagIndex = this.itemLength[this.contentIndex]
			}		
			if (this.flagIndex == 0) {
				this.contentIndex--;
				this.flagIndex = this.itemLength[this.contentIndex];
			}
			_this.duration = this.show_materials[this.itemIndex].duration;
			_this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
			if (this.show_materials[this.itemIndex].bgm_url) {
				_this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
				_this.audioName = this.show_materials[this.itemIndex].bgm_name;
			} else {
				if (this.contentIndex == this.itemLength.length) {
					this.flagIndex = 0;
					this.contentIndex = 0;
				} else {
					if(this.isAutoSwitch){
						if (this.flagIndex == this.itemLength[this.contentIndex]) {
							this.flagIndex = 0;
							this.contentIndex++;
						}
					}
				}
				if (this.materialsCont[this.contentIndex].bgm_main) {
					this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
					this.audioName = this.materialsCont[this.contentIndex].bgm_name;
				}
			}
			this.playVoice(this.audioSrc);
			if (this.show_materials[this.itemIndex].material_type == 1) {
				innerAudioContext.stop();
			}
		},
		videoPlayEnd() {
			this.itemIndex++;
			this.flagIndex++;
			this.changIndex();
		},
		playVoice(src) {
			if (innerAudioContext != undefined) {
				innerAudioContext.stop();
			}
			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.stop();
			innerAudioContext.src = src;
			innerAudioContext.autoplay = true;
			innerAudioContext.onPlay(() => {
				this.infoTxt = '';
				this.infoTxt = '开始播放';
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
				innerAudioContext.stop();
			});
			innerAudioContext.onPause(() => {
				//暂停监听
				this.infoTxt = '暂停';
				console.log('暂停');
				// innerAudioContext.stop();
			});
			innerAudioContext.onEnded(() => {
				// 自然播放结束监听也需要更改isPause 开关状态
				this.infoTxt = '音频自然播放结束事件';
				console.log('音频自然播放结束事件');
				innerAudioContext.stop();
			});
		},
		atuo() {
			this.autoplay = true;
		},
		countdown() {
			this.count = 6;
			const timer = setInterval(() => {
				this.count -= 1;
				if (this.count < 1) {
					clearInterval(timer);
					this.deviceInfoShow = true;
					console.log('倒计时结束');
				}
			}, 1000);
		}
	}
};
</script>

<style scoped>
.main_container {
	position: relative;
	overflow: hidden;
	background: #000;
}
.show-item {
	/* width: 100%;
	height: 100vh; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.show-item .show-img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.show-item uni-video {
	width: 100%;
	height: 100%;
}
.show-video {
	width: 100%;
	height: 100vh;
}
.show-audio {
	position: fixed;
	bottom: 79.16rpx;
	right: 46.52rpx;
	width: 159.72rpx;
	height: 152.08rpx;
	background: url(~@/static/images/an-yy.png) no-repeat;
	background-size: cover;
}
.show-audio uni-image {
	width: 159.72rpx;
	height: 152.08rpx;
}
.local-data {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 625rpx;
	height: 555.55rpx;
	transform: translate(-50%, -50%);
	font-size: 27.77rpx;
	color: #333;
	border-radius: 27.77rpx;
	background: rgba(255, 255, 255, 0.85);
}
.title {
	margin-bottom: 32.63rpx;
	font-size: 56.94rpx;
	text-align: center;
}
.data-info {
	padding: 0 83.33rpx;
	margin-bottom: 32.63rpx;
}
.count-down {
	position: absolute;
	right: 34.72rpx;
	top: 27.77rpx;
	width: 48.61rpx;
	height: 48.61rpx;
	font-size: 30.55rpx;
	text-align: center;
	line-height: 48.61rpx;
	border: 1px solid #333;
	border-radius: 50%;
}
.swiper{
	height: 100vh;
}
.item{
	width: 100%;
	height: 100%;
}
.mask{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	z-index: 999;
}
.controls-title {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		text-align: center;
		color: #FFFFFF;
		border: 10px solid #fff;
		z-index: 9999;
	}
</style>