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.taskName }}
        <view
          class="task-status"
          :class="{ 'status-completed': taskInfo.taskStatus === 3 }"
        >
          {{ curTaskStatusInfo.name2 }}
        </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.finishCount }}/{{ taskInfo.itemCount }}
          </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">{{ curTaskTyoeInfo.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">盘点仓库</text>
          <text class="info-value">{{ taskInfo.depotName }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">盘点范围</text>
          <text class="info-value">{{ taskInfo.positionRange }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">参与人员</text>
          <text class="info-value">{{ taskInfo.operBy }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { taskStocktakingDetail } from "@/common/request/apis/inventoryTask";
import { getTaskTypeInfoByVal, getTaskStatusInfoByVal } from "./utils/index.js";

export default {
  data() {
    return {
      taskInfo: {},
    };
  },
  computed: {
    curTaskStatusInfo() {
      return getTaskStatusInfoByVal(this.taskInfo.taskStatus);
    },
    curTaskTyoeInfo() {
      return getTaskTypeInfoByVal(this.taskInfo.taskType);
    },
  },
  onLoad(opt) {
    this.loadData(opt.id);
  },
  methods: {
    viewDetail() {
      // 跳转到盘点详情页面
      uni.navigateTo({
        url: "/pages/inventory-task/inventoryDetail",
      });
    },
    async loadData(id) {
      try {
        const res = await taskStocktakingDetail(id);
        console.log("res====", res);
        this.taskInfo = res.data;
      } catch (error) {}
    },
  },
};
</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>