xuhuajiao
/
canvasScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

画屏-切换

dev
xuhuajiao 3 years ago
parent
fc802a91f5
commit
085706a7e3
12 changed files with 660 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      App.vue
  2. 4
      manifest.json
  3. 8
      pages/bind/bind.vue
  4. 1
      pages/header.vue
  5. 2
      pages/index/index.vue
  6. 2
      pages/login/login.vue
  7. 198
      pages/show/show.vue
  8. 209
      pages/show/show2.js
  9. 298
      pages/show/show2.vue
  10. BIN
      unpackage/cache/apk/__UNI__487D0A3_cm.apk
  11. 2
      unpackage/cache/apk/apkurl
  12. 2
      unpackage/cache/apk/cmManifestCache.json

4
App.vue
View File

@ -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 {

4
manifest.json
View File

@ -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" : {

8
pages/bind/bind.vue
View File

@ -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);
}

1
pages/header.vue
View File

@ -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;
}

2
pages/index/index.vue
View File

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

2
pages/login/login.vue
View File

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

198
pages/show/show.vue
View File

@ -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>
></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>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;
}
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.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.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>

209
pages/show/show2.js
View File

@ -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
}

298
pages/show/show2.vue
View File

@ -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>

BIN
unpackage/cache/apk/__UNI__487D0A3_cm.apk
View File

2
unpackage/cache/apk/apkurl
View File

@ -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

2
unpackage/cache/apk/cmManifestCache.json
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save