de-net/src/view/components/custom-card-cover.vue

<!-- 自定义卡片红包封面 -->
<template>
    <div class="custom-card" v-if="data.customPosterUrl">
        <img class="customImg" :src="data.customPosterUrl" />
        <div class="common-bottom">
            <div class="theme">
                <img v-if="isLottaryCpd" class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
                <span v-if="isLottaryCpd" class="time" >{{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
                <span class="info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
            </div>
            <div class="winner-info">
                <component-zoom width="320" fontSize="12" ref="zoomCom1">
                    <span class="count">{{data.totalCount}} Winners</span>
                    <span>to Share </span>
                    <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
                </component-zoom>
            </div>
            <div class="open-btn" @click="open">
                {{isLottaryCpd ? 'Participate Now' : 'Open Now'}}
            </div>
        </div>
    </div>
    <div class="not-open" v-else-if="isMoneyRewardCpd">
        <img class="cover" v-if="data.type == PlayType.lottery" :src="require('@/assets/svg/img-preview-draw-bg.svg')"  />
        <img class="cover" v-else-if="data.type == PlayType.common" src="@/assets/subject/001-card.png"  />
        <img class="cover" v-else-if="data.type == PlayType.treasure" :src="require('@/assets/svg/img-preview-treasure-01-bg.svg')"  />

        <img class="open-gif"
            v-if="data.type == PlayType.lottery"
            src="@/assets/img/img-preview-draw-box.png" />
        <img class="open-gif"
            v-else-if="data.type == PlayType.common"
            :src="require('@/assets/gif/001.gif')" />

        <img v-if="data.type == PlayType.lottery"
            :src="require('@/assets/svg/img-preview-draw-open.svg')"
            class="open"
            @click="open" />
        <img v-else-if="data.type == PlayType.common"
            :src="require('@/assets/svg/icon-open.svg')"
            class="open"
            @click="open"/>

        <div class="title" v-if="data.userInfo">
            <img :src="data.userInfo.avatarUrl" />
            <span v-if="data.type != PlayType.treasure">
                {{data.userInfo.nickName || ""}}
            </span>
            <span class="treasure-info" v-else>
                from @{{data.userInfo.nickName || ""}}
            </span>
        </div>

        <div class="money-area" v-if="data.type != PlayType.treasure">
            <div class="txt">
                <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
                &nbsp;GIVEAWAY
            </div>
            <div class="coin">
                <component-zoom width="300" fontSize="56" :txt="data.amountValue || 0" ref="zoomCom">
                  <img v-if="data.currencyIconUrl" :src="data.currencyIconUrl || imgHeaderCover" />
                  <span id="preview-after-amount">{{ getBit(data.amountValue) || 0 }}</span>
                </component-zoom>
            </div>
            <div class="time-area" v-if="data.type == PlayType.lottery">
                <img class="icon-clock" :src="require('@/assets/svg/icon-time.svg')" />
                {{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}
            </div>
            <div class="people" v-else-if="data.type == PlayType.common">
                {{ data.totalCount }} WINNERS TO SHARE
            </div>
        </div>
        <div class="treasure-card-info" v-else>
            <div class="treasure-row-1">
                <div class="left">Treasure</div>
                <component-zoom :width="160" :txt="data.amountValue || 0">
                    <div class="right">${{ data.usdEstimateOrderAmount || 0 }}</div>
                </component-zoom>
            </div>

            <div class="treasure-row-2">
                Your Gain Up to $
                <component-zoom :width="160" :txt="data.upGainAmountUsdValue || 0">
                  <div class="amount">{{data.upGainAmountUsdValue || 0}}</div>
                </component-zoom>
            </div>

            <div class="treasure-row-3" :style="{'visibility': data.currencyCode && data.currencyCode != 'USD'? 'visible' : 'hidden'}">
                <img class="img" :src="data.currencyIconUrl" /> <span class="txt"> {{data.tokenSymbol}}  <template v-if="data.currencyCode != 'USD'">equivalent (Crypto)</template></span>
            </div>

            <img class="img-treasure-big" :src="require('@/assets/img/icon-treasure-box.png')">

            <div class="treasure-row-4">
               <img class="img" :src="require('@/assets/svg/icon-card-cover-treasure-tasks.svg')"> to Hunt Treasure
            </div>

            <div class="open-btn" @click="open">
                <img :src="require('@/assets/svg/icon-card-cover-treasure-small.svg')" alt="">
                START
            </div>
        </div>
    </div>

    <!-- 改版之后的卡片 -->
    <div class="custom-card" v-else>
        <img class="cover" v-if="isLottaryCpd" :src="require('@/assets/subject/img-custom-lottary-bg.svg')"  />
        <img class="cover" v-else :src="require('@/assets/subject/img-custom-common-bg.svg')"  />
        <img class="gift" :src="require('@/assets/subject/icon-gift.gif')" />
        <div class="prize">
            <component-zoom width="300" fontSize="22" ref="zoomCom2">
                <img class="icon" :src="require('@/assets/subject/icon-gift-inline.svg')"/>
                <span class="name" id="custom-name" >
                    {{data.customizedReward}}
                    <span class="total" >X{{data.totalCount}}</span>
                </span>
            </component-zoom>

        </div>
        <!-- 底部公共模块 -->
        <div class="common-bottom">
            <div class="theme">
                <img v-if="isLottaryCpd" class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
                <span v-if="isLottaryCpd" class="time" >{{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
                <span class="info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
            </div>
            <div class="winner-info">
                <component-zoom width="300" fontSize="12" ref="zoomCom3">
                    <span class="count">{{data.totalCount}}Winners</span>
                    <span>to Share </span>
                    <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
                </component-zoom>
            </div>
            <div class="open-btn" @click="open">
                {{isLottaryCpd ? 'Participate Now' : 'Open Now'}}
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed, onMounted, watch } from "vue";
import { formatSecondsAsDaysOrTime } from "@/uilts/help";
import ComponentZoom from "./component-zoom.vue";
import { RewardType, PlayType } from "@/types";
import { getBit } from "@/uilts/help";

let zoomCom = ref('');
let zoomCom1 = ref('');
let zoomCom2 = ref('');
let zoomCom3 = ref('');
const props = defineProps({
    show: {
      type: Boolean,
      default: true
    },
    data: {
        type: Object,
        default: () => {
            return {
                totalCount: 0,
                amountValue: 0,
                tokenSymbol: '',
                currencyCode: '',
                type: 1,
                validityDuration: '',
                countDown: '',
                customPosterUrl: '',
                userInfo: {
                    avatarUrl: "",
                    nickName: "",
                },
                rewardType: RewardType.money,
                customizedReward: "",
                upGainAmountUsdValue: ""
            };
        },
    },
});

watch(() => props.show, (newVal) => {
      if(newVal) {
        zoomCom.value && zoomCom.value.setFontZoom(0);
        zoomCom1.value && zoomCom1.value.setFontZoom(0);
        zoomCom2.value && zoomCom2.value.setFontZoom(0);
        zoomCom3.value && zoomCom3.value.setFontZoom(0);
      }
    },
    {
        deep: true
    })



let isMoneyRewardCpd =computed(() => {
    return props.data.rewardType === RewardType.money
});

let isLottaryCpd = computed(() => props.data.type === PlayType.lottery);

const defaultBaseWidth = isMoneyRewardCpd.value ? 56 : 22;
const defaultTotalWidth = isMoneyRewardCpd.value ? 360 : 450;

let amount_font_size = ref(defaultBaseWidth);

const setFontSize = () =>{
    let id = isMoneyRewardCpd.value ? 'preview-after-amount' : 'custom-name';
    let lendom = document.querySelector(`#${id}`);
    if (lendom) {
        let lenstr = lendom.innerText.length;
        let num = parseInt(defaultTotalWidth / lenstr);
        amount_font_size.value = num < defaultBaseWidth ? num : defaultBaseWidth;
    }
}

const emits = defineEmits(["clickOpenRedPacket"]);

const open = () => {
    emits("clickOpenRedPacket", {});
};

onMounted(() => {
    // setFontSize()
})
</script>

<style scoped lang="scss">
.not-open {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 16px;
    filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));

    .money-area {
        width: 100%;
        position: absolute;
        top: 65px;

        .txt {
            font-weight: 800;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                color: #F9C545;
            }
        }

        .coin {
            text-align: center;
            width: 100%;
            padding: 3px 0;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 85px;
            box-sizing: border-box;

            img {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                border: 3px solid #ffffff;
            }

            #preview-after-amount {
                margin-left: 15px;
                font-weight: 800;
                font-size: 60px;
                line-height: 76px;
                color: #ffffff;
            }
        }

        .people {
            font-weight: 800;
            font-size: 13px;
            line-height: 16px;
            letter-spacing: 0.05em;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .time-area {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 46px;
            background: rgba(0,0,0,.15);
            color: #FFCC4D;
            font-weight: 900;
            font-size: 26px;
            margin-top: -10px;
            .icon-clock {
                width: 26px;
                height: 26px;
                margin-right: 10px;
            }
        }
    }

    .treasure-card-info {
        color: #fff;
        position: absolute;
        top: 86px;
        width: 100%;
        text-align: center;

        .treasure-row-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 25px;

            .left {
                margin-right: 7px;
                color: #FFC83A;
            }

            .right {
                font-weight: 900;
                font-size: 25px;
            }
        }

        .treasure-row-2 {
            margin: 6px 0;
            background: rgba(255, 255, 255, .1);
            width: 100%;
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 12px;

            .amount {
                font-weight: 800;
                font-size: 17px;
                margin-top: -2px;
            }
        }

        .treasure-row-3 {
            display: flex;
            align-items: center;
            justify-content: center;

            .img {
                width: 13px;
                margin-right: 3px;
            }

            .txt {
                zoom: .8;
                opacity: 0.7;
            }
        }

        .treasure-row-4 {
            display: flex;
            align-items:center;
            justify-content: center;
            color: #65C1FF;
            margin-top: 18px;
            font-size: 16px;

            .img {
                width: 76px;
            }
        }

        .img-treasure-big {
            width: 200px;
        }

        .open-btn {
            width: 88%;
            height: 40px;
            background: #1D9BF0;
            border-radius: 75px;
            display: flex;
            align-items:center;
            justify-content: center;
            cursor: pointer;
            font-weight: 800;
            font-size: 15px;
            margin-top: 12px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);

            img {
                width: 18px;
                margin-right: 5px;
            }
        }
    }

    .title {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 3;
        width: 100%;
        display: flex;
        align-items: center;

        img {
            width: 24px;
            height: 24px;
            border: 2px solid #fff;
            border-radius: 50%;
        }

        span {
            margin-left: 10px;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #fff;
        }

        .treasure-info {
            color: #fff;
            opacity: 0.7;
            font-weight: 300;
        }
    }

    // .txt {
    //   width: 100%;
    //   position: absolute;
    //   font-style: normal;
    //   font-weight: 700;
    //   font-size: 42px;
    //   line-height: 50px;
    //   text-align: center;

    //   color: #FFF2D3;
    //   top: 90px;
    //   z-index: 3;
    // }

    img {
        width: 100%;
    }

    .cover {
        border-radius: 16px;
    }

    .up {
        position: absolute;
        top: 0;
        // box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    .down {
        position: absolute;
        top: 253px;
    }

    .open {
        width: 335px;
        height: 50px;
        cursor: pointer;
        position: absolute;
        bottom: 28px;
        left: 50%;
        margin-left: -167.5px;
        z-index: 2;
    }

    .open-gif {
        width: 200px;
        height: 200px;
        text-align: center;
        position: absolute;
        bottom: 90px;
        left: 50%;
        margin-left: -100px;
        z-index: 3;
    }
}

