dever-package
/
script


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="author" content="siweiyong 2602812659@qq.com"/>
<title>收银台</title>
<link rel="stylesheet" href="scripts/miniui/themes/default/miniui.css">
<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="css/common.css">
</head>
<body style="background: #F6F7F9;">
<div class="main">
	<div class="layui-row">
		<div class="main_left layui-col-xs12 layui-col-md3">
			<div class="layui-row">
				<div class="top">
					<i class="layui-icon layui-icon-app"></i>商品列表
				</div>
				<div class="left_main">
					<input id="key" class="mini-textbox" placeholder="请输入商品名称" onenter="onKeyEnter"/>
    				<a class="mini-button" onclick="search()">查询</a> 
    				<ul id="tree1" class="mini-tree" url="data/tree.json" showTreeIcon="true" textField="name" idField="id" expandOnLoad="true" onNodeClick="onNodeClick">
					</ul>
				</div>
			</div>
		</div>
		<div class="main_right layui-col-xs12 layui-col-md9">
			<div class="layui-row">
				<div class="top">
					<label>商品编码：</label>
					<div class="layui-input-inline">
						<input type="text" name="title" required lay-verify="required" placeholder="扫码或手动输入商品编码" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-primary" style="vertical-align: middle;margin-bottom: 2px;">添加</button>
					</div>
				</div>
				<div class="goods_list">
					<table class="layui-table">
						<thead>
							<tr>
								<th lay-data="{field:'id'}">商品编码</th>
								<th lay-data="{field:'name'}">商品名称</th>
								<th lay-data="{field:'price', edit: 'text'}">零售价（元）</th>
								<th lay-data="{field:'number', edit: 'text'}">数量</th>
								<th lay-data="{field:'integral'}">积分</th>
								<!--<th lay-data="{field:'staff', edit: 'text'}">提成员工</th>-->
								<th lay-data="{field:'remarks', edit: 'text'}">备注</th>
								<th lay-data="{field:'operation'}">操作</th>
							</tr>
						</thead>
						<tbody id="myTbody">
							
						</tbody>
					</table>
				</div>
				<div class="total ft16">
					合计：【<span> 消费总金额：<i class="totalMoney">0.00</i> </span>】【<span> 消费总数量：<i class="totalQuantity">0</i> </span>】【 <span> 总积分：<i class="totalIntegral">0</i> </span>】
				</div>
				<table class="reading layui-table" lay-even="">
					<tbody>
						<tr>
							<td>会员查找</td>
							<td colspan="3">
								<div class="layui-input-inline">
									<input type="text" class="layui-input" placeholder="扫描或者手动输入会员卡号" />
								</div>
								<button class="card_reading layui-btn">读卡</button>
								<a href="#" class="registration layui-btn layui-btn-primary">会员登记</a>
							</td>
						</tr>
						<tr>
							<td>会员卡号：</td>
							<td></td>
							<td>会员姓名：</td>
							<td></td>
						</tr>
						<tr>
							<td>会员级别：</td>
							<td></td>
							<td>有效期：</td>
							<td></td>
						</tr>
						<tr>
							<td>可用积分：</td>
							<td></td>
							<td>可用储值：</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<div class="towbtn">
					<input type="submit" id="settlement" value="结算">
					<input type="reset" value="清空" />
				</div>
			</div>
		</div>
	</div>
