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="header-card"
      :style="{ paddingTop: statusBarHeight + 60 + 'px' }"
    >
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">客户名称：{{ title }}</text>
      </view>
      <view class="meta">
        <view class="dot"></view>
        <text class="meta-text">信用代码：91370104771001730R</text>
      </view>
    </view>
    <view
      class="list-container"
      :style="{ paddingTop: statusBarHeight - 30 + 'px' }"
    >
      <view v-for="(prd, i) in products" :key="'prd-' + i">
        <view class="section-title">{{
          i == 0 ? "感冒灵" : "复方氨酚颗粒"
        }}</view>

        <view class="card product-card">
          <view v-for="(c, j) in prd.customers" :key="'cust-' + j">
            <view class="customer-row" @click.stop="toggleCustomer(i, j)">
              <view>
                <text class="customer-label">上游客户：</text>
                <text class="customer-name">{{ c.name }}</text>
              </view>
              <uni-icons
                type="down"
                size="22"
                color="#999"
                :style="{
                  transform: c.expanded ? 'rotate(180deg)' : 'rotate(0deg)',
                  transition: 'transform 0.3s ease-in-out',
                }"
              ></uni-icons>
            </view>
            <view class="table-card" 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>
  </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>
.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;
}
.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;
}

.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;
  display: flex;
  justify-content: space-between;
}

.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: #2c69ff;
}

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

.blk-row {
  display: flex;
  border-bottom: 1rpx solid #eee;
}

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

.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>