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>
          <view style="color: #2c69ff">{{ expanded[i] ? "收起" : "展开" }}</view>
        </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,
      allCompanies: [],
      loading: true,
      expanded: {},
      products: {},
      productPages: [],
    };
  },
  onLoad() {
    this.fetchInitial();
  },
  methods: {
    getDrugInfoNameList(i) {
      // if (!this.products[i]) this.products[i] = [];
      // if (
      //   this.products[i].length >= this.companyList[i].drugInfoNameList?.length
      // ) {
      //   return;
      // }
      // const size = 10;
      // const page = (this.productPages[i] || 0) + 1;
      // const start = (page - 1) * size;
      // const end = Math.min(
      //   start + size,
      //   this.companyList[i].drugInfoNameList?.length || 0
      // );
      // this.products[i] = [
      //   ...(this.products[i] || []),
      //   ...(this.companyList[i].drugInfoNameList?.slice(start, end) || []),
      // ];
      // this.productPages[i] = page;
      const {page: nextPage, data: nextData} = getPaginatedList({
        page: this.productPages[i] || 0,
        initData: this.companyList[i].drugInfoNameList || [],
        data: this.products[i] || [],
      })
      this.productPages[i] = nextPage;
      this.products[i] = nextData;
    },
    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.genMockAll();
      // this.companyTotalCount = this.allCompanies.length;
      this.fetchCustomers();
    },
    fetchCustomers() {
      if (!this.companyHasMore || this.companyLoading) return;
      this.companyLoading = true;
      // const start = (this.companyPageNum - 1) * this.companyPageSize;
      // const next = this.allCompanies.slice(start, start + this.companyPageSize);
      // this.companyList = [...this.companyList, ...next];
      // if (this.companyList.length < this.companyTotalCount) {
      //   this.companyPageNum++;
      //   this.companyHasMore = true;
      // } else {
      //   this.companyHasMore = false;
      // }
      // this.companyLoading = false;
      // this.loading = false;
      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;
          this.companyList = Array.isArray(list)
            ? [...this.companyList, ...list]
            : [...this.companyList];
          if (this.companyList.length < this.companyTotalCount) {
            this.companyPageNum++;
            this.companyHasMore = true;
          } else {
            this.companyHasMore = false;
          }
          this.companyList.forEach((item, i) => {
            this.getDrugInfoNameList(i);
          });
        }
        this.companyLoading = false;
        this.loading = false;
      })
    },
    onScrollToLower() {
      this.fetchCustomers();
    },
    toggle(i) {
      this.$set(this.expanded, i, !this.expanded[i]);
    },
    genMockAll() {
      const companies = [];
      const names = [
        "华润三九医药股份有限公司",
        "华润三九(枣庄)药业有限公司",
        "华润三九(南昌)药业有限公司",
        "合肥华润神鹿药业有限公司",
        "杭州华润老桐君药业有限公司",
        "吉林三九金复康药业有限公司",
        "华润三九(郴州)制药有限公司",
      ];
      const drugs = [
        "益气清肺颗粒6袋",
        "维E胶囊30*100mg",
        "右美沙芬糖浆180",
        "赐多康西洋参片40",
        "麝香3*27*2",
        "牦牛骨钙VD片60",
        "畅生源胶丸120",
        "多种矿物质口服液7支",
        "三七提取物软胶囊30粒",
        "拉曼布拉氏益生菌20",
        "维生素AD滴剂700U*50",
        "锌钙特铝塑盒120",
      ];
      for (let i = 0; i < 80; i++) {
        const dn = [];
        const count = 3 + (i % 4);
        for (let j = 0; j < count; j++) {
          dn.push({ physicName: drugs[(i + j) % drugs.length] });
        }
        companies.push({ customerName: names[i % names.length], drugs: dn });
      }
      this.allCompanies = companies;
    },
  },
};
</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>