mobile_h5/card/pages/index/index.vue

<template>
	<!-- <view></view> -->
	<view class="body body-radius">
		<view class="content uni-column" :class="contentBg" @click="btnClick">
			<view class="main uni-column">
				<image mode="aspectFit" class="logo" :src="logoSrc"></image>
				<view class="uni-row" style="position: relative;">
					<text class="type mod-text">{{type}}</text>
				</view>
				<view class="name mod-text">{{name}}</view>
				<button class="button mod-button">{{btnText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '../../common/tools';
	import Bridge from '../../sdk/bridge';
	import cardfunc from '../../common/cardfunc';
	import {
		token,
		ossUrl
	} from '../../common/api';

	export default {
		data() {
			return {
				queryObj: {},
				queryString: "",
				token: "",
				ecId: 0, // 卡片id
				
				// Card UI Data
				contentBg: "content-bg-blue",
				logoSrc: "/static/logo.png",
				type: "示例卡片",
				name: "点击查看详情",
				btnText: "立即查看",
			}
		},
		onLoad(query) { // 类型非必填，可自动推导
			console.log("onLoad");
			console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(this.queryString);
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;

			// --- Original Logic Commented Out for Demo ---
			/*
			cardfunc.init(this, this.token, this.ecId);
			cardfunc.userConfigQuery(this.userConfigQueryCallback);
			*/
		},
		methods: {
			/*
			userConfigQueryCallback(userconfig) {
				// console.log("[userConfigQueryCallback] userconfig:", userconfig);
				userconfig = cardfunc.parseCardConfig(userconfig);
				const tplTypeId = userconfig.tplInfo.tplTypeId;	// 模板类型ID
				const ssctId = userconfig.tplInfo.ssctId;	// 模板ID
				// const styleId = userconfig.tplInfo.styleId;	// 模板样式ID
				
				let tplType = "";	// 模板类型
				let tpl = "";		// 模板
				if (tplTypeId == 1) {
					tplType = "tpl";
					if (ssctId > 0) {
						tpl = "style" + ssctId;
					}
				}
				
				if (tplType != "" && tpl != "") {
					const url = `/pages/${tplType}/${tpl}/index?${this.queryString}`;
					uni.reLaunch({
						url: url
					});
				} else {
					uni.showToast({
						title: `模板参数错误`,
						icon: 'none',
						duration: 3000
					});
				}
			},
			*/
			btnClick() {
				// 构造目标 URL，通常是部署后的完整路径
				// 注意：这里为了演示使用了 ossUrl，实际开发中请根据环境调整
				// full=true 是给 Flutter 端拦截的信号（约定俗成）
				const url = `${ossUrl}#/pages/index/detail?${this.queryString}&full=true`;
				
				console.log("Navigating to:", url);
				
				// 使用 Bridge 触发跳转
				Bridge.appAction(url);
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		justify-content: center;
		align-items: center;
	}
	
	.content-bg-blue {
		background: linear-gradient(180deg,#178bff 0%,#004d9b 100%);
	}

	.main {
		width: 100%;
		height: 600rpx;
		justify-content: space-evenly;
		align-items: center;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	
	.type {
		opacity: 0.8;
		font-family: Roboto;
		color: #ffffff;
		font-size: 36rpx;
		text-align: center;
	}
	
	.name {
		font-family: Roboto;
		color: #ffffff;
		font-size: 48rpx;
		text-align: center;
		font-weight: bold;
	}
	
	.button {
		width: 320rpx;
		height: 86rpx;
		color: #0458ad;
		background: #ffffff;
		border-radius: 56rpx;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
	}
</style>