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

<template>
    <view class="bad-item">
        <u-swipe-action>
            <u-swipe-action-item :options="options" @click="handleAction">
                <view class="item-content">
                    <view class="item-row">
                        <text class="label">订单编号：</text>
                        <text class="value">{{ data.orderId }}</text>
                        <u-icon name="edit-pen" color="#4CAF50" size="20" class="edit-icon"
                            @click="$emit('edit')"></u-icon>
                    </view>
                    <view class="item-row">
                        <text class="label">不良数量：</text>
                        <text class="value">{{ data.badNum }}</text>
                    </view>
                    <view class="item-row">
                        <text class="label">物流单号：</text>
                        <text class="value">{{ data.waybillCode }}</text>
                    </view>
                    <view class="item-row">
                        <text class="label">验货完成日期：</text>
                        <text class="value">{{ data.auditFinishTime }}</text>
                    </view>
                    <view class="item-row">
                        <text class="label">录入人：</text>
                        <text class="value">{{ data.auditUserName }}</text>
                    </view>
                </view>
            </u-swipe-action-item>
        </u-swipe-action>
    </view>
</template>

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

const props = defineProps({
    data: {
        type: Object,
        required: true,
        default: () => ({
            orderNo: '',
            badCount: '',
            logisticsNo: '',
            checkDate: '',
            operator: ''
        })
    }
})

const emit = defineEmits(['delete', 'edit'])

// 左滑操作按钮配置
const options = ref([
    {
        text: '删除',
        style: {
            backgroundColor: '#ff4444'
        }
    }
])

// 处理左滑操作
const handleAction = (e) => {
    if (e.index === 0) {
        uni.showModal({
            title: '提示',
            content: '确定要删除该订单吗？',
            success: (res) => {
                if (res.confirm) {
                    emit('delete')
                }
            }
        })
    }
}
</script>

<style scoped>
.bad-item {
    margin-bottom: 12px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.item-content {
    padding: 12px 15px;
}

.item-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
}

.item-row:last-child {
    margin-bottom: 0;
}

.label {
    color: #666;
    font-size: 16px;
    width: 120px;
}

.value {
    color: #333;
    font-size: 16px;
    flex: 1;
}

.edit-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
</style>