shicai/pages/commission/order.vue

<template>
	<view class="content">
		<!-- <view class="navbar coupon">
			<view class="nav-item grenn" v-if="tabCurrentIndex == 0">
				一级总业绩：
				<text>{{ one_price }}</text>
			</view>
			<view class="nav-item black" v-if="tabCurrentIndex == 1">
				二级总业绩：
				<text>{{ two_price }}</text>
			</view>
		</view> -->
		<!-- <view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}:{{item.number}}人</view>
		</view> -->
		<view class="order">
			<view class="mony"><text style="font-size: 36rpx;">￥</text>{{ total_pay_price || '0' }}</view>
			<view class="total">总金额</view>
			<view class="top-box">
				<view class="box">
					<view class="box-1">订单总数</view>
					<view class="box-2">{{ nums || '0' }}</view>
				</view>
				<view class="box">
					<view class="box-1">下级订单数</view>
					<view class="box-2">{{one_num || '0'}}</view>
				</view>
				<!-- <view class="box">
					<view class="box-1">二级订单数</view>
					<view class="box-2">{{two_num || '0'}}</view>
				</view> -->
			</view>
			<view class="top-box">
				<view class="box">
					<view class="box-1">返佣总额</view>
					<view class="box-2"><text class="sym">￥</text>{{return_num || '0'}}</view>
				</view>
				<view class="box">
					<view class="box-1">下级总金额</view>
					<view class="box-2"><text class="sym">￥</text>{{one_price || '0'}}</view>
				</view>
				<!-- <view class="box">
					<view class="box-1">二级总金额</view>
					<view class="box-2"><text class="sym">￥</text>{{two_price || '0'}}</view>
				</view> -->
			</view>
		</view>
		<!-- 下拉框 -->
		<view class="down-box flex">
			<!-- <picker @change="timeChange" style="flex: 1;" :range="timelist">
				<view class="check">
					{{timelist[timevalue] || '时间'}}
					<view class="triangle"></view>
				</view>
			</picker> -->
			<view class="date-box">
				<view class="date-frame">
					<view class="date-list">
						<view class="date-list-cell">
							<view class="date-list-cell-db">
								<picker mode="date" :value="startDate" start="2001-01" fields="month" @change="bindDateChange1">
									<view class="uni-input">{{startDate}}</view>
								</picker>
							</view>
						</view>
					</view>
					--
					<view class="date-list">
						<view class="date-list-cell">
							<view class="date-list-cell-db">
								<picker mode="date" :value="endDate" start="2001-01" fields="month" @change="bindDateChange2">
									<view class="uni-input">{{endDate}}</view>	
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
			<picker @change="typeChange" style="flex: 1;" :range="typelist">
				<view class="check">
					{{typelist[typevalue] || '订单类型'}}
					<view class="triangle"></view>
				</view>
			</picker>
		</view>
		<swiper :style="{ height: maxheight + 'px' }" class="swiper-box">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- 订单列表 -->
					<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
						<view class="order-tpl">
							<view class="time">{{ item.time }}</view>
							<view class="count">本月累计推广订单：{{ item.count }}单</view>
						</view>
						<view v-for="ls in item.child" class="title-list">
							<view class="title-box">
								<view class="flex">
									<view class="order_id">订单编号：{{ ls.order_id }}</view>
									<!-- 0：待发货；1：待收货；2：已收货；3：待评价 -->
									<!-- {{ ls.status == 0 ? '待付款' : ls.status == 1 ? '待发货' : ls.status == 2 ? '待收货' : ls.status == 3 ? '待评价' : ls.status == 4 ? '已完成' :'退款' }} -->
									<view class="status" v-if="ls.refund_status == 0">
										<view v-if="ls.paid == 1">{{ls.status == 0 ? '待发货' : ls.status == 1 ? '待收货' : ls.status == 2 ? '已收货' : '待评价'}}</view>
										<view v-else>未支付</view>
									</view>
									<view class="status" v-else>{{ls.refund_status == 1 ? '退款中' :'退款成功'}}</view>
								</view>
								<view class="flex_item order-list">
									<view class="title-avatar">
										<image :src="ls.avatar"></image>
									</view>
									<view class="order-info">
										<view class="flex">
											<view class="nickname">{{ ls.nickname }}</view>
											<view class="number">
												返佣：
												<text>{{ ls.number }}</text>
											</view>
										</view>
										<view class="flex">
											<view>{{ ls.time }}</view>
											<view>订单金额：{{ ls.pay_price }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { order, orderCount } from '@/api/team.js';
	import { mapState, mapMutations } from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import { getTime } from '@/utils/rocessor.js';
	// 获取当前时间的秒数
	const time = Math.floor(new Date().getTime() / 1000);
	export default {
		components: {
			empty,
			uniLoadMore
		},
		filters: {
			lastTime: function(value) {
				const day = Math.floor((time - value) / 60 / 60 / 24);
				return day == 0 ? '今天登陆' : day + '天前登陆';
			}
		},
		onReady() {
			// 初始化获取页面宽度
			uni.createSelectorQuery()
				.select('.content')
				.fields({
						size: true
					},
					data => {
						console.log(data);
						// 保存头部高度
						this.maxheight = data.height - Math.floor((data.width / 750) * 480);
						console.log(this.maxheight);
					}
				)
				.exec();
		},
		data() {
			return {
				// 头部图高度
				maxheight: '',
				tabCurrentIndex: 0,
				navList: [{
					state: 0,
					text: '一级',
					loadingType: 'more',
					orderList: [],
					number: 0,
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}],
				all: '',
				list: '',
				total: '',
				totalLevel: '',
				img: 'http://kaifa.crmeb.net/uploads/attach/2019/08/20190807/723adbdd4e49a0f9394dfc700ab5dba3.png',
				total_pay_price: '',	// 总金额
				one_price: '', // 一级总金额
				two_price: '', // 二级总金额
				one_num: '',	//  一级订单总数
				two_num: '',	//  二级订单总数
				nums: '',	// 订单总数
				return_num: '',	// 返佣总额
				timelist: ['全部', '今天', '昨天', '最近7天', '最近30天', '本月', '本年'],
				typelist: ['全部', '下级订单'],
				timevalue: '',
				typevalue: '',
				type: '',	// 订单类型
				dateDay: [],	// 传的时间参数
				startDate: '开始时间',
				endDate: '结束时间',
				start: '',
				end: '',
				val1: '',
				val2: '',
				timedata: '',
			};
		},
		onLoad(options) {
			this.loadData();
			// 推广订单数据
			orderCount({}).then(({data}) => {
				// 总金额
				this.total_pay_price = data[0].count;
				// 订单总数
				this.nums = data[1].count;
				// 返佣总金额
				this.return_num = data[2].count;
				// 一级总金额
				this.one_price = data[3].count;
				// 一级订单数
				this.one_num = data[4].count;
				// 二级总金额
				this.two_price = data[5].count;
				// 二级订单数
				this.two_num = data[6].count;
			})
		},
		onShow() {
			
		},
		methods: {
			//选择开始时间
			bindDateChange1: function(e) {
				console.log(11)
				let obj = this;
				let val = e.detail.value;
				obj.val1 = e.detail.value;
				// var reg = /-/g;
				obj.startDate = e.detail.value;
				console.log(obj.startDate,965)
				var formatDate1 = new Date(obj.val1);
				var formatDate2 = new Date(obj.timedata);
				console.log(obj.val1, obj.timedata, '开始时间不得大于现在时间');
				console.log(formatDate1, formatDate2, '开始时间不得大于现在时间');
				if (formatDate1 > formatDate2) {
					console.log(11);
					uni.showToast({
						title: '开始时间不得大于现在时间',
						duration: 2000,
						position: 'top',
						icon: 'none'
					});
				} else {
					console.log(22);
				}
			},
			//选择结束时间
			bindDateChange2: function(e) {
				console.log(11)
				let obj = this;
				if (obj.val1 == '') {
					uni.showToast({
						title: '请先选择开始时间',
						duration: 2000,
						position: 'top',
						icon: 'none'
					});
				} else {
					let val = e.detail.value;
					obj.val2 = e.detail.value;
					// var reg = /-/g;
					// obj.endDate = val.replace(reg, '\/');
					 obj.endDate = e.detail.value
					console.log(obj.endDate, 22);
					var formatDate1 = new Date(obj.val1);
					var formatDate2 = new Date(obj.timedata);
					var formatDate3 = new Date(obj.val2);
					console.log(obj.val1, obj.val2, obj.timedata, '123');
					console.log(formatDate1, formatDate3, formatDate2, '456');
					
					let arr = []
					arr[0] = this.startDate;
					arr[1] = this.endDate;
					this.dateDay = arr.join(';')
					console.log(this.dateDay,664853)
					if (formatDate1 > formatDate2) {
						uni.showToast({
							title: '开始时间不得大于现在时间',
							duration: 2000,
							position: 'top',
							icon: 'none'
						});
					} else {
						if (formatDate3 < formatDate1) {
							// console.log(111)
							uni.showToast({
								title: '结束时间要大于开始时间',
								duration: 2000,
								position: 'top',
								icon: 'none'
							});
						}
						if (formatDate3 > formatDate2) {
							uni.showToast({
								title: '结束时间不得大于现在时间',
								duration: 2000,
								position: 'top',
								icon: 'none'
							});
						} else {
							let index = this.tabCurrentIndex;
							let navItem = this.navList[index];
							navItem.orderList = [];
							navItem.loadingType = 'more'
							this.loadData()
						}
					}
				}
			},
			//获取日期
			getDate() {
				let date = new Date();
				let dateYear = date.getFullYear(); //获取年
				let dateMonth = date.getMonth() + 1; //获取月
				let dateDate = date.getDate(); //获取当日
				this.timedata = dateYear + '-' + dateMonth + '-' + dateDate;
			},
			//类型选择
			typeChange(e) {
				// console.log(e)
				this.typevalue = e.detail.value;
				this.type = e.detail.value;
				if (this.type == 0) {
					this.type = ''
				}
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				navItem.orderList = [];
				navItem.loadingType = 'more'
				this.loadData()
			},
			// 页面跳转
			navto(e) {
				uni.navigateTo({
					url: e
				});
			},
			//获取收入支出信息
			async loadData(source) {
				let obj = this;
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				// if (source === 'tabChange' && navItem.loaded === true) {
				// 	//tab切换只有第一次需要加载数据
				// 	return;
				// }
				// if (navItem.loadingType === 'loading') {
				// 	//防止重复加载
				// 	return;
				// }
				if (navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				// navItem.loadingType = 'loading';
				
				order({
						date: obj.dateDay,
						orderType: obj.type,
					})
					.then(({
						data
					}) => {
						// let arr = data.list.map(e => {
						// 	e.lastTimeString = getTime(e.lastTime);
						// 	return e;
						// });
						let arr = data.list;
						navItem.orderList = navItem.orderList.concat(data.list);
						console.log(navItem.orderList, 'navItem.orderList');
						navItem.loadingType = 'noMore';
						// if (navItem.limit == data.length) {
						// 	//判断是否还有数据， 有改为 more， 没有改为noMore
						// 	navItem.loadingType = 'more';
						// 	return;
						// } else {
						// 	//判断是否还有数据， 有改为 more， 没有改为noMore
						// 	navItem.loadingType = 'noMore';
						// }
						// this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
		height: 100%;
	}

	.content-money {
		padding-bottom: 30rpx;
		background: $page-color-base;

		.buttom-box {
			background-color: #ffffff;
			text-align: center;
			margin: 0 30rpx;
			padding: 30rpx 0;
			border-radius: $border-radius-sm;
			margin-top: -60rpx;

			.buttom {
				font-size: $font-lg;
				flex-grow: 1;

				.money {
					font-weight: bold;
					font-size: 32rpx;
					color: #db1935;
				}
			}

			.text {
				color: #666666;
			}

			.interval {
				width: 2rpx;
				height: 60rpx;
				background-color: #eeeeee;
			}

			.icon {
				height: 50rpx;
				width: 48rpx;
				margin: 0 auto;

				.icon-img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.money-box {
		background: #bc253a;
		height: 320rpx;
		color: #ffffff;
		text-align: center;
		font-size: 35rpx;
		padding-top: 60rpx;

		.money_img {
			width: 100%;
			height: 120rpx;
			text-align: center;
			padding-top: 50rpx;
			padding-bottom: 135rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border: 4rpx solid #fd5f6f;
				border-radius: 50%;
			}
		}

		.money_name {
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			padding-bottom: 25rpx;
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $font-color;
				background-color: #dcdfe6;
				// color: #FC2A3F;
				// &:after {
				// 	content: '';
				// 	position: absolute;
				// 	left: 50%;
				// 	bottom: 0;
				// 	transform: translateX(-50%);
				// 	width: 44px;
				// 	height: 0;
				// 	border-bottom: 2px solid #FC2A3F;
				// }
			}
		}

		.grenn {
			background: #2fbd5b;
		}

		.black {
			background: #434343;
		}

		.grenn,
		.black {
			color: #ffffff;
			text-align: left;
		}
	}

	// 列表
	.order {
		background-color: $base-color;
		text-align: center;
		padding: 48rpx 25rpx;
		height: 400rpx;
		color: #ffffff;

		.mony {
			font-size: 45rpx;
			font-weight: bold;
			// margin-bottom: 20rpx;
			line-height: 1;
		}

		.total {
			font-size: 30rpx;
			font-weight: 500;
		}

		.top-box {
			display: flex;
			justify-content: space-around;
			margin-top: 28rpx;
			.box {
				width: 25%;
				.box-1 {
					font-size: 30rpx;
					margin-bottom: 10rpx;
					font-weight: 500;
				}
				.box-2 {
					font-size: 36rpx;
					font-weight: bold;
					line-height: 1;
				}
			}
		}
		.sym {
			font-size: 30rpx;
		}
	}

	.down-box {
		width: 750rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		
		.date-box {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			.date-frame {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}
		}
		
		.check {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);

			.triangle {
				margin-left: 10rpx;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 10rpx;
				margin-top: 14rpx;
				border-color: #333333 transparent transparent transparent;
			}
		}
	}

	.swiper-box {
		font-size: 28rpx;

		.order-item {
			line-height: 1.5;

			.order-tpl {
				padding: 25rpx 0rpx;
				padding-bottom: 15rpx !important;

				.count {
					color: #999999;
				}
			}

			.title-list {
				background-color: #ffffff;
				width: 100%;
				padding: 20rpx 30rpx;
				margin-top: 15rpx;

				.title-box {
					.order_id {
						color: #999999;
						padding-bottom: 15rpx;
					}

					.status {
						color: #F9273F;
					}

					.order-list {
						.title-avatar {
							width: 100rpx;
							height: 100rpx;
							margin-right: 25rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 100%;
							}
						}

						.order-info {
							color: #999999;
							width: 80%;
							padding-left: 25rpx;

							.nickname {
								font-size: 32rpx;
								color: #333333;
								padding-bottom: 15rpx;
								width: 50%;
							}

							.number {
								text {
									color: #fa2740;
								}
							}
						}
					}
				}
			}

			.money {
				color: #db1935;
				font-size: $font-lg;
			}
		}
	}

	.list-scroll-content {
		height: 100%;
		padding: 0rpx 25rpx;
	}

	.content {
		height: 100%;

		.empty-content {
			background-color: #ffffff;
		}
	}
</style>