</div>
<div class="mask_box">
	<div class="mask"></div>
	<div class="box">
		<div class="box_top">结算</div>
		<div class="box_block box_block1">
			<div class="block_left"><label for="">应付金额：</label></div>
			<div class="block_right"><input type="text" class="layui-input" value="23131" readonly style="border: none;" /></div>
		</div>
		<div class="box_block box_block2">
			<div class="block_left"><input type="checkbox" name="" />优惠券：</div>
			<div class="block_right">
				<select class="layui-select" name="" id="">
					<option value="0">请选择</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</div>
			<div class="block_left">还需支付：</div>
			<div class="block_right"><input type="text" class="layui-input" value="32432" readonly style="border: none;" /></div>
		</div>
		<div class="box_block box_block3">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">现金支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
			<br style="clear: both;">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">移动支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
			<br style="clear: both;">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">其他支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
		</div>
		<div class="remark_mess">
			<div class="block_left">
				备注：
			</div>
			<div class="block_right">
				<textarea class="layui-textarea" name="" rows="" cols="" maxlength="200" placeholder="最多输入200字符"></textarea>
			</div>
			<br style="clear: both;">
			<div class="block_left">
				交易时间：
			</div>
			<div class="block_right">
				<input type="text" value="2018-11-23 08:23:43" class="layui-input" readonly style="border: none;" />
			</div>
		</div>
		<div class="bot">
			<input type="submit" value="提交">
			<input type="text" value="取消">
		</div>
	</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="scripts/miniui/miniui.js"></script>
