|
|
|
|
<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">
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
支持人数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
总成本金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
预估利益<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
付费会员数<text>200</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
付费分销数<text>200</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module2">
|
|
|
|
|
<view class="title">退款数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
退款单数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
退款金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module3">
|
|
|
|
|
<view class="title">用户数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
访客数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
浏览量<text>56</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
新增用户数<text>23</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="c" :style="{'opacity': (startTime||dateIndex>-1)?1:0.6 }" @click="quantityFilter">筛选</view>
|
|
|
|
|
</view>
|
|
|
|
|
<u-calendar v-model="isShow" mode="range" @change="getTime" range-color='#F34A40' range-bg-color='#FFBDBA'
|
|
|
|
|
active-bg-color='#F34A40'></u-calendar>
|
|
|
|
|
<view class="report-bd" v-if="tabIndex == 1">
|
|
|
|
|
<view class="module1">
|
|
|
|
|
<view class="title">订单数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
支持人数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
订单金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
总成本金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
预估利益<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
付费会员数<text>200</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
付费分销数<text>200</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module2">
|
|
|
|
|
<view class="title">退款数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
退款单数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
退款金额<text>¥867.00</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module3">
|
|
|
|
|
<view class="title">用户数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
访客数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
浏览量<text>56</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
新增用户数<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="module4">
|
|
|
|
|
<view class="title">佣金数据</view>
|
|
|
|
|
<view class="info">
|
|
|
|
|
<view class="item">
|
|
|
|
|
累计佣金已结算金额<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
累计佣金结算金额<text>23</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</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: ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
this.getNumberPages()
|
|
|
|
|
var yesterday = this.getDay(-1)
|
|
|
|
|
var th_7 = this.getDay(-7);
|
|
|
|
|
var th_15 = this.getDay(-15)
|
|
|
|
|
var th_30 = this.getDay(-30)
|
|
|
|
|
console.log(yesterday, th_7, th_15, th_30)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
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.recentDate = this.getDay(day);
|
|
|
|
|
console.log(this.recentDate)
|
|
|
|
|
},
|
|
|
|
|
quantityFilter() {},
|
|
|
|
|
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.addressList({
|
|
|
|
|
user_id: 10006
|
|
|
|
|
})
|
|
|
|
|
.then(result => {
|
|
|
|
|
console.log(result)
|
|
|
|
|
})
|
|
|
|
|
.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;
|
|
|
|
|
},
|
|
|
|
|
// getDate(type) {
|
|
|
|
|
// const date = new Date();
|
|
|
|
|
// let year = date.getFullYear();
|
|
|
|
|
// let month = date.getMonth() + 1;
|
|
|
|
|
// let day = date.getDate();
|
|
|
|
|
// if (type === 'start') {
|
|
|
|
|
// year = year - 60;
|
|
|
|
|
// } else if (type === 'end') {
|
|
|
|
|
// year = year + 2;
|
|
|
|
|
// }
|
|
|
|
|
// month = month > 9 ? month : '0' + month;
|
|
|
|
|
// day = day > 9 ? day : '0' + day;
|
|
|
|
|
// return `${year}-${month}-${day}`;
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
::v-deep .u-btn--primary {
|
|
|
|
|
background-color: #FC3E27 !important;
|
|
|
|
|
border-color: #FC3E27;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.b {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.timer {
|
|
|
|
|
width: 288rpx;
|
|
|
|
|
line-height: 64rpx;
|
|
|
|
|
background: #FFF6F5;
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.c {
|
|
|
|
|
width: 100%;
|
|
|
|
|
line-height: 88rpx;
|
|
|
|
|
background: #F34A40;
|
|
|
|
|
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 100%);
|
|
|
|
|
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 100%);
|
|
|
|
|
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 100%);
|
|
|
|
|
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 100%);
|
|
|
|
|
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>
|
