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="imgSrc">
            <u-image :src="imgSrc" width="150rpx" height="150rpx" radius="8" mode="aspectFill"
                @click="preview"></u-image>
        </view>
    </view>
</template>

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

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

const imgSrc = computed(() => props.detail.imageUrl || props.detail.imgPath || '')

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

const preview = () => {
    if (!imgSrc.value) return
    uni.previewImage({ urls: [imgSrc.value] })
}
</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;
}
</style>