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