canvasScreen/pages/show/show.vue

<template>
	<view class="main_container">
		<view class="show-content" @touchstart="touchStart" @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="require('@/static/source/' + linkUrl)"
				></image> -->
				<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="'../../static/source/' + linkUrl"
					:autoplay="autoplay"
					controls
					object-fit="fill"
					@ended="videoPlayEnd"
				></video> -->
				<video v-if="item.material_type == 1 && itemIndex == index" :src="linkUrl" :autoplay="autoplay" :controls="false" object-fit="fill" @ended="videoPlayEnd"></video>
			</view>
		</view>fill
		<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 utils from '@/utils/common.js';
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
		};
	},
	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.startTime = Date.now();
			// 获取初始的位置
			this.startPosition = event.changedTouches[0].clientX;
		},
		touchEnd(event) {
			const endTime = Date.now();
			if (endTime - this.startTime > 2000) {
				// 如果手指滑动的距离超过2s 就默认不合法
				return;
			}
			// 判断其滑动的距离是否值得触发，给定一个10 的距离
			if (Math.abs(this.endPosition - this.startPosition) > 10) {
				this.endPosition = event.changedTouches[0].clientX;
				var elePosition = this.endPosition - this.startPosition > 0 ? 'right' : 'left';
			} else {
				return;
			}
			
			if(elePosition=='left'){
				this.itemIndex++
				this.flagIndex++
			}else{
				this.itemIndex--
				this.flagIndex--
				if(this.itemIndex == -1 || this.flagIndex == -1){
					this.itemIndex = this.show_materials.length-1;
				}
			}
			this.changIndex();
			console.log(elePosition);
		},
		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();
			}
			_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 = '../../static/source/' + 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.flagIndex == this.itemLength[this.contentIndex]) {
						this.flagIndex = 0;
						this.contentIndex++;
					}
				}
				if (this.materialsCont[this.contentIndex].bgm_main) {
					// this.audioSrc = '../../static/source/' + 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%;
}
.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%;
}
</style>