From 9b0a2ce9b6e87146cfd8351295d8e9d09a08987c Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Tue, 29 Sep 2026 11:16:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0components-diy\diy-we?=
 =?UTF-8?q?bview.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-webview.vue | 499 +++++++++++++++++++++++++++++++++
 1 file changed, 499 insertions(+)
 create mode 100644 components-diy/diy-webview.vue

diff --git a/components-diy/diy-webview.vue b/components-diy/diy-webview.vue
new file mode 100644
index 0000000..1ab3343
--- /dev/null
+++ b/components-diy/diy-webview.vue
@@ -0,0 +1,499 @@
+<template>
+	<view data-component-name="diy-webview" class="diy-webview" :style="containerStyle" @tap="handleTap">
+		<template v-if="src">
+			<!-- #ifdef H5 -->
+			<iframe
+				v-if="!lazyPending"
+				class="diy-webview-iframe"
+				:src="src"
+				:scrolling="scrollMode"
+				referrerpolicy="no-referrer"
+				frameborder="0"
+				allow="fullscreen"
+				loading="lazy"
+				@load="handleIframeLoad"
+				@error="handleIframeError"
+			></iframe>
+			<!-- 后台配置的占位图 / 懒加载未进入视口时的展示 -->
+			<image
+				v-if="placeholderUrl && (lazyPending || !loaded)"
+				class="diy-webview-placeholder"
+				:src="placeholderUrl"
+				mode="aspectFill"
+			></image>
+			<!-- 加载中遮罩：iframe 触发 load 前展示，避免白屏观感 -->
+			<view v-if="!loaded && !loadError && !lazyPending" class="webview-loading" :style="errorStyle">
+				<view class="webview-loading-spinner"></view>
+				<text class="webview-loading-text">网页加载中...</text>
+			</view>
+			<!-- H5 下 iframe 内部点击不会冒泡到父容器，提供角标按钮保证"点击跳转"可用 -->
+			<view class="webview-open-chip" @tap.stop="mpGo">
+				<text class="iconfont icon-fuzhilianjie"></text>
+				<text class="webview-open-chip-text">{{ mpGoText }}</text>
+			</view>
+			<!-- #endif -->
+
+			<!-- #ifndef H5 -->
+			<!-- 小程序/APP：内嵌 web-view 会整页覆盖原生层，改为卡片展示 + 点击跳转 -->
+			<view class='webview-mp-go' :style='mpGoStyle' @tap.stop='mpGo'>
+				<text class='iconfont icon-fuzhilianjie'></text>
+				<text class='webview-mp-go-text'>{{ mpGoText }}</text>
+			</view>
+			<!-- #endif -->
+
+			<!-- 加载失败兜底（如目标站禁止被嵌入/内核过旧加载失败）：可点击直接打开 -->
+			<view v-if="loadError" class="webview-error" :style="errorStyle" @tap.stop="mpGo">
+				<text class="iconfont icon-fuzhilianjie"></text>
+				<text class="error-text">{{ errorText }}</text>
+				<text class="error-open">点击此处打开网页</text>
+			</view>
+		</template>
+
+		<view v-else class="webview-empty" :style="emptyStyle">
+			<text class="iconfont icon-fuzhilianjie"></text>
+			<text class="empty-text">请配置网页链接</text>
+		</view>
+	</view>
+</template>
+
+<script>
+// 网页/WebView 组件：后台配置 URL 后嵌入展示，H5 使用 iframe，小程序/APP 使用原生 web-view
+import DiyMinx from './minx.js'
+export default {
+	name: 'diy-webview',
+	props: {
+		value: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			src: '',
+			loaded: false,
+			loadError: false,
+			// 后台开启"懒加载"时，iframe 需等容器滚动进入视口后才真正渲染
+			lazyPending: false
+		};
+	},
+	mixins: [DiyMinx],
+	created() {
+		this.initWebview();
+	},
+	mounted() {
+		this._mountedFlag = true;
+		// #ifdef H5
+		if (this.lazyPending) this._setupLazyObserver();
+		// #endif
+	},
+	beforeDestroy() {
+		if (this._observer) {
+			try { this._observer.disconnect(); } catch (e) {}
+			this._observer = null;
+		}
+		this._clearLoadTimer();
+	},
+	watch: {
+		value: {
+			immediate: true,
+			deep: true,
+			handler(newVal) {
+				if (newVal) {
+					this.initWebview();
+				}
+			}
+		}
+	},
+	computed: {
+		containerStyle() {
+			let style = '';
+			// 后台高度为 px 值，与项目其他组件一致 ×2 转 rpx（diy-horz-blank 同款换算）
+			const height = Number(this.value?.height) || 300;
+			style += `height:${height * 2}rpx;`;
+			// 组件角度 round 时按后台圆角值渲染（×2 rpx）
+			if (this.value?.componentAngle === 'round') {
+				const topR = Number(this.value?.topAroundRadius) || 0;
+				const bottomR = Number(this.value?.bottomAroundRadius) || 0;
+				style += `border-radius:${topR * 2}rpx ${topR * 2}rpx ${bottomR * 2}rpx ${bottomR * 2}rpx;`;
+			}
+			if (this.value?.bgColor) {
+				style += `background:${this.value.bgColor};`;
+			}
+			if (this.value?.marginTop) {
+				style += `margin-top:${this.value.marginTop}rpx;`;
+			}
+			if (this.value?.marginBottom) {
+				style += `margin-bottom:${this.value.marginBottom}rpx;`;
+			}
+			if (this.value?.padding) {
+				style += `padding:${this.value.padding}rpx;`;
+			}
+			return style;
+		},
+		emptyStyle() {
+			let style = '';
+			if (this.value?.bgColor) {
+				style += `background:${this.value.bgColor};`;
+			}
+			return style;
+		},
+		errorStyle() {
+			let style = '';
+			if (this.value?.bgColor) {
+				style += `background:${this.value.bgColor};`;
+			}
+			return style;
+		},
+		mpGoText() {
+			// 注意：this.$lang(key) 在 key 不存在时返回 key 字符串本身，不能仅靠 this.$lang 是否存在判断。
+			// 取到 key 与传入 key 不同才视为命中语言包，否则用 fallback。
+			const t = this.$lang && this.$lang('components-diy.diy-webview.mpGo');
+			return (t && t !== 'components-diy.diy-webview.mpGo') ? t : '点击查看网页内容';
+		},
+		mpGoStyle() {
+			let style = '';
+			if (this.value && this.value.bgColor) {
+				style += 'background:' + this.value.bgColor + ';';
+			}
+			return style;
+		},
+		errorText() {
+			const t = this.$lang && this.$lang('components-diy.diy-webview.loadError');
+			return (t && t !== 'components-diy.diy-webview.loadError') ? t : '网页加载失败，请检查链接';
+		},
+		// iframe 滚动条开关（后台"滚动"配置：true 显示 / false 隐藏）
+		scrollMode() {
+			const s = this.value?.scrolling;
+			return (s === false || s === 'false' || s === 0) ? 'no' : 'yes';
+		},
+		// 占位图（后台 imageUrl，iframe 加载完成前展示）
+		placeholderUrl() {
+			const url = this.value?.imageUrl;
+			return url ? (this.$util.img ? this.$util.img(url) : url) : '';
+		}
+	},
+	methods: {
+		initWebview() {
+			const config = this.value || {};
+			this.loadError = false;
+			this.loaded = false;
+			// 调试用：把后台下发的完整 value 对象打印到控制台，方便定位 URL 字段名
+			console.log('[diy-webview] value:', JSON.stringify(config));
+			// 兼容后台可能使用的多种链接字段名/嵌套结构
+			const url = this.extractUrl(config);
+			// 懒加载：开启时等容器进入视口再渲染 iframe
+			this.lazyPending = !!(config.lazyRender || config.lazyLoad);
+			// #ifdef H5
+			// 数据热更新时（后台重新保存）若尚未进入过视口，需重建观察器（仅在挂载后才可建立）
+			if (this.lazyPending && this._mountedFlag) this._setupLazyObserver();
+			// #endif
+			// 优先使用后台直接下发的 url；若配置的是接口来源(source=api)，则通过接口拉取
+			if (config.source === 'api' && config.apiUrl) {
+				this.loadUrlFromApi(config.apiUrl);
+			} else if (url) {
+				this.src = this.buildSrc(url);
+				console.log('[diy-webview] src:', this.src);
+				this._startLoadTimer();
+			} else {
+				this.src = '';
+				console.warn('[diy-webview] 未找到有效链接字段');
+			}
+		},
+		// 在格式化后的 URL 基础上，拼接后台配置的"附加参数"与"携带登录态"(token / member_id)
+		buildSrc(url) {
+			let src = this.formatUrl(url);
+			const config = this.value || {};
+			const extra = [];
+			// 附加参数（后台 urlParams 字段，格式 "a=1&b=2"，多组参数用 & 连接）
+			const rawExtra = config.urlParams || config.extraParams || config.appendParams || config.additionalParams || config.params;
+			if (rawExtra && typeof rawExtra === 'string') {
+				extra.push(rawExtra.replace(/^[?&]+/, ''));
+			}
+			// 携带登录态（后台 carryToken 字段：none 不携带 / token / member_id）
+			const loginState = config.carryToken || config.loginState || config.login_state;
+			if (loginState === 'token') {
+				const token = (this.$store && this.$store.state && this.$store.state.token) || '';
+				if (token) extra.push('token=' + encodeURIComponent(token));
+			} else if (loginState === 'member_id') {
+				const memberInfo = (this.$store && this.$store.state && this.$store.state.memberInfo) || {};
+				const memberId = memberInfo.member_id || memberInfo.memberId || '';
+				if (memberId) extra.push('member_id=' + memberId);
+			}
+			if (extra.length) {
+				src += (src.indexOf('?') !== -1 ? '&' : '?') + extra.filter(Boolean).join('&');
+			}
+			return src;
+		},
+		// #ifdef H5
+		// 懒加载：容器滚动进入视口（含预加载缓冲 200px）后才渲染 iframe
+		_setupLazyObserver() {
+			try {
+				if (this._observer) {
+					this._observer.disconnect();
+					this._observer = null;
+				}
+				this._observer = uni.createIntersectionObserver(this, { thresholds: [0] });
+				this._observer.relativeToViewport({ bottom: 200 }).observe('.diy-webview', () => {
+					this.lazyPending = false;
+					if (this._observer) {
+						this._observer.disconnect();
+						this._observer = null;
+					}
+				});
+			} catch (e) {
+				// 观察器异常时直接渲染，避免内容永远空白
+				this.lazyPending = false;
+			}
+		},
+		// #endif
+		extractUrl(config) {
+			if (!config || typeof config !== 'object') return '';
+			// 优先读取常见字段名（兼容后台不同命名习惯）
+			let direct = config.url || config.link || config.linkUrl || config.pageUrl || config.webUrl || config.web_url || config.externalUrl || config.targetUrl || config.src || config.href || config.path || config.address;
+			// 兼容装修链接选择器下发的对象形态：link = { wap_url / url / h5_url ... }
+			if (direct && typeof direct === 'object') {
+				direct = direct.wap_url || direct.h5_url || direct.url || direct.app_url || direct.link || '';
+			}
+			if (direct && typeof direct === 'string') return direct.trim();
+			// 兼容嵌套结构：如 value.value.url / value.config.url / value.data.url
+			for (const key of ['value', 'config', 'data', 'content', 'params']) {
+				if (config[key] && typeof config[key] === 'object') {
+					const nested = this.extractUrl(config[key]);
+					if (nested) return nested;
+				}
+			}
+			return '';
+		},
+		formatUrl(url) {
+			if (!url || typeof url !== 'string') return '';
+			let formatted = url.trim();
+			// 如果后台把 URL 编码存储，做一次解码
+			if (formatted.indexOf('%') !== -1) {
+				try { formatted = decodeURIComponent(formatted); } catch (e) {}
+			}
+			// 支持以 http:// 或 https:// 开头的完整地址
+			if (/^https?:\/\//i.test(formatted)) return formatted;
+			// 支持相对路径或站点内链接，自动补全
+			return this.$util.img ? this.$util.img(formatted) : formatted;
+		},
+		loadUrlFromApi(apiUrl) {
+			this.$api.sendRequest({
+				url: apiUrl,
+				success: res => {
+					if (res.code == 0 && res.data) {
+						const data = typeof res.data === 'string' ? { url: res.data } : res.data;
+						this.src = this.formatUrl(data.url || data.link || '');
+					}
+				},
+				fail: () => {
+					this.src = '';
+				}
+			});
+		},
+		updateNavbarTitle(e) {
+			// 参照 pages-tool/webview.vue：当 web-view 页面标题更新时，可同步设置导航栏标题
+			const title = e?.detail?.title || e?.title || '';
+			if (title) {
+				uni.setNavigationBarTitle({ title });
+			}
+			this.$emit('titleUpdate', e);
+		},
+		// 点击网页容器整体 → 跳转到配置的链接（走统一 diyRedirectTo，外链自动进 web-view / 新窗口）
+		handleTap() {
+			if (this.src) this.mpGo();
+		},
+		mpGo() {
+			if (!this.src) return;
+			if (this.$util && this.$util.diyRedirectTo) {
+				this.$util.diyRedirectTo({
+					wap_url: this.src,
+					title: (this.value && this.value.title) || (this.value && this.value.name) || '网页',
+					name: (this.value && this.value.name) ? this.value.name : '网页'
+				});
+			} else {
+				uni.navigateTo({ url: '/pages_tool/webview/webview?src=' + encodeURIComponent(this.src) });
+			}
+		},
+
+		// 注意：方法名不能叫 onLoad/onError —— uni-app 会把组件里的 onLoad 当页面
+		// 生命周期提升出 methods，导致 @load="onLoad" 渲染时报 handler undefined。
+		handleIframeLoad(e) {
+			this.loaded = true;
+			this.loadError = false;
+			this._clearLoadTimer();
+			this.$emit('load', e);
+		},
+		handleIframeError(e) {
+			this.loadError = true;
+			this.loaded = true;
+			this._clearLoadTimer();
+			console.error('[diy-webview] 加载失败:', this.src, e);
+			this.$emit('error', e);
+		},
+		// 加载超时兜底：部分浏览器内核(如 HBuilderX 内置浏览器的老 CEF 内核)对跨域 iframe
+		// 请求失败时不会触发 error 事件，用定时器兜住，避免容器一直白屏
+		_startLoadTimer() {
+			this._clearLoadTimer();
+			// #ifdef H5
+			this._loadTimer = setTimeout(() => {
+				if (!this.loaded) {
+					this.loadError = true;
+					console.warn('[diy-webview] 加载超时(10s)，显示兜底内容:', this.src);
+				}
+			}, 10000);
+			// #endif
+		},
+		_clearLoadTimer() {
+			if (this._loadTimer) {
+				clearTimeout(this._loadTimer);
+				this._loadTimer = null;
+			}
+		},
+		onMessage(e) {
+			// 接收 web-view / iframe 发来的消息，可用于与后台数据交互
+			this.$emit('message', e);
+			// 同时通过事件总线广播，方便页面级监听
+			this.__$emitEvent({
+				eventName: 'diy-webview-message',
+				data: {
+					componentName: this.value?.componentName,
+					moduleIndex: this.value?.moduleIndex,
+					message: e?.detail?.data || e?.data
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.diy-webview {
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	.diy-webview-iframe,
+	.diy-webview-native {
+		width: 100%;
+		height: 100%;
+		display: block;
+		border: none;
+	}
+
+	/* 占位图 / 懒加载未进入视口时的展示 */
+	.diy-webview-placeholder {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+	}
+
+	/* H5 角标跳转按钮：iframe 内部点击不冒泡，用它兜底"点击跳转" */
+	.webview-open-chip {
+		position: absolute;
+		right: 16rpx;
+		bottom: 16rpx;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		padding: 8rpx 20rpx;
+		border-radius: 999rpx;
+		background: rgba(0, 0, 0, 0.55);
+		color: #fff;
+		font-size: 22rpx;
+		line-height: 1;
+
+		.iconfont {
+			font-size: 24rpx;
+			margin-right: 6rpx;
+		}
+	}
+
+	/* 加载中遮罩 */
+	.webview-loading {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: #f7f8fa;
+		color: #999;
+		font-size: 24rpx;
+	}
+
+	.webview-loading-spinner {
+		width: 44rpx;
+		height: 44rpx;
+		border: 4rpx solid #e5e6eb;
+		border-top-color: #576b95;
+		border-radius: 50%;
+		margin-bottom: 16rpx;
+		animation: webview-spin 0.8s linear infinite;
+	}
+
+	@keyframes webview-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.webview-empty,
+	.webview-mp-go {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: #f5f5f5;
+		color: #576B95;
+		font-size: 26rpx;
+
+		.iconfont {
+			font-size: 48rpx;
+			margin-bottom: 12rpx;
+		}
+	}
+
+	.webview-error {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: #f5f5f5;
+		color: #999;
+		font-size: 26rpx;
+
+		.iconfont {
+			font-size: 48rpx;
+			margin-bottom: 12rpx;
+		}
+	}
+
+	.webview-error {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		background: rgba(255, 255, 255, 0.96);
+		color: #ff6b35;
+
+		.error-open {
+			margin-top: 16rpx;
+			font-size: 24rpx;
+			color: #576b95;
+			text-decoration: underline;
+		}
+	}
+}
+</style>