<script src="layui/layui.js"></script>
<script>
	$(function() {
		$("#settlement").click(function(){
			$(".mask_box").show();
		})
		$(".bot input:nth-child(2)").click(function(){
			$(".mask_box").hide();
		})
	})
	
	/*miniui - tree 插件 - 开始*/
	mini.parse();
    var tree = mini.get("tree1");
    function search() {
        var key = mini.get("key").getValue();
        if (key == "") {
            tree.clearFilter();
        } else {
            key = key.toLowerCase();                
            tree.filter(function (node) {
                var name = node.name ? node.name.toLowerCase() : "";
                if (name.indexOf(key) != -1) {
                    return true;
                }
            });
        }
    }
    function onKeyEnter(e) {
        search();
    }

    var totalQuantity = 0;    //总数量
	var totalMoney = 0;       //总金额
	var totalIntegral = 0;    //总积分
	function onNodeClick(){  
		//获取选中节点的值
		var flag = false;
  		var tree=mini.get("tree1");
        node=tree.getSelectedNode();
  		
  		if(node.end){
  			/*树结构选中商品，table列表变化 - 开始*/
	        totalQuantity++;
	        $('.totalQuantity').html(totalQuantity);
	        
	        this_price = node.price; //获取单价
	        this_price = parseFloat(this_price);
	        totalMoney += this_price;
	        $('.totalMoney').html(totalMoney.toFixed(2));
	        
	        this_integral = node.integral; //获取积分  
	        this_integral = parseFloat(this_integral);
	        totalIntegral += this_integral;
	        $('.totalIntegral').html(totalIntegral.toFixed(0));
  			/*树结构选中商品，table列表变化 - 结束*/
  			
  			if($("#myTbody tr").length <= 0){
  				var addtr = '<tr class="mytr">';
				addtr += '<td>'+node.id+'</td>';
				addtr += '<td>'+node.name+'</td>'	;					
				addtr += '<td class="kbj danjia">'+node.price+'</td>';
				addtr += '<td class="numberTd"><div class="jiajian"><span class="jian" onclick="num_sub(this)">-</span><input type="text" value="1" class="num"><span class="jia" onclick="num_add(this)">+</span></div></td>';
				addtr += '<td class="jifen">'+node.integral+'</td>';						
				addtr += '<td class="kbj remarks"></td>';						
				addtr += '<td><button class="delete_btn">删除</button></td>';						
				addtr += '</tr>';
				$("#myTbody").append(addtr);
				return;
  			}else{          
				$("#myTbody tr").each(function () {
                    //找到商品的名称与上面获取到的商品名称进行对比
                    if ($(this).children("td:eq(0)").html() == node.id) {
                        //找到此商品的数量
                        var count = parseInt($(this).children("td:eq(3)").find("input").val());
                        count++;
                        $(this).children("td:eq(3)").find("input").val(count); //对商品的数量进行重新赋值
						flag = true;
                        return false;
                    }else {
                        flag = false;
                    }
                })
  			}
			//如果为默认值也就是说里面没有此商品，所以添加此商品。
			if (flag == false) {
				var addtr = '<tr class="mytr">';
				addtr += '<td>'+node.id+'</td>';
				addtr += '<td>'+node.name+'</td>'	;					
				addtr += '<td class="danjia">'+node.price+'</td>';
				addtr += '<td><div class="jiajian"><span class="jian" onclick="num_sub(this)">-</span><input type="text" value="1" class="num"><span class="jia" onclick="num_add(this)">+</span></div></td>';
				addtr += '<td class="jifen">'+node.integral+'</td>';						
				addtr += '<td class="remarks"></td>';						
				addtr += '<td><button class="delete_btn">删除</button></td>';						
				addtr += '</tr>';
				$("#myTbody").append(addtr);
			}
  		}
	}
	/*miniui - tree 插件 - 结束*/
	
	//加的效果 
	function num_add(on_this){
		
		var totalQuantity = 0;    //总数量
		var totalMoney = 0;       //总金额
		var totalIntegral = 0;    //总积分
		$("#myTbody tr").each(function(){
			
	        //获取当前行的单价
	        this_price = $(this).children(".danjia").text();
	        this_price = parseFloat(this_price);
	        
	        //获取当前行的积分
	        this_integral = $(this).children(".jifen").text();
        	this_integral = parseFloat(this_integral);
        	
        	//获取当前行的数量
        	this_num = $(this).find(".num").val();
        	this_num = parseInt(this_num);
        	
        	//获取当前行的总价格、总积分
        	var trmoney = this_price*this_num;
        	var trIntegral = this_integral*this_num;
        	
        	//总金额、总数量、总积分
        	totalQuantity += this_num*1;   //总数量
        	totalMoney += trmoney*1        //总金额
        	totalIntegral += trIntegral*1  //总积分
		}) 
		$(".totalQuantity").html(totalQuantity);
		$(".totalMoney").html(totalMoney); 
		$(".totalIntegral").html(totalIntegral);
		
        this_price = $(on_this).parents("td").siblings("td.danjia").text();//获取单价
        this_price = parseFloat(this_price);
        console.log(totalMoney);
        totalMoney += this_price;
        $('.totalMoney').html(totalMoney.toFixed(2));
        console.log(totalMoney);
        
        this_integral = $(on_this).parents("td").siblings("td.jifen").text();//获取积分  
        this_integral = parseFloat(this_integral);
        totalIntegral += this_integral;
        $('.totalIntegral').html(totalIntegral.toFixed(0));
		
		//当前商品数量
        this_num = $(on_this).siblings('.num');
        var get_this_num = parseInt(this_num.val())+1;
        this_num.val(get_this_num);
        
        totalQuantity++;
        $('.totalQuantity').html(totalQuantity);
    }
	
	//减的效果  
	function num_sub(on_this){
        
        var totalQuantity = 0;    //总数量
		var totalMoney = 0;       //总金额
		var totalIntegral = 0;    //总积分
		$("#myTbody tr").each(function(){
			
	        //获取当前行的单价
	        this_price = $(this).children(".danjia").text();
	        this_price = parseFloat(this_price);
	        
	        //获取当前行的积分
	        this_integral = $(this).children(".jifen").text();
        	this_integral = parseFloat(this_integral);
        	
        	//获取当前行的数量
        	this_num = $(this).find(".num").val();
        	this_num = parseInt(this_num);
        	
        	//获取当前行的总价格、总积分
        	var trmoney = this_price*this_num;
        	var trIntegral = this_integral*this_num;
        	
        	//总金额、总数量、总积分
        	totalQuantity += this_num*1;   //总数量
        	totalMoney += trmoney*1        //总金额
        	totalIntegral += trIntegral*1  //总积分
		}) 
		$(".totalQuantity").html(totalQuantity);
		$(".totalMoney").html(totalMoney); 
		$(".totalIntegral").html(totalIntegral);
        
        //当前商品数量
        this_num = $(on_this).siblings('.num');
        if(this_num.val() <= 1){
            this_num.siblings('.jian').removeAttr('onclick');
            return;
        }else{
        	var get_this_num = this_num.val()-1;
	        this_num.val(get_this_num);
	        
	        this_price = $(on_this).parents("td").siblings("td.danjia").text();//获取单价
	        totalMoney -= this_price;
	        $('.totalMoney').html(totalMoney.toFixed(2));
	        
	        this_integral = $(on_this).parents("td").siblings("td.jifen").text();//获取积分  
	        totalIntegral -= this_integral;
	        $('.totalIntegral').html(totalIntegral.toFixed(0));
	        
	        totalQuantity--;
	        $('.totalQuantity').html(totalQuantity);	
        }
    }
	
	//输入商品数量时改变合计的内容
	$("#myTbody").on("keyup",".num",function(){
		if($(this).val()==''){
            $(this).val('1');
        }
        $(this).val($(this).val().replace(/\D|^0/g,''));
		setTotal();	
	})
	
	//点击 - 备注 - 可编辑
	$("#myTbody").on("click","td.remarks",function(){
		if(!$(this).is('.bj')){       
			$(this).addClass('bj').html('<textarea class="layui-textarea" value="'+$(this).val()+'" />').find('textarea').focus().blur(function(){$(this).parent().removeClass('bj').html($(this).val())});    
		} 
	})
	
	//点击 - 单价 - 可编辑
	$("#myTbody").on("click","td.danjia",function(){
		if(!$(this).is('.bj')){   
			var currentPrice = $(this).html();
			$(this).focus();
			$(this).addClass('bj').html('<input type="tel" class="layui-input" value="'+$(this).text()+'" />').find('input').focus().blur();    
		} 
	})
	//输入商品价格时改变合计的内容
	$("#myTbody").on("change",".danjia input",function(){
		var $this = $(this).val();
		var reg = /^(([1-9]+)|([0-9]+\.[0-9]{1,2}))$/;
		if(!reg.test($this)){
			alert("请输入非负浮点数");
			$(this).parent().removeClass('bj').html($this||"1.00");
			$(this).val(currentPrice);
	    }else{
	    	$(this).parent().removeClass('bj').html($this||"1.00");
		 	setTotal();
		}
	})
	
	//table tr 点击删除
	$("#myTbody").on("click",".delete_btn",function(){
		if($("#myTbody tr").length < 1){
			$(".totalQuantity").html("0");
			$(".totalMoney").html("0"); 
			$(".totalIntegral").html("0");
			return;
		}
		
		$(this).parents("#myTbody tr").remove();
		setTotal();
	})
	
	function setTotal(){
		var totalQuantity = 0;    //总数量
		var totalMoney = 0;       //总金额
		var totalIntegral = 0;    //总积分
		$("#myTbody tr").each(function(){
			
	        //获取当前行的单价
	        this_price = $(this).children(".danjia").text();
	        this_price = parseFloat(this_price);
	        
	        //获取当前行的积分
	        this_integral = $(this).children(".jifen").text();
        	this_integral = parseFloat(this_integral);
        	
        	//获取当前行的数量
        	this_num = $(this).find(".num").val();
        	this_num = parseInt(this_num);
        	
        	//获取当前行的总价格、总积分
        	var trmoney = this_price*this_num;
        	var trIntegral = this_integral*this_num;
        	
        	//总金额、总数量、总积分
        	totalQuantity += this_num*1;   //总数量
        	totalMoney += trmoney*1        //总金额
        	totalIntegral += trIntegral*1  //总积分
		}) 
		$(".totalQuantity").html(totalQuantity);
		$(".totalMoney").html(totalMoney); 
		$(".totalIntegral").html(totalIntegral);
	}
</script>
</body>
</html>