klp-mono/apps/hand-factory/pages/todo/components/coil-card.vue

<template>
  <view class="coil-card">
    <!-- 头部信息 -->
    <view class="card-header">
      <view class="header-item">
        <text class="label">入场钢卷号</text>
        <text class="value">{{ data.enterCoilNo || '-' }}</text>
      </view>
    </view>
    
    <!-- 主体信息 -->
    <view class="card-body">
      <view class="info-row">
        <view class="info-item">
          <text class="label">当前钢卷号</text>
          <text class="value highlight">{{ data.currentCoilNo || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">产品类型</text>
          <text class="value">{{ data.itemName || '-' }}</text>
        </view>
      </view>
      
      <view class="info-row">
        <view class="info-item">
          <text class="label">实际库区</text>
          <text class="value">{{ data.actualWarehouseName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">备注</text>
          <text class="value">{{ data.remark || '-' }}</text>
        </view>
      </view>
      
      <view class="info-row">
        <view class="info-item">
          <text class="label">调拨类型</text>
          <text class="value tag" v-if="data.transferType">{{ data.transferType }}</text>
          <text class="value" v-else>-</text>
        </view>
        <view class="info-item">
          <text class="label">改判原因</text>
          <text class="value">{{ data.changeReason || '-' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="card-footer" v-if="showActions">
      <view class="action-btn primary" @click.stop="handleRelabel">
        <text class="btn-icon">🏷️</text>
        <text class="btn-text">重贴标签</text>
      </view>
      <view class="action-btn" @click.stop="handleViewRecord">
        <text class="btn-icon">📋</text>
        <text class="btn-text">查看记录</text>
      </view>
      <view class="action-btn" @click.stop="handleViewDetail">
        <text class="btn-icon">👁️</text>
        <text class="btn-text">查看详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CoilCard',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => ({})
    },
    showActions: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleRelabel() {
      this.$emit('relabel', this.data)
    },
    handleViewRecord() {
      this.$emit('view-record', this.data)
    },
    handleViewDetail() {
      this.$emit('view-detail', this.data)
    }
  }
}
</script>

<style scoped lang="scss">
.coil-card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  
  .card-header {
    background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
    padding: 24rpx 30rpx;
    
    .header-item {
      display: flex;
      align-items: center;
      
      .label {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-right: 16rpx;
      }
      
      .value {
        font-size: 32rpx;
        color: #ffffff;
        font-weight: 600;
      }
    }
  }
  
  .card-body {
    padding: 24rpx 30rpx;
    
    .info-row {
      display: flex;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .label {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 8rpx;
        }
        
        .value {
          font-size: 28rpx;
          color: #333333;
          word-break: break-all;
          word-wrap: break-word;
          overflow-wrap: break-word;
          line-height: 1.4;
          
          &.highlight {
            color: #1a73e8;
            font-weight: 500;
          }
          
          &.tag {
            display: inline-block;
            background: #e8f0fe;
            color: #1a73e8;
            padding: 4rpx 16rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            white-space: nowrap;
          }
        }
      }
    }
  }
  
  .card-footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f0f0f0;
    gap: 16rpx;
    
    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16rpx 0;
      border-radius: 8rpx;
      background: #f5f5f5;
      transition: all 0.2s;
      
      &:active {
        opacity: 0.8;
      }
      
      &.primary {
        background: #1a73e8;
        
        .btn-text {
          color: #ffffff;
        }
      }
      
      .btn-icon {
        font-size: 28rpx;
        margin-right: 8rpx;
      }
      
      .btn-text {
        font-size: 26rpx;
        color: #666666;
      }
    }
  }
}

/* H5 浏览器特定样式 */
/* #ifdef H5 */
.coil-card {
  cursor: pointer;
  
  &:hover {
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
  }
  
  .card-footer {
    .action-btn {
      cursor: pointer;
      
      &:hover {
        opacity: 0.9;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
/* #endif */
</style>