book-hi/pages-home/components/OrderSuccessPopup.vue

<template>
    <u-popup
        v-model="showPopup"
        @close="closePopup"
        @open="openPopup"
        mode="center"
        border-radius="20"
        width="85%"
        class="first-order-free-popup"
    >
        <view class="popup-content">
            <image class="gift-image" :src="dialogInfo.img" mode="widthFix" @click="handleClick" />
        </view>
    </u-popup>
</template>

<script>
export default {
    name: "OrderSuccessPopup",
    data() {
        return {
            showPopup: false,
            dialogInfo: {
                autoClose: "",
                autoCloseTime: "",
                img: "",
                jumpPage: "",
            },
        };
    },
    methods: {
        openPopup(data) {
            if (data.id) {
                this.dialogInfo = data;
                this.showPopup = true;
                this.autoClose();
            }
        },
        closePopup() {
            this.showPopup = false;
            this.$emit("close");

            if (this.dialogInfo.frequency == 1) {
                uni.setStorageSync("frequency", 1);
            } else {
                uni.removeStorageSync("frequency");
            }
        },
        //点击图片跳转
        handleClick() {
            if (this.dialogInfo.jumpPage) {
                uni.navigateTo({
                    url: this.dialogInfo.jumpPage,
                });
                this.closePopup();
            }
        },
        //自动关闭弹窗
        autoClose() {
            if (this.dialogInfo?.autoClose == 1) {
                let time = this.dialogInfo.autoCloseTime ? this.dialogInfo.autoCloseTime * 1000 : 5000;
                setTimeout(() => {
                    this.closePopup();
                }, time);
            }
        },
    },
};
</script>

<style lang="scss">
.popup-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .gift-image {
        width: 100%;
        height: auto;
    }

    .action-buttons {
        position: absolute;
        bottom: 100rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .check-rules {
        font-size: 40rpx;
        color: #ffffff;
        text-align: center;
        padding: 10rpx;
        padding-left: 80rpx;
    }
}
</style>