book-hi/pages-car/components/urge-delivery-dialog.vue

<template>
    <common-dialog ref="urgeDialog" :showTitle="false" :showFooter="false" :showCancel="false" width="600rpx"
        :custom-style="{ padding: '0', borderRadius: '20rpx' }">
        <view class="urge-dialog-box">
            <view class="icon-area">
                <u-icon name="checkmark-circle-fill" size="100" color="#ff4500"></u-icon>
            </view>
            <view class="urge-title">
                平台跟进发货中
            </view>
            <view class="urge-desc">
                卖家应在{{ deadlineTime }}前发货，若超时未发货，平台客服将主动联系卖家处理，查看<text class="highlight">进度详情</text>
            </view>

            <view class="btn-group">
                <button class="action-btn contact-btn" @click="handleContact">
                    继续联系卖家
                </button>
                <button class="action-btn confirm-btn" @click="closePopup">
                    我知道了
                </button>
            </view>
        </view>
    </common-dialog>
</template>

<script>
    import CommonDialog from '@/components/common-dialog.vue';
    export default {
        components: {
            CommonDialog
        },
        data() {
            return {
                order: null,
                deadlineTime: ''
            };
        },
        methods: {
            open(order) {
                this.order = order;

                // 调用催发货接口
                uni.showLoading({ title: '处理中' });
                this.$u.api.urgeSendAjax(order.orderId).then(res => {
                    uni.hideLoading();
                    if (res.code === 200) {
                        // 计算发货截止时间
                        let baseTime = new Date();
                        if (order && order.createTime) {
                            // 兼容处理 ios 时间格式
                            baseTime = new Date(order.createTime.replace(/-/g, '/'));
                        }
                        // 加72小时
                        const deadline = new Date(baseTime.getTime() + 72 * 60 * 60 * 1000);
                        this.deadlineTime = this.formatDate(deadline);

                        this.$refs.urgeDialog.openPopup();
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            closePopup() {
                this.$refs.urgeDialog.closePopup();
            },
            handleContact() {
                // 联系卖家逻辑，目前仅提示
                this.$u.toast('正在跳转联系卖家...');
                this.closePopup();
            },
            formatDate(date) {
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                return `${month}月${day}日 ${hours}:${minutes}`;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .urge-dialog-box {
        padding: 50rpx 40rpx 40rpx;
        position: relative;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;

        .close-btn {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            padding: 10rpx;
            z-index: 10;
        }

        .icon-area {
            margin-bottom: 30rpx;
        }

        .urge-title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            text-align: center;
        }

        .urge-desc {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 50rpx;
            text-align: center;
            line-height: 1.5;
            padding: 0 20rpx;

            .highlight {
                color: #ff4500;
                margin-left: 10rpx;
            }
        }

        .btn-group {
            display: flex;
            width: 100%;
            justify-content: space-between;

            .action-btn {
                flex: 1;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 40rpx;
                font-size: 28rpx;
                font-weight: 500;
                margin: 0 15rpx;

                &::after {
                    border: none;
                }

                &:active {
                    opacity: 0.9;
                }
            }

            .contact-btn {
                background: #ffb800;
                color: #fff;
                flex: 1.5;
            }

            .confirm-btn {
                background: #ff4500;
                color: #fff;
            }
        }
    }
</style>