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.orderId }}</text>
                </view>
                <view class="info-row">
                    <text class="label">不良数量:</text>
                    <text class="value">{{ item.badNum }}</text>
                </view>
                <view class="info-row">
                    <text class="label">物流单号:</text>
                    <text class="value">{{ item.waybillCode }}</text>
                </view>
                <view class="info-row">
                    <text class="label">验货完成日期:</text>
                    <text class="value">{{ item.auditFinishTime }}</text>
                </view>
                <view class="info-row">
                    <text class="label">录入人:</text>
                    <text class="value">{{ item.auditUserName }}</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>

            <view class="flex flex-d flex-a-c flex-j-c quick-jump" @click="handleQuickJump">
                <image src="/static/img/share.png" mode="widthFix" style="width: 30px;"></image>
                <text style="font-size: 28rpx;color: #19be6b;">快速跳转</text>
            </view>
        </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)
}

const handleQuickJump = () => {
    uni.navigateTo({
        url: `/pages/index/wms/order-query-list?id=${props.item.orderId}`
    })
}
</script>

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

.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: 180rpx;
}

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

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