huarun/traceCodePackages/traceabilityReport/pages/customerScanningRate/index.vue

<template>
  <view class="scan-rate-page">
    <view class="scan-rate-ranges-container">
      <view class="scan-rate-ranges">
        <view class="scan-rate-ranges-content">
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 1 }" @click="activeRange = 1">近7天
          </view>
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 2 }" @click="activeRange = 2">当月
          </view>
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 3 }" @click="activeRange = 3">上个月
          </view>
          <view class="scan-rate-range" :class="{ 'scan-rate-active': activeRange === 4 }" @click="activeRange = 4">近60天
          </view>
        </view>
      </view>
    </view>

    <view class="scan-rate-content">
      <ScanRateTable ref="scanTableVip" title="VIP客户扫码率" :api="`/bills/getVipScanRate`" :params="{
        type: activeRange,
      }" scanType="1" :products="products" @dropdown-open="closeDropdown" tableType="VIP" headerFontSize="28rpx" />
      <ScanRateTable ref="scanTableL2" title="二级客户扫码率" :api="`/bills/getSecondCustomerScanRate`" :params="{
        type: activeRange,
      }" scanType="2" :products="products" @dropdown-open="closeDropdown" tableType="二级" headerFontSize="28rpx" />
      <ScanRateTable ref="scanTableL3" title="三级客户扫码率" :api="`/bills/getThreeCustomerScanRate`" :params="{
        type: activeRange,
      }" scanType="3" :products="products" @dropdown-open="closeDropdown" tableType="三级" headerFontSize="28rpx" />
      <ScanRateTable ref="scanTableVariety" title="品种扫码率" :columns="varietyColumns" tableWidth="1120rpx"
        headerFontSize="24rpx" bodyFontColor="#000" :api="`/bills/geVarietyScanRate`" tableType="variety" :params="{
          type: activeRange,
        }" :showSummary="false" :products="products" :regions="regions" dropdownDirection="top"
        @dropdown-open="closeDropdown" />
      <!-- <view class="scan-rate-footer">
        <view class="scan-rate-footer-btn" @click="onExport">导出数据</view>
      </view> -->
    </view>
  </view>
</template>

<script>
import ScanRateTable from "./wigets/ScanRateTable.vue";
import request from "../../../request/index";
export default {
  components: {
    ScanRateTable,
  },
  data() {
    return {
      activeRange: 1,
      varietyColumns: [
        {
          key: "regionName",
          title: "品种名",
          fixed: true,
          width: "140rpx",
        },
        {
          key: "oneInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>一级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
        },
        {
          key: "oneOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>一级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
        },
        {
          key: "twoCustomerInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>二级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
        },
        {
          key: "twoCustomerOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>二级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
        },
        {
          key: "threeCustomerInScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>三级客户</view>
                  <view>入库扫码率</view>
                </view>`,
          width: "165rpx",
        },
        {
          key: "threeCustomerOutScanRate",
          title: `<view :style="{ textAlign: 'center' }">
                  <view>三级客户</view>
                  <view>出库扫码率</view>
                </view>`,
          width: "165rpx",
        },
      ],
      products: [],
      regions: [],
    };
  },
  created() {
    Promise.all([this.getProviceList(), this.getDrugInfoName()]).then(
      () => { }
    );
  },
  methods: {
    // onExport() {
    //   uni.showToast({ title: "开始导出", icon: "none" });
    // },
    getProviceList() {
      request('/common/getProviceList', {
        path: 'customerScanningRate/wigets/ScanRateTable.vue',
      }).then(res => {
        if (res.code == 200) {
          const _data = res.data;
          this.regions = [{ regionCode: null, regionName: '全省份' }, ..._data];
        }
      })
    },
    getDrugInfoName() {
      request('/bills/getDrugInfoName', {
        path: 'customerScanningRate/wigets/ScanRateTable.vue',
      }).then(res => {
        if (res.code == 200) {
          const _data = res.data;
          this.products = [{ drugEntBaseInfoId: null, physicName: '全品种' }, ..._data];
        }
      })
    },
    closeDropdown() {
      const r = this.$refs || {};
      const keys = [
        "scanTableVip",
        "scanTableL2",
        "scanTableL3",
        "scanTableVariety",
      ];
      keys.forEach((k) => {
        const c = r[k];
        if (c && typeof c.closeDropdown === "function") c.closeDropdown();
        if (c && typeof c.closeAllTooltip === "function") c.closeAllTooltip();
      });
    },
  },
};
</script>

<style>
.scan-rate-ranges-container {
  position: fixed;
  top: 100rpx;
  left: 0;
  width: 100%;
  height: 140rpx;
  background: #f3f6f9;
  z-index: 99;
}

.scan-rate-ranges {
  padding: 20rpx 30rpx;
}

.scan-rate-ranges-content {
  display: flex;
  background: #fff;
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  justify-content: space-between;
}

.scan-rate-range {
  padding: 12rpx 35rpx;
  border-radius: 5rpx;
  background: rgb(240, 240, 240);
  font-size: 26rpx;
}

.scan-rate-range.scan-rate-active {
  background: #2c69ff;
  color: #fff;
}

/* .scan-rate-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12rpx 30rpx calc(env(safe-area-inset-bottom));
  background: #fff;
  z-index: 999;
}
.scan-rate-footer-btn {
  height: 86rpx;
  border-radius: 999rpx;
  background: #2c69ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(44, 105, 255, 0.35);
} */
</style>