726 lines
18 KiB
Vue
726 lines
18 KiB
Vue
<template>
|
||
<navigationTitle :postion="false" :title="'工作台'"></navigationTitle>
|
||
<view class="content">
|
||
<view class="head">
|
||
<view class="head-image">
|
||
<image :src="vdata.userImg"></image>
|
||
</view>
|
||
<view class="head-rignt">
|
||
<view class="head-text">
|
||
<text class="head-title">{{ vdata.userName }}</text>
|
||
<text class="head-id">ID：{{ vdata.userId }}</text>
|
||
</view>
|
||
<view class="head-set" @tap="goSetAccount">
|
||
<image :src="imageInfo.setting"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
<text>管理工具</text>
|
||
</view>
|
||
<view class="entrances-body">
|
||
<view class="entrances" :class="{ 'grid-box': vdata.isList === false }">
|
||
<view class="entrance-box" @tap="toPage('applicationManagement')">
|
||
<view class="left">
|
||
<image :src="imageInfo.apply"></image>
|
||
<text>进件管理</text>
|
||
</view>
|
||
<view class="right">
|
||
<image :src="imageInfo.arrowGray"></image>
|
||
</view>
|
||
<!-- <view class="border"></view> -->
|
||
<view class="grid-border"></view>
|
||
</view>
|
||
<view class="entrance-box" @tap="toPage('merchantManagement')">
|
||
<view class="left">
|
||
<image :src="imageInfo.merchant"></image>
|
||
<text>商户管理</text>
|
||
</view>
|
||
<view class="right">
|
||
<image :src="imageInfo.arrowGray"></image>
|
||
</view>
|
||
<!-- <view class="border"></view> -->
|
||
<view class="grid-border"></view>
|
||
</view>
|
||
<view class="entrance-box" @tap="toPage('setUp')">
|
||
<view class="left">
|
||
<image :src="imageInfo.setUp"></image>
|
||
<text>设置</text>
|
||
</view>
|
||
<view class="right" style="border-bottom: none">
|
||
<image :src="imageInfo.arrowGray"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
<text>数据统计</text>
|
||
</view>
|
||
<view class="header animation-close" :style="{ height: vdata.isA ? '230rpx' : '110rpx' }">
|
||
<view class="date-filter">
|
||
<view
|
||
class="date"
|
||
:class="vdata.selectFlge == item.index ? 'select' : ''"
|
||
v-for="(item, index) in vdata.selectList"
|
||
:key="index"
|
||
@click="onSelsct(index)"
|
||
>
|
||
<text>{{ item.text }}</text>
|
||
</view>
|
||
<view class="close" @click="onClose">
|
||
<image :class="vdata.isA ? 'animation' : ''" src="../../static/indexImg/down.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="time-picker">
|
||
<xp-picker @confirm="confirm" mode="ymdhi" :startTime="vdata.startDate">{{ vdata.startDate }}</xp-picker>
|
||
<text>——</text>
|
||
<xp-picker @confirm="confirmEnd" mode="ymdhi" :startTime="vdata.endDate">{{ vdata.endDate }}</xp-picker>
|
||
</view>
|
||
</view>
|
||
<view class="statistics" style="margin-top: 20rpx; background-color: #262e4d">
|
||
<view class="amount">
|
||
<text>收款金额（元）</text>
|
||
</view>
|
||
<view class="money">
|
||
<text>{{ (indexData.payAmount / 100).toFixed(2) }}</text>
|
||
</view>
|
||
<view class="other">
|
||
<view class="deal-amount">
|
||
<text>收款笔数（笔）</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ indexData.payCount }}</text>
|
||
</view>
|
||
<view class="refund">
|
||
<text>退款金额（元）</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ (indexData.refundAmount / 100).toFixed(2) }}</text>
|
||
</view>
|
||
<view class="refund-amount">
|
||
<text>退款笔数（笔）</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ indexData.refundCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="statistics" style="background-color: #3981ff; border-radius: 0 0 20rpx 20rpx">
|
||
<view class="amount">
|
||
<text>商户总数</text>
|
||
</view>
|
||
<view class="money" style="color: #ffffff">
|
||
<text>{{ vdata.mchCount.mchAllCount }}</text>
|
||
</view>
|
||
<view class="other">
|
||
<view class="deal-amount">
|
||
<text>新增商户数</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchTodayAddCount }}</text>
|
||
</view>
|
||
<view class="refund">
|
||
<text>入网商户数</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchOnNetCount }}</text>
|
||
</view>
|
||
<view class="refund-amount">
|
||
<text>新增入网商户数</text>
|
||
<text style="color: #ffffff; font-size: 28rpx">{{ vdata.mchCount.mchOnNetNewCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer"> </view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from "vue"
|
||
import { $statistics, $payIfDefines, $getUserInfo, $getPayDayCount, $getPayConfigIfcodes } from "@/http/apiManager.js"
|
||
import { onLoad, onBackPress, onShow } from "@dcloudio/uni-app"
|
||
import { intNum } from "@/util/intNumber.js"
|
||
import { getDay } from "@/util/timeInterval.js"
|
||
import navigationTitle from "@/components/jeepayNavigationTitle/jeepayNavigationTitle.vue"
|
||
const baseImage = ref("/static/iconImg/")
|
||
const blanceInfo = ref({})
|
||
const imageInfo = reactive({
|
||
setting: baseImage.value + "setting.svg",
|
||
close: baseImage.value + "icon-close.svg",
|
||
eyeClose: baseImage.value + "eye-close.svg",
|
||
list: baseImage.value + "grid.svg",
|
||
arrow: baseImage.value + "arrow-right.svg",
|
||
arrowGray: baseImage.value + "arrow-right-gray.svg",
|
||
apply: "/static/navImg/nav-jinjian.svg",
|
||
merchant: "/static/navImg/nav-shangdian.svg",
|
||
setUp: "/static/iconImg/setting.svg",
|
||
mch: baseImage.value + "store.svg",
|
||
})
|
||
const indexData = ref({})
|
||
const otherData = ref({})
|
||
const vdata = reactive({
|
||
amount: 0,
|
||
isPassword: true,
|
||
isList: false,
|
||
mchAllCount: 0,
|
||
mchTodayAddCount: 0,
|
||
userImg: "",
|
||
userName: "",
|
||
userId: "",
|
||
isA: false, //动画
|
||
isS: false,
|
||
selectFlge: 0, //时间选择框标志符
|
||
startDate: "", //开始时间
|
||
endDate: "", //结束时间
|
||
selectList: [
|
||
{ index: 0, value: "today", text: "今天" },
|
||
{ index: 1, value: "yesterday", text: "昨天" },
|
||
{ index: 2, value: "week", text: "近7天" },
|
||
{ index: 3, value: "mounth", text: "近30天" },
|
||
{ index: 4, value: "customer", text: "自定义" },
|
||
],
|
||
searchObj: {
|
||
isApp: true,
|
||
queryDateRange: "today",
|
||
},
|
||
staticObj: {
|
||
isApp: true,
|
||
queryDateRange: "today",
|
||
countType: 1,
|
||
agentNo: "",
|
||
},
|
||
mchCount: {},
|
||
})
|
||
const withdrawalPopup = ref()
|
||
|
||
onLoad(() => {
|
||
vdata.startDate = `${getDay(0, "-")} 00:00`
|
||
vdata.endDate = `${getDay(0, "-")} 23:59`
|
||
})
|
||
onShow(() => {
|
||
$getUserInfo().then(({ bizData }) => {
|
||
vdata.userImg = bizData.avatarUrl
|
||
vdata.userName = bizData.realname
|
||
vdata.userId = bizData.sysUserId
|
||
})
|
||
getStatistics(vdata.staticObj)
|
||
})
|
||
|
||
const getStatistics = (staticObj) => {
|
||
$statistics(staticObj).then(({ bizData }) => {
|
||
otherData.value = bizData
|
||
vdata.mchCount = bizData.mchCount
|
||
vdata.orderCount = bizData.orderCount
|
||
vdata.agentCount = bizData.agentCount
|
||
indexData.value = bizData.orderCount
|
||
})
|
||
}
|
||
const onSelsct = (index) => {
|
||
vdata.selectFlge = index
|
||
|
||
switch (index) {
|
||
case 0:
|
||
vdata.startDate = `${getDay(0, "-")} 00:00`
|
||
vdata.endDate = `${getDay(0, "-")} 23:59`
|
||
vdata.staticObj.queryDateRange = "today"
|
||
|
||
getStatistics(vdata.staticObj)
|
||
break
|
||
case 1:
|
||
vdata.startDate = `${getDay(-1, "-")} 00:00`
|
||
vdata.endDate = `${getDay(-1, "-")} 23:59`
|
||
vdata.staticObj.queryDateRange = "yesterday"
|
||
|
||
getStatistics(vdata.staticObj)
|
||
break
|
||
case 2:
|
||
vdata.startDate = `${getDay(-7, "-")} 00:00`
|
||
vdata.endDate = `${getDay(0, "-")} 23:59`
|
||
vdata.staticObj.queryDateRange = "near2now_7"
|
||
|
||
getStatistics(vdata.staticObj)
|
||
break
|
||
case 3:
|
||
vdata.startDate = `${getDay(-30, "-")} 00:00`
|
||
vdata.endDate = `${getDay(0, "-")} 23:59`
|
||
vdata.staticObj.queryDateRange = "near2now_30"
|
||
|
||
getStatistics(vdata.staticObj)
|
||
break
|
||
case 4:
|
||
if (!vdata.isA) {
|
||
vdata.isA = true
|
||
}
|
||
vdata.startDate = `${getDay(0, "-")} 00:00`
|
||
vdata.endDate = `${getDay(0, "-")} 23:59`
|
||
break
|
||
}
|
||
}
|
||
//时间选择器确定
|
||
const confirm = (e) => {
|
||
vdata.startDate = e.value
|
||
vdata.selectFlge = 4
|
||
// vdata.staticObj.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`
|
||
// getStatistics(vdata.staticObj)
|
||
}
|
||
const confirmEnd = (e) => {
|
||
vdata.endDate = e.value
|
||
vdata.selectFlge = 4
|
||
|
||
vdata.staticObj.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`
|
||
|
||
getStatistics(vdata.staticObj)
|
||
}
|
||
const onClose = () => {
|
||
vdata.isA = !vdata.isA
|
||
}
|
||
function toPage(path) {
|
||
if (path === "applicationManagement") {
|
||
// 获取进件列表的颜色 和 icon,给下一个页面用，因为异步请求的原因，所以在这里进行处理
|
||
let iconList = ref([])
|
||
|
||
$getPayConfigIfcodes("CURRENT", "agentApplyment", "").then(({ bizData }) => {
|
||
bizData.forEach((item) => {
|
||
iconList.value.push([item.bgColor, item.ifCode, item.icon])
|
||
})
|
||
uni.navigateTo({
|
||
url: `/pageApply/applyList?iconList=${JSON.stringify(iconList.value)}`,
|
||
})
|
||
})
|
||
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: `../../pageWork/${path}/${path}`,
|
||
})
|
||
}
|
||
|
||
let isShowSun = ref(false)
|
||
// 切换函数 睁眼闭眼 与 管理工具排列
|
||
function switchButton(sign) {
|
||
if (sign === "eye") {
|
||
vdata.isPassword = !vdata.isPassword
|
||
if (!vdata.isPassword) {
|
||
isShowSun.value = true
|
||
imageInfo.eyeClose = "../../static/workImg/eye-open.svg"
|
||
} else {
|
||
isShowSun.value = false
|
||
imageInfo.eyeClose = "../../static/workImg/eye-close.svg"
|
||
}
|
||
} else if (sign === "format") {
|
||
vdata.isList = !vdata.isList
|
||
if (!vdata.isList) {
|
||
imageInfo.list = "../../static/workImg/grid.svg"
|
||
} else {
|
||
imageInfo.list = "../../static/workImg/list.svg"
|
||
}
|
||
}
|
||
}
|
||
|
||
function toTabPage(path) {
|
||
uni.switchTab({
|
||
url: `../${path}/${path}`,
|
||
})
|
||
}
|
||
function goSetAccount() {
|
||
uni.navigateTo({
|
||
url: "../../pageWork/setUp/setUp",
|
||
})
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background: #f5f6fc;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
.animation-close {
|
||
transition: height 0.5s;
|
||
}
|
||
.animation {
|
||
transform: rotate(-180deg);
|
||
}
|
||
.select {
|
||
padding: 10rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
background: rgba(57, 129, 255, 0.1);
|
||
font-weight: 500;
|
||
color: #3981ff;
|
||
}
|
||
box-sizing: border-box;
|
||
// padding: 0 50rpx;
|
||
image {
|
||
display: block;
|
||
}
|
||
|
||
.head,
|
||
.banner-box,
|
||
.title,
|
||
.entrances-body {
|
||
box-sizing: border-box;
|
||
padding: 0 50rpx;
|
||
}
|
||
.head {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 90rpx;
|
||
margin: 30rpx 0 50rpx 0;
|
||
.head-image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
//margin-right: 10rpx;
|
||
flex-shrink: 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.head-rignt {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-left: 10rpx;
|
||
|
||
.head-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.head-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #292f46;
|
||
}
|
||
.head-id {
|
||
font-size: 22rpx;
|
||
color: #adacb3;
|
||
}
|
||
}
|
||
.head-set {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.light {
|
||
background: #3981ff !important;
|
||
}
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 40rpx;
|
||
margin: 50rpx 0 30rpx 10rpx;
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.grid-box {
|
||
/* 九宫格 */
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.entrance-box {
|
||
position: relative;
|
||
width: 33.33% !important;
|
||
height: 200rpx !important;
|
||
box-sizing: border-box !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
.left {
|
||
flex-direction: column !important;
|
||
image {
|
||
margin: 0 auto 22rpx auto !important;
|
||
}
|
||
}
|
||
.right {
|
||
image {
|
||
display: none !important;
|
||
}
|
||
}
|
||
.grid-border {
|
||
display: block !important;
|
||
position: absolute;
|
||
right: 0;
|
||
width: 2rpx;
|
||
height: 200rpx;
|
||
background: #f0f1f7;
|
||
}
|
||
}
|
||
}
|
||
|
||
.entrances {
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
.entrance-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-left: 30rpx;
|
||
height: 110rpx;
|
||
background: #fff;
|
||
position: relative;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
image {
|
||
margin-right: 20rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
text {
|
||
color: #797b80;
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 30rpx;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.border {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 550rpx;
|
||
height: 2rpx;
|
||
background: #f0f1f7;
|
||
}
|
||
.grid-border {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.roll-links {
|
||
width: 100%;
|
||
height: 650rpx;
|
||
.swiper {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
.position-item {
|
||
position: absolute;
|
||
left: -160rpx;
|
||
top: 0;
|
||
}
|
||
.first-item,
|
||
.second-item,
|
||
.more {
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
height: 500rpx;
|
||
overflow: hidden;
|
||
image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.swiper-text-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9;
|
||
box-sizing: border-box;
|
||
padding: 50rpx 0 0 50rpx;
|
||
.swiper-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 40rpx;
|
||
.swiper-title {
|
||
display: block;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 25rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.swiper-amount {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.first-item {
|
||
width: 500rpx;
|
||
margin-left: 50rpx;
|
||
}
|
||
.second-item {
|
||
width: 570rpx;
|
||
display: flex;
|
||
image {
|
||
width: 325rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
.more {
|
||
width: 330rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
text {
|
||
color: #797b80;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.header {
|
||
box-sizing: border-box;
|
||
|
||
//height: 335rpx;
|
||
width: 650rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
margin: 20rpx auto;
|
||
margin-bottom: 0;
|
||
overflow: hidden;
|
||
|
||
.date-filter {
|
||
box-sizing: border-box;
|
||
height: 90rpx;
|
||
width: 100%;
|
||
// background-color: #18BC37;
|
||
|
||
//border-bottom: 2rpx solid #FAFBFC;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
padding-top: 20rpx;
|
||
// padding-bottom: 20rpx;
|
||
|
||
.date {
|
||
//width: 92rpx;
|
||
//height: 53rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
padding: 10rpx 10rpx;
|
||
}
|
||
.close {
|
||
height: 60rpx;
|
||
width: 60rpx;
|
||
// background-color: #007AFF;
|
||
//transform: rotate(180deg);
|
||
image {
|
||
height: 60rpx;
|
||
width: 60rpx;
|
||
|
||
transition: transform 0.5s;
|
||
}
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.time-picker {
|
||
box-sizing: border-box;
|
||
width: 610rpx;
|
||
height: 72rpx;
|
||
border-radius: 10rpx;
|
||
background: #f5f6fc;
|
||
|
||
margin: 36rpx auto;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
|
||
font-size: 25rpx;
|
||
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.statistics {
|
||
box-sizing: border-box;
|
||
|
||
overflow: hidden;
|
||
|
||
width: 650rpx;
|
||
height: 368rpx;
|
||
border-radius: 20rpx;
|
||
background: #3981ff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
margin: 0 auto;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
padding: 50rpx 35rpx 50rpx 35rpx;
|
||
.amount {
|
||
height: 40rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 23rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.money {
|
||
// background-color: #18BC37;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
font-weight: bold;
|
||
font-size: 70rpx;
|
||
color: #fff;
|
||
|
||
padding: 10rpx 0 50rpx 0;
|
||
}
|
||
.other {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
// background-color: #18BC37;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.deal-amount {
|
||
height: 85%;
|
||
width: 30%;
|
||
//background: #555500;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
font-weight: 500;
|
||
font-size: 23rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
.refund {
|
||
@extend .deal-amount;
|
||
}
|
||
.refund-amount {
|
||
@extend .deal-amount;
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
height: 1rpx;
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
</style>
|