manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/component/salesBriefings.vue

<template>
  <div class="salesKit box">
    <div class="box-title">
      <div class="box-title-left text-size-in">销售简报</div>
      <div class="box-title-right text-size-small" @click="showPopUpLayer()">
        {{ scopeText }}/{{ dateText }}
        <van-icon name="play" class="ml-2 rotate-90" color="#747474" />
      </div>
    </div>

    <div class="content overflow-hidden transitionEffect"
      :style="`height: ${expandAndCollapse ? usePxToVwView(user.company.isSimple == 1 ? 180 : 298) : '0'}`">
      <div class="flex items-center w-full" >
        <div class="item">
          <img src="/src/assets/image/salesKitkehu.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增客户</div>
            <div class="flex items-end">
              <span class="text-[#3C84F3] text-size-in font-bold mr-1">
                {{ salesBriefings?.custom?.customCount || 0 }}
              </span>人
            </div>
          </div>
        </div>
        <div class="item" v-if="user.company.isSimple != 1">
          <img src="/src/assets/image/salesKitlianxir.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增联系人</div>
            <div class="flex items-end">
              <span class="text-[#42DC9E] text-size-in font-bold mr-1">
                {{ salesBriefings?.contacts?.contactsCount || 0 }}
              </span>人
            </div>
          </div>
        </div>

        <div class="item" v-if="user.company.isSimple == 1">
          <img src="/src/assets/image/salesKitlishi.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增{{ businessLabel }}</div>
            <div class="flex items-end">
              <span class="text-[#F3893C] text-size-in font-bold mr-1">
                {{ salesBriefings?.businessOpportunity?.businessOpportunityCount || 0 }}
              </span>个
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center w-full" v-if="user.company.isSimple != 1">
        <div class="item">
          <img src="/src/assets/image/salesKitlishi.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增{{ businessLabel }}</div>
            <div class="flex items-end">
              <span class="text-[#F3893C] text-size-in font-bold mr-1">
                {{ salesBriefings?.businessOpportunity?.businessOpportunityCount || 0 }}
              </span>个
            </div>
          </div>
        </div>
        <div class="item">
          <img src="/src/assets/image/salesKitdingdan.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增销售订单</div>
            <div class="flex items-end">
              <span class="text-[#A66AFF] text-size-in font-bold mr-1">
                {{ salesBriefings?.salesOrder?.salesOrderCount || 0 }}
              </span>个
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center w-full">
        <div class="item" v-if="user.company.isSimple != 1">
          <img src="/src/assets/image/salesKitjer.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>销售订单金额</div>
            <div class="flex items-end">
              <span class="text-[#67DF2A] text-size-in font-bold mr-1">
                {{ salesBriefings?.salesOrdersPrice?.salesOrdersPrice || 0 }}
              </span>元
            </div>
          </div>
        </div>
        <div class="item">
          <img src="/src/assets/image/salesKitshangji.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>{{ businessLabel }}金额</div>
            <div class="flex items-end">
              <span class="text-[#EED116] text-size-in font-bold mr-1">
                {{ salesBriefings?.businessOpportunityPrice?.businessOpportunityPrice || 0 }}
              </span>元
            </div>
          </div>
        </div>

        <div class="item" v-if="user.company.isSimple == 1">
          <img src="/src/assets/image/salesKitxianshuo.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增线索</div>
            <div class="flex items-end">
              <span class="text-[#F44873] text-size-in font-bold mr-1">
                {{ salesBriefings?.clue?.clueCount || 0 }}
              </span>个
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center w-full" v-if="user.company.isSimple != 1">
        <div class="item">
          <img src="/src/assets/image/salesKitxianshuo.png" class="item-img" />
          <div class="flex flex-col justify-center text=[#999999]">
            <div>新增线索</div>
            <div class="flex items-end">
              <span class="text-[#F44873] text-size-in font-bold mr-1">
                {{ salesBriefings?.clue?.clueCount || 0 }}
              </span>个
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full flex justify-center mt-2" @click="expandAndCollapseSwitch()">
      <van-icon name="arrow-up" color="#AFAFAF" :class="`${!expandAndCollapse && 'rotate-180'} transitionEffect`" />
    </div>
    <van-popup v-model:show="filterCriteriaPopUpLayerFlag" position="bottom" :style="{ height: '100%' }" closeable>
      <FilterItem :dataFilters="filterCriteria" @submit="FilterItemSubmit" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { GET_SALES_BRIEFINGS } from '@hooks/useApi.js';
import { fixedFieldPermissionOptions, fixedFieldDateOptions } from '@utility/defaultData.js';
import useInfoStore from "@store/useInfoStore.js";

import requests from "@common/requests"
import usePxToVwView from "@hooks/usePxTransform.js";
import FilterItem from './filterItem.vue';

const filterCriteriaPopUpLayerFlag = ref(false);
const expandAndCollapse = ref(true);
const salesBriefings = ref({});
const filterCriteria = ref({
  scopeSelection: 0,
  dateSelection: 0,
  customTime: []
})
const useInfo = useInfoStore()
const user = useInfo.userInfo
const isExistBusiness = sessionStorage.getItem("isExistBusiness");
const businessLabel = isExistBusiness === "1" ? "商机" : "项目"; 
const scopeText = computed(() => {
  return fixedFieldPermissionOptions[filterCriteria.value.scopeSelection].label
})

const dateText = computed(() => {
  if(filterCriteria.value.dateSelection == -1) {
    const { customTime = [] } = filterCriteria.value
    return ` ${customTime[0]} 至 ${customTime[1]}`
  }
  
  return fixedFieldDateOptions[filterCriteria.value.dateSelection].label
})

function FilterItemSubmit(val) {
  filterCriteria.value = val

  filterCriteriaPopUpLayerFlag.value = false;
  getData()
}

function expandAndCollapseSwitch() {
  expandAndCollapse.value = !expandAndCollapse.value;
}

function showPopUpLayer() {
  filterCriteriaPopUpLayerFlag.value = true;
}

function getData() {
  const { scopeSelection = 0, dateSelection = 0, customTime = [] } = filterCriteria.value
  const formVal = {
    queryType: scopeSelection,
    ...(dateSelection !== -1 ? { dateType: dateSelection } : { startDate: customTime[0], endDate: customTime[1] })
  }
  requests.post(GET_SALES_BRIEFINGS, {
    ...formVal
  }).then((res) => {
    salesBriefings.value = res.data
  })
}

useLifecycle({
  load: () => {
    getData()
  },
  init: () => {
    getData()
  }
});
</script>

<style lang='scss' scoped>
/* 样式代码 */
</style>