shuhi-app/pages/index/express/components/ExceptionItem.vue

<template>
    <view class="exception-item">
        <!-- 订单信息 -->
        <view class="info-section">
            <view class="info-row">
                <text class="label">订单编号:</text>
                <text class="value">{{ order.orderNo }}</text>
            </view>
            <view class="info-row">
                <text class="label">快递单号:</text>
                <text class="value">{{ order.expressNo }}</text>
            </view>
            <view class="info-row">
                <text class="label">预估单价:</text>
                <text class="value">{{ order.estimatedPrice }}</text>
            </view>
            <view class="info-row">
                <text class="label">推送人:</text>
                <text class="value">{{ order.pusher }}</text>
            </view>
            <view class="info-row">
                <text class="label">推送时间:</text>
                <text class="value">{{ order.pushTime }}</text>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-section">
            <u-button type="primary" text="查看物流" size="small" @click="handleCheckLogistics" />
            <approve-button @approve="() => emit('approve', order)" />
            <reject-button @reject="(reason) => emit('reject', { order, reason })" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import ApproveButton from './ApproveButton.vue';
import RejectButton from './RejectButton.vue';

const props = defineProps({
    order: {
        type: Object,
        default: () => ({
            orderNo: '',
            expressNo: '',
            estimatedPrice: '',
            pusher: '',
            pushTime: ''
        })
    }
});

const emit = defineEmits(['approve', 'reject']);

// 查看物流
const handleCheckLogistics = () => {
    uni.navigateTo({
        url: `/pages/index/express/logistics-detail?expressNo=${props.order.expressNo}`
    });
};
</script>

<style lang="scss" scoped>
.exception-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.info-section {
    margin-bottom: 16px;
}

.info-row {
    display: flex;
    margin-bottom: 8px;

    .label {
        color: #666;
        width: 80px;
    }

    .value {
        color: #333;
        flex: 1;
    }
}

.action-section {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    :deep(.u-button) {
        min-width: 80px;
    }
}
</style>