book-hi/pages-car/components/submit-confirm.vue

<template>
    <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="30" :width="width">
        <view class="submit-confirm">
            <view class="container-form">
                <view class="icon-wrapper">
                    <image src="/static/tabbar/home2.png" class="tip-icon"></image>
                    <text class="tip-text">温馨提示</text>
                </view>

                <view class="content">
                    <view> 目前付款后<span class="highlight">24小时</span>内发货，如有发货超时或者物流异常情况，您可联系在线客服处理。
                    </view>
                    <view class="mt-20"> 页面库存同步有延迟为预估数字，<span
                            class="highlight">实际库存以发货为准。</span>下单后如有售后电话或短信通知无货，请留意查收短信通知及时申请退款。</view>
                </view>

                <view class="footer">
                    <button class="cancel-btn" @click="handleCancel">取消</button>
                    <button class="confirm-btn" :disabled="countdown > 0" @click="handleConfirm">
                        确定提交{{ countdown > 0 ? `(${countdown}s)` : "" }}
                    </button>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: "92%",
        },
    },
    data() {
        return {
            showPopup: false,
            countdown: 3,
            timer: null
        };
    },
    methods: {
        openPopup() {
            this.showPopup = true;
            this.startCountdown();
        },
        closePopup() {
            this.showPopup = false;
            this.countdown = 3;
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        handleConfirm() {
            this.$emit("confirm");
            this.closePopup();
        },
        handleCancel() {
            this.$emit("cancel");
            this.closePopup();
        },
        startCountdown() {
            if (this.timer) {
                clearInterval(this.timer);
            }
            this.countdown = 3;
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            }, 1000);
        },
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
};
</script>

<style lang="scss" scoped>
.submit-confirm {
    background: #ffffff;
    border-radius: 26rpx;
    overflow: hidden;
    padding: 16rpx;
    background: linear-gradient(-90deg, #98e05f, #0de3ac);

    .container-form {
        background: #effcf3;
        border-radius: 26rpx;
        padding: 30rpx;
        padding-bottom: 40rpx;
    }

    .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;

        .tip-icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 10rpx;
        }

        .tip-text {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 36rpx;
            color: #37c148;
        }
    }

    .content {
        padding: 0 10rpx;
        font-size: 32rpx;
        color: #333333;
        line-height: 48rpx;

        view {
            font-size: 32rpx;
        }

        .highlight {
            color: #ff0000;
        }
    }

    .mt-20 {
        margin-top: 20rpx;
    }

    .footer {
        display: flex;
        gap: 30rpx;
        margin-top: 30rpx;
        padding: 0 10rpx;

        button {
            height: 88rpx;
            line-height: 88rpx;
            font-size: 32rpx;
            border: none;
            border-radius: 10rpx;

            &::after {
                border: none;
            }

            &.cancel-btn {
                flex: 1;
                background-color: #E3E3E3;
                color: #ffffff;
                width: 135rpx;
            }

            &.confirm-btn {
                flex: 2.5;
                width: 335rpx;
                background-color: #38c148;
                color: #ffffff;

                &:disabled {
                    opacity: 0.7;
                }
            }
        }
    }
}
</style>