ydd_front/mer_uniapp/pages/admin/statistics/index.vue

<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-xiangxia"></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>