mobile_h5/card/pages/ad/index.vue

<!-- 
广告宣传 - 卡片页
http://localhost:5173/card/#/pages/ad/index
https://oss-mbh5.colormaprun.com/card/#/pages/ad/index
 -->
<template>
	<view class="body body-radius">
		<view v-if="pageReady" class="content content-bg" @click="btnClick">
			<view class="card-top uni-row">
				<!-- <view class="top-right uni-row">
					<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
					<view class="countdown">{{countdown}}</view>
				</view> -->
			</view>
			<view class="card-main uni-column">
				<view class="logo"></view>
				<view class="uni-row" style="position: relative;">
					<!-- <image v-if="notice" mode="aspectFit" src="/static/common/notice.png" class="notice"></image> -->
					<text v-if="type != ''" class="type mod-text">{{type}}</text>
				</view>
				<view v-if="ecName != ''" class="name mod-text">{{ecName}}</view>
				<button v-if="btnText != ''" class="button mod-button">{{btnText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import cardfunc from '/common/cardfunc';
	import {
		localCardConfig
	} from "./cardconfig/test.js";
	import {
		token,
		ossUrl,
		apiCardBaseQuery
	} from '/common/api';

	export default {
		data() {
			return {
				cardConfigData: cardfunc.cardConfigData,
				pageReady: false,
				pageName: "index",
				queryObj: {},
				queryString: "",
				token: "",
				cardconfig: {}, // 卡片配置

				ecId: 0, // 卡片id
				ecName: '', // 卡片名称
				ecDesc: '', // 卡片简介
				beginSecond: null, // 卡片开始时间戳，单位秒
				endSecond: null, // 卡片结束时间戳，单位秒
				// secondCardName: '', // 跳转页面名称

				type: "",
				btnText: "",
				notice: false, // 是否显示(小红点)通知图标
			}
		},
		computed: {},
		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;

			this.type = query["type"] ?? "";
			this.btnText = query["btnText"] ?? "";

			cardfunc.init(this, this.token, this.ecId);
			cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);

			this.getCardBaseQuery();
		},
		onShow() {},
		onUnload() {
		},
		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);
				}
			},
			// 卡片基本信息查询
			getCardBaseQuery() {
				uni.request({
					url: apiCardBaseQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId,
						pageName: this.pageName
					},
					success: (res) => {
						// console.log("getCardBaseQuery", res)
						const data = res.data.data;

						this.ecName = data.ecName;
						this.ecDesc = data.ecDesc;
						this.beginSecond = data.beginSecond;
						this.endSecond = data.endSecond;
						// this.secondCardName = data.secondCardName;
					},
					fail: (err) => {
						console.log("getCardBaseQuery err", err)
					},
				});
			},
			btnClick() {
				const url = `${ossUrl}#/pages/ad/detail?${this.queryString}&full=true`;
				tools.appAction(url);
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.content-bg {
		background: linear-gradient(180deg, #7aedff 0%, #047200 100%);
		/* background: linear-gradient(180deg, #178bff 0%, #004d9b 100%); */
		/* background: linear-gradient(180deg, #7aedff 0%, #8d2219 100%); */
	}

	.card-top {
		width: 100%;
		justify-content: flex-end;
	}

	.top-right {
		min-width: 180rpx;
		height: 80rpx;
		margin-top: 30rpx;
		margin-right: 30rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 12px;
	}

	.clock {
		width: 50rpx;
		height: 50rpx;
		margin-right: 12rpx;
	}

	.countdown {
		min-width: 120rpx;
		text-align: center;
		font-family: Roboto;
		color: #ffffff;
		font-size: 46rpx;
		/* letter-spacing: 2rpx; */
	}

	.card-main {
		width: 100%;
		/* height: 700rpx; */
		height: 660rpx;
		margin-top: 20rpx;
		justify-content: space-evenly;
	}

	.logo {
		width: 50vw;
		height: 50vw;
		/* background-image: var(--default-matchLogo-url); */
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-size: contain;
	}

	.notice {
		width: 30rpx;
		height: 30rpx;
		/* margin-right: 30rpx; */
		position: absolute;
		left: -60rpx;
	}

	.type {
		opacity: 60%;
		/* line-height: 25px; */
		font-family: Roboto;
		color: #ffffff;
		font-size: 40rpx;
		text-align: center;
	}

	.name {
		font-family: Roboto;
		color: #ffffff;
		font-size: 50rpx;
		text-align: center;
	}

	.button {
		width: 320rpx;
		height: 86rpx;
		margin-top: 30rpx;
		color: #000000;
		background: #ffffff;
		border-radius: 56rpx;
		font-size: 46rpx;
		line-height: 80rpx;
	}
</style>