shanxian-work-app/pages/manage/incomeDetail.vue

<template>
	<!-- 这是收益详情界面 -->
	<view class="info">
		<view class="selected" v-if="role=='技术管理员'">
			<view @click="select_merchants">
				<text>{{merchantList[merchantIndex]}}</text>
				<image src="../../static/img/right-arrow.png" mode=""></image>
			</view>
			<view @click="select_area">
				<text>{{areaList[areaIndex]}}</text>
				<image src="../../static/img/right-arrow.png" mode=""></image>
			</view>
		</view>
		<view class="date">
			<view style="width:70%;">
				<view class="flexA" @click="choice">
					<text>开始时间：{{timeShowS}}</text>
					<!-- <van-icon name="underway-o" /> -->
				</view>
				<view class="flexA" style="margin-top:20rpx;">
					<text>结束时间：{{timeShowE}}</text>
					<!-- <van-icon name="underway-o" /> -->
				</view>
			</view>
			<view class="dates">已查询{{list.days}}天</view>
		</view>
		<view class="list">
			<view class="income">
				<view class="flexB title">
					<text>收入明细</text>
					<text class="state">总收入：{{list.totalProfit}}</text>
				</view>
				<view class="flex">
					<text>普通订单收入（含调度费）：{{list.orderTotalProfit}}</text>
				</view>
				<view class="flex">
					<text>日租订单收入（含调度费）：{{list.orderRentTotalProfit}}</text>
				</view>
				<view class="flex">
					<text style="width:50%;">订单调度费：{{list.orderDispatchTotalProfit}}</text>
					<text style="width:50%;">日租订单调度费：{{list.orderRentDispatchTotalProfit}}</text>
				</view>
				<view class="flex">
					<text>待支付订单：{{list.wiatPayTotal}}</text>
				</view>
			</view>
			<view class="income">
				<view class="flexB title">
					<text>用户明细</text>
					<text class="state">总用户：{{list.userTotal}}</text>
				</view>
				<view class="flexB small">
					<text>新增认证用户：{{list.userTotalCardOk}}</text>
					<text>总缴纳押金用户：{{list.userDepositTotal}}</text>
				</view>
			</view>
			<view class="income">
				<view class="flexB title">
					<text>押金明细</text>
					<text class="state">累计净押金：{{list.cumulativeDepositTotal}}</text>
				</view>
				<view class="flexB small">
					<text>新增押金：{{list.depositTotal}}</text>
				</view>
			</view>
			<view class="income">
				<view class="flexB title">
					<text>订单明细</text>
					<text class="state">总订单数：{{list.orderRentTotal+list.orderTotal}}</text>
				</view>
				<view class="flexB small">
					<text>普通订单：{{list.orderTotal}}</text>
					<text>待支付订单：{{list.wiatNum}}</text>
				</view>
				<view class="flex">
					<text>日租订单：{{list.orderRentTotal}}</text>
				</view>
			</view>
			<view class="income">
				<view class="flexB title">
					<text>活动明细</text>
					<text class="state">活动收益：{{list.activityTotalProfit}}</text>
				</view>
				<view class="flexB small">
					<text>充值订单收益：{{list.rechargeOrderTotalProfit}}</text>
					<text>免押金卡收益：{{list.depositCardTotalProfit}}</text>
				</view>
				<view class="flex">
					<text>骑行卡收益：{{list.riddingCardOrderTotalProfit}}</text>
				</view>
			</view>
			<view class="bike">
				<view>
					<text>投放车辆</text>
					<text>{{list.bikeTotal}}</text>
				</view>
			</view>
		</view>
		<view class="cover" v-if="showCal" @click="closeCal" catchtouchmove="true"></view>
		<view class="calendar" v-if="showCal">
			<view class="section">
				<view class="title flex-box">
					<view @click="past">
						<image src="../../static/img/zuo.png" mode="" style="width: 60upx;height: 60upx;"></image>
					</view>
					<view class="title">{{currentShow}}</view>
					<view @click="future">
						<image src="../../static/img/you.png" mode="" style="width: 60upx;height: 60upx;"></image>
					</view>
				</view>
				<view class="week flex-box">
					<view class="weekday" v-for="(item,index) in week" :key='index'>{{item}}</view>
				</view>
				<view class="days flex-box">
					<view class="day" @click="select(item.today)" v-for="(item,index1) in days" :key="index1">
						<view :class="item.today == today ? 'now' : (item.sign ? 'sign' : '')" class="circle">
							<view> {{item.day}} </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				showCal: false,
				list: {},
				week: ['日', '一', '二', '三', '四', '五', '六'],
				days: [],
				today: '', //当天，展示星星标记
				currentShow: '', //展示日期
				currentDate: '', //点击选中日期
				changeTap: false,
				startRange: '',
				timeRange: [],
				timeStart: '',
				timeEnd: '',
				role: uni.getStorageSync('token').role, //是否是技术管理员
				merchantIndex: 0, //选择的商户下标
				merchant: [], //商户列表 数组对象
				merchantList: [], //商户列表只有name供选择,
				merchantId: '',
				areaIndex: 0, //选择的商户下标
				area: [], //商户列表 数组对象
				areaList: [], //商户列表只有name供选择,
				areaId: '',
				areaID: '' //页面传参过来的区域ID
			}
		},
		onLoad(options) {
			this.areaID = options.areaId
			this.getState();
			let day = this.getDay();
			this.today = day,
				this.currentDate = day
			this.calendar(day);
			console.log(this.role)
			if (this.role == '技术管理员') {
				app.request('order/merchantList', '', 'GET').then(res => {
					uni.hideLoading();
					console.log(res);
					if (res.statusCode == 200) {
						if (res.data.length > 1) {
							var obj = [{
								"id": '',
								"username": '',
								"name": "全部商户"
							}]
							var data = res.data
							obj = obj.concat(data)
							this.merchant = obj;
							var merchantArr = []
							for (var i = 0; i < this.merchant.length; i++) {
								console.log(this.merchant[i].name)
								merchantArr = merchantArr.concat(this.merchant[i].name)
							}
							console.log(merchantArr)
							this.merchantList = merchantArr;
							this.getArea()
						} else {
							this.merchant = res.data;
							var merchantArr = []
							merchantArr.push(this.merchant[0].name)
							this.merchantList = merchantArr;
							this.merchantId = this.merchant[0].id
							this.getArea()
						}
					}
				})

			}
		},
		methods: {
			getArea: function() {
				console.log(this.merchantId)
				app.request('order/areaList?merchant_id=' + this.merchantId, '', 'GET').then(res => {
					console.log(res);
					if (res.statusCode == 200) {
						if (res.data.length > 1) {
							var obj = [{
								"id": '',
								"username": '',
								"name": "全部区域"
							}]
							var data = res.data
							obj = obj.concat(data)
							this.area = obj;
							var areaArr = []
							for (var i = 0; i < this.area.length; i++) {
								console.log(this.area[i].name)
								areaArr = areaArr.concat(this.area[i].name)
							}
							console.log(areaArr)
							this.areaList = areaArr;
							this.areaId = '';
						} else {
							this.area = res.data;
							var areaArr = []
							areaArr.push(this.area[0].name)
							this.areaId = this.area[0].id;
							this.areaList = areaArr;
							console.log(this.area[0].name)
							console.log(this.areaList)
						}
					}
				})
			},
			select_merchants: function() {
				var that = this;
				uni.showActionSheet({
					itemList: that.merchantList,
					success: function(res) {
						that.merchantId = that.merchant[res.tapIndex].id
						that.getArea()
						that.merchantIndex = res.tapIndex
						that.areaIndex = 0
						setTimeout(function() {
							that.getState()
						}, 500)
					}
				})
			},
			select_area: function() {
				var that = this;
				uni.showActionSheet({
					itemList: that.areaList,
					success: function(res) {
						that.areaIndex = res.tapIndex
						that.areaId = that.area[res.tapIndex].id
						that.getState()
					}
				})
			},
			//获取今天
			getDay: function() {
				var today = new Date();
				var y = today.getFullYear();
				var m = today.getMonth();
				var d = today.getDate();
				//当月月份
				var todayMonth = today.getMonth() + 1;
				if (todayMonth < 10) {
					todayMonth = "0" + todayMonth;
				}
				var sendDay = y + "-" + todayMonth + '-' + d;
				return sendDay;
			},
			calendar: function(e) {
				console.log(e)
				var now = e.toString();
				now = now.split('-');
				console.log(now);
				let today = new Date(now[0], (now[1] - 1), now[2]);
				// console.log(today, 'today')
				let y = today.getFullYear();
				let m = today.getMonth();
				let d = today.getDate();
				console.log(y, m, d, 'ymd')
				//当月月份
				let todayMonth = today.getMonth() + 1;
				let day = d;
				console.log(d)
				if (todayMonth < 10) {
					todayMonth = "0" + todayMonth;
				}
				if (day < 10) {
					d = "0" + day;
				}
				//当月第一天是星期几
				let week = new Date(y, m, 1).getDay();
				console.log(week)
				//当月最后一天
				let lastDay = new Date(y, m + 1, 0).getDate();
				console.log(lastDay)
				//渲染日历
				let days = [];
				for (let i = 0; i < week; i++) {
					let obj = {
						id: i,
						day: '',
						today: '',
						sign: false
					};
					days.push(obj);
				}
				let timeRange = this.timeRange;
				let timeLen = timeRange.length;
				for (let j = 0; j < lastDay; j++) {
					let k = j + 1;
					if (k < 10) {
						k = '0' + k
					}
					let idx = j + week;
					//渲染每天日期状态
					let theDay = y + "-" + todayMonth + '-' + k;
					let show = false;
					let starts = false;
					let ends = false;
					for (let m = 0; m < timeLen; m++) {
						if (timeRange[m] == theDay) {
							show = true;
							//渲染 起 和 止 标记
							if (m == 0) {
								starts = true;
							}
							if (m == (timeLen - 1)) {
								ends = true;
							}
						}
					}
					//渲染每天日期
					let cell = {
						id: idx,
						day: k,
						today: theDay,
						sign: show,
						start: starts,
						end: ends
					};
					days.push(cell);
				}
				let currentShow = y + "年" + todayMonth + "月";

				this.days = days,
					this.currentDate = e,
					this.currentShow = currentShow

			},
			//调出日历
			choice: function() {

				this.showCal = true

			},
			//关闭日历
			closeCal: function() {
				this.showCal = false
			},
			//上个月
			past: function() {
				let last = this.currentDate;
				last = last.split('-');
				let today = new Date(last[0], (last[1] - 1), last[2]);
				let y = today.getFullYear();
				//取出月份不加 1 ，就等于上个月实际月份
				let m = today.getMonth();
				let d = 1;
				//如果当前 m 等于 0 当月为一月份，变成上一年的12月
				if (m < 1) {
					y = y - 1;
					m = 12;
				}
				if (m < 10) {
					m = '0' + m;
				}
				let day = y + '-' + m + '-' + d;
				console.log(day, 'day')
				this.calendar(day);
			},
			//下个月
			future: function() {
				let next = this.currentDate;
				next = next.split('-');
				// let today = new Date(this.data.currentDate);
				let today = new Date(next[0], (next[1] - 1), next[2]);
				let y = today.getFullYear();
				//取出当前月
				let m = today.getMonth();
				let d = 1;
				//十二月份变成下一年的 1 月
				if (m > 10) {
					y = y + 1;
					m = 1;
				} else {
					m = m + 2;
				}
				if (m < 10) {
					m = '0' + m;
				}
				let day = y + '-' + m + '-' + d;
				this.calendar(day);
			},
			//选择日期范围
			select(e) {
				console.log(e)
				let that = this;
				let day = e;
				let taps = this.changeTap;
				let startRange = this.startRange;
				//初始化 startRange，进入页面第一次点击触发
				if (startRange == '') {
					startRange = day;
				}
				console.log(startRange)
				let list = [];
				let paramR = day;
				let paramS = day;
				let paramE = day;
				let timeShowS = '';
				let timeShowE = '';
				if (taps && day) {
					//截止时间动作,先比较两个时间
					let dateS = new Date(startRange);
					let dateE = new Date(day);
					console.log(dateS.getTime())
					console.log(dateE.getTime())
					if (dateS.getTime() == dateE.getTime()) {
						list = [day];
					} else if (dateS.getTime() > dateE.getTime()) {
						list = that.datesList(day, startRange);
						paramE = startRange;
					} else if (dateS.getTime() < dateE.getTime()) {
						list = that.datesList(startRange, day);
						paramS = startRange;
					}
					console.log(list)
					that.showCal = false
					timeShowS = paramS;
					timeShowE = paramE;
					let data = {
						" pay_time_between[0]": timeShowS,
						" pay_time_between[1]": timeShowE,
					}
					wx.showLoading({
						title: '加载中...',
					})
					var url = ''
					if (that.role == '技术管理员') {
						url = "order/profitDetail?area_id=" + that.areaId + '&merchant_id=' + that.merchantId
					} else {
						url = "order/profitDetail?area_id=" + that.areaID
					}
					app.request(url, data, 'GET').then(res => {
						wx.hideLoading();
						console.log(res);
						if (res.statusCode == 200) {
							console.log(res)
							that.list = res.data
						}
					})
				} else if (!taps && day) {
					//开始时间动作
					list = [day];
				}
				console.log(list)
				that.changeTap = !taps;
				that.startRange = paramR;
				that.timeRange = list;
				that.timeStart = paramS;
				that.timeEnd = paramE;
				that.timeShowS = timeShowS;
				that.timeShowE = timeShowE;
				that.calendar(day);
				//console.log(list)
			},
			//选择日期范围，1选择日期
			getDates: function(datestr) {
				var temp = datestr.split("-");
				var m = parseInt(temp[1]) - 1;
				var date = new Date(temp[0], m, temp[2]);
				return date;
			},
			//选择日期范围，2生成日期范围内所有的日期列表
			datesList: function(s, e) {
				// let that = this;
				let arys = [];
				let start = s;
				let end = e;
				let startTime = this.getDates(start);
				let endTime = this.getDates(end);
				while ((endTime.getTime() - startTime.getTime()) >= 0) {
					console.log(startTime.getDate() < 10)
					let year = startTime.getFullYear();
					let monthA = startTime.getMonth() + 1;
					let month = monthA.toString() < 10 ? '0' + monthA.toString() : monthA.toString();
					let d = startTime.getDate() < 10 ? '0' + startTime.getDate() : startTime.getDate();
					let ds = year + "-" + month + "-" + d;
					arys.push(ds)
					startTime.setDate(startTime.getDate() + 1);
				}
				console.log(arys)
				return arys;
			},
			getState: function() {
				uni.showLoading({
					title: '加载中...',
				})
				let that = this;
				let day = new Date();
				day.setTime(day.getTime());
				let today = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
				var day1 = new Date();
				day1.setTime(day1.getTime() + 24 * 60 * 60 * 1000);
				var tommorw = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();

				this.timeShowS = today,
					this.timeShowE = tommorw
				console.log(this.timeShowS)
				console.log(this.timeShowE)
				let data = {
					" pay_time_between[0]": this.timeShowS,
					" pay_time_between[1]": this.timeShowE,
				}
				console.log(this.areaId)
				console.log(this.merchantId)
				var url = ''
				if (that.role == '技术管理员') {
					url = "order/profitDetail?area_id=" + that.areaId + '&merchant_id=' + that.merchantId
				} else {
					url = "order/profitDetail?area_id=" + that.areaID
				}
				app.request(url, data, 'GET').then(res => {
					console.log(res)
					uni.hideLoading();
					if (res.statusCode == 200) {
						this.list = res.data
					}
				})
			},
		}
	}