.custom-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:#111214;
    position: relative;
    border-radius: 10px;
    .customImg {
        width: 100%;
        min-height: calc(100% - 125px);
    }
    .cover {
        width: 100%;
        min-height: 350px;
        border-radius: 10px 10px 0 0;
    }
    .gift {
        width: 210px;
        position: absolute;
        left: 50%;
        top: 83px;
        transform: translateX(-50%);
    }
    .prize {
        width: 100%;
        position: absolute;
        top: 57%;
        left: 0;
        height: 47px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-style: normal;
        font-weight: 800;
        font-size: 22px;
        line-height: 47px;
        letter-spacing: 0.3px;

        .icon {
            width: 24px;
        }
        .name {
            padding: 0 7px;
            color: #fff;
        }
        .total {
            color: #F5C03F;
        }
    }
    .common-bottom {
        width: 100%;
        height: 125px;
        background:#111214;
        border-radius: 0 0 10px 10px;
        padding: 10px 16px;
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0.3px;
        color: #838383;
        line-height: 20px;
        .theme {
            display: flex;
            height: 20px;
            align-items: center;
            justify-content: flex-start;
            .icon {
                width: 12px;
            }
            .time {
                margin: 0 4px;
                color: #1D9BF0;
            }
        }
        .winner-info {
            display: flex;
            height: 20px;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 13px;
            font-size: 12px;
            .count{
                color: #1D9BF0;
                margin-right: 4px;
            }
            .prize-name {
                color: #1D9BF0;
                margin-left: 4px;
            }
        }
        .open-btn {
            width: 100%;
            height: 45px;
            background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            border-radius: 52px;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
            font-weight: 800;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>