huarun/packages/traceabilityReport/pages/index.vue

<template>
  <view class="page" @click.stop="closeDropdowns">
    <view class="tabs-container">
      <view class="tabs">
        <view class="tab" :class="{ active: activeTab === 'scan' }" @click="activeTab = 'scan'">扫码率</view>
        <view v-if="!hasReportFunction" class="tab" :class="{ active: activeTab === 'export' }" @click="activeTab = 'export'">报表导出</view>
        <view class="tab" :class="{ active: activeTab === 'blacklist' }" @click="activeTab = 'blacklist'">黑名单汇总</view>
      </view>
    </view>
    <view class="content" v-show="activeTab === 'scan'">
      <ScanningRate ref="scanRate" />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }" v-show="activeTab === 'export'">
      <ReportExport />
    </view>
    <view class="content" :style="{ padding: '0', marginTop: '85rpx' }" v-show="activeTab === 'blacklist'">
      <Blacklist />
    </view>
  </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 { hasFunction } from '../../utils/utils.js'
export default {
  components: {
    ScanningRate,
    ReportExport,
    Blacklist,
  },
  data() {
    return {
      hasReportFunction: false,
      loading: true,
      LoadingImg,
      activeTab: "scan",
      activeRange: 1,
      filterModalOpen: false,
      filterForm: { report: "", product: "" },
      filterDropdown: { report: false, product: false },
      filterDateRange: [],
    };
  },
  created() {
    uni.showLoading({
      title: '加载中',
    })
    hasFunction('trace-code-task').then(res => {
      this.hasReportFunction = res
      uni.hideLoading()
    }).catch(err => {
      this.hasReportFunction = false
      uni.hideLoading()
    })
  },
  methods: {
    closeDropdowns() {
      this.$refs.scanRate.closeDropdown();
    },
  },
};
</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(50rpx + env(safe-area-inset-bottom));
}

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

.tabs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 116rpx;
  background: #f3f6f9;
  z-index: 99;
  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>