jhlapp/pagesT/statement/CustomerOrderReport.vue

<template>
	<view>
		<view class="home">
			<view class="search-icon" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
			<view class="charts-box">
				<qiun-data-charts type="mix" :chartData="chartData" :echartsH5="true" :echartsApp="true"
					background="none" :animation="false" />
			</view>
		</view>
		<view class="top-view">
			<view class="thead">
				<view class="flex1 sort-li">客户</view>
				<view class="flex1 phone-li">登陆账号</view>
				<view class="flex1 staff-li">订单数</view>
				<view class="flex1 cutomer-li">订单金额</view>
			</view>
			<scroll-view class="cont-ul" scroll-y="true">
				<view class="flex" v-for="(item, index) in goods_list" :key="index">
					<view class="flex1 sort-li">{{ item.customerName }}</view>
					<view class="flex1 phone-li">{{ item.customerMobile }}</view>
					<view class="flex1 staff-li">{{ item.num }}</view>
					<view class="flex1 cutomer-li">{{ item.amount }}</view>
				</view>
				<u-loadmore :status="load_status" :load-text="loadText" @loadmore="loadmoreData" />
			</scroll-view>
		</view>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="下单日期">
							<view class="date-li">
								<picker mode="date" @change="bindDateStartChange">
									<text
										class="date-li">{{ search_data.start ? $u.timeFormat(search_data.start, 'yyyy-mm-dd') : '开始日期' }}</text>
								</picker>
							</view>
							<view class="date-line">-</view>
							<view class="date-li">
								<picker mode="date" @change="bindDateEndChange">
									<text
										class="date-li">{{ search_data.end ? $u.timeFormat(search_data.end, 'yyyy-mm-dd') : '结束日期' }}</text>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="订单状态">
							<view class="clearfix form-val" @click="openSel('month_show')">
								<text
									class="float_left ellipsis">{{ search_data.orderStatus_name ? search_data.orderStatus_name : '请选择' }}</text>
								<view class="float_right">
									<u-icon :name="!search_data.orderStatus ? 'arrow-right' : 'close-circle-fill'"
										size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
						<!-- <u-form-item label="商品分类">
							<view class="clearfix form-val" @click="openSel('cate_show')">
								<text
									class="float_left ellipsis">{{ search_data.category_name ? search_data.category_name : '请选择' }}</text>
								<view class="float_right">
									<u-icon :name="!search_data.categoryId ? 'arrow-right' : 'close-circle-fill'"
										size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item> -->
					</u-form>
				</view>
				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		<tki-tree style="z-index: 99;" ref="tkitree" :selectParent="true" :range="cate_list" rangeKey="title"
			@confirm="cateConfirm"></tki-tree>
		<u-select v-model="month_show" :list="tabs_list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				page: 1,
				pageSize: 10,
				total: 0,
				type: 1,
				chartData: {
					categories: [],
					series: []
				},
				goods_list: {},
				search_data: {
					start: '',
					end: '',
					category_name: '',
					categoryId: '',
					orderStatus: '',
					orderStatus_name: ''
				},
				search_show: false,
				month_show: false,
				tabs_list: [{
						label: '等待审核',
						value: 1
					},
					{
						label: '等待支付',
						value: 2
					},
					{
						label: '待发货',
						value: 3
					},
					{
						label: '待收货',
						value: 4
					},
					{
						label: '已完成',
						value: 5
					},
					{
						label: '已关闭',
						value: 6
					}
				],
				cate_list: [],
				load_status: 'nomore'
			};
		},
		onLoad() {
			this.customerOrder();
			this.getAllCategory();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.customerOrder();
		},
		methods: {
			loadmoreData() {
				if (this.total / this.pageSize > this.page) {
					this.page += 1;
					this.customerOrder();
				}
			},
			openSearch() {
				this.search_show = true;
			},
			customerOrder() {
				this.load_status = 'loading';
				this.$u.api
					.customerOrder({
						page: this.page,
						pageSize: this.pageSize,
						// categoryId: this.search_data.categoryId,
						startTime: this.search_data.start,
						endTime: this.search_data.end,
						type: this.type,
						orderStatus: this.search_data.orderStatus
					})
					.then(res => {
						uni.stopPullDownRefresh();
						if (this.page === 1) {
							this.goods_list = res.data;
						} else {
							this.goods_list = this.goods_list.concat(res.data);
						}
						this.total = res.pageTotal;
						this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
						const customerName = [];
						const numArr = [];
						const amount = [];
						this.$nextTick(() => {
							res.data.forEach(value => {
								customerName.push(value.customerName);
								numArr.push(Number(value.num));
								amount.push(Number(value.amount));
							});
							this.setChartData(customerName, numArr, amount);
						})
					});
			},
			setChartData(customerName, numArr, amount) {
				this.chartData = {
					categories: customerName,
					series: [{
							name: '订单数',
							data: numArr,
							// #ifdef APP-PLUS
							type: 'bar',
							// #endif
							// #ifdef MP-WEIXIN
							type: 'column',
							// #endif
							index: 1
						},
						{
							name: '订单金额',
							data: amount,
							type: 'line',
							style: 'curve',
							// #ifdef APP-PLUS
							yAxisIndex: 1,
							smooth: true,
							// #endif
							disableLegend: true
						}
					]
				};
			},
			bindDateStartChange(e) {
				this.search_data.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
			},
			bindDateEndChange(e) {
				this.search_data.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
			},
			cateConfirm(arr) {
				this.search_data.category_name = arr[0].title;
				this.search_data.categoryId = arr[0].id;
			},
			confirm(val) {
				this.search_data.orderStatus = val[0].value;
				this.search_data.orderStatus_name = val[0].label;
			},
			openSel(key) {
				if (key === 'cate_show') {
					this.$refs.tkitree._show();
					return;
				} else if (key === 'month_show') {
					this.month_show = true;
				}
			},
			//  获取所有商品分类
			getAllCategory() {
				this.$u.api
					.getAllCategory({
						enableStatus: 5
					})
					.then(res => {
						this.cate_list = res.data;
					});
			},
			clearValue() {
				this.search_data = {
					start: '',
					end: '',
					category_name: '',
					categoryId: '',
					orderStatus: '',
					orderStatus_name: ''
				};
				this.searchConfirm();
			},
			searchConfirm() {
				this.search_show = false;
				this.page = 1;
				this.customerOrder();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 730rpx;
		/* #ifdef MP-WEIXIN */
		height: 480rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 550rpx;
		/* #endif */
		margin: 0 auto;
	}

	.home {
		position: relative;
		/* #ifdef MP-WEIXIN */
		padding-top: 70rpx;

		/* #endif */
		.search-icon {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			z-index: 1;
		}
	}

	.top-view {
		width: 100%;
		z-index: 9;

		.thead {
			line-height: 60rpx;
			height: 60rpx;
			font-size: 24rpx;
			background-color: #f5f5f5;
			display: flex;
			width: 100%;
		}

		.search-view {
			width: 100%;
		}
	}

	.flex1 {
		display: table-cell;

		text-align: center;
		position: relative;
		height: 100%;
		vertical-align: middle;

		&.staff-li {
			width: 25%;
		}

		&.sort-li {
			width: 25%;
		}

		&.cutomer-li {
			width: 25%;
		}

		&.phone-li {
			width: 25%;
		}
	}

	.cont-ul {
		height: calc(100vh - 620rpx);
		background-color: #ffffff;

		.flex {
			height: 70rpx;
		}
	}

	.flex {
		display: table;
		width: 750rpx;

		font-size: 24rpx;
	}
</style>