chuangte_bike_newxcx/page_shanghu/guanli/yunying.vue

841 lines
19 KiB
Vue
Raw Normal View History

2025-04-01 21:35:30 +08:00
<template>
<view class="page">
<view class="bj"></view>
<view class="tabs">
<view @click="btntab(0)" :class="index == 0 ? 'active' : ''">
营收类
<text></text>
</view>
2025-04-10 08:57:21 +08:00
<!-- <view @click="btntab(1)" :class="index == 1 ? 'active' : ''">
2025-04-01 21:35:30 +08:00
运维类
<text></text>
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
<view class="" style="width: 100%;height: 20rpx;"></view>
<!-- 营收类 -->
<view class="" style="height: 80vh;overflow: scroll;" v-if="index == 0">
<view class="yinshoubox">
<view class="lt">
<view class="zhye">
账户余额
</view>
<view class="price">
2025-04-11 18:23:16 +08:00
{{infoobj.balance == null ? '¥0.00' : '¥' + infoobj.balance.toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
<view class="ljtx">
2025-04-11 18:23:16 +08:00
累积提现{{successAmount == null ? '¥0.00' : '¥' + successAmount.toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="rt">
<view class="tx" @click="btntx">
提现
</view>
2025-04-10 08:57:21 +08:00
<!-- <view class="txjl">
2025-04-01 21:35:30 +08:00
提现记录
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="leiji">
<view class="li">
<view class="top">
2025-04-10 08:57:21 +08:00
{{qbobj.user.count == null ? '0人' : qbobj.user.count + '人'}}
2025-04-01 21:35:30 +08:00
</view>
<view class="bot">
累计用户
</view>
</view>
<view class="li">
<view class="top">
2025-04-11 18:23:16 +08:00
{{(Number(qbobj.bonus.amount) - Number(qbobj.bonusRefund.amount)).toFixed(2) == null ? '¥0.00' : '¥' + (Number(qbobj.bonus.amount) - Number(qbobj.bonusRefund.amount)).toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
<view class="bot">
2025-04-10 08:57:21 +08:00
累计分成
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="li">
<view class="top">
2025-04-11 18:23:16 +08:00
{{(Number(qbobj.order.payAmount) - Number(qbobj.orderRefund.amount)).toFixed(2) == null ? '¥0.00' : '¥' + (Number(qbobj.order.payAmount) - Number(qbobj.orderRefund.amount)).toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
<view class="bot">
2025-04-10 08:57:21 +08:00
订单金额
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="li">
<view class="top">
2025-04-11 18:23:16 +08:00
{{qbobj.order.count == null ? '0' : qbobj.order.count + '笔'}}
2025-04-01 21:35:30 +08:00
</view>
<view class="bot">
2025-04-10 08:57:21 +08:00
订单数量
2025-04-01 21:35:30 +08:00
</view>
</view>
</view>
<view class="time">
<view class="timewz">
时间范围
</view>
<view class="inptime">
2025-04-23 17:50:42 +08:00
<view class="" @click="showTimePicker('start')">
2025-04-01 21:35:30 +08:00
{{kstime}}
</view>
--
2025-04-23 17:50:42 +08:00
<view class="" @click="showTimePicker('end')">
2025-04-01 21:35:30 +08:00
{{jstime}}
</view>
</view>
</view>
<u-picker mode="time" v-model="oneshow" :params="oneparams" @confirm="confirmone"></u-picker>
<u-picker mode="time" v-model="twoshow" :params="twoparams" @confirm="confirmtwo"></u-picker>
<view class="riqi">
<view :class="riqiindex == 0 ? 'actives' : ''" @click="btnriqi(0)">
今日
</view>
<view :class="riqiindex == 1 ? 'actives' : ''" @click="btnriqi(1)">
昨日
</view>
<view :class="riqiindex == 2 ? 'actives' : ''" @click="btnriqi(2)">
本月
</view>
<view :class="riqiindex == 3 ? 'actives' : ''" @click="btnriqi(3)">
上月
</view>
</view>
<view class="yinshouqk">
<view class="name">
营收情况
</view>
<view class="zongfy">
<image src="https://api.ccttiot.com/smartmeter/img/static/uUjJxrOO6zHPzjT0Srl4" mode=""></image>
<view class="top">
<view class="topwz">
2025-04-11 18:23:16 +08:00
{{yunyingobj.order.count == null ? '0' : yunyingobj.order.count + '笔'}}
2025-04-01 21:35:30 +08:00
</view>
<view class="botwz">
2025-04-10 08:57:21 +08:00
订单数量
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="top">
<view class="topwz">
2025-04-11 18:23:16 +08:00
{{yunyingobj.order.payAmount == null ? '¥0.00' : '¥' + yunyingobj.order.payAmount.toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
<view class="botwz">
2025-04-10 08:57:21 +08:00
订单金额
2025-04-01 21:35:30 +08:00
</view>
</view>
2025-04-10 08:57:21 +08:00
<!-- <view class="top">
2025-04-01 21:35:30 +08:00
<view class="topwz">
3652
</view>
<view class="botwz">
总营收
</view>
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
<view class="zongfy">
<image src="https://api.ccttiot.com/smartmeter/img/static/uCWFSrIsbEaQdKHWZv7U" mode=""></image>
<view class="top">
<view class="topwz">
2025-04-11 18:23:16 +08:00
{{yunyingobj.bonus.count == null ? '0' : yunyingobj.bonus.count + '笔'}}
2025-04-01 21:35:30 +08:00
</view>
<view class="botwz">
2025-04-10 08:57:21 +08:00
分成数量
2025-04-01 21:35:30 +08:00
</view>
</view>
<view class="top">
<view class="topwz">
2025-04-11 18:23:16 +08:00
{{(Number(yunyingobj.bonus.amount) - Number(yunyingobj.bonusRefund.amount)).toFixed(2) == null ? '¥0.00' : '¥' + (Number(yunyingobj.bonus.amount) - Number(yunyingobj.bonusRefund.amount)).toFixed(2)}}
2025-04-01 21:35:30 +08:00
</view>
<view class="botwz">
2025-04-10 08:57:21 +08:00
分成金额
2025-04-01 21:35:30 +08:00
</view>
</view>
2025-04-10 08:57:21 +08:00
<!-- <view class="top">
2025-04-01 21:35:30 +08:00
<view class="topwz">
3652
</view>
<view class="botwz">
已退款
</view>
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
2025-04-10 08:57:21 +08:00
<!-- <view class="zupibox">
2025-04-01 21:35:30 +08:00
<view class="zupi">
<view class="one">
<view class="onewz">
租赁费
</view>
<view class="twowz">
已支付0.00
</view>
<view class="twowz">
已退款0.00
</view>
</view>
<view class="one">
<view class="onewz">
调度费运营区外
</view>
<view class="twowz">
已支付0.00
</view>
<view class="twowz">
已退款0.00
</view>
</view>
</view>
<view class="zupi" style="margin-top: 30rpx;">
<view class="one">
<view class="onewz">
预约费
</view>
<view class="twowz">
已支付0.00
</view>
<view class="twowz">
已退款0.00
</view>
</view>
<view class="one">
<view class="onewz">
调度费停车区外
</view>
<view class="twowz">
已支付0.00
</view>
<view class="twowz">
已退款0.00
</view>
</view>
</view>
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
2025-04-10 08:57:21 +08:00
<!-- <view class="cheliang">
2025-04-01 21:35:30 +08:00
<view class="name">
车辆概况
</view>
<view class="dabox">
<view class="li">
<view class="bfb">
100%
</view>
<view class="cl">
车辆健康率
</view>
</view>
<view class="li">
<view class="bfb">
0%
</view>
<view class="cl">
车辆亏电率
</view>
</view>
<view class="li">
<view class="bfb">
3256
</view>
<view class="cl">
可骑行车辆
</view>
</view>
</view>
2025-04-10 08:57:21 +08:00
</view> -->
2025-04-01 21:35:30 +08:00
</view>
<!-- 运维类 -->
<view class="yunwei" v-if="index == 1">
<view class="cheliang" style="padding: 30rpx 62rpx;box-sizing: border-box;">
<view class="name">
工单管理
</view>
<view class="dabox">
<view class="li">
<view class="bfb">
236
</view>
<view class="cl">
调度工单
</view>
</view>
<view class="li">
<view class="bfb">
365
</view>
<view class="cl">
维修工单
</view>
</view>
<view class="li">
<view class="bfb">
3256
</view>
<view class="cl">
投诉工单
</view>
</view>
</view>
</view>
<view class="clzb">
<view class="name">
车辆指标
</view>
<view class="ul">
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
总投放
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
待使用
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
使用中
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
临时锁车
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
仓库中
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
禁用中
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
投放中
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
运营中P点外
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
运营中超区
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
零收益车辆
</view>
</view>
<view class="li">
<view class="shu">
100
</view>
<view class="zi">
调度设备
</view>
</view>
<view class="li"></view>
</view>
</view>
</view>
<TabBar :indexs='1' style=""></TabBar>
</view>
</template>
<script>
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
export default {
components: {
TabBar
},
data() {
return {
bgc: {
backgroundColor: "#fff",
},
index:0,
2025-04-11 18:23:16 +08:00
successAmount:'',
2025-04-01 21:35:30 +08:00
riqiindex:0,
oneparams: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
oneshow: false,
twoparams: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
twoshow: false,
kstime:'',
2025-04-10 08:57:21 +08:00
jstime:'',
yunyingobj:{},
qbobj:{},
infoobj:{}
2025-04-01 21:35:30 +08:00
}
},
onLoad() {
},
onShow() {
2025-04-10 08:57:21 +08:00
this.getinfo()
2025-04-01 21:35:30 +08:00
this.getCurrentDate(this.riqiindex)
},
methods: {
2025-04-10 08:57:21 +08:00
// 请求个人信息
getinfo() {
this.$u.get(`/getInfo`).then(res => {
if (res.code == 200) {
this.infoobj = res.user
2025-04-11 18:23:16 +08:00
this.successAmount = res.stat.withdraw.successAmount
this.gettongji()
this.getqb()
2025-04-10 08:57:21 +08:00
}
})
},
// 请求全部运营统计数据
getqb() {
let StatKeys = 'order_user_count,order_count,order_pay_amount,order_refund_amount,bonus_count,bonus_amount,bonus_refund_amount,bonus_refund_amount,user_balance'
2025-04-11 18:23:16 +08:00
this.$u.get(`/dashboard/stat?keys=${StatKeys}&dateRange=&bonusUserId=${this.infoobj.userId}`).then(res => {
2025-04-10 08:57:21 +08:00
if (res.code == 200) {
this.qbobj = res.data
}
})
},
// 请求筛选运营统计数据
gettongji() {
let StatKeys = 'order_user_count,order_count,order_pay_amount,order_refund_amount,bonus_count,bonus_amount,bonus_refund_amount,bonus_refund_amount,user_balance'
2025-04-11 18:23:16 +08:00
this.$u.get(`/dashboard/stat?keys=${StatKeys}&dateRange=${this.kstime + ',' + this.jstime}&bonusUserId=${this.infoobj.userId}`).then(res => {
2025-04-10 08:57:21 +08:00
if (res.code == 200) {
this.yunyingobj = res.data
}
})
},
2025-04-01 21:35:30 +08:00
// 一开始就获取当前年月日
getCurrentDate(num) {
const currentDate = new Date()
const year = currentDate.getFullYear()
const month = currentDate.getMonth() + 1
const day = currentDate.getDate()
const formatDate = (year, month, day) => {
const formattedMonth = month < 10 ? `0${month}` : month
const formattedDay = day < 10 ? `0${day}` : day
return `${year}-${formattedMonth}-${formattedDay}`
}
const getFirstDayOfMonth = (year, month) => {
return new Date(year, month - 1, 1)
}
const getLastDayOfMonth = (year, month) => {
return new Date(year, month, 0)
}
switch (num) {
case 0:
this.kstime = formatDate(year, month, day)
this.jstime = formatDate(year, month, day)
break
case 1:
const yesterday = new Date(currentDate)
yesterday.setDate(currentDate.getDate() - 1)
this.kstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
this.jstime = formatDate(yesterday.getFullYear(), yesterday.getMonth() + 1, yesterday.getDate())
break
case 2:
const firstDayOfMonth = getFirstDayOfMonth(year, month)
this.kstime = formatDate(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth() + 1, firstDayOfMonth.getDate())
this.jstime = formatDate(year, month, day)
break
case 3:
const lastMonthFirstDay = getFirstDayOfMonth(year, month - 1)
const lastMonthLastDay = getLastDayOfMonth(year, month - 1)
this.kstime = formatDate(lastMonthFirstDay.getFullYear(), lastMonthFirstDay.getMonth() + 1, lastMonthFirstDay.getDate())
this.jstime = formatDate(lastMonthLastDay.getFullYear(), lastMonthLastDay.getMonth() + 1, lastMonthLastDay.getDate())
break
default:
this.kstime = formatDate(year, month, day)
this.jstime = formatDate(year, month, day)
break
}
},
// 选择开始时间
confirmone(e){
this.kstime = e.year + '-' + e.month + '-' + e.day
this.riqiindex = -1
2025-04-10 08:57:21 +08:00
this.gettongji()
2025-04-01 21:35:30 +08:00
},
// 选择结束时间
confirmtwo(e){
this.jstime = e.year + '-' + e.month + '-' + e.day
this.riqiindex = -1
2025-04-10 08:57:21 +08:00
this.gettongji()
2025-04-01 21:35:30 +08:00
},
// 点击跳转到提现
btntx(){
uni.navigateTo({
url:'/page_shanghu/gongzuotai/AccountDetails'
})
},
// 点击切换日期
btnriqi(num){
this.riqiindex = num
this.getCurrentDate(this.riqiindex)
2025-04-10 08:57:21 +08:00
this.gettongji()
2025-04-01 21:35:30 +08:00
},
// 点击切换tab
btntab(num){
this.index = num
2025-04-23 17:50:42 +08:00
},
showTimePicker(type) {
if(type === 'start') {
this.oneshow = true
} else {
this.twoshow = true
}
2025-04-01 21:35:30 +08:00
}
}
}
</script>
<style lang="scss">
page {
background: #F7F7F7;
}
.actives{
border: 1px solid #4297F3 !important;
color: #4297F3 !important;
background: #E8F3FF !important;
}
.clzb{
width: 696rpx;
height: 496rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin: auto;
margin-top: 20rpx;
padding: 44rpx 34rpx;
box-sizing: border-box;
.name{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.li{
width: 25%;
text-align: center;
margin-top: 28rpx;
.shu{
font-weight: 800;
font-size: 32rpx;
color: #4297F3;
}
.zi{
font-size: 28rpx;
color: #AFAFAF;
margin-top: 12rpx;
}
}
}
}
.cheliang{
width: 696rpx;
height: 254rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin: auto;
margin-top: 20rpx;
padding: 30rpx 34rpx;
box-sizing: border-box;
.name{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
.dabox{
display: flex;
justify-content: space-between;
.li{
margin-top: 46rpx;
text-align: center;
.bfb{
font-weight: 800;
font-size: 36rpx;
color: #3D3D3D;
}
.cl{
font-size: 28rpx;
color: #AFAFAF;
margin-top: 6rpx;
}
}
}
}
.zupibox{
width: 630rpx;
height: 360rpx;
background: #F5FAFF;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin: auto;
margin-top: 44rpx;
padding: 30rpx 40rpx;
box-sizing: border-box;
.zupi{
display: flex;
justify-content: space-between;
.one{
.onewz{
font-size: 28rpx;
color: #4297F3;
margin-top: 10rpx;
}
.twowz{
font-size: 28rpx;
color: #7C7C7C;
margin-top: 10rpx;
}
}
}
}
.yinshouqk{
width: 696rpx;
2025-04-10 08:57:21 +08:00
max-height: 768rpx;
2025-04-01 21:35:30 +08:00
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 30rpx 34rpx;
box-sizing: border-box;
margin: auto;
margin-top: 20rpx;
.zongfy{
display: flex;
justify-content: space-between;
margin-top: 54rpx;
padding: 0 18rpx;
box-sizing: border-box;
.top{
text-align: center;
.topwz{
font-weight: 800;
font-size: 36rpx;
color: #3D3D3D;
}
.botwz{
font-size: 28rpx;
color: #AFAFAF;
}
}
image{
width: 78rpx;
height: 78rpx;
}
}
.name{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
}
.riqi{
view{
width: 162rpx;
height: 64rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
font-size: 28rpx;
color: #3D3D3D;
text-align: center;
line-height: 64rpx;
border: 1px solid #fff;
}
margin-top: 20rpx;
display: flex;
justify-content: space-between;
padding: 0 28rpx;
box-sizing: border-box;
}
.time{
width: 696rpx;
height: 96rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin: auto;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
padding: 22rpx 34rpx;
box-sizing: border-box;
align-items: center;
.timewz{
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.inptime{
display: flex;
align-items: center;
color: #979797;
view{
margin-left: 10rpx;
margin-right: 10rpx;
width: 196rpx;
height: 52rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 1rpx solid #808080;
text-align: center;
line-height: 52rpx;
font-size: 28rpx;
color: #979797;
}
}
}
.leiji{
width: 696rpx;
height: 178rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
justify-content: space-between;
padding: 38rpx 44rpx;
box-sizing: border-box;
margin: auto;
margin-top: 34rpx;
.li{
text-align: center;
.top{
font-weight: 800;
font-size: 32rpx;
color: #4297F3;
margin-top: 12rpx;
}
.bot{
margin-top: 12rpx;
font-weight: 400;
font-size: 28rpx;
color: #AFAFAF;
}
}
}
.yinshoubox{
display: flex;
justify-content: space-between;
padding: 0 56rpx;
box-sizing: border-box;
margin-top: 22rpx;
.rt{
.tx{
width: 162rpx;
height: 58rpx;
background: #FFFFFF;
box-shadow: 4rpx 4rpx 2rpx 0rpx rgba(0,0,0,0.3);
border-radius: 36rpx 36rpx 36rpx 36rpx;
text-align: center;
line-height: 58rpx;
font-weight: 600;
font-size: 32rpx;
color: #4297F3;
margin-top: 50rpx;
}
.txjl{
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
margin-top: 44rpx;
text-align: right;
}
}
.lt{
.zhye{
font-weight: 600;
font-size: 28rpx;
color: rgba(255,255,255,0.6);
}
.price{
font-weight: 600;
font-size: 50rpx;
color: #FFFFFF;
margin-top: 8rpx;
}
.ljtx{
margin-top: 40rpx;
font-weight: 400;
font-size: 24rpx;
color: rgba(255,255,255,0.6);
}
}
}
.active{
color: #fff !important;
text{
display: block;
width: 54rpx;
height: 8rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
margin: auto;
margin-top: 8rpx;
}
}
.tabs{
display: flex;
padding-top: 108rpx;
padding-left: 56rpx;
box-sizing: border-box;
view{
margin-right: 72rpx;
font-weight: 600;
font-size: 36rpx;
color: rgba(255,255,255,0.6);
}
}
.bj{
width: 750rpx;
height: 454rpx;
background: #4297F3;
border-radius: 0 0 50rpx 50rpx;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>