源文件
This commit is contained in:
238
jeepay-ui-uapp-agent/pages/statistics/statistics.vue
Normal file
238
jeepay-ui-uapp-agent/pages/statistics/statistics.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user