yuxingu-Miniprogram-dev/pages/yxg-magic/index.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">
				<!-- #ifndef MP-WEIXIN -->
				<image
					class="yxg-nav-logo"
					:src="YXG_MP_LOGO_URL"
					mode="aspectFit"
					:style="logoStyle"
				/>
				<!-- #endif -->
			</view>
		</view>
		<web-view
			class="yxg-webview"
			:style="webviewStyle"
			:src="h5Url"
			@load="onWebLoad"
			@error="onWebError"
		/>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 同级 cover：仅承载 logo，不在 web-view 内；普通 image 会被 web-view 盖住 -->
		<cover-view class="yxg-logo-cover" :style="logoCoverStyle">
			<cover-image
				class="yxg-nav-logo"
				:src="YXG_MP_LOGO_URL"
				:style="coverLogoStyle"
			/>
		</cover-view>
		<!-- #endif -->
	</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 logoLeft = Math.floor((screenW - logoW) / 2)
const logoTop = Math.floor((navBarH - logoH) / 2)

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 logoCoverStyle = `position:fixed;top:${statusBarH}px;left:0;width:${screenW}px;height:${navBarH}px;z-index:9999;`
const coverLogoStyle = `position:absolute;left:${logoLeft}px;top:${logoTop}px;width:${logoW}px;height:${logoH}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] outer nav + webview', {
	headH,
	webviewH,
	logoW,
	logoH,
	logoSrc: YXG_MP_LOGO_URL,
})
</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>