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="#38C148"></u-icon>
            </view>
            <view class="urge-title">
                平台跟进发货中
            </view>
            <view class="urge-desc">
                卖家应在{{ deadlineTime }}前发货，若超时未发货，平台客服将主动联系卖家处理，查看<text class="highlight">进度详情</text>
            </view>

            <view class="btn-group">
                <!-- #ifdef MP-ALIPAY -->
                <button class="action-btn contact-btn" @click="handleContact">
                    继续联系卖家
                </button>
                <!-- #endif -->
                <!-- #ifndef MP-ALIPAY -->
                <button class="action-btn contact-btn" open-type="contact">继续联系卖家
                </button>
                <!-- #endif -->
                <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();
                    this.$emit('success');
                }
            }).catch(() => {
                uni.hideLoading();
            });
        },
        closePopup() {
            this.$refs.urgeDialog.closePopup();
        },
        handleContact() {
            this.closePopup();
            uni.navigateTo({
                url: '/pages-mine/pages/customer-service'
            });
        },
        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: #38C148;
            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: #fff;
            color: #38C148;
            border: 2rpx solid #38C148;
            flex: 1.5;
            box-sizing: border-box;
            line-height: 76rpx; // 调整线高因为有边框
        }

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