shangfutong-ui/jeepay-ui-uapp-agent/pages/statistics/statistics.vue

<template>
  <JHeaderTitle title="统计" color="#fff" bgColor="#7737FE" :back="false"></JHeaderTitle>
  <view class="s-header">
    <ScreenTitle @search="onSearch" :index="index" @open="closeTaBar" @close="openTaBar" />
    <view class="s-agent bdR20" @tap="selectAgent.open(childrenAgent)">
      <template v-if="childrenAgent.agentNo == '' || childrenAgent.agentNo == 'onlyOne'">
        <view>
          <image src="/static/iconImg/icon-user-business.svg" mode="scaleToFill" />
          {{ childrenAgent.name }}
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </template>
      <AgentCard v-else v-bind="childrenAgent"></AgentCard>
    </view>
    <view class="s-money">
      <view class="m-collection">
        <view class="m-title">成交订单金额</view>
        <text>￥</text>{{ statInfo.payAmount ? horn(statInfo.payAmount) : "0.00" }}
      </view>
      <view class="m-detailed">
        <block v-for="(v, i) in orderList" :key="i">
          <view class="m-item">
            <view class="m-title">{{ v.text }}</view>
            <text v-if="v.icon">￥</text
            >{{ v.icon ? (isNaN(v.content / 100) ? "0.00" : (v.content / 100).toFixed(2)) : v.content || "0.00" }}
          </view>
        </block>
      </view>
    </view>
  </view>
  <view class="s-main">
    <SCard v-bind="mchList" :isBorder="!childrenAgent.agentNo ? undefined : 'isBorder'"></SCard>
    <SCard v-bind="agentList" v-if="childrenAgent.agentNo == '' || childrenAgent.agentNo == 'onlyOne'"></SCard>
    <SCard v-bind="equList" isBorder v-if="childrenAgent.agentNo == '' || childrenAgent.agentNo == 'onlyOne'"></SCard>
  </view>
  <view class="s-block"></view>
  <SelectAgent ref="selectAgent" @oneAgent="agent.open(childrenAgent)" @selected="selected"></SelectAgent>
  <AgentList ref="agent" @confirm="confirm"></AgentList>
</template>
<script setup>
import { reactive, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { horn } from "@/hooks/handleMoney"
import { $statistics } from "@/http/apiManager.js"
import JHeaderTitle from "@/components//newComponents/JHeaderTitle/JHeaderTitle"
import ScreenTitle from "@/components//newComponents/ScreenTitle/ScreenTitle"
import SCard from "./components/SCard.vue"
import SelectAgent from "./components/SelectAgent.vue"
import AgentList from "./components/AgentList.vue"
import AgentCard from "./components/AgentCard.vue"
onLoad(() => {
  getList()
})
// 选择代理商弹窗
const selectAgent = ref(null)
// 选择代理商列表弹窗
const agent = ref()
// 基本信息
const statInfo = ref({})
const index = ref(0)
// 搜索条件
const search = ref({
  isApp: true,
  countType: 2,
  queryDateRange: "today",
  agentNo: "",
})
const mchList = reactive({
  title: "商户统计",
  list: [
    { text: "新增商户数", value: "mchTodayAddCount" },
    { text: "新增入网商户数", value: "mchOnNetNewCount" },
    { text: "商户总数", value: "mchAllCount" },
    { text: "入网商户总数", value: "mchOnNetCount" },
  ],
})
const agentList = reactive({
  title: "代理商统计",
  list: [
    { text: "新增代理商数", value: "agentNewCount" },
    { text: "代理商总数", value: "agentAllCount" },
  ],
})
const equList = reactive({
  title: "设备统计",
  tips: "设备统计不受筛选参数影响，仅统计自己数据",
  list: [
    { text: "码牌总数", value: "qrCodeCardAllCount" },
    { text: "剩余空码数", value: "qrCodeCardUnBindCount" },
    { text: "云喇叭总数", value: "speakerAllCount" },
    { text: "未绑定云喇叭数", value: "speakerUnCount" },
    { text: "云打印总数", value: "printerAllCount" },
    { text: "未绑定云喇叭数", value: "printerUnCount" },
    { text: "扫码POS总数", value: "posAllCount" },
    { text: "未绑定扫码POS数", value: "posUnCount" },
  ],
})
const orderList = reactive([
  { text: "成交订单笔数", value: "payCount" },
  { text: "交易成功率", value: "" }, //收款成功率 参考运营平台
  { text: "退款笔数", value: "refundCount" },
  { text: "退款金额", value: "refundAmount", icon: true },
])
const getList = () => {
  $statistics(search.value).then(({ bizData }) => {
    statInfo.value = bizData.orderCount
    mchList.list.forEach((v) => {
      v.content = bizData.mchCount[v.value]
    })
    agentList.list.forEach((v) => {
      v.content = bizData.agentCount[v.value]
    })
    equList.list.forEach((v) => {
      v.content = bizData[v.value]
    })
    orderList.forEach((v) => {
      v.content = bizData.orderCount[v.value]
    })
    orderList[1].content = ((bizData.orderCount.payCount / bizData.orderCount.allCount) * 100 || 0).toFixed(2) + "%"
  })
}
// 选择代理商回调
const selected = (val) => {
  search.value.agentNo = val.text
  childrenAgent.value.name = val.name
  childrenAgent.value.agentNo = val.text
  if (!val.text) {
    search.value.countType = 2
  } else {
    search.value.countType = 1
  }
  getList()
}
const onSearch = (val) => {
  index.value = val.i
  if (val.val.value != "customer") {
    if (val.val.value.includes("customDate_")) {
      uni.showTabBar()
    }
    search.value.queryDateRange = val.val.value
    getList()
  }
}
// 子代理商 回调
const childrenAgent = ref({
  name: "我与全部子代理商",
  agentNo: "",
})
const confirm = (val) => {
  childrenAgent.value.name = val.name
  childrenAgent.value.agentNo = val.text
  search.value.agentNo = val.text
  search.value.countType = 3
  selectAgent.value.close()
  agent.value.close()
  getList()
}
const closeTaBar = () => {
  uni.hideTabBar()
}
const openTaBar = () => {
  uni.showTabBar()
}
</script>

<style lang="scss" scoped>
.s-header {
  position: relative;
  padding: 20rpx 50rpx 50rpx 50rpx;
  background-color: $primaryColor;
  &::after {
    content: "";
    position: absolute;
    bottom: -2rpx;
    left: 0;
    right: 0;
    z-index: 1;
    height: 47rpx;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    background-color: #fff;
  }

  .s-agent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx;
    margin: 30rpx 0;
    background: rgba(0, 0, 0, 0.1);
    view {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #ffffff;
      image {
        margin-right: 15rpx;
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .s-money {
    color: #ffffff;
    padding-left: 20rpx;
    .m-title {
      font-size: 25rpx !important;
      font-weight: 500 !important;
      margin-bottom: 20rpx;
      color: rgba(255, 255, 255, 0.7);
    }
    font-weight: 700;
    .m-collection {
      font-size: 57rpx;
      margin-bottom: 50rpx;
      text {
        font-size: 36rpx;
      }
    }
    .m-detailed {
      display: flex;
      flex-wrap: wrap;
      .m-item {
        flex: 0 0 50%;
        font-size: 33rpx;
        margin-bottom: 50rpx;
        text {
          font-size: 23rpx;
        }
      }
    }
  }
}
.s-block {
  height: 80rpx;
}
</style>