jsh_erp_app/pages/inventory-task/taskDetail.vue

<template>
  <view class="inventory-task-detail">
    <!-- 导航栏 -->
    <u-navbar
      title="盘点任务详情"
      :autoBack="true"
      fixed
      safe-area-inset-top
      placeholder
      bgColor="#FFFFFF"
    ></u-navbar>

    <!-- 任务信息卡片 -->
    <view class="info-card">
      <view class="task-title">
        {{ taskInfo.title }}
        <view
          class="task-status"
          :class="{ 'status-completed': taskInfo.status === '已完成' }"
        >
          {{ taskInfo.status }}
        </view>
      </view>

      <view class="task-number"> 盘点单号：{{ taskInfo.number }} </view>

      <!-- 统计信息 -->
      <view class="statistics">
        <view class="stat-item">
          <view class="stat-label">盘点商品</view>
          <view class="stat-value highlight">
            {{ taskInfo.inventoryCount }}/{{ taskInfo.totalCount }}
          </view>
        </view>
        <view class="stat-item">
          <view class="stat-label">差异率</view>
          <view class="stat-value">{{ taskInfo.differenceRate }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">准确率</view>
          <view class="stat-value">{{ taskInfo.accuracyRate }}</view>
        </view>
      </view>

      <!-- 详情按钮 -->
      <view class="action-btn" @click="viewDetail"> 查看盘点详情 </view>

      <!-- 详细信息列表 -->
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">盘点类型</text>
          <text class="info-value">{{ taskInfo.type }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">盘点仓库</text>
          <text class="info-value">{{ taskInfo.warehouse }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">盘点范围</text>
          <text class="info-value">{{ taskInfo.scope }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">参与人员</text>
          <text class="info-value">{{ taskInfo.participants }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskInfo: {
        title: "2023年中心仓第三季度食品盘点",
        status: "已完成",
        number: "2024202244",
        inventoryCount: "604",
        totalCount: "604",
        differenceRate: "6.29%",
        accuracyRate: "97.80%",
        type: "盘点类型",
        warehouse: "中心仓",
        scope: "A区-B区",
        participants: "张三、李四",
      },
    };
  },
  methods: {
    viewDetail() {
      // 跳转到盘点详情页面
      uni.navigateTo({
        url: "/pages/inventory-task/inventory-detail",
      });
    },
  },
};
</script>

<style lang="scss">
.inventory-task-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;

  .info-card {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .task-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .task-status {
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        background-color: #e3f2fd;
        color: #2196f3;
        border-radius: 20rpx;
        font-weight: normal;

        &.status-completed {
          background-color: #e8f5e9;
          color: #4caf50;
        }
      }
    }

    .task-number {
      font-size: 28rpx;
      color: #666666;
      margin-top: 16rpx;
      margin-bottom: 30rpx;
    }

    .statistics {
      display: flex;
      justify-content: space-between;
      background-color: #f7f8fa;
      border-radius: 10rpx;
      padding: 30rpx 0;
      margin-bottom: 30rpx;

      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-label {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 10rpx;
        }

        .stat-value {
          font-size: 28rpx;
          color: #333333;
          font-weight: 500;

          &.highlight {
            color: #4080ff;
          }
        }
      }
    }

    .action-btn {
      height: 88rpx;
      background-color: #4080ff;
      border-radius: 16rpx;
      color: #ffffff;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40rpx;
    }

    .info-list {
      padding: 20rpx;

      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;

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

        .info-label {
          font-size: 28rpx;
          color: #666666;
        }

        .info-value {
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>