|
|
@@ -0,0 +1,243 @@
|
|
|
+<!--
|
|
|
+广告宣传 - 卡片页
|
|
|
+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>
|
