huarun/traceCodePackages/traceabilityReport/pages/blacklist/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="tip">点击“上游客户”名称展开详细表格</view>
    <view
      class="list-container"
      :style="{ paddingTop: statusBarHeight + 60 + 'px' }"
    >
      <view
        class="card product-card"
        v-for="(prd, i) in products"
        :key="'prd-' + i"
      >
        <view
          class="customer-row"
          v-for="(c, j) in prd.customers"
          :key="'cust-' + j"
        >
          <text class="customer-label">上游客户：</text>
          <text class="customer-name" @click.stop="toggleCustomer(i, j)">{{
            c.name
          }}</text>
          <text class="expand-tag" @click.stop="toggleCustomer(i, j)">{{
            c.expanded ? "收起" : "展开"
          }}</text>
        </view>
        <view
          class="table-card"
          v-for="(c, j) in prd.customers"
          :key="'tbl-' + j"
          v-show="c.expanded"
        >
          <scroll-view scroll-x="true" class="table-scroll">
            <view class="blk-table">
              <view class="blk-header">
                <view class="th col-region">货源片区</view>
                <view class="th col-qty">数量</view>
                <view class="th col-batch">批号</view>
                <view class="th col-sample">监管码样本（抽样）</view>
                <view class="th col-terminal">终端到达数量</view>
              </view>
              <view class="blk-body">
                <view
                  class="blk-row"
                  v-for="(row, idx) in c.details"
                  :key="'row-' + idx"
                >
                  <view class="td col-region">{{ row.region }}</view>
                  <view class="td col-qty">{{ row.quantity }}</view>
                  <view class="td col-batch">{{ row.batchNo }}</view>
                  <view class="td col-sample">{{ row.sample }}</view>
                  <view class="td col-terminal">{{ row.arrivalQty }}</view>
                </view>
                <view
                  v-if="!c.details || c.details.length === 0"
                  class="empty-row"
                  >暂无数据</view
                >
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Water from "@/components/water/water.vue";
export default {
  components: {
    Water,
  },
  data() {
    return {
      statusBarHeight: 20,
      title: "黑名单详情",
      products: [],
    };
  },
  onLoad(options) {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight || 20;
    const name =
      options && options.name ? decodeURIComponent(options.name) : "";
    this.title = name || "黑名单详情";
    this.products = this.generateMockProducts(name || "感冒灵");
  },
  methods: {
    onBack() {
      try {
        uni.navigateBack();
      } catch (e) {}
    },
    toggleCustomer(i, j) {
      const cur = this.products[i].customers[j];
      this.$set(this.products[i].customers[j], "expanded", !cur.expanded);
    },
    generateMockProducts(drugName) {
      const makeDetails = (n = 3) =>
        Array.from({ length: n }).map((_, idx) => ({
          region: ["广东", "江苏", "四川", "山东"][idx % 4],
          quantity: 100 + idx * 20,
          batchNo: `B${String(202400 + idx)}`,
          sample: `抽样${10 + idx}枚`,
          arrivalQty: 90 + idx * 15,
        }));
      return [
        {
          name: drugName,
          customers: [
            { name: "公司A", expanded: false, details: makeDetails(3) },
            { name: "公司B", expanded: false, details: makeDetails(2) },
          ],
        },
        {
          name: drugName,
          customers: [
            { name: "公司A", expanded: true, details: makeDetails(4) },
            { name: "公司C", expanded: false, details: makeDetails(3) },
          ],
        },
      ];
    },
  },
};
</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;
  z-index: 10;
}
.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 {
  min-height: 100vh;
  background: #f3f6f9;
}
.tip {
  font-size: 24rpx;
  color: #999;
  padding: 24rpx;
}
.list-container {
  padding: 0 24rpx 24rpx;
  box-sizing: border-box;
}
.card {
  margin: 24rpx;
  background: #fff;
  border-radius: 16rpx;
  font-size: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.product-card {
  padding: 24rpx;
}
.product-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.customer-row {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.customer-row:last-child {
  border-bottom: none;
}
.customer-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}
.customer-name {
  font-size: 28rpx;
  color: #2c69ff;
}
.expand-tag {
  margin-left: auto;
  font-size: 26rpx;
  color: #2c69ff;
}
.table-card {
  padding: 0;
  overflow: hidden;
  margin-top: 16rpx;
}
.table-scroll {
  width: 100%;
}
.blk-table {
  min-width: 1200rpx;
  border-top: 1rpx solid #eee;
  border-left: 1rpx solid #eee;
}
.blk-header {
  display: flex;
  background: #f5f7fa;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}
.blk-body {
  font-size: 26rpx;
  color: #666;
}
.blk-row {
  display: flex;
  border-bottom: 1rpx solid #eee;
}
.th,
.td {
  padding: 16rpx 10rpx;
  border-right: 1rpx solid #eee;
  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 #eee;
}
.empty-row {
  padding: 30rpx;
  text-align: center;
  color: #999;
}
.col-region {
  width: 200rpx;
}
.col-qty {
  width: 140rpx;
}
.col-batch {
  width: 200rpx;
}
.col-sample {
  width: 300rpx;
}
.col-terminal {
  width: 220rpx;
}
</style>