jhlapp/pagesT/statement/CustomerMerchandiseReport.vue

<template>
	<view>
		<view class="home">
			<view class="content_top">
				<view class="search-icon" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
				<view class="view-subsection"><u-subsection active-color="#2979ff" @change="tabChange" :list="list" :current="tab_current"></u-subsection></view>
			</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 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.title }}</view>
					<view class="flex1 staff-li">{{ item.goodsNum }}</view>
					<view class="flex1 cutomer-li">{{ item.goodsAmount }}</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('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>
	</view>
</template>

<script>
import tkiTree from '@/components/tki-tree/tki-tree.vue';
export default {
	components: {
		tkiTree
	},
	data() {
		return {
			loadText: {
				loadmore: '点击加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			list: [
				{
					name: '客户'
				},
				{
					name: '客户类型'
				}
			],
			tab_current: 0,
			page: 1,
			pageSize: 10,
			total: 0,
			type: 1,
			chartData: {
				categories: [],
				series: []
			},
			goods_list: {},
			search_data: {
				start: '',
				end: '',
				category_name: '',
				categoryId: ''
			},
			search_show: false,
			cate_list: [],
			load_status: 'nomore'
		};
	},
	onLoad() {
		this.customerGoods();
		this.getAllCategory();
	},
	
	onPullDownRefresh() {
		this.page = 1;
		this.customerGoods();
	},
	methods: {
		loadmoreData() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.customerGoods();
			}
		},
		openSearch() {
			this.search_show = true;
		},
		tabChange(index) {
			this.search_data = {
				start: '',
				end: '',
				category_name: '',
				categoryId: ''
			};
			this.tab_current = index;
			this.type = index + 1;
			this.page = 1;
			this.customerGoods();
		},
		customerGoods() {
			this.load_status = 'loading';
			this.$u.api
				.customerGoods({
					page: this.page,
					pageSize: this.pageSize,
					categoryId: this.search_data.categoryId,
					startTime: this.search_data.start,
					endTime: this.search_data.end,
					type: this.type
				})
				.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 goodsName = [];
					const goodsNum = [];
					const goodsMoney = [];
					this.$nextTick(()=>{
						res.data.forEach(value => {
							goodsName.push(value.title);
							goodsNum.push(Number(value.goodsNum));
							goodsMoney.push(Number(value.goodsAmount));
						});
						this.setChartData(goodsName, goodsNum, goodsMoney);
					})
				});
		},
		setChartData(goodsName, goodsNum, goodsMoney) {
			this.chartData = {
				categories: goodsName,
				series: [
					{
						name: '商品数量',
						data: goodsNum,
						// #ifdef APP-PLUS
						type: 'bar',
						// #endif
						// #ifdef MP-WEIXIN
						type: 'column',
						// #endif
						index: 1
					},
					{
						name: '商品金额',
						data: goodsMoney,
						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');
		},
		openSel(key) {
			if (key === 'cate_show') {
				this.$refs.tkitree._show();
				return;
			}
		},
		//  获取所有商品分类
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					enableStatus: 5
				})
				.then(res => {
					this.cate_list = res.data;
				});
		},
		clearValue() {
			this.search_data = {
				start: '',
				end: '',
				category_name: '',
				categoryId: ''
			};
			this.searchConfirm();
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.customerGoods();
		},
		cateConfirm(arr) {
			this.search_data.category_name = arr[0].title;
			this.search_data.categoryId = arr[0].id;
		}
	}
};
</script>

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

.home {
	position: relative;
	/* #ifdef MP-WEIXIN */
	padding-top: 100rpx;
	/* #endif */
	.content_top {
		position: absolute;
		width: 100%;
		z-index: 1;
		left: 0;
		top: 20rpx;
		.view-subsection {
			width: 300rpx;
			margin: 0 auto;
		}
		.search-icon {
			position: absolute;
			right: 20rpx;
			width: 80rpx;
			top: 16rpx;
			text-align: center;
		}
	}
}

.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: 33%;
	}

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

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

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

	.flex {
		height: 70rpx;
	}
}

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

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