画屏-切换

App.vue

@@ -14,12 +14,12 @@
 
 <style>
 	/*每个页面公共css */
-	@import './static/iconfont/iconfont.css';
+	@import '@/static/iconfont/iconfont.css';
 	@import '@/common/animate.css';
 	.main_container {
 		width: 100%;
 		height: 100vh;
-		background: url(./static/images/bg.png) no-repeat left top;
+		background: url(~@/static/images/bg.png) no-repeat left top;
 		background-size: cover;
 	}
 	.login_bg {

manifest.json

@@ -2,8 +2,8 @@
     "name" : "画屏",
     "appid" : "__UNI__487D0A3",
     "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
+    "versionName" : "1.1.0",
+    "versionCode" : 110,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages/bind/bind.vue

@@ -16,7 +16,7 @@
 					<view class="uni-form-item uni-column" @click.native.stop="radioDirection = !radioDirection">
 						<view class="bind-radio-label"  >
 							<view class="title" >选择设备方向</view>
-							<image class="select_img" src="../../static/images/bind-select.png"></image>
+							<image class="select_img" src="@/static/images/bind-select.png"></image>
 						</view>
 						<view v-show="radioDirection" class="device_radio">
 							<radio-group name="device_direction">
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import Header from '@/pages/header.vue'
+import Header from '@/pages/header.vue';
 export default {
 	components: {
 		Header
@@ -124,7 +124,7 @@ export default {
 .device_radio /deep/ uni-radio .uni-radio-input{
 	width: 27.77rpx;
 	height: 27.77rpx;
-	background: url(../../static/images/an-wx.png) no-repeat left top;
+	background: url(~@/static/images/an-wx.png) no-repeat left top;
 	background-size: 100% 100%;
 	border: none;
 }
@@ -136,7 +136,7 @@ export default {
 	content: "";
 	width: 27.77rpx;
 	height: 27.77rpx;
-	background: url(../../static/images/an-xz.png) no-repeat left top;
+	background: url(~@/static/images/an-xz.png) no-repeat left top;
 	background-size: 100% 100%;
 	transform: translate(-50%,-50%) scale(1);
 }

pages/header.vue

@@ -73,7 +73,6 @@ export default {
 	}
 	.help-cont /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
 		padding: 83.33rpx 69.44rpx 62.5rpx 69.44rpx;
-		/* width: 597.22rpx; */
 		border-radius: 20.83rpx;
 		overflow: initial;
 	}

pages/index/index.vue

@@ -27,7 +27,7 @@
 	}
 </script>
 
-<style>
+<style scoped>
 	.content {
 		display: flex;
 		flex-direction: column;

pages/login/login.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Header from '@/pages/header.vue'
+import Header from '@/pages/header.vue';
 export default {
 	components: {
 		Header

pages/show/show.vue

@@ -1,31 +1,34 @@
 <template>
 	<view class="main_container">
-		<view class="show-content" @touchstart="touchStart" @touchend="touchEnd">
+		<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="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>
+				<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>fill
+		</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 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>
@@ -38,7 +41,6 @@
 </template>
 
 <script>
-import utils from '@/utils/common.js';
 import one from './show2.js';
 let innerAudioContext = uni.createInnerAudioContext();
 export default {
@@ -67,7 +69,14 @@ export default {
 			// 刚触碰的位置
 			startPosition: 0,
 			// 结束的位置
-			endPosition: 0
+			endPosition: 0,
+			startY: 0,
+			startX: 0,
+			elePosition: null,
+			isAutoSwitch: true,
+			moveX: 0, //滑动的x轴距离
+			moveY: 0, //滑动的y轴距离
+			like_state: 0, //-1：左滑，0：没滑动，1：右滑
 		};
 	},
 	onLoad() {
@@ -90,38 +99,71 @@ export default {
 	},
 	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;
-			}
+				this.startX = event.touches[0].pageX;
+				this.startY = event.touches[0].pageY;
+				console.log('开始触摸：', this.startX, this.startY);
+			},
+			touchMove(event) {
 				
-			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;
+				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.changIndex();
-			console.log(elePosition);
-		},
+				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);
@@ -143,10 +185,18 @@ export default {
 				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 = '../../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 {
@@ -154,13 +204,14 @@ export default {
 					this.flagIndex = 0;
 					this.contentIndex = 0;
 				} else {
-					if (this.flagIndex == this.itemLength[this.contentIndex]) {
-						this.flagIndex = 0;
-						this.contentIndex++;
+					if(this.isAutoSwitch){
+						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;
 				}
@@ -245,6 +296,7 @@ export default {
 }
 .show-item uni-video {
 	width: 100%;
+	height: 100%;
 }
 .show-video {
 	width: 100%;
@@ -256,7 +308,7 @@ export default {
 	right: 46.52rpx;
 	width: 159.72rpx;
 	height: 152.08rpx;
-	background: url(../../static/images/an-yy.png) no-repeat;
+	background: url(~@/static/images/an-yy.png) no-repeat;
 	background-size: cover;
 }
 .show-audio uni-image {
@@ -299,4 +351,36 @@ export default {
 	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>

pages/show/show2.js

@@ -0,0 +1,209 @@
+let data = {
+	"code": 200,
+	"msg": "操作成功",
+	"data": [
+		{
+			"relaase_id": "4028e3d47fd34b5d017fd34c08e60003",
+			"relaase_name": "fsfsdf",
+			"bgm_name": "主-res_01",
+			"bgm_main": "https://qiniu.aiyxlib.com/yuekan-BGM31.mp3",
+			"release_start": "2022-03-30 00:00:00.0",
+			"release_end": "2022-04-24 00:00:00.0",
+			"show_materials": [
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "bg-index.jpg",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__fadeInTopRight",
+					"bgm_name": "img-1-1",
+					"bgm_url": '',
+					"ranking": "1"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "s-j1.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__backInLeft",
+					"bgm_name": 'img-1-2',
+					"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM20-Chinap.mp3',
+					"ranking": "2"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
+					"material_type": "1",
+					"deposit_url": "https://qiniu.aiyxlib.com/1608277325000.mp4",
+					"img_path": "",
+					"device_direction": "1",
+					"duration": "0",
+					"effect": "false",
+					"bgm_name": null,
+					"bgm_url": null,
+					"ranking": "4"
+				}
+			]
+		},
+		{
+			"relaase_id": "4028e3d47fcfa36c017fd0063c4d001a",
+			"relaase_name": "111",
+			"bgm_name": "主-res_02",
+			"bgm_main": "https://qiniu.aiyxlib.com/yuekan-BGM27.mp3",
+			"release_start": "2022-03-28 00:00:00.0",
+			"release_end": "2022-03-28 00:00:00.0",
+			"show_materials": [{
+					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
+					"material_name": "s-j3.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/bj45_1%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/bj45_1%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__flip",
+					"bgm_name": 'img-2-1',
+					"bgm_url": null,
+					"ranking": "1"
+				},
+				{
+					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
+					"material_name": "s-t3.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-1-read.jpg",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-1-read.jpg",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__rotateInUpRight",
+					"bgm_name": 'img-2-2',
+					"bgm_url": null,
+					"ranking": "2"
+				},
+				{
+					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
+					"material_name": "s-j1.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__jackInTheBox",
+					"bgm_name": 'img-2-3',
+					"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM16.mp3',
+					"ranking": "3"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "bg-index.jpg",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__zoomInDown",
+					"bgm_name": 'img-2-4',
+					"bgm_url": null,
+					"ranking": "1"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "s-j1.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-4-content-background%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__slideInLeft",
+					"bgm_name": 'img-2-5',
+					"bgm_url": null,
+					"ranking": "2"
+				},
+				{
+					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
+					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
+					"material_type": "1",
+					"deposit_url": "https://qiniu.aiyxlib.com/1634285181000.mp4",
+					"img_path": "",
+					"device_direction": "1",
+					"duration": "0",
+					"effect": "false",
+					"bgm_name": null,
+					"bgm_url": null,
+					"ranking": "4"
+				},
+				{
+					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
+					"material_name": "s-j1.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__jackInTheBox",
+					"bgm_name": 'img-2-7',
+					"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM16.mp3',
+					"ranking": "3"
+				}
+			]
+		},
+		{
+			"relaase_id": "4028e3d47fd34b5d017fd34c08e60003",
+			"relaase_name": "fsfsdf",
+			"bgm_name": "主-res_03",
+			"bgm_main": "https://qiniu.aiyxlib.com/yuekan-BGM19.mp3",
+			"release_start": "2022-03-30 00:00:00.0",
+			"release_end": "2022-04-24 00:00:00.0",
+			"show_materials": [
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
+					"material_type": "1",
+					"deposit_url": "https://qiniu.aiyxlib.com/1608277325000.mp4",
+					"img_path": "",
+					"device_direction": "1",
+					"duration": "0",
+					"effect": "false",
+					"bgm_name": null,
+					"bgm_url": null,
+					"ranking": "4"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "bg-index.jpg",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__fadeInTopRight",
+					"bgm_name": "img-3-1",
+					"bgm_url": '',
+					"ranking": "1"
+				},
+				{
+					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
+					"material_name": "s-j1.png",
+					"material_type": "0",
+					"deposit_url": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"img_path": "https://qiniu.aiyxlib.com/bj_15%402x.png",
+					"device_direction": "1",
+					"duration": "15",
+					"effect": "animate__backInLeft",
+					"bgm_name": 'img-3-2',
+					"bgm_url": 'https://qiniu.aiyxlib.com/yuekan-BGM20-Chinap.mp3',
+					"ranking": "2"
+				}
+			]
+		},
+	]
+}
+
+
+module.exports = {
+	data
+}

pages/show/show2.vue

@@ -0,0 +1,298 @@
+<template>
+	<view class="main_container">
+		<view class="show-content">
+			<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="'https://images.weserv.nl/?url=' + 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>
+				<!-- <iframe v-if="item.material_type == 1 && itemIndex == index" ref="iframe" class="video-iframe" style="z-index:1;" :src="linkUrl" 
+					    frameborder="0"  scrolling="no" allowfullscreen="true"   
+				            webkitallowfullscreen="true" mozallowfullscreen="true" @ended="videoPlayEnd">
+				    </iframe> -->
+			</view>
+		</view>
+		<view class="show-audio"></view>
+		<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ 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:'',
+			voicePlayer: null
+		};
+	},
+	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();
+		
+		this.voicePlayer = plus.audio.createPlayer({ src: 'https://qiniu.aiyxlib.com/yuekan-BGM27.mp3' });
+		this.voicePlayer.setRoute(this.playMode);
+		// 监听自然播放完成
+		this.voicePlayer.addEventListener('ended', () => {
+			// 销毁正在监听设备距离的监听器
+			if (this.watchProximity) {
+				plus.proximity.clearWatch(this.watchProximity);
+				this.watchProximity = null;
+			}
+			console.log('播放完毕了');
+		});
+		// 监听音频可以开始播放事件
+		this.voicePlayer.addEventListener('play', () => {
+			// 首次播放时会执行两次回调
+			if (this.playState !== 2) {
+				// plus.audio.ROUTE_SPEAKER：扬声器 0
+				// plus.audio.ROUTE_EARPIECE：听筒 1
+				this.voicePlayer.setRoute(this.playMode);
+				this.playState++;
+			}
+		});
+		// 监听音频播放错误事件
+		this.voicePlayer.addEventListener('error', (err) => {
+			console.log('报错err', err);
+			// 销毁正在监听设备距离的监听器
+			if (this.watchProximity) {
+				plus.proximity.clearWatch(this.watchProximity);
+				this.watchProximity = null;
+			}
+		});
+	},
+	created() {
+		this.atuo();
+	},
+	mounted() {
+		// this.countdown();
+		this.changeMaterial();
+		this.voicePlayer.play();
+	},
+	methods: {
+		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.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.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>

unpackage/cache/apk/apkurl

@@ -1 +1 @@
-https://ide.dcloud.net.cn/build/download/6e254010-b979-11ec-8bee-47dfbe383b6d
+https://ide.dcloud.net.cn/build/download/f4cdad70-ba2b-11ec-a335-23d69ebb189d