shuhi-app/pages/order/components/workorder-item.vue

<template>
    <view class="workorder-card" @tap="handleClick">
        <view class="edit-icon">
            <u-icon name="edit-pen" color="#1b77f0" size="18"></u-icon>
        </view>
        <view class="content">
            <u-image :src="imgSrc" width="160rpx" height="190rpx" radius="8" mode="aspectFill"></u-image>
            <view class="details">
                <view class="row">
                    <text class="label">快递单号：</text>
                    <text class="value">{{ item.waybillCode || '-' }}</text>
                </view>
                <view class="row">
                    <text class="label">任务类型：</text>
                    <text class="value">{{ item.taskTypeName || item.taskType || '-' }}</text>
                </view>
                <view class="row">
                    <text class="label">创建时间：</text>
                    <text class="value">{{ item.createTime || '-' }}</text>
                </view>
                <view class="row" v-if="showDuration">
                    <text class="label danger">处理时长：</text>
                    <text class="value danger">{{ durationText }}</text>
                </view>
            </view>
        </view>
    </view>
    </template>

<script setup name="workorderItem">
import { computed } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    },
    showDuration: {
        type: Boolean,
        default: false
    }
})

const imgSrc = computed(() => {
    return props.item.imageUrl || props.item.imgPath || '/static/img/book.png'
})

const durationText = computed(() => {
    const sec = Number(props.item.waitingTime ?? props.item.duration ?? props.item.durationSec ?? 0)
    const s = Math.max(0, Math.floor(sec))
    const h = Math.floor(s / 3600)
    const m = Math.floor((s % 3600) / 60)
    const ss = s % 60
    return `${h}小时${m}分${ss}秒`
})

const handleClick = () => {
    emit('click', props.item)
}
</script>

<style lang="scss" scoped>
.workorder-card {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
    position: relative;
}
.edit-icon {
    position: absolute;
    right: 16rpx;
    top: 16rpx;
}
.content {
    display: flex;
    gap: 20rpx;
    align-items: flex-start;
}
.details {
    flex: 1;
}
.row {
    display: flex;
    align-items: baseline;
    margin-bottom: 10rpx;
}
.label {
    font-size: 28rpx;
    color: #666666;
}
.value {
    font-size: 28rpx;
    color: #333333;
}
.danger {
    color: #ff4d4f;
    font-weight: 500;
}
</style>