Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
apple
308
mer_uniapp/pages/admin/statistics/index.vue
Normal file
308
mer_uniapp/pages/admin/statistics/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="pagebox">
|
||||
<!-- #ifdef MP || APP-PLUS -->
|
||||
<NavBar titleText="销售额统计" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
|
||||
<!-- #endif -->
|
||||
<view class="headerBg">
|
||||
<view :style="{ height: `${getHeight.barTop}px` }"></view>
|
||||
<view :style="{ height: `${getHeight.barHeight}px` }"></view>
|
||||
<view class="inner"></view>
|
||||
</view>
|
||||
<view class="order-index" ref="container">
|
||||
<view class="header">
|
||||
<view class="">销售额(元)</view>
|
||||
<view class="money">{{ after_price }}</view>
|
||||
<view class="info">
|
||||
环比增长：{{ increase_time_status == 1 ? '' : '-' }}{{ growth_rate }}%
|
||||
<text :class="['iconfont', increase_time_status == 1 ? 'icon-xiangshang1' : 'icon-xiangxia2','info-icon']"></text>
|
||||
</view>
|
||||
<view class="picker">
|
||||
<picker mode="selector" :range="array" @change="bindPickerChange">
|
||||
<view>{{ array[index] }}<text class="iconfont icon-ic_downarrow"></text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view class="list acea-row">
|
||||
<view class="item">
|
||||
<view class="num">{{ after_number }}</view>
|
||||
<view>订单数量</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{ refund_number }}</view>
|
||||
<view>已退款</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="num">{{ visits_number }}</view>
|
||||
<view>访客数量</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="chart">
|
||||
<view class="title">
|
||||
销量趋势
|
||||
</view>
|
||||
<uCharts></uCharts>
|
||||
</div>
|
||||
<view class="public-wrapper">
|
||||
<view class="title">
|
||||
详细数据
|
||||
</view>
|
||||
<view class="nav acea-row row-between-wrapper">
|
||||
<view class="data">日期</view>
|
||||
<view class="browse">订单数</view>
|
||||
<view class="turnover">销售额(元)</view>
|
||||
<view class="visit">退款(元)</view>
|
||||
</view>
|
||||
<view class="conter">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item, index) in 3" :key="index">
|
||||
<view class="data">4.1</view>
|
||||
<view class="browse">36</view>
|
||||
<view class="turnover">3456.78</view>
|
||||
<view class="visit">0.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</view>
|
||||
<view class="safe-area-inset-bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import Loading from '../components/Loading/index.vue'
|
||||
import uCharts from '../components/uCharts/order_ucharts.vue'
|
||||
// #ifdef MP || APP-PLUS
|
||||
import NavBar from '../components/NavBar.vue';
|
||||
// #endif
|
||||
export default {
|
||||
name: 'adminOrder',
|
||||
components: {
|
||||
uCharts,
|
||||
Loading,
|
||||
// #ifdef MP ||APP-PLUS
|
||||
NavBar,
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
theme: app.globalData.theme,
|
||||
iconColor: '#FFFFFF',
|
||||
isScrolling: false,
|
||||
getHeight: this.$util.getWXStatusHeight(),
|
||||
census: {},
|
||||
list: [],
|
||||
where: {
|
||||
page: 1,
|
||||
limit: 15
|
||||
},
|
||||
loaded: false,
|
||||
loading: false,
|
||||
after_price: '8,903,785.00', // 销售额
|
||||
after_number: 199, // 订单数
|
||||
refund_number: '978.97', // 已退款
|
||||
visits_number: '2,197', // 访客数量
|
||||
growth_rate: 0, // 增长率
|
||||
increase_time: 0, // 较昨日同比增长
|
||||
increase_time_status: 1, // 1 增长 2 减少
|
||||
cWidth: '',
|
||||
cHeight: '',
|
||||
pixelRatio: 1,
|
||||
textarea: '',
|
||||
index: 4,
|
||||
array: ['今日', '昨日', '本周','上周','本月','上月','今年','去年'],
|
||||
arrays: [1, 7, 30],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
bindPickerChange: function(e) {
|
||||
this.index = e.detail.value
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagebox {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.safe-area-inset-bottom {
|
||||
height: 0;
|
||||
height: constant(safe-area-inset-bottom);
|
||||
height: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.headerBg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -25%;
|
||||
width: 150%;
|
||||
border-bottom-right-radius: 100%;
|
||||
border-bottom-left-radius: 100%;
|
||||
background: linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
|
||||
.inner {
|
||||
height: 356rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/*订单首页*/
|
||||
.order-index {
|
||||
position: relative;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.order-index .header {
|
||||
position: relative;
|
||||
padding: 24rpx 0 40rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.picker {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 0;
|
||||
height: 48rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 48rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.iconfont {
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-index .header .money {
|
||||
margin-top: 26rpx;
|
||||
font-family: SemiBold;
|
||||
font-size: 50rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.order-index .header .info {
|
||||
margin-top: 30rpx;
|
||||
position: relative;
|
||||
.iconfont {
|
||||
margin-left: 6rpx;
|
||||
font-size: 12rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-index .wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.order-index .wrapper .list .item {
|
||||
flex: 1;
|
||||
padding: 36rpx 0 26rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-index .wrapper .list .item .num {
|
||||
margin-bottom: 8rpx;
|
||||
font-family: SemiBold;
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.public-wrapper .title {
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
padding: 32rpx 0 40rpx 24rpx;
|
||||
}
|
||||
|
||||
.public-wrapper {
|
||||
background-color: #fff;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.public-wrapper .nav {
|
||||
padding: 0 40rpx;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.public-wrapper .data {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.public-wrapper .browse {
|
||||
flex: 1;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.public-wrapper .turnover {
|
||||
flex: 1;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.public-wrapper .visit {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.public-wrapper .conter {
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.public-wrapper .conter .item {
|
||||
border-bottom: 1px solid #F1F1F1;
|
||||
height: 74rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.chart {
|
||||
border-radius: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.title {
|
||||
padding: 32rpx 0 16rpx 24rpx;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
padding: 40rpx 0 6rpx 42rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.charts {
|
||||
width: 100%;
|
||||
height: 514rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-view {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user