jackyu66gitandCursor
5667b9f49b
弃用 web-view 内 cover 层，改为 yxg-nav-bar + web-view 兄弟结构； logo 使用包内静态图，H5 参数 nh=1&sbh=4。 Co-authored-by: Cursor <cursoragent@cursor.com>
129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template>
|
|
<view class="yxg-page">
|
|
<view class="yxg-nav-bar" :style="navBarStyle">
|
|
<view class="yxg-nav-row" :style="navRowStyle">
|
|
<image
|
|
class="yxg-nav-logo"
|
|
:style="logoStyle"
|
|
:src="YXG_MP_LOGO_URL"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<web-view
|
|
class="yxg-webview"
|
|
:style="webviewStyle"
|
|
:src="h5Url"
|
|
@load="onWebLoad"
|
|
@error="onWebError"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { YXG_H5_BASE, YXG_H5_VERSION, YXG_MP_LOGO_URL } from '@/util/yxgConfig.js'
|
|
|
|
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;`
|
|
const navRowStyle = `height:${navBarH}px;`
|
|
const logoStyle = `width:${logoW}px;height:${logoH}px;`
|
|
const webviewStyle = `height:${webviewH}px;`
|
|
|
|
const h5Url = computed(
|
|
() =>
|
|
`${YXG_H5_BASE}?mp=1&nh=1&sbh=4&v=${YXG_H5_VERSION}#wechat_redirect`,
|
|
)
|
|
|
|
function onWebLoad(e) {
|
|
console.log('[yxg-magic] web-view load', e?.detail || e)
|
|
}
|
|
|
|
function onWebError(e) {
|
|
console.error('[yxg-magic] web-view error', e?.detail || e)
|
|
uni.showToast({
|
|
title: 'H5加载失败，请检查业务域名',
|
|
icon: 'none',
|
|
duration: 3000,
|
|
})
|
|
}
|
|
|
|
console.log('[yxg-magic] nav-bar + web-view', {
|
|
headH,
|
|
webviewH,
|
|
logoW,
|
|
logoH,
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #ffd1c7;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.yxg-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #ffd1c7;
|
|
}
|
|
|
|
.yxg-nav-bar {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #ffd1c7;
|
|
}
|
|
|
|
.yxg-nav-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.yxg-nav-logo {
|
|
display: block;
|
|
}
|
|
|
|
.yxg-webview {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|