shuhi-app/pages/index/wms/components/LocationOrderItem.vue

<template>
    <view class="order-item">
        <view class="order-header">
            <view class="order-info">
                <view class="info-row">
                    <text class="label">订单编号:</text>
                    <text class="value">{{ item.orderNo }}</text>
                </view>
                <view class="info-row">
                    <text class="label">不良数量:</text>
                    <text class="value">{{ item.badCount }}</text>
                </view>
                <view class="info-row">
                    <text class="label">物流单号:</text>
                    <text class="value">{{ item.logisticsNo }}</text>
                </view>
                <view class="info-row">
                    <text class="label">验货完成日期:</text>
                    <text class="value">{{ item.inspectionDate }}</text>
                </view>
                <view class="info-row">
                    <text class="label">录入人:</text>
                    <text class="value">{{ item.operator }}</text>
                </view>
            </view>


            <view class="check-icon" v-if="isCheck">
                <u-icon :name="item.checked ? 'checkmark-circle-fill' : 'checkmark-circle'"
                    :color="item.checked ? '#19be6b' : '#c8c9cc'" size="28" @click="toggleSelect"></u-icon>
            </view>

            <navigator v-else :url="item.jumpUrl" hover-class="none" class="quick-jump">
                <u-icon name="arrow-rightward" color="#2979ff" size="20"></u-icon>
            </navigator>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    isCheck: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['select'])

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

<style lang="scss" scoped>
.order-item {
    background-color: #ffffff;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.order-info {
    flex: 1;
}

.info-row {
    display: flex;
    margin-bottom: 12rpx;
    font-size: 28rpx;
    line-height: 40rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.label {
    color: #666;
    margin-right: 16rpx;
    min-width: 160rpx;
}

.value {
    color: #333;
    flex: 1;
}

.check-icon {
    padding: 0 10rpx;
}
</style>