jsh_erp_app/pages/goods/detail.vue

<template>
  <view class="detail-page">
    <u-navbar
      height="40px"
      :title="navTitle"
      bgColor="#0256FF"
      :titleStyle="{ color: '#fff' }"
      leftIconColor="#fff"
      autoBack
      placeholder
    >
    </u-navbar>
    <view class="container_main">
      <view class="info-box">
        <view class="info-line">
          <view class="info-line-label">
            <text>货物名称</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.materialName }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>货物条码</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.sku }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>货物图片</text>
          </view>
          <view class="info-line-value ss-p-y-24">
            <u-image
              :src="
                goodsInfo.imgNameArr && goodsInfo.imgNameArr.length > 0
                  ? goodsInfo.imgNameArr[0]
                  : ''
              "
              width="120rpx"
              height="120rpx"
            ></u-image>
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>规格</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.materialStandard || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>批次号</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.batchNumber || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>生产日期</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.productionDate || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>库存</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.inventory ? (goodsInfo.inventory * 1).toFixed(0) : "0"
            }}{{ goodsInfo.commodityUnit || "" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>库位</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.position || "-" }}
          </view>
        </view>
        <view class="info-line">
          <view class="info-line-label">
            <text>创建时间</text>
          </view>
          <view class="info-line-value">
            {{ goodsInfo.createTime }}
          </view>
        </view>
      </view>
      <view class="crk-box" @click="getMaterialDepotDetail(), (crkShow = true)">
        <u-image
          src="@/static/image/cgrk-icon.png"
          width="48rpx"
          height="48rpx"
        ></u-image>
        <view class="crk-msg">
          <view class="crk-msg-name">出入库明细</view>
          <view>查看最近的出入库记录</view>
        </view>
        <u-icon
          name="arrow-right"
          color="rgba(173, 181, 189, 0.50)"
          size="14"
        ></u-icon>
      </view>
    </view>
    <!-- 出入库明细 -->
    <u-popup
      :show="crkShow"
      @close="crkShow = false"
      round="18"
      closeable
      :closeOnClickOverlay="false"
    >
      <view class="crk-cont">
        <view class="crk-cont-title">出入库明细</view>
        <view class="crk-cont-tab">
          <view
            class="tab-item"
            :class="currentCrkId == item.id ? 'tab-item-active' : ''"
            v-for="(item, i) in crkList"
            :key="i"
            @click="tabClick(item)"
          >
            {{ item.name }}
          </view>
        </view>
        <scroll-view scroll-y class="scroll-y">
          <view class="crk-item" v-for="(item, i) in cukList" :key="item.id">
            <view class="crk-item-title">{{ item.materialName }}</view>
            <!-- <view class="crk-item-line">出库仓库：我的仓库-暂无</view> -->
            <view class="crk-item-line"
              >货物规格：{{ item.materialStandard }}</view
            >
            <view class="crk-item-line"
              >{{ currentCrkId == "out" ? "出库" : "入库" }}时间：{{
                item.warehousingTime || "-"
              }}</view
            >
            <view class="crk-item-line"
              >{{ currentCrkId == "out" ? "出库" : "入库" }}数量：{{
                (item.actualQuantityInStorage * 1).toFixed(0) || 0
              }}{{ item.commodityUnit || "" }}</view
            >
            <view class="img-box">
              <image
                v-if="currentCrkId == 'out'"
                src="@/static/image/yck-img.png"
                width="132rpx"
                height="132rpx"
              ></image>
              <image
                v-if="currentCrkId == 'in'"
                src="@/static/image/yrk-img.png"
                width="132rpx"
                height="132rpx"
              ></image>
            </view>
          </view>
          <u-empty
            mode="data"
            text="暂无内容"
            marginTop="60"
            icon="https://xiangli-erp.oss-cn-hangzhou.aliyuncs.com/APP/no-notifcations.png"
            v-if="cukList.length == 0"
          ></u-empty>
          <u-divider
            text="仅展示最近10条记录"
            v-if="cukList.length > 0"
            :dashed="true"
          ></u-divider>
          <view style="height: 40rpx"></view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  materialDetail,
  materialDepotDetail,
} from "@/common/request/apis/purchase";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      navTitle: "",
      goodsId: 0, //单据id
      // materialId:0,//商品id
      crkShow: false,
      currentCrkId: "out",
      crkList: [
        {
          name: "出库",
          id: "out",
        },
        {
          name: "入库",
          id: "in",
        },
      ],
      goodsInfo: {},
      cukList: [],
    };
  },
  computed: {
    ...mapGetters(["depotInfo"]),
    curDepotId() {
      return this.depotInfo ? this.depotInfo.id : "";
    },
    curDepotName() {
      return this.depotInfo ? this.depotInfo.depotName : "";
    },
  },
  onLoad(e) {
    this.navTitle = e.name ? decodeURIComponent(e.name) : "";
    this.goodsId = e.id;
    // this.materialId = e.materialId
    this.getMaterialDetail();
  },
  methods: {
    tabClick(item) {
      console.log("tabClick=====", item);
      this.currentCrkId = item.id;
      this.getMaterialDepotDetail();
    },
    getMaterialDetail() {
      materialDetail(`${this.goodsId}/${this.curDepotId}`).then((res) => {
        if (res.code == 200) {
          console.log("data---------", res.data);
          if (res.data.imgName && res.data.imgName.length > 0) {
            res.data.imgNameArr = res.data.imgName.split(",");
          } else {
            res.data.imgNameArr = [];
          }
          this.goodsInfo = res.data;
        }
      });
    },
    getMaterialDepotDetail() {
      uni.showLoading();
      let urlParams = {
        type: this.currentCrkId,
        materialId: this.goodsInfo.materialId,
        depotId: this.curDepotId,
      };
      let data = { pageNum: 1, pageSize: 10 };
      materialDepotDetail(urlParams, data)
        .then((res) => {
          if (res.code == 200) {
            this.cukList = res.data.rows;
          }
          console.log("res====", res);
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  padding: 24rpx;
  .container_main {
    .info-box {
      background-color: #fff;
      border-radius: 16rpx 16rpx 0 0;
      padding: 24rpx;

      .info-line {
        border-bottom: 1px solid #f4f4f4;
        padding: 24rpx 0;
        color: #333;
        font-family: "PingFang SC";
        font-size: 28rpx;
        line-height: 1.5;
        font-weight: 400;
        display: flex;
        align-items: center;

        &-label {
          flex: 0 0 162rpx;
          width: 162rpx;
        }

        &-value {
          word-break: break-all;
        }

        .must-box {
          color: #ff3b1d;
        }
      }
    }

    .crk-box {
      border-radius: 16rpx;
      background: #fff;
      padding: 32rpx 24rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      .crk-msg {
        flex: 1;
        margin-left: 24rpx;
        color: #666;
        font-size: 28rpx;
        font-weight: 400;
        .crk-msg-name {
          color: #333;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }
  }

  .crk-cont {
    height: 75vh;
    &-title {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #1f1f39;
      font-size: 36rpx;
      font-weight: bold;
    }
    &-tab {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .tab-item {
        width: 160rpx;
        height: 56rpx;
        border-radius: 40rpx;
        border: 1px solid rgba(173, 181, 189, 0.5);
        color: #666;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 56rpx;
        margin-right: 24rpx;
      }
      .tab-item-active {
        background: #0256ff;
        border: 1px solid #0256ff;
        color: #fff;
      }
    }
    .scroll-y {
      height: calc(75vh - 80rpx - 100rpx);
      padding: 0 24rpx;
      .crk-item {
        border-radius: 16rpx;
        background: #f6f8fa;
        padding: 24rpx;
        font-family: "PingFang SC";
        margin-bottom: 24rpx;
        position: relative;
        &-title {
          color: #000;
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 16rpx;
        }
        &-line {
          color: #666;
          font-size: 28rpx;
          font-weight: 400;
          margin-bottom: 8rpx;
        }

        .img-box {
          position: absolute;
          top: 24rpx;
          right: 24rpx;

          image {
            width: 132rpx;
            height: 132rpx;
          }
        }
      }
    }
  }
}
</style>