xusfood_h5/center/client.vue

<template>
	<view class="pages">
		<u-navbar
			title="我的会员"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<view class="client">
				<img class="ico" src="../static/img/client-ico.png" alt="">
				<view class="left-text">
					<view class="title">会员总人数</view>
					<view class="con">Total number of members</view>
				</view>
				<view class="number-wrap">
					<text class="number">{{totalCount}}</text> 人
				</view>
			</view>
			<view class="statistics">
				<view class="title">会员统计</view>
				<view class="charts-box" v-if="totalCount>0">
				    <qiun-data-charts 
				      type="column"
				      :opts="opts"
				      :chartData="chartData"
				    />
				</view>
				<view v-else style="text-align: center;margin-top: 20px;">
					暂无会员
				</view>
			</view>
		</view>
	</view>
</template>
<!-- https://www.ucharts.cn/v2/#/document/index -->
<script>
	export default {
		data() {
			return {
				totalCount:0,
				chartData: {},
				opts: {
				        color: ["#FBBD4E","#FDE37F"],
				        padding: [15,15,0,5],
				        enableScroll: false,
				        legend: {
							show:false
						},
				        xAxis: {
				          disableGrid: true
				        },
				        yAxis: {
							gridType:'dash',
				          data: [
				            {
				              min: 0
				            }
				          ]
				        },
				        extra: {
				          column: {
				            type: "meter",
				            width: 30,
				            activeBgColor: "#000000",
				            activeBgOpacity: 0.02,
							// barBorderCircle: true,
							barBorderRadius:[16,16,16,16],
							meterFillColor:"#eeeeee",
							meterBorder:0,
							linearType: "custom"
				          },
						  tooltip:{
							  showBox:true
						  }
				        }
				      }
				
			}
		},
		onShow() {
			this.getMemberSta();
		},
		onLoad() {

		},
		methods: {
			getMemberSta(){
				let chartData = {
					categories: [],
					series: [
					  {
						name: "目标数量",
						data: [],
					  },
					  {
						name: "会员数量",
						data: []
					  }
					]
				};
				this.$u.api.memberSta().then(res=>{
					console.log('res',res.data);
					this.totalCount = res.data.totalCount;
					chartData.categories = res.data.levelStaList.map((item)=>{
						return item.name
					});
					// 会员数量
					chartData.series[1].data = res.data.levelStaList.map((item)=>{
						return item.count
					});
					// 填充目标值
					// const maxNumber = Math.max(...chartData.series[1].data);
					// for (let i=0;i<res.data.levelStaList.length;i++) {
					// 	chartData.series[0].data.push(maxNumber+10)
					// }
					this.chartData = JSON.parse(JSON.stringify(chartData));
				}).catch(err=>{
					console.log('memberSta',err);
				})
			}

		}
	}
</script>
<style>
page{
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.client{
	margin-top: 40rpx;
	margin-bottom: 58rpx;
	height: 260rpx;
	background: url(../static/img/client-bg.png) no-repeat;
	background-size: 100%;
	position: relative;
	.ico{
		position: absolute;
		width: 93rpx;
		height: 93rpx;
		left: 30rpx;
		top: -40rpx;
	}
	.left-text{
		margin-left: 30rpx;
		padding-top: 63rpx;
		.title{
			font-size: 26rpx;
			font-weight: 600;
			color: rgba(255,255,255,0.99);
			line-height: 37rpx;
			margin-bottom: 10rpx;
		}
		.con{
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.99);
			line-height: 28rpx;
			text-transform: uppercase;
			width: 185rpx;
			opacity: 30%;
		}
	}
	.number-wrap{
		position:absolute;
		right: 30rpx;
		bottom: 42rpx;
		color: #fff;
		font-size: 20rpx;
		.number{
			font-size: 70rpx;
			font-family: AlibabaPuHuiTi_2_115_Black;
			color: rgba(255,255,255,0.99);
			margin-right: 10rpx;
		}
	}
}
.statistics{
	.title{
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(51,51,51,0.99);
		line-height: 45rpx;
		margin-bottom: 20rpx;
	}
	.charts-box {
		width: 100%;
		height: 300px;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 50rpx 0;
	}
}
</style>