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="list-container" :style="{ paddingTop: statusBarHeight + 60 + 'px' }">
      <view class="tip">点击客户名称展开详细表格</view>
      <view v-for="(prd, i) in products" :key="'prd-' + i">
        <view class="section-title">感冒灵</view>
        <view class="card product-card">
          <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>
  </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;
}

.section-title {
  position: relative;
  font-size: 30rpx;
  font-weight: bold;
  color: #2c69ff;
  margin-left: 24rpx;
}

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

.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: 1060rpx;
  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>