141 lines
2.8 KiB
Vue
141 lines
2.8 KiB
Vue
<template>
|
||
<!-- 顶栏在 web-view 外层（页面级），H5 只在下方 web-view 里 -->
|
||
<view class="yxg-page">
|
||
<view class="yxg-nav-bar" :style="navBarStyle">
|
||
<view class="yxg-nav-row" :style="navRowStyle">
|
||
<image
|
||
class="yxg-nav-logo"
|
||
:src="YXG_MP_LOGO_URL"
|
||
mode="aspectFit"
|
||
:style="logoStyle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<web-view
|
||
class="yxg-webview"
|
||
:style="webviewStyle"
|
||
:src="h5Url"
|
||
@load="onWebLoad"
|
||
@error="onWebError"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { YXG_H5_BASE, YXG_H5_VERSION, YXG_MP_LOGO_URL } from '@/util/yxgConfig.js'
|
||
|
||
function clearNavTitle() {
|
||
// #ifdef MP-WEIXIN
|
||
uni.setNavigationBarTitle({ title: '\u200b' })
|
||
// #endif
|
||
}
|
||
|
||
onShow(() => {
|
||
clearNavTitle()
|
||
})
|
||
|
||
clearNavTitle()
|
||
|
||
function readWindow() {
|
||
// #ifdef MP-WEIXIN
|
||
if (typeof wx !== 'undefined' && wx.getWindowInfo) {
|
||
return wx.getWindowInfo()
|
||
}
|
||
// #endif
|
||
return uni.getSystemInfoSync()
|
||
}
|
||
|
||
const win = readWindow()
|
||
const statusBarH = win.statusBarHeight || 0
|
||
const windowH = win.windowHeight || win.screenHeight || 667
|
||
const screenW = win.windowWidth || win.screenWidth || 375
|
||
let navBarH = 44
|
||
let menuH = 32
|
||
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
const menu = uni.getMenuButtonBoundingClientRect()
|
||
if (menu?.height) {
|
||
navBarH = (menu.top - statusBarH) * 2 + menu.height
|
||
menuH = menu.height
|
||
}
|
||
} catch (e) {
|
||
console.warn('[yxg-magic] menuButton rect failed', e)
|
||
}
|
||
// #endif
|
||
|
||
const headH = statusBarH + navBarH
|
||
const webviewH = windowH - headH
|
||
const logoH = Math.min(menuH, 30)
|
||
const logoW = Math.min(Math.round((logoH * 598) / 130), Math.floor(screenW * 0.4))
|
||
|
||
const navBarStyle = `height:${headH}px;padding-top:${statusBarH}px;box-sizing:border-box;`
|
||
const navRowStyle = `height:${navBarH}px;`
|
||
const logoStyle = `width:${logoW}px;height:${logoH}px;`
|
||
const webviewStyle = `top:${headH}px;height:${webviewH}px;`
|
||
|
||
const h5Url = computed(
|
||
() =>
|
||
`${YXG_H5_BASE}?mp=1&nh=1&sbh=4&v=${YXG_H5_VERSION}#wechat_redirect`,
|
||
)
|
||
|
||
function onWebLoad() {
|
||
// web-view loaded
|
||
}
|
||
|
||
function onWebError(e) {
|
||
console.error('[yxg-magic] web-view error', e?.detail || e)
|
||
uni.showToast({
|
||
title: 'H5加载失败，请检查业务域名',
|
||
icon: 'none',
|
||
duration: 3000,
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #ffd1c7;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.yxg-page {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background-color: #ffd1c7;
|
||
}
|
||
|
||
.yxg-nav-bar {
|
||
position: relative;
|
||
z-index: 2;
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #ffd1c7;
|
||
}
|
||
|
||
.yxg-nav-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.yxg-nav-logo {
|
||
display: block;
|
||
}
|
||
|
||
.yxg-webview {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1;
|
||
}
|
||
</style>
|