aiot-app/pages/warehouse/inventoryAllocation copy/scanView.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="扫码结果"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="scan-view">
      <view class="title">{{ infoData.assetName }}</view>
      <view class="code">（{{ infoData.assetCode }}）</view>
      <view class="content-wrapper">
        <view>
          <view class="label">货位</view>
          <view class="content">{{
            `${infoData.warehouseDetail.warehouseName || ''}-${
              infoData.warehouseDetail.areaName || ''
            }-${infoData.warehouseDetail.shelfCode || ''}-${
              infoData.warehouseDetail.cargoSpaceCode || ''
            }`
          }}</view>
        </view>
        <view>
          <view class="label">类型</view>
          <view class="content">{{ infoData.assetTypeDESC }}</view>
        </view>
        <view v-for="(item, index) in tableHeader" :key="index">
          <view class="label">{{ item.label }}</view>
          <view class="content">{{ infoData.information[item.prop] }}</view>
        </view>
        <view v-if="!infoData.information.isUnpack">
          <view class="label">最小单元</view>
          <view class="content"
            >{{ infoData.warehouseDetail.measurementUnit
            }}{{ infoData.information.measuringUnit
            }}{{
              infoData.information.isUnpack
                ? ''
                : `/${infoData.information.packingUnit}`
            }}</view
          >
        </view>
        <view>
          <view class="label">批次码</view>
          <view class="content">{{ infoData.warehouseDetail.batchNum }}</view>
        </view>
        <view>
          <view class="label">包装编码</view>
          <view class="content">{{ infoData.warehouseDetail.num }}</view>
        </view>
        <view>
          <view class="label">入库天数</view>
          <view class="content">{{ infoData.warehouseDetail.day }}</view>
        </view>
        <view>
          <view class="label">{{
            infoData.warehouseDetail.procurementTime ? '采购日期' : '生产日期'
          }}</view>
          <view class="content">{{
            infoData.warehouseDetail.manufactureTime ||
            infoData.warehouseDetail.procurementTime
          }}</view>
        </view>
        <view>
          <view class="label">过期日期</view>
          <view class="content">{{
            infoData.warehouseDetail.expirationTime
          }}</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <u-button type="success" @click="confirm">确认添加</u-button>
      <u-button @click="cancel">取消</u-button>
    </view>
  </view>
</template>

<script>
import { tableHeader } from '../common'
export default {
  data () {
    return {
      emitName: '',
      infoData: {
        information: {},
        warehouseDetail: {}
      }
    }
  },
  onLoad ({ emitName, key }) {
    this.emitName = emitName
    this.key = key
    this.infoData = uni.getStorageSync(key) || {}

    console.log(key, this.infoData)

    this.infoData.warehouseDetail = this.infoData.warehouseDetail || {}
    this.infoData.information = this.infoData.information || {}
  },
  computed: {
    tableHeader () {
      return tableHeader(this.infoData.assetType)
    }
  },

  methods: {
    confirm () {
      if (this.emitName) {
        uni.$emit(this.emitName, this.infoData)
      }
      this.cancel()
    },
    cancel () {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mainBox {
  background-color: $page-bg;
}
.title {
  padding-top: 30rpx;
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
}
.code {
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-bottom: 40rpx;
}
.scan-view {
  padding-bottom: 220rpx;
  .content-wrapper {
    > view {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
    }
    .label {
      width: 40%;
      text-align: right;
    }
    .content {
      box-sizing: border-box;
      padding-left: 20rpx;
      flex: 1;
      text-align: left;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  background: #fff;
  padding: 20rpx;
  box-sizing: border-box;

  .u-button {
    width: 100% !important;
    & + .u-button {
      margin-top: 10rpx;
    }
  }
}
</style>