spark-sale/pages/report/index.vue

<template>
	<view class="content">
		<view class="first-content">
			<view><text style="font-size: 44rpx;font-weight: bold;">客户跟进</text></view>
			<view class="content-box">
				<view class="content-info">
					<view class="info-num">{{ info.estranged }}</view>
					<view class="info-introduce">久未跟进</view>
					<view class="info-text">长时间未跟进的客户</view>
				</view>
				<view class="content-info">
					<view class="info-num">{{ info.beAboutToExpire }}</view>
					<view class="info-introduce">即将到期</view>
					<view class="info-text">会员卡即将过期的会员</view>
				</view>
				<view class="content-info">
					<view class="info-num">{{ info.birthdayRemind }}</view>
					<view class="info-introduce">生日提醒</view>
					<view class="info-text">即将过生日的会员</view>
				</view>
				<view class="content-info">
					<view class="info-num">{{ info.oneWeekAppointment }}</view>
					<view class="info-introduce">预约记录</view>
					<view class="info-text">预约到店的会员</view>
				</view>
			</view>
		</view>
		<view class="last-content">
			<view><text style="font-size: 44rpx;font-weight: bold;">客户管理</text></view>
			<view class="content-customer">
				<view style="width:10%;margin: 0 30rpx;">
					<u-image width="100%" src="/static/images/allCustomer.png" mode="widthFix"></u-image>
				</view>
				<view style="flex:1;">
					<view class="info-num">{{ info.allCustomer }}</view>
					<view class="info-text">全部客户</view>
				</view>
				
			</view>
			<view class="content-last">
				<view class="last-info">
					<view class="imageBox"><u-image width="80rpx" height="60rpx" :src="noVip"></u-image></view>
					<view class="info-num" style="text-align: center;">{{ info.noVip }}</view>
					<view class="info-text text-c">非会员</view>
				</view>
				<view class="last-info">
					<view class="imageBox"><u-image width="80rpx" height="60rpx" :src="latelyAdd" mode="widthFix"></u-image></view>
					<view class="info-num" style="text-align: center;">{{ info.latelyAdd }}</view>
					<view class="info-text text-c">最近新增</view>
				</view>
				<view class="last-info">
					<view class="imageBox"><u-image width="80rpx" height="60rpx" :src="valid" mode="widthFix"></u-image></view>
					<view class="info-num" style="text-align: center;">{{ info.valid }}</view>
					<view class="info-text text-c">有效会员</view>
				</view>
				<view class="last-info">
					<view class="imageBox"><u-image width="80rpx" height="60rpx" :src="overdue" mode="widthFix"></u-image></view>
					<view class="info-num" style="text-align: center;">{{ info.overdue }}</view>
					<view class="info-text text-c">过期会员</view>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	import latelyAdd from '@/static/images/latelyAdd.png'
	import noVip from '@/static/images/noVip.png'
	import valid from '@/static/images/valid.png'
	import overdue from '@/static/images/overdue.png'
	export default {
		onShow() {
			this.getNum()
		},
		data() {
			return {
				info: {},
				latelyAdd,
				noVip,
				valid,
				overdue
			}
		},
		methods: {
			getNum() {
				NET.request(API.findGroupCustomerNum, {}, 'POST').then(res => {
					if(res.status == 10000) {
						this.info = res.data
					} else {
						this.$refs.uTips.show({
							title: error.msg,
							type: 'warning',
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";
	
	.content {
		width: 100%;
		min-height: 100vh;
		float: left;
		background-color: #f5f6f8;
		padding: 10px;
		
		.first-content{
			width: 100%;
			
			.content-box {
				width: 100%;
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.content-info {
					width: 48%;
					padding: 24rpx;
					background-color: #fff;
					margin-bottom: 10px;
					box-sizing: border-box;
					border-radius: 12rpx;
				}
			}
		}
		
		.last-content {
			margin: 20rpx 0;
			width: 100%;
			
			.content-customer {
				padding: 24rpx;
				background-color: #fff;
				margin-bottom: 10px;
				margin-top: 15rpx;
				display: flex;
				align-items: center;
			}
			
			.content-last {
				width: 100%;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				border-radius: 12rpx;
				
				.last-info {
					width: 160rpx;
					padding: 24rpx;
					background-color: #fff;
					border-radius: 12rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
		}
	}
	.imageBox {
		width:100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.info-num {
		font-size: 20px;
		margin: 20rpx 0;
	}
	.info-introduce {
		font-size: 16px;
		margin-bottom: 12rpx;
	}
	.info-text {
		color: #aaa;
	}
	.text-c {
		text-align: center;
	}
</style>