master
commit
46547456e4
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
</style>
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<!-- 音频播放器组件 -->
|
||||
<view v-if='url' class='flex justify-between align-center audio' >
|
||||
<view class='flex-1'>
|
||||
<slider @change='changeAudio'
|
||||
blockSize="18" :blockColor="activeColor" :activeColor='activeColor' :min='0' :max='duration.toFixed(0)' :value='currentTime.toFixed(0)' :step='0.8'></slider>
|
||||
</view>
|
||||
<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
|
||||
<view class='mr-3' @click='start(audioId)'>
|
||||
<image :src='startPic' class='icon' v-show='!status'></image>
|
||||
<image :src='endPic' class='icon' v-show='status'></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
context: null,
|
||||
currentTime: 0,
|
||||
duration: 100,
|
||||
status: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
url: String,
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#156e68'
|
||||
},
|
||||
startPic: String,
|
||||
endPic: String,
|
||||
audioId: [String,Number]
|
||||
},
|
||||
created() {
|
||||
this.context = uni.createInnerAudioContext();
|
||||
this.context.src = this.url;
|
||||
this.onTimeUpdate();
|
||||
this.onCanplay();
|
||||
this.onEnded();
|
||||
uni.$on('stop',(id)=> {
|
||||
if(id && id != this.audioId) {
|
||||
this.context.stop();
|
||||
this.status = false;
|
||||
} else if(!id){
|
||||
this.context.stop();
|
||||
this.status = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
start(id) { //点击播放
|
||||
let audioId = id;
|
||||
if(this.status) {
|
||||
this.context.pause();
|
||||
this.status = !this.status;
|
||||
}else {
|
||||
uni.$emit('stop',id)
|
||||
this.context.play()
|
||||
this.status = !this.status;
|
||||
}
|
||||
},
|
||||
onCanplay() { //进入可播放状态
|
||||
this.context.onCanplay(() => {
|
||||
this.context.duration;
|
||||
setTimeout(()=>{
|
||||
this.duration = this.context.duration;
|
||||
},1000)
|
||||
})
|
||||
},
|
||||
onTimeUpdate() { //音频播放进度
|
||||
this.context.onTimeUpdate(() => {
|
||||
if (!Number.isFinite( this.context.duration)) {
|
||||
this.duration = this.context.currentTime + 10;
|
||||
this.currentTime = this.context.currentTime;
|
||||
} else {
|
||||
this.duration = this.context.duration;
|
||||
this.currentTime = this.context.currentTime;
|
||||
}
|
||||
})
|
||||
},
|
||||
onEnded() { //播放结束
|
||||
this.context.onEnded(()=> {
|
||||
this.status = false;
|
||||
this.currentTime = 0;
|
||||
})
|
||||
},
|
||||
changeAudio(e) {
|
||||
let paused = this.context.paused;
|
||||
this.context.pause();
|
||||
this.context.seek(e.detail.value)
|
||||
if(!paused) {
|
||||
this.context.play();
|
||||
}
|
||||
},
|
||||
getTime(time) {
|
||||
let m = parseInt(time / 60);
|
||||
let s = time % 60;
|
||||
return this.towNum(m) + ':' + this.towNum(s);
|
||||
},
|
||||
towNum(num) {
|
||||
if(num >= 10) {
|
||||
return num;
|
||||
}else {
|
||||
return '0' + num;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.audio {
|
||||
/* background: #F4F4F4; */
|
||||
padding: 20rpx;
|
||||
padding-bottom:0;
|
||||
padding-right:10rpx;
|
||||
padding-left:30rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: between;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
color:#156e68;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
/* margin-right: 30rpx; */
|
||||
}
|
||||
/deep/ uni-slider{
|
||||
margin-left:0rpx;
|
||||
margin-right:0;
|
||||
}
|
||||
/deep/ uni-slider .uni-slider-thumb{
|
||||
box-shadow: 0 0 4px 4px rgba(21, 110, 104,.3)!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
const baseJson = [{
|
||||
name: '中共苏州独立支部旧址',
|
||||
url: '/storage/files/168776876364994ebb526d7.mp4',
|
||||
id: 1,
|
||||
file_id: 610,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '铁铃关',
|
||||
url: '/storage/files/168777692964996ea16f83c.mp4',
|
||||
id: 2,
|
||||
file_id: 708,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '上海战役指挥机关旧址',
|
||||
url: '/storage/files/shzy.mp4',
|
||||
id: 3,
|
||||
file_id: 4979,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '苏州革命博物馆',
|
||||
url: '/storage/files/1687765747649942f3586cd.mp4',
|
||||
id: 4,
|
||||
file_id: 4186,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '苏州烈士陵园',
|
||||
url: '/storage/files/1712040831660bab7f516d7.mp4',
|
||||
id: 5,
|
||||
file_id: 4307,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '苏州工业园区展示中心',
|
||||
url: '/storage/files/1687771296649958a0c21d9.mp4',
|
||||
id: 6,
|
||||
file_id: 614,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '江村文化园（费孝通江村纪念馆）',
|
||||
url: '/storage/files/171351758966223415434fb.mp4',
|
||||
id: 7,
|
||||
file_id: 4482,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '杨嘉墀故居',
|
||||
url: '/storage/files/yangjiachi2.mp4',
|
||||
id: 8,
|
||||
file_id: 4960,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '新四军太湖抗日游击支队纪念馆',
|
||||
url: '/storage/files/171135728166013d6163297.mp4',
|
||||
id: 9,
|
||||
file_id: 4201,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '阳澄湖江抗纪念馆',
|
||||
url: '/storage/files/yangchenghujiangkang2.mp4',
|
||||
id: 10,
|
||||
file_id: 4959,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '太仓革命烈士陵园',
|
||||
url: '/storage/files/17138573556627634b0462e.mp4',
|
||||
id: 11,
|
||||
file_id: 4610,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '吴健雄陈列馆',
|
||||
url: '/storage/files/wujianxiong2.mp4',
|
||||
id: 12,
|
||||
file_id: 4958,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '谢恺烈士故居',
|
||||
url: '/storage/files/17135049066622028ada78b.mp4',
|
||||
id: 13,
|
||||
file_id: 4459,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '沙家浜革命历史纪念馆',
|
||||
url: '/storage/files/171135292266012c5a6749c.mp4',
|
||||
id: 14,
|
||||
file_id: 4183,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '常熟党史馆暨李强革命历程展示馆',
|
||||
url: '/storage/files/1712045015660bbbd798110.mp4',
|
||||
id: 15,
|
||||
file_id: 4308,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '王淦昌故居',
|
||||
url: '/storage/files/1687836090649a55baddd2e.mp4',
|
||||
id: 16,
|
||||
file_id: 713,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '“与时俱进的昆山之路”成果展',
|
||||
url: '/storage/files/1687773674649961ea2a251.mp4',
|
||||
id: 17,
|
||||
file_id: 653,
|
||||
type: 'video'
|
||||
}, {
|
||||
name: '苏州五卅运动铺就一条红色道路',
|
||||
url: '/storage/files/18wsljnb.mp3',
|
||||
id: 18,
|
||||
file_id: 4989,
|
||||
type: 'audio',
|
||||
image: '/storage/files/18wsljnb.png',
|
||||
image_id: 4994
|
||||
}, {
|
||||
name: '汪伯乐',
|
||||
url: '/storage/files/19blzx.mp3',
|
||||
id: 19,
|
||||
file_id: 4990,
|
||||
type: 'audio',
|
||||
image: '/storage/files/19blzx.png',
|
||||
image_id: 4995
|
||||
}, {
|
||||
name: '夜袭浒墅关，传递苏州的抗战强音',
|
||||
url: '/storage/files/20yxxsg.mp3',
|
||||
id: 20,
|
||||
file_id: 4991,
|
||||
type: 'audio',
|
||||
image: '/storage/files/20yxxsg.png',
|
||||
image_id: 4996
|
||||
}, {
|
||||
name: '张应春',
|
||||
url: '/storage/files/21zycls.mp3',
|
||||
id: 21,
|
||||
file_id: 4992,
|
||||
type: 'audio',
|
||||
image: '/storage/files/21zycls.png',
|
||||
image_id: 4997
|
||||
}, {
|
||||
name: '双山岛战斗奏响解放苏州的序曲',
|
||||
url: '/storage/files/22ssddj.mp3',
|
||||
id: 22,
|
||||
file_id: 4993,
|
||||
type: 'audio',
|
||||
image: '/storage/files/22ssddj.png',
|
||||
image_id: 4998
|
||||
}]
|
||||
|
||||
export {
|
||||
baseJson
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
@ -0,0 +1,77 @@
|
||||
{
|
||||
"name" : "xzhssz",
|
||||
"appid" : "__UNI__AF2F10F",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"h5" : {
|
||||
"router" : {
|
||||
"base" : "xzhssz"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
|
||||
<view class="playvideo">
|
||||
<view class="playvideowrap">
|
||||
|
||||
<view class="title">{{title}}</view>
|
||||
|
||||
<view v-if="type=='video'">
|
||||
<video style="width:100%" ref="videos" id="videos" :autoplay="true"
|
||||
@play="playFullScreen" :src="url?url:''" play-btn-position="center"></video>
|
||||
</view>
|
||||
<view v-if="type=='audio'" style="padding:20rpx;padding-top:0">
|
||||
<image :src="image" mode="heightFix" style="max-width:690rpx;height:500rpx;display:block;margin:20rpx auto;margin-top:0"></image>
|
||||
<free-audio startPic='../../static/detail-play.png'
|
||||
endPic='../../static/detail-stop.png' audioId='audio1' :url="url?url:''"></free-audio>
|
||||
</view>
|
||||
<!-- -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
baseJson
|
||||
} from "@/config/index.js"
|
||||
import freeAudio from '@/components/free-audio.vue'
|
||||
export default {
|
||||
components: {
|
||||
freeAudio
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
type: 'video',
|
||||
url: '',
|
||||
baseUrl: "http://h5.ali251.langye.net",
|
||||
title: '',
|
||||
image:''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("options", options)
|
||||
|
||||
this.id = options.id ? options.id : ''
|
||||
this.type = options.type ? options.type : 'video'
|
||||
if (this.id) {
|
||||
baseJson.map(item => {
|
||||
if (this.id == item.id) {
|
||||
this.url = this.baseUrl + item.url
|
||||
this.type = item.type
|
||||
this.title = item.name
|
||||
if(item.type==='audio'){
|
||||
this.image = this.baseUrl + item.image
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log("baseJson", baseJson, this.id, this.url, this.title)
|
||||
},
|
||||
methods: {
|
||||
playFullScreen() {
|
||||
let videoContext = uni.createVideoContext('videos', this)
|
||||
videoContext.requestFullScreen()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.playvideo {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40%;
|
||||
/* text-align: center; */
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,13 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,2 @@
|
||||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>xzhssz</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/xzhssz/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/xzhssz/static/js/chunk-vendors.e755e799.js></script><script src=/xzhssz/static/js/index.4c036a4c.js></script></body></html>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
Loading…
Reference in new issue