de-net/src/view/iframe/publish/components/preview-sheet.vue

<template>
    <div class="preview">
        <div class="card" :class="{
            center:
                !isMoneyRewardCpd ||
                Number(baseFormData.amountValue) <=
                Number(currentCurrencyInfo.balance),
        }">
            <div class="card-title">
                <img class="img" v-if="
                    isMoneyRewardCpd &&
                    Number(baseFormData.amountValue) >
                    Number(currentCurrencyInfo.balance)
                " :src="require('@/assets/subject/top-01.svg')" />
                <div class="font">
                    Preview: <span>{{ installStatus ? "After" : "Before" }}</span> DeNet
                    Installed
                </div>
            </div>
            <div class="flash">
                <preview-card 
                    :currentCurrencyInfo="currentCurrencyInfo" 
                    :postData="publishRes"
                    :baseFormData="baseFormData" 
                    :amountFontSize="previewFontSize" 
                    :customPosterInfo="customPosterData">
                </preview-card>
            </div>
        </div>
        <!-- 需充值 -->
        <div class="card-content" v-if="
            isMoneyRewardCpd &&
            Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)
        ">
            <template v-if="currentCurrencyInfo.currencyCode === 'USD'">
                <div class="card-title">
                    <img class="img" :src="require('@/assets/subject/top-02.svg')" />
                    <div class="font">Deposit to Send Giveaway</div>
                </div>
                <div class="card-list">
                    <div class="item">
                        <div class="l">Giveaway Amount</div>
                        <div class="r order-amount">
                            ${{ finalAmountData.orderAmountValue }}
                        </div>
                    </div>
                    <div class="item">
                        <div class="l">Balance</div>
                        <div class="r txt">${{ finalAmountData.balance }}</div>
                    </div>
                    <div class="item">
                        <div class="l">
                            Paypal charges fee ({{ finalAmountData.feeDesc }})
                        </div>
                        <div class="r txt">${{ finalAmountData.feeAmountValue }}</div>
                    </div>
                    <div class="item">
                        <div class="l">Deposit Amount</div>
                        <div class="r deposit-amount">
                            ${{ finalAmountData.rechargeAmountValue }}
                        </div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="card-title">
                    <img class="img" :src="require('@/assets/subject/top-02.svg')" />
                    <div class="font">Deposit to Send Giveaway</div>
                </div>
                <top-up2 :currentCurrencyInfo="tempCurrentCurrencyInfo" 
                        @topUpDone="topUpDone">
                </top-up2>
                <div class="card-title">
                    <img class="img" :src="require('@/assets/subject/top-03.svg')" />
                    <div class="font">Wait for the amount to arrive</div>
                </div>
                <div class="card-amount">
                    <img class="icon" src="@/assets/subject/icon-balance.png" />
                    <div class="con">
                        <div class="desc">Balance</div>
                        <div class="price">
                            {{ currentCurrencyInfo.balance }}
                            {{ currentCurrencyInfo.tokenSymbol }}
                        </div>
                    </div>
                    <img class="refresh" 
                        :class="{ 'icon-refresh-rotate': refreshRotate }" 
                        @click="updateCurrencyBanlce"
                        :src="require('@/assets/svg/icon-form-refresh-blue.svg')" />
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, provide, computed } from "vue";

import previewCard from "@/view/iframe/publish/components/preview-card";
import topUp2 from "@/view/iframe/publish/components/top-up2.vue";

import { RewardType } from '@/types';

let installStatus = ref(false);
provide('installStatus', installStatus)

// 刷新按钮旋转
let refreshRotate = ref(false);

const props = defineProps({
    baseFormData: {
        type: Object,
        default: () => {
            return {
                amountCurrencyCode: "",
                amountValue: "",
                totalCount: "",
                validityDuration: "",
                type: selectModeInfo.type,
                rewardType: RewardType.money,
                customizedReward: ""
            }
        },
    },
    currentCurrencyInfo: {
        type: Object,
        default: () => {
            return {}
        }
    },
    tempCurrentCurrencyInfo: {
        type: Object,
        default: () => {
            return {}
        }
    },
    publishRes: {
        type: Object,
        default: () => {
            return {}
        }
    },
    previewFontSize: {
        type: [Number, String],
        default: 56
    },
    customPosterData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    finalAmountData: {
        type: Object,
        default: () => {
            return {
                currencyCode: '',
                feeAmountValue: 0,
                finalAmountValue: 0,
                requestAmountValue: 0,
            }
        }
    }
});

let isMoneyRewardCpd =computed(() => props.baseFormData.rewardType === RewardType.money);

const emits = defineEmits(["onTopUpDone", "onUpdateCurrencyBanlce"]);

const topUpDone = () => {
    emits("onTopUpDone", {});
}

const updateCurrencyBanlce = () => {
    if(!refreshRotate.value) {
        refreshRotate.value = true;
        setTimeout(() => {
            refreshRotate.value = false;
        }, 1000)
    }
    emits("onUpdateCurrencyBanlce", {});
}
</script>

<style scoped lang="scss">
.preview {
    padding: 30px 40px;
    height: calc(100% - 80px);
    overflow-y: auto;

    .card {
        float: left;
        width: 480px;
        position: relative;

        .flash {
            overflow: hidden;
            height: 600px;
            border-radius: 26px;
            border: solid 1px #ececec;
        }

        &.center {
            margin-left: 50%;
            transform: translateX(-50%);
        }
    }

    .card-title {
        height: 32px;

        .img {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        .font {
            float: left;
            font-size: 17px;
            font-weight: 500;

            span {
                color: #0091e9;
            }
        }
    }

    .card-content {
        float: right;
        width: 500px;
    }

    .card-amount {
        overflow: hidden;
        display: flex;
        height: 80px;
        align-items: center;
        padding: 20px;
        border-radius: 20px;
        border: 1px solid #e6e6e6;

        .icon {
            width: 40px;
            height: 40px;
        }

        .con {
            flex: 1;
            padding: 0 10px;

            .desc {
                color: rgba($color: #000000, $alpha: 0.5);
                font-size: 12px;
                margin-bottom: 4px;
            }

            .price {
                font-size: 16px;
                font-weight: bold;
                word-break: break-all;
            }
        }

        .refresh {
            cursor: pointer;
            width: 30px;
            height: 30px;
            margin-top: -5px;
        }
    }

    .card-list {
        padding: 10px 20px;
        border-radius: 20px;
        border: 1px solid #e6e6e6;

        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 47px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: inset 0px -1px 0px #eaeaea;

            .order-amount {
                font-weight: 600;
                font-size: 20px;
            }

            .txt {
                font-weight: 500;
                font-size: 16px;
                color: #9a9a9a;
            }

            .deposit-amount {
                font-weight: 600;
                font-size: 20px;
                color: #1d9bf0;
            }
        }

        .item:last-child {
            box-shadow: none;
        }
    }
    .icon-refresh-rotate {
        transform: rotate(360deg);
        transition-duration: 1s;
    }
}
</style>