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" @click="previewImage"></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, ref, onMounted, onUnmounted } from 'vue'

const emit = defineEmits(['click'])

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

const currentTime = ref(Date.now())

// 每秒更新当前时间
let timer = null

onMounted(() => {
    timer = setInterval(() => {
        currentTime.value = Date.now()
    }, 100)
})

onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})

const imgSrc = computed(() => {
    // 优先使用 imgInfo.imgUrlList
    if (props.item.imgInfo && props.item.imgInfo.imgUrlList && props.item.imgInfo.imgUrlList[0]) {
        return props.item.imgInfo.imgUrlList[0]
    }
    // 然后使用其他图片字段
    return props.item.imgUrl || props.item.imageUrl || props.item.imgPath || '/static/img/book.png'
})

const durationText = computed(() => {
    // 计算创建时间到当前时间的差值
    const createTime = new Date(props.item.createTime).getTime()
    if (!createTime) return '0 小时 0 分 0 秒 0'
    
    const diff = Math.max(0, currentTime.value - createTime)
    const ms = diff % 1000
    const s = Math.floor(diff / 1000)
    const h = Math.floor(s / 3600)
    const m = Math.floor((s % 3600) / 60)
    const ss = s % 60
    return `${h}小时${m}分${ss}秒${ms}`
})

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

const previewImage = () => {
    // 优先使用 imgInfo.imgUrlList
    if (props.item.imgInfo && props.item.imgInfo.imgUrlList && props.item.imgInfo.imgUrlList.length > 0) {
        uni.previewImage({
            urls: props.item.imgInfo.imgUrlList,
            current: 0
        })
    } else if (imgSrc.value && imgSrc.value !== '/static/img/book.png') {
        uni.previewImage({
            urls: [imgSrc.value]
        })
    }
}
</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>