book-hi/pages-home/components/SubmitConfirm.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">15天内</span
                        >完成品相审核与打款，审核时效内<span class="highlight">勿催~</span>
                    </view>
                    <view class="mt-20"
                        >为避免混单，影响审核到账时间，您需核对订单书籍，<span class="highlight">自行打包</span
                        >后，交给取件员(<span class="highlight">包装上备注书嗨+物流单号</span
                        >)。如随意放置包裹导致订单书籍遗失，平台概不负责。</view
                    >
                    <view class="mt-20"
                        ><span class="highlight">卖书运费(不含包装费)由书嗨承担</span
                        >，我们会安排京东、德邦或顺丰上门取件(不支持自寄和到付件)，不需要您垫付运费。</view
                    >
                </view> -->

                <view class="content">
                    <view>春节回收订单提醒：</view>
                    <view class="mt-20">
                        <span class="highlight">2月7日16：00</span>后提交的订单，审核将延后至<span
                            class="highlight">2月21日(正月初五)</span>复工后陆续处理。着急的小伙伴建议年后再下单~
                    </view>
                    <view class="mt-20">
                        提前祝大家新年快乐，前程似锦！
                    </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: 15,
            };
        },
        methods: {
            openPopup() {
                this.showPopup = true;
                this.startCountdown();
            },
            closePopup() {
                this.showPopup = false;
                this.countdown = 15;
            },
            handleConfirm() {
                this.$emit("confirm");
                this.closePopup();
            },
            handleCancel() {
                this.$emit("cancel");
                this.closePopup();
            },
            startCountdown() {
                this.countdown = 15;
                const timer = setInterval(() => {
                    if (this.countdown > 0) {
                        this.countdown--;
                    } else {
                        clearInterval(timer);
                    }
                }, 1000);
            },
        },
    };
</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>