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.
418 lines
9.3 KiB
418 lines
9.3 KiB
10 months ago
|
<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" @change="change"></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 class="item">昨日</view>
|
||
|
|
<view class="item">近7日</view>
|
||
|
|
<view class="item">近15日</view>
|
||
|
|
<view class="item">近30日</view>
|
||
|
|
</view>
|
||
|
|
<view class="b">
|
||
|
|
<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
|
|
<view class="start timer">{{date1?date1:'开始时间'}}</view>
|
||
|
|
</picker>
|
||
|
|
<view class="or">-</view>
|
||
|
|
<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
|
|
<view class="end timer">{{date2?date2:'结束时间'}}</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<view class="c">导出</view>
|
||
|
|
</view>
|
||
|
|
<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>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [{
|
||
|
|
name: '今日数据'
|
||
|
|
}, {
|
||
|
|
name: '历史数据'
|
||
|
|
}],
|
||
|
|
date1: "",
|
||
|
|
date2: "",
|
||
|
|
tabIndex: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
startDate() {
|
||
|
|
return this.getDate('start');
|
||
|
|
},
|
||
|
|
endDate() {
|
||
|
|
return this.getDate('end');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
change() {
|
||
|
|
|
||
|
|
},
|
||
|
|
tabItem(index){
|
||
|
|
this.tabIndex = index
|
||
|
|
},
|
||
|
|
bindDateChange1: function(e) {
|
||
|
|
this.date1 = e.detail.value
|
||
|
|
},
|
||
|
|
bindDateChange2: function(e) {
|
||
|
|
this.date2 = e.detail.value
|
||
|
|
},
|
||
|
|
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>
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
.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: #FFAAA4;
|
||
|
|
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>
|