huarun/traceCodePackages/traceabilityReport/pages/index.vue

<template>
  <Water></Water>
  <view v-if="hasFunction" class="page" @click.stop="closeDropdowns">
    <view class="tabs-container">
      <view class="tabs">
        <view v-if="hasScanFunction" class="tab" :class="{ active: activeTab === 'scan' }" @click="activeTab = 'scan'"> 扫码质量</view>
        <view v-if="hasBlacklistFunction" class="tab" :class="{ active: activeTab === 'blacklist' }" @click="activeTab = 'blacklist'">黑名单汇总</view>
        <view v-if="hasGanmaolingFunction" class="tab" :class="{ active: activeTab === 'ganmaoling' }" @click="activeTab = 'ganmaoling'">感冒灵大批量</view>
        <view v-if="hasReportFunction" class="tab" :class="{ active: activeTab === 'export' }" @click="activeTab = 'export'">购销分析</view>
      </view>
    </view>
    <view class="content" v-if="activeTab === 'scan' && hasScanFunction">
      <ScanningRate ref="scanRate" />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }" v-if="activeTab === 'export' && hasReportFunction">
      <ReportExport />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }" v-if="activeTab === 'blacklist' && hasBlacklistFunction">
      <Blacklist />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }" v-if="activeTab === 'ganmaoling' && hasGanmaolingFunction">
      <Ganmaoling />
    </view>
  </view>
  <view v-else-if="!functionLoading" class="page">
    <Empty text="您无权限访问" />
  </view>
</template>

<script>
import LoadingImg from "../../static/images/loading.png";
import ReportExport from "./reportExport/index.vue";
import ScanningRate from "./customerScanningRate/index.vue";
import Blacklist from "./blacklist/index.vue";
import Ganmaoling from "./ganmaoling/index.vue";
import Empty from "../../wigets/empty.vue";
import Water from "@/components/water/water.vue";
import { hasFunction } from "../../utils/utils.js";
import request from "../../request/index.js";
export default {
  components: {
    ScanningRate,
    ReportExport,
    Blacklist,
    Ganmaoling,
    Empty,
    Water,
  },
  data() {
    return {
      hasScanFunction: false,
      hasReportFunction: false,
      hasBlacklistFunction: false,
      hasGanmaolingFunction: false,
      // hasScanFunction: true,
      // hasReportFunction: true,
      // hasBlacklistFunction: true,
      // hasGanmaolingFunction: true,
      loading: true,
      LoadingImg,
      activeTab: "scan",
      activeRange: 1,
      filterModalOpen: false,
      filterForm: { report: "", product: "" },
      filterDropdown: { report: false, product: false },
      filterDateRange: [],
      functionLoading: true,
      // functionLoading: false,
    };
  },
  created() {
    this.getFunc();
    this.getUserEmail();
  },
  computed: {
    hasFunction() {
      return this.hasScanFunction || this.hasReportFunction || this.hasBlacklistFunction || this.hasGanmaolingFunction;
    },
  },
  methods: {
    async getUserEmail() {
      const resp = await request("/report/getEmailAddress", {
        accessToken: uni.getStorageSync("accessToken"),
      });
      if (resp.code == 200) {
        const mail = resp.data.split("@")[0];
        uni.setStorageSync("traceCode_useremail", mail);
      }
    },
    closeDropdowns() {
      if (!this.$refs.scanRate) return;
      this.$refs.scanRate.closeDropdown();
    },
    async getFunc() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      await hasFunction(["scan-rate-list", "trace-code-task", "blacklist-customers-list", "large-medicines-list"])
        .then((res) => {
          this.hasScanFunction = res[0];
          this.hasReportFunction = res[1];
          this.hasBlacklistFunction = res[2];
          this.hasGanmaolingFunction = res[3];
        })
        .catch((err) => {
          this.hasScanFunction = false;
          this.hasReportFunction = false;
          this.hasBlacklistFunction = false;
          this.hasGanmaolingFunction = false;
          // uni.hideLoading()
        });
      if (this.hasScanFunction) {
        this.active = "scan";
      } else if (this.hasReportFunction) {
        this.activeTab = "export";
      } else if (this.hasBlacklistFunction) {
        this.activeTab = "blacklist";
      } else if (this.hasGanmaolingFunction) {
        this.activeTab = "ganmaoling";
      }
      this.functionLoading = false;
      uni.hideLoading();
    },
  },
};
</script>

<style>
.page {
  box-sizing: border-box;
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow-y: auto;
  box-sizing: border-box;
  background: #f3f6f9;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

.content {
  padding: 30rpx;
  margin-top: 180rpx;
}

.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 116rpx;
  background: #f3f6f9;
  z-index: 90;
  margin-top: -8rpx;
}

.tabs {
  box-sizing: border-box;
  width: calc(100% - 16rpx);
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 12rpx;
  margin: 8rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 18rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.tab.active {
  background: #2c69ff;
  color: #fff;
}
</style>