zhongshen_project/addon/supermember/shop/view/membercard/index.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="SUPERMEMBER_CSS/supermember.css">
<style>
	.layui-card-body{display: flex;padding-bottom: 0 !important;padding-right: 50px !important;padding-left: 50px !important;flex-wrap: wrap;}
	.layui-card-body .content{width: 25%;display: flex;flex-direction: column;margin-bottom: 30px;justify-content: center;padding-top: 15px}
	.layui-card-body .content .title{color: #909399;font-size: 14px;}
	.layui-card-body .money{color: #303133;font-size: 26px;margin-top: 10px;max-width: 250px;}
	.layui-card-body .bottom-title{color: #909399;font-size: 14px;margin-top: 5px;}
</style>
{/block}
{block name="main"}
<div class="nav">
	<div class="nav-screen">
		<div class="screen-tab">
			<div class="tab-item bgcolorse activeTab" onclick="datePick(1, this);return false;">今日</div>
			<div class="tab-item" onclick="datePick(2, this);return false;">昨日</div>
			<div class="tab-item" onclick="datePick(7, this);return false;">近七天</div>
		</div>
		<form class="layui-form layui-show" lay-filter="order_list">
			<div class="screen-time layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="start_time" placeholder="开始时间" id="start_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="end_time" placeholder="结束时间" id="end_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
				</div>
			</div>
		</form>
	</div>

	<div class="layui-card-body">

		<div class="content">
			<p class="title">售卡数</p>
			<p class="money" id="sale_num">{$data.today_num}</p>
		</div>
		<div class="content">
			<p class="title">售卡金额</p>
			<p class="money" id="sale_money">{$data.today_money}</p>
		</div>
		<div class="content">
			<p class="title">累计售卡数</p>
			<p class="money">{$data.total_num}</p>
		</div>
		<div class="content">
			<p class="title">累计售卡金额</p>
			<p class="money">{$data.total_money}</p>
		</div>

	</div>
</div>
<div class="section">
	<div class="section-left">
		<div class="membership">
			<div>会员持卡总数量</div>
			<div>{$data.has_card_member}</div>
		</div>
		<div class="member-detail">
			{notempty name="$data.card_list"}
			{foreach data.card_list as $key => $value}
			<div class="member-detail-item vip-list" data-level-id="{$value.level_id}">
				<div class="base-data-name">
					{if condition='$key == 0'}
					<span><img src="SUPERMEMBER_IMG/one.png"></span>
					{elseif condition='$key == 1'}
					<span><img src="SUPERMEMBER_IMG/two.png"></span>
					{elseif condition='$key == 2'}
					<span><img src="SUPERMEMBER_IMG/three.png"></span>
					{else}
					<span>{$key+1}</span>
					{/if}
					{$value.level_name}
				</div>
				<div class="base-data-name">{$value.member_num}</div>
			</div>
			{/foreach}
			{else/}
			<div class="no-data">暂无数据</div>
			{/notempty}
		</div>
	</div>

	<div class="section-right">
		<div class="membership">
			<div>普通会员与会员卡用户占比</div>
		</div>
		<!-- <div class="has-data">暂无数据</div> -->
		<div id="main" style="width:600px;height:600px;margin-top: 100px;margin-left: 100px;"></div>
	</div>
	{/block}
	{block name="script"}
	<script src="SHOP_JS/echarts.min.js"></script>
	<script type="text/javascript">
		var form;
		//初始化时间
		var startTime = new Date(new Date().setHours(0, 0, 0, 0));
		var endTime = new Date();
		//开始时间转换为时间戳
		var start_times = $('input[name="start_time"]').val()
		var start_time = new Date(start_times ? start_times : startTime).getTime()
		//结束时间转换为时间戳
		var end_times = $('input[name="end_time"]').val()
		var end_time = new Date(end_times ? end_times : endTime).getTime()
		$('.screen-tab .tab-item').click(function() {
			$(this).addClass("bgcolorse activeTab").siblings().removeClass('bgcolorse activeTab');
			start_times = $('input[name="start_time"]').val()
			end_times = $('input[name="end_time"]').val()
			sendAjax(start_times,end_times)
		});
		$('.vip-list').click(function(data){
			let levelId = $(this).attr('data-level-id')
			location.href = ns.url("shop/member/memberlist",{levelId:levelId});
		})
		function sendAjax(starTimes,enTimes){
			if(starTimes){start_times = starTimes}else{start_times = $('input[name="start_time"]').val()}
			if(enTimes){end_times = enTimes}else{end_times = $('input[name="end_time"]').val()}
			$.ajax({
				url: ns.url("supermember://shop/membercard/salesStatistics"),
				data: {
					start_time: start_times,
					end_time: end_times
				},
				dataType: 'JSON', //服务器返回json格式数据
				type: 'POST', //http请求类型
				success: function(res) {
					if (res.code == 0) {
						$('#sale_num').html(res.data.sale_num);
						$('#sale_money').html(res.data.sale_money);
					} else {
						layer.msg(res.message);
					}
				}
			});
		}
		layui.use(['form', 'laydate'], function() {
			var laydate = layui.laydate;
			form = layui.form;
			form.render();
			//渲染时间
			laydate.render({
				elem: '#start_time',
				type: 'datetime',
				value: startTime,
				done: function(value, date, endDate) {
					$(".screen-tab .tab-item").removeClass("bgcolorse activeTab");
					start_times = value
					let start_time = ns.date_to_time(value);
					let end_time = ns.date_to_time($('#end_time').val());
					if(end_time > start_time){
						sendAjax(start_times,'')
					}else {
						$('#end_time').val('');
					}
				}
			});
			laydate.render({
				elem: '#end_time',
				type: 'datetime',
				value: endTime,
				done: function(value, date, endDate) {
					$(".screen-tab .tab-item").removeClass("bgcolorse activeTab");
					end_times = value

					let start_time = ns.date_to_time($('#start_time').val());
					let end_time = ns.date_to_time(value);
					if(end_time > start_time){
						sendAjax('',end_times)
					}else {
						$('#start_time').val('');
					}
				}
			});
		});
		/**
		 * 七天时间
		 */
		function datePick(date_num, event_obj) {
			$(".date-picker-btn").removeClass("selected");
			$(event_obj).addClass('selected');
			var now_date = new Date();

			Date.prototype.Format = function(fmt, date_num) { //author: meizz
				this.setDate(this.getDate() - date_num);
				var o = {
					"M+": this.getMonth() + 1, //月份
					"d+": this.getDate(), //日
					"H+": this.getHours(), //小时
					"m+": this.getMinutes(), //分
					"s+": this.getSeconds(), //秒
					"q+": Math.floor((this.getMonth() + 3) / 3), //季度
					"S": this.getMilliseconds() //毫秒
				};
				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1
				.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
						k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			};
			if (date_num == 2) {
				var now_time = new Date().Format("yyyy-MM-dd 23:59:59", date_num - 1); //当前日期
			} else {
				// var now_time =  new Date().Format("yyyy-MM-dd 23:59:59",0);//当前日期
				var now_time = new Date().Format("yyyy-MM-dd HH:mm:ss", 0); //当前日期
			}

			var before_time = new Date().Format("yyyy-MM-dd 00:00:00", date_num - 1); //前几天日期
			$("input[name=start_time]").val(before_time, 0);
			$("input[name=end_time]").val(now_time, date_num - 1);

		}
	</script>
	<script type="text/javascript">
		var vipData = '{:json_encode($data)}';
		var listData = JSON.parse(vipData).card_list;

		var names = [];
		var nums = [];
		names.push('普通会员')
		nums.push({                    
			value: JSON.parse(vipData).no_has_card_member,
			name: '普通会员'
		});
		for(var i=0;i<listData.length;i++){
			names.push(listData[i].level_name)
			nums.push({                    
				value: listData[i].member_num,
				name: listData[i].level_name
			});
		}
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			color: ['#ff7a14', '#47b73d', '#fcc36e', '#448ffd', "#228b22","#00adac","#000086","#a963a1","#cf675a","#607e82"],//饼图颜色
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				orient: 'horizontal',
				left: 'center',
				bottom:	260,
				itemGap: 50,
				data: names
			},
			series: [{
				width: 265,
				height: 265,
				top: 0,
				x: "center",
				name: '会员比例',
				type: 'pie',
				radius: ['50%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '12',
						color: '#333'
					}
				},
				labelLine: {
					show: false
				},
				data: nums
			}]
		};
		myChart.setOption(option);
	</script>
	{/block}