</script>

<style>
	/* pages/statistics/statistics.wxss */
	@import url("/static/css/base.css");

	page {
		background: #f4f4f4;
	}

	.date {
		width: 90%;
		margin: 20rpx auto;
		background: #fff;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		position: relative;
	}

	.date text {
		font-size: 26rpx;
	}

	.dates {
		background: linear-gradient(-86deg, rgba(24, 213, 185, 1) 0%, rgba(89, 240, 202, 1) 100%);
		border-radius: 26rpx 0px 0px 26rpx;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		color: #fff;
		font-size: 26rpx;
		padding: 7rpx 20rpx;
	}

	.search {
		text-align: center;
	}

	.search text {
		font-size: 26rpx;
		color: #fff;
		background: #18d5b9;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.list {
		margin: 20rpx auto;
		width: 90%;
	}

	.income,
	.bike {
		border: 1rpx solid #efefef;
		font-size: 28rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 15rpx;
		background: #fff;
		position: relative;
	}

	.bike view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.income .title text {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}


	.flex {
		display: flex;
	}

	.flex text,
	.small text {
		/* width: 50%; */
		font-size: 26rpx;
		margin-bottom: 10rpx;
		color: #808080;
	}

	/* 日历 */

	.calendar {
		color: #666;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		margin: 0 auto;
		z-index: 9999;
		border: 2rpx solid #38acff;
		-webkit-box-shadow: 0 0 10rpx #38acff;
		-moz-box-shadow: 0 0 10rpx #38acff;
		box-shadow: 0 0 10rpx #38acff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.title {
		padding: 20rpx 0;
		align-items: center;
		justify-content: space-between;
	}

	.week {
		padding: 20rpx 0;
		border-radius: 20rpx 20rpx 0 0;
	}

	.weekday {
		margin-right: 1%;
		width: 13.28%;
		text-align: center;
	}

	.days {
		padding: 10rpx 0;
		flex-wrap: wrap;
	}

	.day {
		position: relative;
		margin: 0;
		padding: 0;
		height: 90rpx;
		width: 14.28%;
		text-align: center;
		border-radius: 10rpx;
		background: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle {
		margin: 0 auto;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 26rpx;
	}

	.sign {
		color: #fff;
		background: #18d5b9;
		border-radius: 50%;
	}

	.now {
		color: #fff;
		background: #708eff;
		border-radius: 50%;
	}

	.flex-box {
		display: flex;
	}

	.state {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		background: linear-gradient(163deg, rgba(24, 213, 185, 1) 0%, rgba(89, 240, 202, 1) 100%);
		box-shadow: 0px 0px 6rpx 0px rgba(24, 213, 185, 1);
		border-radius: 0px 2rpx 0px 20rpx;
		padding: 5rpx 30rpx;
		color: #fff;
	}

	.selected {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20upx !important;
	}

	.selected view {
		width: 45%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 80upx;
		border: 2upx solid #CCCCCC;
		font-size: 28rpx;
		background: #FFFFFF;
	}

	.selected view image {
		width: 30upx;
		height: 30upx;
	}

	.cover {
		position: fixed !important;
	}

	.circle {
		margin: 0 auto;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 26rpx;
	}

	.sign {
		color: #fff;
		background: #18d5b9;
		border-radius: 50%;
	}

	.now {
		color: #fff;
		background: #708eff;
		border-radius: 50%;
	}
</style>