qianduan-app/pages/tabbar/stock/detail.vue

<template>
  <view class="detail-container">
    <view class="detail-card">
      <text class="detail-title">任务详情</text>
      <view class="detail-item">
        <text class="detail-label">任务号：</text>
        <text class="detail-value">{{ taskData.taskId }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">盘点状态：</text>
        <text class="detail-value">{{ taskData.statusName }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">上位缺件：</text>
        <text class="detail-value">{{ taskData.wmsCountNumber }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">缺件：</text>
        <text class="detail-value">{{ taskData.countNumber }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">上位托盘：</text>
        <text class="detail-value">{{ taskData.wmsPltCode }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">托盘码：</text>
        <text class="detail-value">{{ taskData.pltCode }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">地址：</text>
        <text class="detail-value">{{ position(taskData) }}</text>
      </view>
      <view class="detail-item">
        <text class="detail-label">时间：</text>
        <text class="detail-value">{{ formatTime(taskData.createTime) }}</text>
      </view>
      <!-- 图片显示 -->
      <view class="pics-container" v-if="taskData.urlResources">
        <u-image 
          v-for="(pic, picIndex) in taskData.urlResources" 
          :key="picIndex" 
          :title="pic.url"
          :src="pic.url" width="80px" height="80px" 
          class="detail-pic"
          mode="aspectFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskData: {} // 任务数据
    }
  },
  onLoad(options) {
    // 解析 URL 参数
    if (options.data) {
      this.taskData = JSON.parse(decodeURIComponent(options.data));
      console.log('任务详情数据:', this.taskData);
    }
  },
  methods: {
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    position(row) {
      const from = row.fromSide == 2 ? "库外" : row.streetName + "-" + (row.direction ? "左侧-" : "右侧-") + row.row + '层-' + row.column + '列' + (row.side == 2 ? "深货位" : "");
      return from;
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20rpx;
  background-color: #f7f7f7;
  height: 100vh;
}
.detail-card {
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.detail-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.detail-item {
  display: flex;
  margin-bottom: 15rpx;
}
.detail-label {
  font-weight: bold;
  width: 170rpx;
}
.detail-value {
  flex: 1;
}
/* 图片样式 - 横向排列 */
.pics-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20rpx;
  gap: 10rpx;
}
.detail-pic {
  width: 80px;
  height: 80px;
  border-radius: 8rpx;
}
</style>