源文件
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<view class="agent-wrapper" :style="{ padding: pd }">
|
||||
<view class="agent-left">
|
||||
<image :src="userImg" mode="scaleToFill" />
|
||||
<view class="agent-info single-text-beyond" :style="{ color: nameColor, fontWeight: nameWeight }">
|
||||
{{ name }}
|
||||
<view :style="{ color: textColor }">{{ agentNo }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image :src="arrowImg" mode="scaleToFill" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
userImg: {
|
||||
type: String,
|
||||
default: "/static/iconImg/user-white.svg",
|
||||
},
|
||||
arrowImg: {
|
||||
type: String,
|
||||
default: "/static/iconImg/right-arrow.svg",
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
agentNo: {
|
||||
type: String,
|
||||
},
|
||||
pd: {
|
||||
type: String,
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
},
|
||||
nameColor: {
|
||||
type: String,
|
||||
},
|
||||
nameWeight: {
|
||||
type: String,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.agent-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.agent-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.agent-info {
|
||||
width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
view {
|
||||
margin-top: 10rpx;
|
||||
font-size: 23rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
jeepay-ui-uapp-agent/pages/statistics/components/AgentList.vue
Normal file
121
jeepay-ui-uapp-agent/pages/statistics/components/AgentList.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<JPopup ref="popup" @onClose="onClose">
|
||||
<view class="list-wrapper">
|
||||
<view class="list-header">
|
||||
<view class="list-title">
|
||||
<image src="/static/iconImg/left-black.svg" mode="scaleToFill" @tap="popup.close()" />
|
||||
单个子代理商
|
||||
</view>
|
||||
<JSearchInput bgColor="#fff" wrapPd="0" @search="getAgentList" @resetSearch="resetSearch"></JSearchInput>
|
||||
</view>
|
||||
<scroll-view class="list-main" scroll-y @scrolltolower="getList">
|
||||
<block v-for="v in list" :key="v.text">
|
||||
<JLine v-bind="v" :isSelect="v.text === agentNo.text" @tap="selected(v)"></JLine>
|
||||
</block>
|
||||
<jeepayListNull :isShow="true" :list="list.length"></jeepayListNull>
|
||||
</scroll-view>
|
||||
<view class="list-footer">
|
||||
<JButton size="max" pdTop="0" @HandleTouch="confirm">确认</JButton>
|
||||
</view>
|
||||
</view>
|
||||
</JPopup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue"
|
||||
import { $getAgentList } from "@/http/apiManager.js"
|
||||
import JPopup from "@/components/newComponents/JPopup/JPopup"
|
||||
import JLine from "@/components/newComponents/JLine/JLine"
|
||||
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput"
|
||||
import JButton from "@/components/newComponents/JButton/JButton"
|
||||
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull"
|
||||
onMounted(() => {
|
||||
getAgentList("")
|
||||
})
|
||||
const emits = defineEmits(["confirm"])
|
||||
const searchInfo = ref({
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
let flag = true
|
||||
const list = ref([])
|
||||
const agentNo = ref({})
|
||||
const popup = ref()
|
||||
const open = (val) => {
|
||||
if (val) agentNo.value.text = val.agentNo
|
||||
uni.hideTabBar()
|
||||
popup.value.open()
|
||||
}
|
||||
const close = () => {
|
||||
popup.value.close()
|
||||
}
|
||||
const getAgentList = (val) => {
|
||||
if (val) {
|
||||
list.value = []
|
||||
searchInfo.value.unionAgentInfo = val
|
||||
}
|
||||
$getAgentList(searchInfo.value).then(({ bizData }) => {
|
||||
const { records } = bizData
|
||||
if (records.length <= 0) flag = false
|
||||
records.forEach((v) => {
|
||||
let obj = {
|
||||
iconOn: "/static/navImg/nav-dailishang.svg",
|
||||
iconClose: "/static/navImg/user-close.svg",
|
||||
ml: "30rpx",
|
||||
pd: "32rpx 32rpx 32rpx 0",
|
||||
}
|
||||
obj.name = v.agentName
|
||||
obj.text = v.agentNo
|
||||
list.value.push(obj)
|
||||
})
|
||||
})
|
||||
}
|
||||
const getList = () => {
|
||||
if (!flag) return
|
||||
searchInfo.value.pageNumber++
|
||||
getAgentList()
|
||||
}
|
||||
const resetSearch = () => {
|
||||
list.value = []
|
||||
searchInfo.value.unionAgentInfo = ""
|
||||
searchInfo.value.pageNumber = 1
|
||||
searchInfo.value.pageSize = 10
|
||||
getAgentList()
|
||||
}
|
||||
const selected = (v) => {
|
||||
agentNo.value = JSON.parse(JSON.stringify(v))
|
||||
}
|
||||
const confirm = () => {
|
||||
emits("confirm", agentNo.value)
|
||||
}
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-wrapper {
|
||||
padding-top: 30rpx;
|
||||
background-color: #ece8f0;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
.list-header {
|
||||
padding: 0 30rpx 30rpx 30rpx;
|
||||
.list-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-main {
|
||||
height: 500rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list-footer {
|
||||
padding: 30rpx 0 50rpx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
jeepay-ui-uapp-agent/pages/statistics/components/SCard.vue
Normal file
67
jeepay-ui-uapp-agent/pages/statistics/components/SCard.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="s-card-wrapper" :class="{ isBorder: isBorder != undefined }">
|
||||
<view class="s-card-title">{{ title }}</view>
|
||||
<view class="tips" v-if="tips">{{ tips }}</view>
|
||||
<view class="s-card-main">
|
||||
<block v-for="(v, i) in list" :key="i">
|
||||
<view class="s-card-item">
|
||||
<view>{{ v.text }}</view>
|
||||
{{ v.content }}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
tips: { type: String },
|
||||
isBorder: { type: String },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s-card-wrapper {
|
||||
margin-left: 70rpx;
|
||||
margin-bottom: 50rpx;
|
||||
border-bottom: 1rpx solid #e7e7e7;
|
||||
.s-card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.tips {
|
||||
margin-bottom: 30rpx;
|
||||
transform: translateY(-30rpx);
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.s-card-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.s-card-item {
|
||||
flex: 0 0 50%;
|
||||
font-size: 33rpx;
|
||||
// font-weight: 700;
|
||||
color: #7737fe;
|
||||
margin-bottom: 50rpx;
|
||||
view {
|
||||
margin-bottom: 18rpx;
|
||||
font-size: 25rpx;
|
||||
font-weight: 500;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.isBorder {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<JPopup ref="popup" @onClose="onClose">
|
||||
<JMainCard pd="0" wrapPd=" 0 30rpx ">
|
||||
<block v-for="(v, i) in list" :key="i">
|
||||
<JLine :name="v.name" :isSelect="v.text == index" :isBorder="true" @tap="agentChange(v)"></JLine>
|
||||
</block>
|
||||
<view class="search-agent" @tap="emits('oneAgent')">
|
||||
<JInput name="选择代理商" :image="true" :isBorder="true" v-if="!index || index == 'onlyOne'">
|
||||
<image src="/static/iconImg/icon-right-jiantou.svg" mode="scaleToFill" />
|
||||
</JInput>
|
||||
<AgentCard v-else v-bind="childrenAgent" pd="30rpx"></AgentCard>
|
||||
</view>
|
||||
</JMainCard>
|
||||
|
||||
<JButton pd="30rpx 30rpx 50rpx 30rpx" bgColor="#f2f2f2" color="#000" pdTop="0" @HandleTouch="popup.close()"
|
||||
>取消</JButton
|
||||
>
|
||||
</JPopup>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue"
|
||||
import JPopup from "@/components/newComponents/JPopup/JPopup"
|
||||
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
|
||||
import JLine from "@/components/newComponents/JLine/JLine"
|
||||
import JInput from "@/components/newComponents/JInput/JInput"
|
||||
import JButton from "@/components/newComponents/JButton/JButton"
|
||||
import AgentCard from "./AgentCard.vue"
|
||||
const emits = defineEmits(["selected", "oneAgent"])
|
||||
const list = reactive([
|
||||
{
|
||||
name: "我与全部子代理商",
|
||||
text: "",
|
||||
},
|
||||
{
|
||||
name: "仅我自己",
|
||||
text: "onlyOne",
|
||||
},
|
||||
{
|
||||
name: "单个子代理商",
|
||||
text: "one",
|
||||
},
|
||||
])
|
||||
const index = ref("")
|
||||
const popup = ref()
|
||||
const childrenAgent = ref({
|
||||
userImg: "/static/iconImg/user-theme.svg",
|
||||
nameColor: "#000",
|
||||
textColor: "#8C8C8C",
|
||||
nameWeight: "700",
|
||||
})
|
||||
const open = (val) => {
|
||||
if (val.agentNo && val.agentNo != "onlyOne") {
|
||||
childrenAgent.value.name = val.name
|
||||
childrenAgent.value.agentNo = val.agentNo
|
||||
index.value = "one"
|
||||
} else {
|
||||
index.value = val.agentNo
|
||||
}
|
||||
uni.hideTabBar()
|
||||
popup.value.open()
|
||||
}
|
||||
const onClose = () => {
|
||||
uni.showTabBar()
|
||||
}
|
||||
const close = () => {
|
||||
onClose()
|
||||
popup.value.close()
|
||||
}
|
||||
const agentChange = (val) => {
|
||||
if (val.text != "one") {
|
||||
index.value = val.text
|
||||
emits("selected", val)
|
||||
close()
|
||||
} else {
|
||||
emits("oneAgent")
|
||||
}
|
||||
}
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-agent {
|
||||
margin: 0 30rpx 30rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f2f2f2;
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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