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

<template>
    <u-popup v-model="showPopup" @close="closePopup" mode="center" border-radius="20" :width="width">
        <view class="submit-confirm">
            <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>
    </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: 20rpx;
    overflow: hidden;
    padding: 30rpx;

    .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 {
            flex: 1;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 32rpx;
            border: none;
            border-radius: 10rpx;

            &::after {
                border: none;
            }

            &.cancel-btn {
                background-color: #F5F5F5;
                color: #333333;
            }

            &.confirm-btn {
                background-color: #38C148;
                color: #FFFFFF;

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