shuhi-app/pages/order/components/info-card.vue

<template>
    <view class="info-card">
        <view class="row">
            <text class="label">快递单号：</text>
            <text class="value">{{ detail.waybillCode || '-' }}</text>
        </view>
        <view class="row" v-if="detail.orderId">
            <text class="label">订单号：</text>
            <text class="link" @tap="copy(detail.orderId)">{{ detail.orderId }}</text>
        </view>
        <view class="row">
            <text class="label">{{ type === 'mall' ? '任务类型：' : '任务类型：' }}</text>
            <text class="value">{{ detail.taskTypeName || detail.taskType || '-' }}</text>
            <text class="sub" v-if="detail.taskTypeExt">{{ detail.taskTypeExt }}</text>
        </view>
        <view class="row">
            <text class="label">{{ type === 'mall' ? '验货状态：' : '订单状态：' }}</text>
            <text class="value">{{ detail.verifyStatusName || detail.orderStatusName || '-' }}</text>
        </view>
        <view class="row">
            <text class="label">任务详情：</text>
            <text class="value">{{ detail.taskDetail || '-' }}</text>
        </view>
        <view class="row">
            <text class="label">创建人：</text>
            <text class="value">{{ detail.createUser || '-' }}</text>
        </view>
        <view class="row">
            <text class="label">创建时间：</text>
            <text class="value">{{ detail.createTime || '-' }}</text>
        </view>
        <view class="row" v-if="detail.taskStatusName">
            <text class="label">任务状态：</text>
            <text class="status" :class="{ danger: detail.taskStatusName === '待处理' }">{{ detail.taskStatusName }}</text>
        </view>
        <view class="image-wrap" v-if="imageList.length">
            <u-image v-for="(src, idx) in imageList" :key="idx" :src="src" width="150rpx" height="150rpx" radius="8" mode="aspectFill"
                @click="preview(idx)"></u-image>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    detail: {
        type: Object,
        default: () => ({})
    },
    type: {
        type: String,
        default: 'recycle'
    }
})

const imageList = computed(() => {
    if (Array.isArray(props.detail.imageUrls) && props.detail.imageUrls.length) {
        return props.detail.imageUrls.filter(Boolean)
    }
    const info = props.detail.imgInfo
    if (info?.imgUrlList?.length) return info.imgUrlList.filter(Boolean)
    if (props.detail.imageUrl) return [props.detail.imageUrl]
    if (props.detail.imgPath) return [props.detail.imgPath]
    return []
})

const copy = (text) => {
    if (!text) return
    uni.setClipboardData({ data: String(text) })
}

const preview = (index = 0) => {
    if (imageList.value.length > 0) {
        uni.previewImage({
            urls: imageList.value,
            current: index
        })
    }
}
</script>

<style lang="scss" scoped>
.info-card {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
}

.row {
    display: flex;
    align-items: baseline;
    margin-bottom: 12rpx;
}

.label {
    font-size: 28rpx;
    color: #666666;
}

.value {
    font-size: 28rpx;
    color: #333333;
}

.link {
    font-size: 28rpx;
    color: #1b77f0;
}

.sub {
    margin-left: 16rpx;
    font-size: 26rpx;
    color: #22ac38;
}

.status {
    font-size: 28rpx;
    color: #22ac38;
}

.status.danger {
    color: #ff4d4f;
}

.image-wrap {
    margin: 16rpx 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}
</style>