动态加载订单确认信息弹框

 vue项目

<template>
    <!-- 订单确认弹框 -->
    <div class="sure_main" @touchmove.prevent>
        <div class="sure_head">
            <img src="../../../assets/image/left_arrows.png" alt="" class="left_arrows">
            <span class="hint">您正在为SIM卡充值</span>
            <img src="cloud_cardassets/image/right_arrows.png" alt="" class="right_arrows">
        </div>
        <div class="sure_photo">
            <div class="main">
                <img src="../../../assets/image/sim_image.png" />
                <p :class="img_mask ? 'mask' : ''"></p>
                <div>
                    <p class="card_type">SIM卡</p>
                    <p class="describe">实体卡</p>
                </div>
            </div>
        </div>
        <div class="sure_body">
            <div class="device">
                <div :class="count >= 0.5 ? 'fade_out' : ''">
                    <span>设备: </span>
                    <span>枪球双目</span>
                </div>
                <img src="../../../assets/image/sure.png" :class="count >= 1 ? 'fade_out' : ''">
            </div>
            <div class="card">
                <div :class="count >= 1.5 ? 'fade_out' : ''">
                    <span>充值卡号:</span><br />
                    <span>89860621270028593142</span>
                </div>
                <img src="../../../assets/image/sure.png" :class="count >= 2 ? 'fade_out' : ''">
            </div>
            <div class="combo">
                <div :class="count >= 2.5 ? 'fade_out' : ''">
                    <span>套餐: </span>
                    <span class="combo_describe">4G监控流量包月套餐</span>
                </div>
                <img src="../../../assets/image/sure.png" :class="count >= 3 ? 'fade_out' : ''">
            </div>
            <div class="money">
                <div :class="count >= 3.5 ? 'fade_out' : ''">
                    <span>金额:</span>
                    <span>￥19.9</span>
                </div>
                <img src="../../../assets/image/sure.png" :class="count >= 4 ? 'fade_out' : ''">
            </div>
        </div>
        <div class="schedule">
            <div class="progress_bar" ref="progressbar"></div>
        </div>
        <div class="course">
            <img src="../../../assets/image/spin.png" alt="" class="course_img" />
            <span class="course_text">开始获取支付信息...</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sureOrder',
    data() {
        return {
            tran: 0,//进度条标识
            count: 0,//定时器时间标识
            timer: null,//定时器标识
            img_mask: false,//图片遮罩层
        }
    },
    props: {
        information: {
            type: Object,
            default: function () {
                return {};
            }
        },
    },
    computed: {
    },
    mounted() {
        this.showFadeOut()
    },
    methods: {
        //进度条
        transform(data) {
            if (data == 0) {
                this.tran = '-100'
            } else if (data == 100) {
                this.tran = 0
            } else {
                let las = 100;
                this.tran = '-' + (las - data)
            }
            this.$refs.progressbar.style.transform = "translateX(" + this.tran + "%)"
        },
        //购买信息淡入效果
        showFadeOut() {
            this.timer = setInterval(() => {
                this.count += 0.5
                switch (this.count) {
                    case 0.5:
                        this.transform(12);
                        break;
                    case 1:
                        this.transform(25);
                        break;
                    case 1.5:
                        this.transform(37);
                        break;
                    case 2:
                        this.transform(50);
                        break;
                    case 2.5:
                        this.transform(62);
                        break;
                    case 3:
                        this.transform(75);
                        break;
                    case 3.5:
                        this.transform(87);
                        break;
                    case 4:
                        this.transform(100);
                        clearInterval(this.timer)
                        this.$emit("goBuyShow")
                        break;
                }
            }, 500);
            this.$once('hook:beforeDestroy', () => {
                clearInterval(this.timer)
                this.timer = null
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.sure_main {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 15px;
    z-index: 999;
    width: 292px;

    .sure_head {
        height: 57px;
        line-height: 57px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 36px;

        .hint {
            padding: 0 10px;
            font-size: 16px;
            font-weight: 700;
            color: #333333;
            line-height: 16px;
        }

        .left_arrows,
        .right_arrows {
            width: 14px;
            height: 10px;
        }
    }

    .sure_photo {
        min-height: 125px;

        .main {
            position: relative;
            z-index: -1;

            img {
                width: 240px;
                height: 125px;
                margin: 0 26px;
                border-radius: 12px;
            }

            .mask {
                position: absolute;
                left: 0px;
                top: 0px;
                background: linear-gradient(90deg, #000000, #080808 30%, rgba(255, 255, 255, 0.00));
                width: 240px;
                min-height: 125px;
                margin: 0 26px;
                border-radius: 12px;
                opacity: 0.5;
            }

            div {
                position: absolute;
                left: 52px;
                top: 18px;

                .card_type {
                    height: 28px;
                    line-height: 28px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #FFFFFF;
                    margin-bottom: 10px;
                }

                .describe {
                    background: #377BFA;
                    text-align: center;
                    font-size: 12px;
                    color: #FFFFFF;
                    padding: 1px 7px;
                    line-height: 17px;
                    border-radius: 4px;
                }
            }
        }
    }

    .sure_body {
        margin-top: -30px;
        padding: 0 20px;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;

        .device,
        .card,
        .combo,
        .money {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            align-items: center;
            height: 20px;
            line-height: 20px;
            padding-bottom: 20px;

            span {
                font-size: 14px;
                color: #333333;
            }

            img {
                opacity: 0;
                width: 15px;
                height: 10px;
            }

            div {
                opacity: 0;
            }
        }

        .device {
            padding-top: 27px;
        }
    }

    .schedule {
        overflow: hidden;
        width: 100%;
        height: 6px;
        background: #F3F3F3;

        .progress_bar {
            width: 100%;
            transform: translateX(-100%);
            height: 6px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            background: linear-gradient(90deg, #B4CCF9 0%, #377BFA 100%);
            transition: .5s;
        }
    }

    .course {
        line-height: 61px;
        text-align: center;

        .course_text {
            margin-left: 11px;
            font-size: 15px;
            color: #333333;
        }

        .course_img {
            vertical-align: middle;
            width: 16px;
            height: 16px;
            animation: spin 2s infinite ease-out;
        }
    }
}

.fade_out {
    animation-name: fadeout;
    -webkit-animation-name: fadeout;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in;
    -webkit-animation-timing-function: ease-in;
    animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    display: flex;
    span:nth-child(1){
        float: left;
        min-width: 42px;
    }
    span:nth-child(2){
        max-width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    70% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeout {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    60% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}</style>