shuhi-app/pages/order/components/track-record.vue

<template>
    <view class="record-card">
        <view class="title">
            <view class="line"></view>
            <text>任务跟踪记录</text>
        </view>
        <view v-for="(item, idx) in records" :key="idx" class="record-item">
            <view class="item-header">
                <text class="user">{{ item.user || '-' }}</text>
                <text class="time">{{ item.time || '-' }}</text>
            </view>
            <view class="item-body">
                <text class="content">{{ item.statusText || item.content || '-' }}</text>
            </view>
            <view v-if="getImgs(item).length" class="item-images">
                <u-image
                    v-for="(img, i) in getImgs(item)"
                    :key="i"
                    :src="img"
                    width="160rpx"
                    height="160rpx"
                    radius="8"
                    mode="aspectFill"
                    @click="preview(getImgs(item), i)"
                ></u-image>
            </view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    records: {
        type: Array,
        default: () => []
    }
})

const getImgs = (item) => {
    const arr = item?.images || item?.files || item?.fileList || item?.pictures || item?.pics || []
    if (!arr) return []
    return Array.isArray(arr)
        ? arr.map(v => typeof v === 'string' ? v : (v?.url || '')).filter(Boolean)
        : []
}

const preview = (urls, index) => {
    uni.previewImage({ urls, current: index })
}
</script>

<style lang="scss" scoped>
.record-card {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
}
.title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 16rpx;
}
.line {
    width: 8rpx;
    height: 32rpx;
    background: #22ac38;
    border-radius: 4rpx;
}
.record-item {
    padding: 20rpx 0;
    border-top: 1rpx solid #f0f0f0;
}
.item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8rpx;
}
.user {
    font-size: 28rpx;
    color: #666666;
}
.time {
    font-size: 26rpx;
    color: #969696;
}
.item-body {
    margin-top: 6rpx;
}
.content {
    font-size: 28rpx;
    color: #333333;
}
.item-images {
    margin-top: 12rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}
</style>