You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
509 lines
12 KiB
509 lines
12 KiB
<template>
|
|
<view class="report">
|
|
<view class="report-tab">
|
|
<u-tabs :list="list" height="110" font-size="32" active-color="#F34A40" inactive-color="#686868"
|
|
:is-scroll="false" v-model="tabIndex"></u-tabs>
|
|
</view>
|
|
<view class="report-bd" v-if="tabIndex == 0">
|
|
<view class="module1">
|
|
<view class="title">订单数据</view>
|
|
<view class="info" v-if=" orderData">
|
|
<view class="item">
|
|
订单金额<text>¥{{ orderData.orderMoney}}</text>
|
|
</view>
|
|
<view class="item">
|
|
订单数<text>{{ orderData.orderCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
订单人数<text>{{ orderData.orderPayUser}}</text>
|
|
</view>
|
|
<view class="item">
|
|
总成本金额<text>¥{{ orderData.orderCostMoney}}</text>
|
|
</view>
|
|
<view class="item">
|
|
预估利益<text>¥{{ orderData.orderInterest}}</text>
|
|
</view>
|
|
<view class="item">
|
|
付费会员数<text>{{ orderData.payMemberCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
付费分销数<text>{{ orderData.payDealerCount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module2">
|
|
<view class="title">退款数据</view>
|
|
<view class="info" v-if=" refundData">
|
|
<view class="item">
|
|
退款单数<text>{{ refundData.refundCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
退款金额<text>¥{{ refundData.refundTotalMoney}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module3">
|
|
<view class="title">用户数据</view>
|
|
<view class="info" v-if=" userData">
|
|
<view class="item">
|
|
访客数<text>{{ userData.visitorCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
浏览量<text>{{ userData.viewCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
新增用户数<text>{{ userData.newUserCount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="export" v-if="tabIndex == 1">
|
|
<view class="a">
|
|
<view @click="activeTab(index)" class="item" :class="dateIndex==index?'itemActive':''"
|
|
v-for="(item,index) in dateList" :key="index">{{item}}
|
|
</view>
|
|
</view>
|
|
<view class="b">
|
|
<view class="start timer" @click="isShow=true">{{startTime?startTime:'开始时间'}}</view>
|
|
<view class="or">-</view>
|
|
<view class="end timer" @click="isShow=true">{{endTime?endTime:'结束时间'}}</view>
|
|
</view>
|
|
<view class="rest">
|
|
<view class="c" @click="quantityReset"
|
|
style="border:1rpx solid #E5E5E5;background: #fff;color:#3B3B3B ;">重置</view>
|
|
<view class="c" :style="{'opacity': (startTime||dateIndex>-1)?1:0.6 }" @click="quantityFilter">确认</view>
|
|
</view>
|
|
|
|
</view>
|
|
<u-calendar v-model="isShow" mode="range" @change="getTime" range-color='#FF6257' range-bg-color='#FFBDBA'
|
|
active-bg-color='#FF6257'></u-calendar>
|
|
<view class="report-bd" v-if="tabIndex == 1">
|
|
<view class="module1">
|
|
<view class="title">订单数据</view>
|
|
<view class="info" v-if=" orderData">
|
|
<view class="item">
|
|
订单金额<text>¥{{ orderData.orderMoney}}</text>
|
|
</view>
|
|
<view class="item">
|
|
订单数<text>{{ orderData.orderCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
订单人数<text>{{ orderData.orderPayUser}}</text>
|
|
</view>
|
|
<view class="item">
|
|
总成本金额<text>¥{{ orderData.orderCostMoney}}</text>
|
|
</view>
|
|
<view class="item">
|
|
预估利益<text>¥{{ orderData.orderInterest}}</text>
|
|
</view>
|
|
<view class="item">
|
|
付费会员数<text>{{ orderData.payMemberCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
付费分销数<text>{{ orderData.payDealerCount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module2">
|
|
<view class="title">退款数据</view>
|
|
<view class="info" v-if=" refundData">
|
|
<view class="item">
|
|
退款单数<text>{{ refundData.refundCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
退款金额<text>¥{{ refundData.refundTotalMoney}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module3">
|
|
<view class="title">用户数据</view>
|
|
<view class="info" v-if=" userData">
|
|
<view class="item">
|
|
访客数<text>{{ userData.visitorCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
浏览量<text>{{ userData.viewCount}}</text>
|
|
</view>
|
|
<view class="item">
|
|
新增用户数<text>{{ userData.newUserCount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="module4">
|
|
<view class="title">佣金数据</view>
|
|
<view class="info" v-if=" commissionData">
|
|
<view class="item">
|
|
累计佣金已结算金额<text>{{ commissionData.settleTotalMoney}}</text>
|
|
</view>
|
|
<view class="item">
|
|
累计佣金结算金额<text>{{ commissionData.noSettleTotalMoney}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<addShuiyin />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as newFunApi from '@/api/newFun'
|
|
export default {
|
|
data() {
|
|
return {
|
|
dateList: ['昨日', '近7日', '近15日', '近30日'],
|
|
dateIndex: -1,
|
|
list: [{
|
|
name: '今日数据'
|
|
}, {
|
|
name: '历史数据'
|
|
}],
|
|
tabIndex: 0,
|
|
isShow: false,
|
|
startTime: '',
|
|
endTime: '',
|
|
recentDate: '',
|
|
orderData: {},
|
|
refundData: {},
|
|
userData: {},
|
|
commissionData: {}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getNumberPages()
|
|
|
|
},
|
|
methods: {
|
|
activeTab(index) {
|
|
this.dateIndex = index;
|
|
let day = ''
|
|
if (this.dateIndex == 0) {
|
|
day = -1
|
|
}
|
|
if (this.dateIndex == 1) {
|
|
day = -7
|
|
}
|
|
if (this.dateIndex == 2) {
|
|
day = -15
|
|
}
|
|
if (this.dateIndex == 3) {
|
|
day = -30
|
|
}
|
|
this.startTime = this.getDay(day);
|
|
this.endTime = this.getDay(0)
|
|
},
|
|
quantityReset() {
|
|
this.startTime = '';
|
|
this.endTime = '';
|
|
this.dateIndex = -1
|
|
this.getNumberPages()
|
|
},
|
|
quantityFilter() {
|
|
this.getNumberPages()
|
|
},
|
|
getTime(e) {
|
|
this.startTime = e.startDate;
|
|
this.endTime = e.endDate;
|
|
},
|
|
tabItem(index) {
|
|
this.dateIndex = -1;
|
|
this.startTime = '';
|
|
this.endTime = '';
|
|
this.tabIndex = index
|
|
},
|
|
getNumberPages() {
|
|
const that = this
|
|
return new Promise((resolve, reject) => {
|
|
newFunApi.statistics({
|
|
startDate: this.startTime,
|
|
endDate: this.endTime
|
|
})
|
|
.then(result => {
|
|
this.orderData = result.data.orderData;
|
|
this.refundData = result.data.refundData;
|
|
this.userData = result.data.userData;
|
|
this.commissionData = result.data.commissionData;
|
|
})
|
|
.catch(reject)
|
|
})
|
|
},
|
|
getDay(day) {
|
|
var today = new Date();
|
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
|
today.setTime(targetday_milliseconds); //注意，这行是关键代码
|
|
|
|
var tYear = today.getFullYear();
|
|
var tMonth = today.getMonth();
|
|
var tDate = today.getDate();
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|
tDate = this.doHandleMonth(tDate);
|
|
return tYear + "-" + tMonth + "-" + tDate;
|
|
},
|
|
doHandleMonth(month) {
|
|
var m = month;
|
|
if (month.toString().length == 1) {
|
|
m = "0" + month;
|
|
}
|
|
return m;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .u-btn--primary {
|
|
background-color: #FF6257 !important;
|
|
border-color: #FF6257;
|
|
}
|
|
|
|
.report {
|
|
overflow: hidden;
|
|
|
|
&-tab {
|
|
margin-top: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.export {
|
|
width: 100%;
|
|
height: 312rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
.a {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 156rpx;
|
|
line-height: 64rpx;
|
|
background: #FFF6F5;
|
|
border-radius: 4rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3B3B3B;
|
|
float: left;
|
|
margin-top: 20rpx;
|
|
margin-left: 15rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.itemActive {
|
|
color: #fff;
|
|
background: #FF6F5F;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
.b {
|
|
overflow: hidden;
|
|
|
|
.timer {
|
|
width: 288rpx;
|
|
line-height: 64rpx;
|
|
background: #FFF6F5;
|
|
border-radius: 6rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #3B3B3B;
|
|
float: left;
|
|
margin-top: 20rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.or {
|
|
width: 93rpx;
|
|
height: 64rpx;
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
float: left;
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
}
|
|
}
|
|
|
|
.rest {
|
|
display: flex;
|
|
margin: 0 20rpx 20rpx 20rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.c {
|
|
width: 300rpx;
|
|
line-height: 88rpx;
|
|
background: #FF6257;
|
|
border-radius: 88rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin-top: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 0 20rpx 20rpx;
|
|
overflow: hidden;
|
|
margin-top: 20rpx;
|
|
|
|
.module1 {
|
|
width: 100%;
|
|
height: 504rpx;
|
|
background: linear-gradient(180deg, #FEF4F3 0%, #FFFFFF 20%);
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
border-left: 3px solid #FF6257;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 33.3%;
|
|
float: left;
|
|
padding: 25rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #ABABAB;
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module2 {
|
|
width: 100%;
|
|
height: 246rpx;
|
|
margin-top: 20rpx;
|
|
background: linear-gradient(180deg, #FEF4F3 0%, #FFFFFF 30%);
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
border-left: 3px solid #FF6257;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 33.3%;
|
|
float: left;
|
|
padding: 25rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #ABABAB;
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module3 {
|
|
width: 100%;
|
|
height: 246rpx;
|
|
margin-top: 20rpx;
|
|
background: linear-gradient(180deg, #FEF4F3 0%, #FFFFFF 30%);
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
border-left: 3px solid #FF6257;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 33.3%;
|
|
float: left;
|
|
padding: 25rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #ABABAB;
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module4 {
|
|
width: 100%;
|
|
height: 246rpx;
|
|
margin-top: 20rpx;
|
|
background: linear-gradient(180deg, #FEF4F3 0%, #FFFFFF 30%);
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
border-left: 3px solid #FF6257;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.item {
|
|
width: 33.3%;
|
|
float: left;
|
|
padding: 25rpx 0;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #ABABAB;
|
|
|
|
text {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #3B3B3B;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|