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.orderNo }}</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.badCount }}</text>
          </view>
          <view class="item-row">
            <text class="label">物流单号：</text>
            <text class="value">{{ data.logisticsNo }}</text>
          </view>
          <view class="item-row">
            <text class="label">验货完成日期：</text>
            <text class="value">{{ data.checkDate }}</text>
          </view>
          <view class="item-row">
            <text class="label">录入人：</text>
            <text class="value">{{ data.operator }}</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: 14px;
  width: 100px;
}

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

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