aiot-app/pages/pda/outsourcing/components/outsourcingDetail.vue

<template>
  <view class="page-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="委外单详情"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <view class="header-line"></view>
        <view class="header-title">基本信息</view>
      </view>

      <view class="info-content">
        <view class="info-item" v-for="(infoItem, idx) in infoList" :key="idx">
          <view class="info-label">{{ infoItem.label }}</view>
          <view
            class="info-value"
            :class="{ 'status-badge': infoItem.isStatus }"
          >
            {{ infoItem.value }}
          </view>
        </view>
      </view>
    </view>

    <!-- 明细列表 -->
    <view class="detail-section">
      <view class="section-title">委外明细</view>
      <u-list key="list">
        <u-list-item
          v-for="(detailItem, index) in item.detailList"
          :key="index"
        >
          <outsourcingData :item="detailItem" :index="index" />
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import outsourcingData from "./outsourcingData.vue";
export default {
  components: {
    outsourcingData,
  },

  data() {
    return {
      item: null,
    };
  },

  computed: {
    infoList() {
      if (!this.item) return [];

      const statusText =
        this.item.status == 0
          ? "未提交"
          : this.item.status == 1
            ? "已提交"
            : "已发布";

      return [
        { label: "委外单编码", value: this.item.code || "-" },
        { label: "委外单名称", value: this.item.name || "-" },
        { label: "委外发起工序", value: this.item.taskName || "-" },
        { label: "委外工序", value: this.item.taskNames || "-" },
        { label: "工单编码", value: this.item.workOrderCode || "-" },
        { label: "预计到货日期", value: this.item.requireDeliveryTime || "-" },
        { label: "创建时间", value: this.item.createTime || "-" },
        { label: "状态", value: statusText, isStatus: true },
      ];
    },
  },

  onLoad(options) {
    this.item = JSON.parse(options.item);
  },

  methods: {
    scrolltolower() {},
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 20rpx;
}

// 信息卡片
.info-card {
  margin: 20rpx 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 28rpx 24rpx 20rpx;

  .header-line {
    width: 6rpx;
    height: 32rpx;
    background: linear-gradient(180deg, #157a2c 0%, #1ea03a 100%);
    border-radius: 3rpx;
    margin-right: 16rpx;
  }

  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #303133;
  }
}

.info-content {
  padding: 0 24rpx 24rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f2f5;

  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  flex-shrink: 0;
  width: 200rpx;
  font-size: 28rpx;
  color: #909399;
  line-height: 40rpx;
}

.info-value {
  flex: 1;
  font-size: 28rpx;
  color: #303133;
  line-height: 40rpx;
  word-break: break-all;

  &.status-badge {
    display: inline-block;
    padding: 4rpx 16rpx;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f2 100%);
    color: #157a2c;
    border-radius: 8rpx;
    font-weight: 500;
  }
}

// 明细列表区域
.detail-section {
  margin: 0 24rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #303133;
    padding: 24rpx 0 16rpx;
  }

  .u-list {
    background: transparent;
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .info-label {
    width: 180rpx;
    font-size: 26rpx;
  }

  .info-value {
    font-size: 26rpx;
  }

  .card-header .header-title {
    font-size: 30rpx;
  }
}

@media screen and (min-width: 768px) {
  .info-card {
    margin: 30rpx auto;
    max-width: 1200rpx;
  }

  .detail-section {
    margin: 0 auto;
    max-width: 1200rpx;
  }
}
</style>