134 lines
2.5 KiB
Vue
134 lines
2.5 KiB
Vue
<!-- pages/webview/webview.vue -->
|
|
<template>
|
|
<view class="webview-container">
|
|
<navBar class="nav-bar" :title="pageTitle" :bgColor="data.navBar.bgColor" isBack></navBar>
|
|
<web-view :src="url" :webview-styles="webviewStyles"></web-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 自定义头部
|
|
// import ZdyNavbar from "@/components/navbar/navbar.vue"
|
|
import navBar from '@/components/nav-bar/nav-bar.vue'
|
|
import { util } from '@/utils/common.js'
|
|
|
|
import {
|
|
ref,
|
|
reactive,
|
|
watch,
|
|
nextTick,
|
|
getCurrentInstance,
|
|
onMounted,
|
|
onBeforeUnmount,
|
|
toRefs,
|
|
computed
|
|
} from "vue";
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
title: "",
|
|
bgColor: '#ffffff',
|
|
},
|
|
dark: "dark",
|
|
// 状态栏高度
|
|
systemBarHeight: "0",
|
|
})
|
|
|
|
let {
|
|
systemBarHeight
|
|
} = toRefs(data)
|
|
|
|
const url = ref('')
|
|
const pageTitle = ref('')
|
|
|
|
onLoad((options) => {
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
systemBarHeight.value = res.statusBarHeight; // 获取状态栏高度
|
|
}
|
|
})
|
|
if (options.url) {
|
|
url.value = decodeURIComponent(options.url)
|
|
// const videoExps = [/\.mp4$/i, /\.m3u8$/i, /\.flv$/i, /\.avi$/i, /\.mov$/i, /\.wmv$/i, /\.webm$/i,
|
|
// /\.mkv$/i
|
|
// ];
|
|
// const isVideo = videoExps.some(exp => exp.test(url.value))
|
|
// console.log(isVideo)
|
|
// if (isVideo) {
|
|
// plus.navigator.setStatusBarStyle("light");
|
|
// } else {
|
|
// plus.navigator.setStatusBarStyle("dark");
|
|
// }
|
|
}
|
|
console.log("options参数", options);
|
|
if (options.title) {
|
|
console.log("标题", options.title);
|
|
pageTitle.value = decodeURIComponent(options.title)
|
|
}
|
|
})
|
|
|
|
onShow(() => {
|
|
// #ifdef APP-PLUS
|
|
util.setAndroidSystemBarColor('#ffffff')
|
|
setTimeout(() => {
|
|
plus.navigator.setStatusBarStyle("dark");
|
|
}, 500);
|
|
// #endif
|
|
})
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
|
|
const isVideo = computed(() => {
|
|
if (!url.value) return false
|
|
const videoExps = [/\.mp4$/i, /\.m3u8$/i, /\.flv$/i, /\.avi$/i, /\.mov$/i, /\.wmv$/i, /\.webm$/i,
|
|
/\.mkv$/i
|
|
];
|
|
return videoExps.some(exp => exp.test(url.value));
|
|
})
|
|
|
|
const webviewStyles = computed(() => {
|
|
return {
|
|
top: `${Number(systemBarHeight.value) + 40}px`,
|
|
bottom: '0px',
|
|
'padding-bottom': '20px'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.webview-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.video-web {
|
|
position: fixed;
|
|
width: 100%;
|
|
background-color: #000;
|
|
}
|
|
</style>
|
|
<style>
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
</style> |