store/pagesA/pages/user-manage/user-manage.vue

<template>
	<view class="user">
		<view class="search_box flexB">
			<view class="search_inp flexB">
				<text class="iconfont iconsearch"></text>
				<input placeholder="请输入订单号" placeholder-style="color:#fff;font-size:28rpx;"
					v-model="params.search_name" />
				<text class="iconfont icondelete" @click="clear()"></text>
			</view>
			<view class="search_btn" @click="params.page_index==1,getList()">查询</view>
		</view>
		<view class="block"></view>
		<view class="tabs flexA" v-if="!params.search_name">
			<view @click="dateTab('yesterday')" :class="params.cycle == 'yesterday' ? 'active_tab' : ''">昨日</view>
			<view @click="dateTab('today')" :class="params.cycle == 'today' ? 'active_tab' : ''">今日</view>
			<view @click="dateTab('week')" :class="params.cycle == 'week' ? 'active_tab' : ''">本周</view>
			<view @click="dateTab('month')" :class="params.cycle == 'month' ? 'active_tab' : ''">本月</view>
			<view @click="dateTab('all')" :class="params.cycle == 'all' ? 'active_tab' : ''">全部</view>
		</view>
		<view class="user_data" v-if="!params.search_name">
			<view class="flexA">
				<view class="data_item">
					<view>{{userData.total||0}}</view>
					<text>销量</text>
				</view>
				<view class="data_item">
					<view>¥{{userData.account||0}}</view>
					<text>销售额</text>
				</view>
				<view class="data_item">
					<view>{{ userData.count||0 }}</view>
					<text>已购客户</text>
				</view>
			</view>
			<view class="cap_chart">
				<area-chart :chartData="chartData" />
			</view>

		</view>
		<view class="block"></view>
		<view class="user_con">
			<view class="flexB user_title">
				<text>头像</text>
				<text>昵称</text>
				<text>购买量</text>
				<text>成交额</text>
			</view>
			<view class="user_list" v-for="(item,idx) in userList" :key="idx">
				<view class="flexA user_info">
					<view>
						<image :src="item.user.avatar" class="avatar" v-if="item.user"></image>
					</view>
					<view style="white-space: nowrap;" v-if="item.user">{{ item.user.nickname | getName(10) }}</view>
					<view style="font-weight: bold;">{{ item.total }}</view>
					<view v-if="item.account" style="font-weight: bold;">¥{{ parseInt(item.account) }}</view>
				</view>
				<view class="user_opear flexS">
					<view @click="skipOrder(item)">订单详情</view>
					<view @click="skipUser(item.user_id)">客户信息</view>
				</view>
			</view>
			<view class="noData" v-if="userList.length==0">
				<image src="/static/imgs/default/no_card.png" mode=""></image>
				<view>--暂无数据--</view>
			</view>
		</view>
	</view>
</template>

<script>
	import areaChart from '../../components/charts/area-chart.vue';
	import {
		getUserData,
		getUserList
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				userData: '', //用户数据信息
				userList: '', //用户列表
				searchName: '',
				params: {
					cycle: 'all',
					page_index: 1,
					page_size: 5,
					search_name: ''
				},
				chartData: {}, //曲线图数据
				totalPage: 0
			};
		},
		components: {
			areaChart
		},
		onShow() {
			this.getData();
			this.getList();
		},
		onReachBottom() {
			this.getMoreList();
		},
		methods: {
			//清空输入框
			clear() {
				this.params.search_name = '';
				this.getData();
				this.getList();

			},
			//切换销售数据中的
			dateTab(cycle) {
				this.params.cycle = cycle;
				this.params.page_index = 1;
				this.getData();
				this.getList();
			},
			//跳转到完善用户信息
			skipUser(user_id) {
				uni.navigateTo({
					url: '../../../pages/complete-info/complete-info?user_id=' + user_id
				});
			},
			/*跳转到用户订单*/
			skipOrder(item) {
				uni.navigateTo({
					url: `../../../pages/order-manage/order-manage?user_id=${item.user_id}&&nickname=${item.user.nickname}`
				});
			},
			//获取用户总数据及曲线图
			async getData() {
				// this.chartData = '';
				const res = await getUserData({
					cycle: this.params.cycle
				});
				try {
					const {
						code,
						data
					} = res;
					if (code === 200) {
						this.userData = data;
						let line = data.line;
						let x = [];
						let y = [];
						for (let k in line) {
							y.push(line[k])
							if (this.params.cycle != 'all') {
								let index = k.indexOf('\-');
								k = k.substring(index + 1, k.length);
							}
							x.push(k)
						}
						this.chartData = {
							categories: x,
							series: [{
								name: '数量',
								data: y
							}]
						};
					} else {
						uni.showModal({
							content: data || '获取数据失败',
							showCancel: false
						})
					}
				} catch (e) {
					uni.showModal({
						content: e || '获取数据失败',
						showCancel: false
					})
				}
			},
			//获取用户列表
			async getList(isMore) {
				uni.showLoading({
					title: '加载中...'
				})
				const res = await getUserList(this.params);
				try {
					const {
						code,
						data
					} = res;
					if (code === 200) {
						this.totalPage = Math.ceil(data.total / this.params.page_size)
						this.userList = isMore ? this.userList.concat(data.list) : data.list;
					} else {
						uni.showModal({
							content: data || '获取数据失败',
							showCancel: false
						})
					}
					uni.hideLoading()
				} catch (e) {
					uni.showModal({
						content: e || '获取数据失败',
						showCancel: false
					})
					uni.hideLoading()
				}
			},
			/*获取更多扫码用户*/
			getMoreList() {
				if (this.params.page_index >= this.totalPage) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getList(true)
			}
		}
	};
</script>
<!-- <style>
	page {
		width: 100%;
		min-height: 100%;
		background: #F9F9FB;
	}
</style> -->
<style lang="scss">
	.cap_chart {
		height: 300px;
		margin-top: 30rpx;
		width: 100%;
		overflow: hidden;
		z-index: 99
	}

	.user {
		padding-bottom: 100rpx;

		.search_box {
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			padding: 5rpx 0;

			.search_inp {
				margin: 0 auto;
				border: 2rpx solid #ccc;
				height: 80rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 44rpx;

				input {
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
				}

				.iconfont {
					color: #999;
					font-size: 40rpx;
				}
			}
		}

		.tabs {
			padding: 0 30rpx;
			margin: 30rpx 0;
			box-sizing: border-box;

			.active_tab {
				background: linear-gradient(95deg, #ff232c 0%, #ff571b 100%);
				color: #fff;
				border: none;
			}

			view {
				width: 120rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 32rpx;
				border: 2rpx solid #999999;
				color: #999;
			}
		}

		.user_data {
			padding: 15rpx 0;

			.data_item {
				text-align: center;

				view {
					font-size: 60rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 28rpx;
					color: #999;
				}
			}
		}

		.user_con {
			width: 100%;

			.user_title {
				width: 100%;
				height: 88rpx;
				border-bottom: 2rpx solid #eee;
				font-size: 32rpx;

				text {
					width: 25%;
					text-align: center;
				}
			}

			.user_list {
				.user_info {
					width: 100%;
					height: 100rpx;
					background: #fff;

					view {
						width: 25%;
						text-align: center;
						font-size: 32rpx;

						.avatar {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
						}
					}
				}

				.user_opear {
					width: 100%;
					height: 68rpx;
					background: #f8f8f8;

					view {
						width: 50%;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						color: $base-color;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>