shuhi-app/pages/index/audit/components/reviewOrderItem.vue

<template>
    <view class="review-order-card" :class="{ overdue: isOverdue }">
        <!-- 订单信息 -->
        <view class="order-info">
            <view class="info-row">
                <text class="label">订单号：</text>
                <text class="value">{{ item.orderId }}</text>
            </view>
            <view class="info-row">
                <text class="label">仓库：</text>
                <text class="value">{{ item.godownName }}</text>
            </view>
            <view class="info-row">
                <text class="label">不良数量：</text>
                <text class="value">{{ item.reviewNum || 0 }}</text>
            </view>
            <view class="info-row">
                <text class="label">是否入库：</text>
                <text class="value">{{ stockStatusText }}</text>
                <text v-if="item.positionCode" class="position-code">{{ item.positionCode }}</text>
            </view>
            <view class="info-row">
                <text class="label">申请复审时间：</text>
                <text class="value">{{ item.applyTime }}</text>
            </view>
            <view class="info-row">
                <text class="label">已用时长：</text>
                <TimeClock :initialSeconds="item.waitingTime" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } from "vue";
import TimeClock from "./time-clock.vue";

const props = defineProps({
    item: {
        type: Object,
        default: () => { },
    },
});

// 库存状态文本
const stockStatusText = computed(() => {
    if (props.item.stockStatus === 1) {
        return "已入库";
    } else if (props.item.stockStatus === 0) {
        return "未入库";
    }
    return "-";
});

// 库存状态颜色
const stockStatusColor = computed(() => {
    if (props.item.stockStatus === 1) {
        return "#FF4D4F"; // 红色 - 已入库
    } else if (props.item.stockStatus === 0) {
        return "#333333"; // 黑色 - 未入库
    }
    return "#999999";
});

// 超时未入库：申请复审后等待时间 >= 24 小时 且 未入库
const isOverdue = computed(() => {
    const waitingMs = Number(props.item?.waitingTime) || 0;
    const notStocked = props.item?.stockStatus === 0;
    const twentyFourHours = 24 * 60 * 60 * 1000;
    return notStocked && waitingMs >= twentyFourHours;
});
</script>

<style lang="scss" scoped>
.review-order-card {
    background: #ffffff;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    &.overdue {
        background: #fff2f0; // 轻红色背景，提升可读性
    }

    .order-info {
        .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            font-size: 28rpx;
            line-height: 40rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .label {
                color: #333333;
                font-weight: 400;
            }

            .value {
                color: #333333;
                flex: 1;

                &.time-duration {
                    color: #FF4D4F;
                    font-weight: 500;
                }
            }

            .position-code {
                color: #E87A20FF;
                margin-left: 16rpx;
                font-weight: 500;
            }
        }
    }
}
</style>