huarun/traceCodePackages/traceabilityReport/pages/ganmaoling/detail/index.vue

<template>
  <Water></Water>
  <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
    <text
      class="nav-back"
      :style="{ top: statusBarHeight + 'px' }"
      @click="onBack"
    ></text>
    <view class="nav-title">{{ title }}</view>
  </view>
  <view class="page">
    <view
      class="header-card"
      :style="{ paddingTop: statusBarHeight + 60 + 'px' }"
    >
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">所在省份：{{ regionName }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text"
          >客户等级：{{
            scanType == 1 ? "VIP" : scanType == 2 ? "二级" : "三级"
          }}客户</text
        >
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">客户性质：{{ customerType || "--" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">责任经理：{{ managerName || "--" }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text"
          >累计预警次数：{{
            warningCount || warningCount == 0 ? warningCount : "--"
          }}</text
        >
      </view>
    </view>

    <view class="section-title">流转信息</view>

    <view class="card table-card">
      <scroll-view scroll-x="true" class="table-scroll">
        <view class="flow-table">
          <view class="flow-header">
            <view class="th col-time">单据时间</view>
            <view class="th col-type">单据类型</view>
            <view class="th col-product">产品名称</view>
            <view class="th col-batch">批号</view>
            <view class="th col-source">货源地</view>
            <view class="th col-qty">数量</view>
            <view class="th col-chain">链路</view>
          </view>
          <view class="flow-body">
            <view
              class="flow-row"
              v-for="(item, index) in flowList"
              :key="index"
            >
              <view class="td col-time">{{ item.billTime }}</view>
              <view class="td col-type">{{ item.billType }}</view>
              <view class="td col-product">{{ item.productName }}</view>
              <view class="td-group">
                <view
                  class="sub-row"
                  v-for="(sub, sIdx) in item.items"
                  :key="sIdx"
                >
                  <view class="td col-batch">{{ sub.batchNo }}</view>
                  <view class="td col-source">{{ sub.source }}</view>
                  <view class="td col-qty">{{ sub.quantity }}</view>
                </view>
              </view>
              <view class="td col-chain">{{ item.chain }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Water from "@/components/water/water.vue";
export default {
  components: {
    Water,
  },
  data() {
    return {
      title: "",
      managerName: "夜神月",
      warningCount: 0,
      scanType: "",
      statusBarHeight: 20,
      regionName: "广东",
      customerType: "协议客户",
      flowList: [
        {
          billTime: "2023-01-01 12:00",
          billType: "销售出库",
          productName: "感冒灵颗粒",
          items: [
            { batchNo: "A20230101", source: "广州工厂", quantity: "1000" },
            { batchNo: "A20230102", source: "深圳工厂", quantity: "500" },
          ],
          chain: "经销商A -> 药店B",
        },
        {
          billTime: "2023-01-02 14:30",
          billType: "调拨入库",
          productName: "三九胃泰",
          items: [
            { batchNo: "B20230105", source: "北京仓库", quantity: "200" },
            { batchNo: "B20230106", source: "上海仓库", quantity: "300" },
            { batchNo: "B20230107", source: "武汉仓库", quantity: "150" },
          ],
          chain: "总仓 -> 分仓",
        },
        {
          billTime: "2023-01-02 14:30",
          billType: "调拨入库",
          productName: "三九胃泰",
          items: [
            { batchNo: "B20230105", source: "北京仓库", quantity: "200" },
            { batchNo: "B20230106", source: "上海仓库", quantity: "300" },
            { batchNo: "B20230107", source: "武汉仓库", quantity: "150" },
          ],
          chain: "总仓 -> 分仓",
        },
      ],
    };
  },
  onLoad(options) {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight || 20;
    this.title =
      options && options.name ? decodeURIComponent(options.name) : "报表详情";
  },
  methods: {
    onBack() {
      try {
        uni.navigateBack();
      } catch (e) {}
    },
  },
};
</script>
<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #2c69ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: 700;
}

.nav-back {
  position: absolute;
  left: 40rpx;
  top: 12rpx;
  width: 20rpx;
  height: 20rpx;
  color: #fff;
  border-left: 3rpx solid #fff;
  border-bottom: 3rpx solid #fff;
  transform: rotate(45deg) translateY(56rpx);
  margin-left: 40rpx;
  margin-top: -6rpx;
}

.page {
  height: 100vh;
}

.card {
  margin: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  font-size: 32rpx;
}

.header-card {
  background: #2c69ff;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  padding: 36rpx;
  color: #fff;
}

.meta {
  display: flex;
  align-items: center;
  margin: 14rpx 0;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #fff;
  margin-right: 20rpx;
}

.meta-text {
  font-size: 32rpx;
}

.section-title {
  position: relative;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 30rpx 20rpx;
}

.section-title::after {
  content: "";
  position: absolute;
  left: -20rpx;
  bottom: 8rpx;
  width: 8rpx;
  height: 50%;
  background: #2c69ff;
  border-radius: 10px;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
}

.flow-table {
  min-width: 1300rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.flow-header {
  display: flex;
  background: #f5f7fa;
  font-size: 26rpx;
  font-weight: bold;
  color: #2c69ff;
}

.flow-body {
  font-size: 26rpx;
  color: #666;
}

.flow-row {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}

.flow-row:nth-child(even) {
  background-color: #f7f7f7;
}

.th,
.td {
  padding: 16rpx 10rpx;
  border-right: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
  box-sizing: border-box;
  flex-shrink: 0;
}

.th {
  border-bottom: 1rpx solid #ccc;
}

.col-time {
  width: 220rpx;
}

.col-type {
  width: 160rpx;
}

.col-product {
  width: 200rpx;
}

.col-batch {
  width: 180rpx;
}

.col-source {
  width: 180rpx;
}

.col-qty {
  width: 120rpx;
}

.col-chain {
  width: 240rpx;
}

.td-group {
  display: flex;
  flex-direction: column;
  width: 480rpx;
  flex-shrink: 0;
}

.sub-row {
  display: flex;
  flex: 1;
  border-bottom: 1rpx solid #ccc;
}

.sub-row:last-child {
  border-bottom: none;
}
</style>