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

<template>
    <view class="exception-item">
        <!-- 订单信息 -->
        <view class="info-section flex-1">
            <view class="info-row">
                <text class="label">订单编号:</text>
                <text class="value">{{ order.orderId }}</text>
            </view>
            <view class="info-row">
                <text class="label">快递单号:</text>
                <text class="value">{{ order.waybillCode }}</text>
            </view>
            <view class="info-row">
                <text class="label">预估单价:</text>
                <text class="value">{{ order.expectMoney }}元</text>
            </view>
            <view class="info-row">
                <text class="label">推送人:</text>
                <text class="value">{{ order.createName }}</text>
            </view>
            <view class="info-row" style="margin-bottom: 0;">
                <text class="label">推送时间:</text>
                <text class="value">{{ order.createTime }}</text>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-section">
            <u-button type="primary" text="查看物流" size="small" @click="handleCheckLogistics" />
            <approve-button v-permission="'app:express:exception:approve'" v-if="order.checkStatus == 1" @approve="handleButtonClick(2)" />
            <reject-button v-permission="'app:express:exception:reject'" v-if="order.checkStatus == 1" @reject="(reason) => handleButtonClick(3, reason)" />
            <view v-if="order.checkStatus == 2" style="color: #19be6b;">[已签收]</view>
            <view v-if="order.checkStatus == 3" style="color: #f00;">[已驳回]</view>
        </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(['refresh']);

// 查看物流
const handleCheckLogistics = () => {
    uni.navigateTo({
        url: `/pages/index/express/logistics-detail?orderId=${props.order.orderId}&status=${props.order.checkStatus}&id=${props.order.id}`
    });
};

// 操作按钮
function handleButtonClick(checkStatus, reason) {
    uni.$u.http.post('/app/orderexception/update', {
        id: props.order.id,
        checkStatus: checkStatus,
        refusalReason: reason
    }).then(res => {
        if (res.code == 200) {
            if (checkStatus == 2) {
                let text = props.order.waybillCode + '签收成功'
                uni.$u.ttsModule.speak(text)
            }
            uni.$u.toast('操作成功');
            emit('refresh');
        } else {
            uni.$u.toast(res.msg);
        }
    }).catch(() => {
        uni.$u.toast('操作失败');
    })
}


</script>

<style lang="scss" scoped>
.exception-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 24rpx;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.info-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 30rpx;

    .label {
        color: #666;
        width: 140rpx;
    }

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

.action-section {
    display: flex;
    flex-direction: column;
    gap: 12px;

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