jhlapp/pagesT/statement/RegionalOrderReport.vue

<template>
	<view>
		<view class="home">
			<view class="content">
				<view class="content_main">
					<view class="charts-box">
						<view
							style="line-height: 50rpx;width: 50rpx;text-align: center;color: #666666;margin-left: 20rpx;position: absolute; top: 30rpx;right: 30rpx;z-index: 1;"
							@click="openSearch"
						>
							<text class="custom-icon custom-icon-shaixuan"></text>
						</view>
						<qiun-data-charts type="pie" :chartData="chartData" background="none" :animation="false" />
					</view>
				</view>
			</view>
		</view>
		<view class="top-view">
			<view class="thead">
				<view class="flex1 sort-li">地区</view>
				<view class="flex1 staff-li">客户数</view>
				<view class="flex1 cutomer-li">订单数</view>
				<view class="flex1 phone-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.title }}</view>
					<view class="flex1 staff-li">{{ item.dealCustomerNum }}</view>
					<view class="flex1 cutomer-li">{{ item.num }}</view>
					<view class="flex1 phone-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="month_show = true">
								<text class="float_left ellipsis">{{ search_data.provinceCode_name ? search_data.provinceCode_name : '请选择' }}</text>
								<view class="float_right"><u-icon :name="!search_data.provinceCode ? '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>
		<u-select v-model="month_show" :list="tabs_list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import area from '@/components/region/area.json';
export default {
	data() {
		return {
			loadText: {
				loadmore: '点击加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			chartData: {
				categories: [],
				series: []
			},
			page: 1,
			pageSize: 10,
			total: 0,
			goods_list: {},
			load_status: 'nomore',
			search_show: false,
			search_data: {
				start: '',
				end: '',
				provinceCode: '',
				provinceCode_name: ''
			},
			month_show: false,
			tabs_list: area
		};
	},
	onLoad() {
		this.areaOrder();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.areaOrder();
	},
	methods: {
		loadmoreData() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.areaOrder();
			}
		},
		openSearch() {
			this.search_show = true;
		},
		areaOrder() {
			this.load_status = 'loading';
			this.$u.api
				.areaOrder({
					page: this.page,
					pageSize: this.pageSize,
					startTime: this.search_data.start,
					endTime: this.search_data.end,
					provinceCode: this.search_data.provinceCode
				})
				.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);
					let arr = [];
					this.$nextTick(() => {
						res.data.forEach(v => {
							arr.push({
								name: v.title,
								value: Number(v.amount)
							});
						});
						this.setChartData(arr);
					});
				});
		},
		setChartData(arr) {
			this.chartData = {
				series: [
					{
						data: arr
					}
				]
			};
		},
		confirm(val) {
			this.search_data.provinceCode_name = val[0].label;
			this.search_data.provinceCode = val[0].value;
		},
		clearValue() {
			this.search_data = {
				start: '',
				end: '',
				provinceCode: '',
				provinceCode_name: ''
			};
			this.searchConfirm();
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.areaOrder();
		},
		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');
		}
	}
};
</script>

<style lang="scss" scoped>
.charts-box {
	width: 750rpx;
	height: 450rpx;
}

.home {
	font-family: DINPro-Regular;

	.content {
		.content_main {
			margin: 0 auto;
			width: 100%;
			border-radius: 12rpx;
			overflow: hidden;

			.content_top {
				background: linear-gradient(270deg, #fcfdff 0%, #e2ebff 100%);
				line-height: 40rpx;
				height: 80rpx;
				line-height: 80rpx;

				overflow: hidden;

				.title-text {
					font-size: 32rpx;
					font-weight: 600;
					color: #2d405e;
					vertical-align: middle;
				}

				.tabs-ul {
					color: #2b85e4;
					border: 1px solid rgba($color: #2b85e4, $alpha: 0.7);
					display: flex;
					width: 360rpx;
					height: 50rpx;
					line-height: 50rpx;

					border-radius: 10rpx;

					.tabs-li {
						flex: 2;
						text-align: center;
					}

					.tabs-on {
						background-color: #2b85e4;
						color: #fff;
					}
				}
			}
		}
	}
}

.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 - 520rpx);
	background-color: #ffffff;

	.flex {
		height: 70rpx;
	}
}

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

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