OpenDoorManageMini/pages/globalPages/moreData.vue

<template>
	<view class="container">
		<u-navbar titleStyle="color:#333;fontSize:36rpx;" :autoBack="true" bgColor="#fff" :placeholder="true"
			title="更多数据"></u-navbar>
		<view class="content">
			<view class="tab-wrap">
				<view class="tab">
					<u-tabs :list="tabList" :activeStyle="{color: '#333',fontWeight: 'bold',fontSize:'36rpx'}"
						:inactiveStyle="{fontSize:'32rpx'}" :scrollable="false" :current="current" @click="tabClick"
						lineColor="#2C6FF3">
					</u-tabs>
				</view>
			</view>

			<view class="total-content today" v-if="current==0">
				<view class="time-tab flex align-center justify-between">
					<!-- <view class="time-item" :class="[dayTimeCurrent==0?'time-item time-show':'time-item']"
						@click="dayTimeClick(0)">
						今日
					</view> -->
					<!-- <view class="time-item" :class="[dayTimeCurrent==1?'time-item time-show':'time-item']" -->
					<view class="time-item time-show" @click="dayTimeClick(0)">
						{{date}}
					</view>

					<view class="flex">
						<view class="change-day" @tap="changeDay(0)">
							<xbutton>今日</xbutton>
						</view>
						<view class="change-day" @tap="changeDay(-1)">
							<xbutton>前一天</xbutton>
						</view>
						<view class="change-day" @tap="changeDay(1)">
							<xbutton>后一天</xbutton>
						</view>
					</view>
				</view>

				<u-datetime-picker :show="timeShow" mode="date" v-model="datePicker" @confirm="confirm"
					:closeOnClickOverlay="true" @close="close" @cancel="close"></u-datetime-picker>

				<view class="today-receive">
					<view>今日总收益</view>
					<view>
						￥<view>{{$xy.delMoney(dayData.dayTotalRevenue)}}</view>
					</view>
					<view>
						今日销售+今日补收
					</view>
				</view>

				<view class="sale-refund card">
					<view class="sr-title">
						<image src="../../static/images/global/total-before.png" mode="widthFix"></image>
						订单销售
					</view>
					<view class="sr-head">
						<view>
							￥<view>{{$xy.delMoney(dayData.dayOrderRealMoney)}}</view>
						</view>
						<view>
							到账金额
						</view>
					</view>
					<view class="sr-total flex justify-between">
						<view class="sr-item">
							<view class="sr-num" style="color:#2C6FF3;">
								￥<text>{{$xy.delMoney(dayData.dayOrderTotalMoney)}}</text>
							</view>
							<view class="sr-name">
								订单金额
							</view>

						</view>
						<view class="sr-item" style="color: #FF0000;">
							<view class="sr-num">
								￥<text>{{$xy.delMoney(dayData.dayRefundMoney)}}</text>
							</view>
							<view class="sr-name">
								退款金额
							</view>

						</view>
						<view class="sr-item">
							<view class="sr-num">
								￥<text>{{$xy.delMoney(dayData.dayPayFailedMoney)}}</text>
							</view>
							<view class="sr-name">
								挂账金额
							</view>

						</view>
						<view class="sr-item">
							<view class="sr-num">
								<text>{{dayData.dayToBeConfirmedNum||0}}</text>笔
							</view>
							<view class="sr-name">
								待确认
							</view>
						</view>
					</view>

					<view class="sr-total flex justify-between">
						<view class="sr-item">
							<view class="sr-num">
								<text>{{dayData.dayOrderNum||0}}</text>笔
							</view>
							<view class="sr-name">
								订单数量
							</view>
						</view>
						<view class="sr-item">
							<view class="sr-num">
								<text>{{dayData.dayRefundNum||0}}</text>笔
							</view>
							<view class="sr-name">
								退款数量
							</view>

						</view>
						<view class="sr-item">
							<view class="sr-num">
								<text>{{dayData.dayPayFailedNum||0}}</text>
							</view>
							<view class="sr-name">
								挂账数量
							</view>

						</view>
						<view class="sr-item">
							<view class="sr-num">
								<text>{{dayData.dayAbnormalOrderNum||0}}</text>笔
							</view>
							<view class="sr-name">
								异常数量
							</view>

						</view>
					</view>
				</view>

				<view class="sale-refund card" style="padding:30rpx 20rpx;">
					<view class="sr-title" style="margin-left: 14rpx;">
						<image src="../../static/images/global/total-before.png" mode="widthFix"></image>
						历史订单补退和补收
					</view>
					<view class="sr-head">
						<view>
							￥<view>{{$xy.delMoney(dayData.dayHisFillMoney-dayData.dayHisRefundMoney)}}</view>
						</view>
						<view>
							补收合计
						</view>
					</view>
					<view class="sr-content flex justify-between">
						<view class="sr-content-item sr-content-left">
							<view class="sc-top">
								今日补收
							</view>
							<view class="sc-bot flex">
								<view class="sc-item">
									<view class="sc-num">
										￥<text>{{$xy.delMoney(dayData.dayHisFillMoney)}}</text>
									</view>
									<view class="sc-name">
										金额
									</view>
								</view>
								<view class="sc-item">
									<view class="sc-num">
										<text>{{dayData.dayHisFillNum||0}}</text>笔
									</view>
									<view class="sc-name">
										订单数量
									</view>
								</view>
							</view>
						</view>
						<view class="sr-content-item sr-content-right">
							<view class="sc-top">
								今日补退
							</view>
							<view class="sc-bot flex">
								<view class="sc-item">
									<view class="sc-num">
										￥<text>{{$xy.delMoney(dayData.dayHisRefundMoney)}}</text>
									</view>
									<view class="sc-name">
										金额
									</view>
								</view>
								<view class="sc-item">
									<view class="sc-num">
										<text>{{dayData.dayHisRefundNum||0}}</text>笔
									</view>
									<view class="sc-name">
										订单数量
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="sale-refund card" style="padding:30rpx 20rpx;">
					<view class="sr-title" style="margin-left: 14rpx;">
						<image src="../../static/images/global/total-before.png" mode="widthFix"></image>
						风险订单
					</view>
					<view class="sr-head" @click="$tab.navigateTo('/pages/order/riskOrder')">
						<view style="color: #FF0000;">
							<view style="padding-right:12rpx;">{{dayData.toDoRiskCount}}</view>笔
						</view>
						<view>
							待处理风险订单
						</view>
					</view>
					<view class="sr-content flex justify-between">
						<view class="sr-content-item sr-content-left1">
							<view class="sc-top">
								今日新增
							</view>
							<view class="sc-val">
								{{dayData.dayRiskAddCount}}
							</view>
						</view>
						<view class="sr-content-item sr-content-right1">
							<view class="sc-top">
								今日处理
							</view>
							<view class="sc-val">
								{{dayData.dayRiskHandleCount}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="total-content month" v-else>
				<view class="time-tab flex align-center justify-between">
					<view class="time-item time-show" @click="dayTimeClick(0)">
						{{month}}
					</view>

					<view class="flex">
						<view class="change-day" @tap="changeMonth(0)">
							<xbutton>本月</xbutton>
						</view>
						<view class="change-day" @tap="changeMonth(-1)">
							<xbutton>上一月</xbutton>
						</view>
						<view class="change-day" @tap="changeMonth(1)">
							<xbutton>下一月</xbutton>
						</view>
					</view>
				</view>

				<u-datetime-picker :show="monthShow" mode="month" v-model="monthPicker" @confirm="monthConfirm"
					:closeOnClickOverlay="true" @close="monthClose" @cancel="monthClose"></u-datetime-picker>

				<view class="today-receive">
					<view>本月总收益</view>
					<view>
						￥<view>{{$xy.delMoney(monthData.monthTotalRevenue)}}</view>
					</view>
				</view>

				<view class="chart card">
					<view class="chart-title">
						日收益明细
					</view>
					<view class="chart-content">
						<block v-for="(item,index) in monthData.revenueList" :key="item.date">
							<view class="chart-item flex align-center" @click="detail(item.date)">
								<view class="chart-time">
									{{item.date}}
								</view>
								<view class="chart-bar-box flex justify-between align-center">
									<view class="chart-bar" :style="{width:item.width}"></view>
									<view class="chart-num">
										￥{{$xy.delMoney(item.dayTotalRevenue)}}
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		countByMonth,
		countByDay
	} from "@/api/order/order.js"

	export default {
		data() {
			return {
				tabList: [{
						name: '今日统计'
					},
					{
						name: '本月统计'
					}
				],
				current: 0,

				dayData: {
					"dayTotalRevenue": 0,
					"dayOrderRealMoney": 0,
					"dayOrderTotalMoney": 0,
					"dayOrderNum": 0,
					"dayRefundMoney": 0,
					"dayRefundNum": 0,
					"dayPayFailedMoney": 0,
					"dayPayFailedNum": 0,
					"dayToBeConfirmedNum": 0,
					"dayAbnormalOrderNum": 0,
					"dayHisFillMoney": 0,
					"dayHisFillNum": 0,
					"dayHisRefundMoney": 0,
					"dayHisRefundNum": 0,
					"toDoRiskCount": 0,
					"dayRiskHandleCount": 0,
					"dayRiskAddCount": 0
				},
				monthData: {
					"monthTotalRevenue": 0,
					"revenueList": []
				},
				monthTimeCurrent: 0,
				timeShow: false,
				date: null,
				datePicker: null,
				dateDx: 0,

				monthDx: 0,
				month: null,
				monthShow: false,
				monthPicker: null,
			}
		},

		onLoad(o) {
			this.datePicker = new Date()
			this.date = uni.$u.timeFormat(this.datePicker, 'yyyy-mm-dd')
			this.month = uni.$u.timeFormat(this.datePicker, 'yyyy-mm')
			this.tabList[0].name = `今日统计`
			this.tabList[1].name = `本月统计`
		},

		onShow() {
			this.getData()
		},


		methods: {
			tabClick(e) {
				this.current = e.index
				this.getData()
			},

			getData() {
				if (this.current == 0) {
					this.getDayData()
				} else {
					this.getMonthData()
				}
			},

			dayTimeClick(e) {
				this.timeShow = true
			},

			confirm(e) {
				this.date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.isToday()
				this.getData()
				this.timeShow = false;
			},

			close() {
				this.timeShow = false
			},

			// 是否今日
			isToday(day) {
				let nowDate = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
				if (this.date == nowDate) {
					this.tabList[0].name = `今日统计`
				} else {
					this.tabList[0].name = `按日统计`
				}
			},

			isNowMonth(month) {
				let nowMonth = uni.$u.timeFormat(new Date(), 'yyyy-mm')
				if (this.month == nowMonth) {
					this.tabList[1].name = `本月统计`
				} else {
					this.tabList[1].name = `按月统计`
				}
			},

			changeDay(add) {
				if (add == 0) {
					this.dateDx = 0;
				} else {
					//处理超过当前时间的情况
					if (add > 0) { 
						if (this.dateDx == 0) {
							this.$modal.msg('别点了,没有数据啦~')
							return
						}
					}
					this.dateDx += add;
				}

				let date = new Date().getTime();
				let newDate = date + this.dateDx * (24 * 60 * 60 * 1000);
				this.date = uni.$u.timeFormat(newDate, 'yyyy-mm-dd')
				this.isToday()
				this.getData()
			},

			changeMonth(add) {
				if (add == 0) {
					this.monthDx = 0;
				} else {
					//处理超过当前时间的情况
					if (add > 0) {
						if (this.monthDx == 0) {
							this.$modal.msg('别点了,没有数据啦~')
							return
						}
					}
					this.monthDx += add;
				}

				let today = new Date();
				let month = new Date(today.getFullYear(), today.getMonth() + this.monthDx, today.getDate());
				this.month = uni.$u.timeFormat(month, 'yyyy-mm')
				this.isNowMonth()
				this.getData()
			},

			monthTimeClick(e) {
				this.monthTimeCurrent = e
			},

			getMonthData() {
				countByMonth({
					date: this.month + '-01'
				}).then(res => {
					let data = res.data;
					let max = 0;
					let revenueList = data.revenueList
					for (let i = 0; i < revenueList.length; i++) {
						let item = revenueList[i];
						if (item.dayTotalRevenue > max) {
							max = item.dayTotalRevenue
						}
					}
					for (let i = 0; i < revenueList.length; i++) {
						let item = revenueList[i];
						if (item.dayTotalRevenue > 0) {
							item.width = (item.dayTotalRevenue / (max / 0.78)) * 100 + '%'
						} else {
							item.width = '0%'
						}
					}
					this.monthData = data
					console.log(this.monthData)
				})
			},

			getDayData() {
				countByDay({
					date: this.date
				}).then(res => {
					if (res.data) {
						this.dayData = res.data
					} else {
						this.dayData = {
							"dayTotalRevenue": 0,
							"dayOrderRealMoney": 0,
							"dayOrderTotalMoney": 0,
							"dayOrderNum": 0,
							"dayRefundMoney": 0,
							"dayRefundNum": 0,
							"dayPayFailedMoney": 0,
							"dayPayFailedNum": 0,
							"dayToBeConfirmedNum": 0,
							"dayAbnormalOrderNum": 0,
							"dayHisFillMoney": 0,
							"dayHisFillNum": 0,
							"dayHisRefundMoney": 0,
							"dayHisRefundNum": 0,
							"toDoRiskCount": 0,
							"dayRiskHandleCount": 0,
							"dayRiskAddCount": 0
						}
					}
				})
			},

			detail(time) {
				this.current = 0;
				this.date = time;
				this.tabList[0].name = `按日统计`
				this.getData()
			},

			monthConfirm(e) {
				this.month = uni.$u.timeFormat(e.value, 'yyyy-mm')
				// this.isToday()
				// this.getData()
				this.monthShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #fff !important;

		.content {
			color: #333;

			.tab-wrap {
				background-color: #fff;

				.tab {
					width: 90%;
					margin-left: -12rpx;
				}
			}

			.time-tab {
				margin-top: 24rpx;
				padding: 0 13rpx;

				.time-item {
					padding: 0 64rpx;
					height: 62rpx;
					background: #F7F7F7;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #777777;
					margin-right: 20rpx;
					line-height: 62rpx;

					&.time-show {
						background: #F4F8FF;
						color: #2C6FF3;
					}
				}

				.change-day {
					margin-left: 12rpx;
				}
			}

			.total-content {

				.today-receive {
					width: 724rpx;
					margin-left: 13rpx;
					background: #2C6FF3;
					box-shadow: 0px 0px 10rpx 0px rgba(174, 201, 255, 0.2);
					border-radius: 14rpx;
					color: #fff;
					padding: 28rpx 18rpx;
					margin-top: 20rpx;

					>view:nth-child(1) {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: 500;
					}

					>view:nth-child(2) {
						font-size: 32rpx;
						line-height: 64rpx;
						margin-top: 32rpx;
						text-align: center;

						>view {
							font-size: 64rpx;
							padding-left: 12rpx;
							display: inline-block;
							font-weight: bold;
						}
					}

					>view:nth-child(3) {
						font-size: 26rpx;
						line-height: 26rpx;
						font-weight: 500;
						margin-top: 28rpx;
						text-align: center;
					}
				}

				.risk-order {
					padding: 0 12rpx;

					.risk-item {
						width: 230rpx;
						height: 120rpx;
						background: #F1F6FF;
						border-radius: 14rpx;
						padding: 24rpx 10rpx 18rpx 12rpx;

						.risk-name {
							font-size: 26rpx;
							padding-left: 16rpx;
							position: relative;
							line-height: 26rpx;


							&::before {
								content: '';
								width: 6rpx;
								height: 20rpx;
								position: absolute;
								left: 0;
								top: 2rpx;
								background-color: #2C6FF3;
							}

							&.risk-name2::before {
								background-color: #FB360F;
							}

							&.risk-name3::before {
								background-color: #5804E2;
							}

						}

						.risk-num {
							font-size: 32rpx;
							text-align: center;
							margin-top: 26rpx;
							line-height: 32rpx;
							font-weight: bold;
						}

						&.to-month {
							width: 354rpx;
							height: 149rpx;
							background: #F1F6FF;
							border-radius: 14rpx;

							.risk-num {
								font-size: 24rpx;
								margin-top: 40rpx;
								line-height: 32rpx;
								text-align: left;
								padding-left: 12rpx;

								>text {
									font-size: 32rpx;
									font-weight: bold;
								}
							}
						}
					}
				}

				.card {
					box-shadow: 0px 0px 10px 0px rgba(174, 201, 255, 0.2);
					border-radius: 14rpx;
				}

				.sale-refund {
					width: 724rpx;
					background: #FFFFFF;
					margin-left: 12rpx;
					margin-top: 30rpx;
					padding: 34rpx 34rpx 47rpx;

					.sr-title {
						font-size: 30rpx;
						font-weight: 800;
						line-height: 30rpx;
						position: relative;
						padding-left: 24rpx;

						>image {
							width: 14rpx;
							height: 25rpx;
							position: absolute;
							left: 0;
							top: 2rpx;
						}
					}

					.sr-head {
						color: #333;

						>view:nth-child(1) {
							font-size: 24rpx;
							line-height: 44rpx;
							margin-top: 43rpx;
							font-weight: bold;
							text-align: center;

							>view {
								font-size: 44rpx;
								display: inline-block;
								padding-left: 12rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 26rpx;
							line-height: 26rpx;
							margin-top: 22rpx;
							text-align: center;
						}
					}

					.sr-content {
						margin-top: 20rpx;

						.sr-content-item {
							width: 334rpx;
							background: #F1F6FF;
							border-radius: 14rpx;
							padding: 24rpx 18rpx;

							&.sr-content-right {
								background-color: #FFF7F7;
							}

							&.sr-content-left1 {
								background-color: #FFF7F7;
								padding-bottom: 58rpx;
							}

							&.sr-content-right1 {
								background-color: #F9F9F9;
								padding-bottom: 58rpx;
							}

							.sc-top {
								font-size: 28rpx;
								line-height: 28rpx;
								font-weight: 800;
							}

							.sc-bot {
								.sc-item {
									width: 228rpx;
									text-align: center;
									margin-top: 40rpx;

									.sc-name {
										font-size: 26rpx;
										color: #555555;
										line-height: 26rpx;
										margin-top: 24rpx;
									}

									.sc-num {
										font-size: 24rpx;
										font-weight: 800;
										line-height: 32rpx;

										>text {
											font-size: 32rpx;
										}
									}
								}
							}

							.sc-val {
								font-size: 32rpx;
								line-height: 32rpx;
								margin-top: 45rpx;
								font-weight: 800;
								color: #333333;
								text-align: center;
							}
						}
					}

					.sr-total {
						margin-top: 42rpx;

						.sr-item {
							width: 25%;
							text-align: center;

							.sr-name {
								font-size: 26rpx;
								color: #555555;
								line-height: 26rpx;
								margin-top: 24rpx;
							}

							.sr-num {
								font-size: 24rpx;
								font-weight: 800;
								line-height: 32rpx;

								>text {
									font-size: 32rpx;
								}
							}
						}
					}
				}

				.sub-rec-ref {
					width: 724rpx;
					margin-left: 13rpx;
					margin-top: 30rpx;

					.card {
						width: 354rpx;
						padding: 26rpx 22rpx;

						&.srr-rec {
							background-color: #2C6FF3;
							color: #fff;
						}

						.srr-title {
							font-size: 30rpx;
							line-height: 30rpx;
						}

						.srr-total {
							margin-top: 36rpx;

							.srr-item {
								width: 182rpx;

								.srr-name {
									font-size: 26rpx;
									line-height: 26rpx;
								}

								.srr-num {
									font-size: 24rpx;
									font-weight: 800;
									line-height: 32rpx;
									margin-top: 24rpx;

									>text {
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}

			.month {
				.chart {
					width: 724rpx;
					margin-left: 13rpx;
					margin-top: 12rpx;
					padding-bottom: 24rpx;

					.chart-title {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						padding: 30rpx 25rpx 20rpx;
					}

					.chart-content {
						padding: 0 15rpx;

						.chart-item {
							height: 54rpx;
							margin-top: 10rpx;

							.chart-time {
								margin-right: 10rpx;
								width: 190rpx;
							}

							.chart-bar-box {
								background: #F6F6F6;
								border-radius: 8rpx 27rpx 27rpx 8rpx;
								width: 620rpx;

								.chart-bar {
									height: 54rpx;
									border-radius: 8rpx 27rpx 27rpx 8rpx;
									background-color: #98C0FC;
									transition: all 1s linear;
								}

								.chart-num {
									color: #df6b73;
									margin-right: 12rpx;
									font-size: 26rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>