huarun/traceCodePackages/traceabilityCodeQuery/pages/scanRange/index.vue

<template>
  <Water></Water>
  <view class="scan-range-page">
    <view class="loading-page" v-if="getLoading()">
      <image class="loading-icon" src="../../../static/images/loading.png" />
    </view>
    <scroll-view v-else class="content" scroll-y="true" @scrolltolower="onScrollToLower">
      <view class="item" v-for="(item, i) in companyList" :key="i" @click="toggle(i)">
        <view class="item-header">
          <text class="item-title">{{ i + 1 }}.&nbsp;{{ item.entName || "" }}</text>
          <uni-icons type="down" size="22" color="#999" :style="{
            transform: expanded[i] ? 'rotate(180deg)' : 'rotate(0deg)',
            transition: 'transform 0.3s ease-in-out',
          }"></uni-icons>
        </view>
        <scroll-view class="item-collapse" scroll-y="true" :style="{
          height: getCollapseHeight(i),
        }" @scrolltolower="getDrugInfoNameList(i)">
          <view class="cv-item" v-for="(d, di) in products[i]" :key="'drug-' + di">
            <text class="cv-index">{{ di + 1 }}</text>
            <text class="cv-label">药品名称：</text>
            <text class="cv-value">{{ d.physicName || "" }}</text>
          </view>
        </scroll-view>
      </view>
      <view class="loading-row" v-if="companyHasMore">
        <view class="loading-wrapper">
          <image class="loading-icon" src="../../../static/images/loading.png" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import request from "../../../request/index.js";
import { getPaginatedList } from "../../../utils/utils.js";
import Water from "@/components/water/water.vue";
export default {
  components: {
    Water,
  },
  data() {
    return {
      companyList: [],
      companyPageNum: 1,
      companyPageSize: 20,
      companyTotalCount: 0,
      companyHasMore: true,
      companyLoading: false,
      fetchedCount: 0,
      allCompanies: [],
      loading: true,
      expanded: {},
      products: {},
      productPages: [],
      canScanCompanyList: ["华润三九医药股份有限公司", '华润三九（枣庄）药业有限公司', '华润三九（南昌）药业有限公司', '合肥华润神鹿药业有限公司', '杭州华润老桐君药业有限公司', '吉林三九金复康药业有限公司', '华润三九（郴州）制药有限公司']
    };
  },
  onLoad() {
    this.fetchInitial();
  },
  methods: {
    getDrugInfoNameList(i) {
      const res = getPaginatedList({
        page: this.productPages[i] || 0,
        initData: this.companyList[i]?.drugInfoNameList || [],
        data: this.products[i] || [],
      });
      if (!res || !Array.isArray(res.data)) return;
      this.$set(this.productPages, i, res.page || this.productPages[i] || 0);
      this.$set(this.products, i, res.data);
    },
    getCollapseHeight(i) {
      return this.expanded[i]
        ? Math.min(7.3 * 70, this.companyList[i].drugInfoNameList.length * 70) +
        "rpx"
        : "0";
    },
    getLoading() {
      return this.loading;
    },
    fetchInitial() {
      this.fetchCustomers();
    },
    fetchCustomers() {
      if (!this.companyHasMore || this.companyLoading) return;
      this.companyLoading = true;
      request("/customer/info/getEnterpriseData", {
        pageNum: this.companyPageNum,
        pageSize: this.companyPageSize,
        path: "/traceabilityCodeQuery/pages/scanRange/index.vue",
      }).then((res) => {
        if (res.code == 200) {
          const { total, list } = res.data || {};
          this.companyTotalCount = total || 0;
          const rawList = Array.isArray(list) ? list : [];
          this.fetchedCount = (this.fetchedCount || 0) + rawList.length;

          const filtered = rawList.filter((item) =>
            this.canScanCompanyList.includes(item.entName)
          );

          this.companyList = [...this.companyList, ...filtered];

          if (
            rawList.length > 0 &&
            this.fetchedCount < this.companyTotalCount
          ) {
            this.companyPageNum++;
            this.companyHasMore = true;
          } else {
            this.companyHasMore = false;
          }
          this.companyList.forEach((item, i) => {
            this.getDrugInfoNameList(i);
          });

          if (
            this.companyHasMore &&
            (filtered.length === 0 || this.companyList.length < 10)
          ) {
            this.companyLoading = false;
            this.fetchCustomers();
            return;
          }
        }
        this.companyLoading = false;
        this.loading = false;
      });
    },
    onScrollToLower() {
      this.fetchCustomers();
    },
    toggle(i) {
      this.$set(this.expanded, i, !this.expanded[i]);
    },
  },
};
</script>

<style>
.scan-range-page {
  box-sizing: border-box;
  padding: 24rpx;
  height: 100vh;
  background: #f3f6f9;
}

.content {
  max-height: calc(100vh - 48rpx - 92rpx - 20rpx - env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 16rpx;
}

.item {
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid #eef0f4;
}

.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60rpx;
}

.item-title {
  font-size: 30rpx;
  color: #333;
}

.item-collapse {
  margin-top: 12rpx;
  height: 0;
  transition: height 0.3s ease-in-out;
}

.cv-item {
  padding: 16rpx;
  display: flex;
  align-items: center;
  color: #666;
}

.cv-index {
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  font-size: 18rpx;
  text-align: center;
  border-radius: 50%;
  margin-right: 8rpx;
  border: 1rpx solid #666;
}

.cv-label {
  width: 140rpx;
  font-size: 28rpx;
}

.cv-value {
  width: 0;
  flex: 1;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading-page {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.loading-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-icon {
  width: 50rpx;
  height: 50rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>