mobile_h5/card/pages/ad/detail.vue

<!-- 
广告宣传 - 广告详情页面
http://localhost:5173/card/#/pages/ad/detail
https://oss-mbh5.colormaprun.com/card/#/pages/ad/detail
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column uni-jcc top">
				<my-topbar class="topbar-color" :mcName="title" :showRule="false" @btnBackClick="btnBack"></my-topbar>
				<view class="top-content uni-row">
				</view>
			</view>

			<view class="main uni-column">
				<web-view class="webView" :fullscreen="false" :src="adUrl"></web-view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import cardfunc from '/common/cardfunc';
	import {
		localCardConfig
	} from "./cardconfig/test.js";
	import {
		token
	} from '/common/api';
	
	export default {
		data() {
			return {
				cardConfigData: cardfunc.cardConfigData,
				pageReady: false,
				pageName: "detail",
				queryObj: {},
				queryString: "",
				token: "",
				cardconfig: {}, // 卡片配置
				
				title: "",
				adUrl: "", // 广告页面url
			}
		},
		onLoad(query) {
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;
			
			cardfunc.init(this, this.token, this.ecId);
			cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);
		},
		methods: {
			cardConfigQueryCallback(cardconfig) {
				this.cardconfig = cardconfig;
				this.loadCardConfig(this.cardconfig);
				this.pageReady = true;
			},
			loadCardConfig(cardconfig) {
				cardconfig = cardfunc.parseCardConfig(cardconfig);
				// console.log("[loadCardConfig] cardconfig:", cardconfig);
			
				// 加载卡片通用配置
				if (cardconfig.common != undefined) {
					cardfunc.loadCardCommonConfig(cardconfig.common);
				}
			
				// -------- 加载当前页面的配置 --------
			
				const config = cardfunc.parseCardConfig(cardconfig[this.pageName]);
				// console.log("[loadConfig] config_page:", config);
				if (config == undefined || config == null) {
					return;
				}
			
				// 加载CSS样式
				const css = config.css;
				if (css != undefined && css.length > 0) {
					tools.loadCssCode(css);
				}
				
				// 加载广告页面标题
				const title = config.title;
				// console.log("[loadConfig] title:", title);
				if (title != undefined && title.length > 0) {
					this.title = title;
				}
				
				// 加载广告页面url
				const adUrl = config.adUrl;
				// console.log("[loadConfig] adUrl:", adUrl);
				if (adUrl != undefined && adUrl.length > 0) {
					this.adUrl = adUrl;
				}
			},
			btnBack() {
				const url = `action://to_home/`;
				tools.appAction(url);
			},
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 36px;
		padding-top: 36px;
		flex-shrink: 0;
		background: rgb(255, 195, 0, 0);
	}

	.main {
	}

	/deep/ iframe {
		width: 100vw !important;
		height: calc(100vh - 72px) !important;
		border: 0 !important;
	}

</style>