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="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>