zhangkun
/
zzdyrmyyUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../layui/css/layui.mobile.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/app.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/inits.css" />
		<title>商品列表页面</title>
		<style>
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #f6f9ff;
				position: relative;
				display: block;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active:after{
				position: absolute;
			    height: 0;
			    width: 0;
			    content: "";
			    border: 8px solid transparent;
			    right: -8px;
			    border-left-color: #2e7ce3;
			    top: 17px;
			}
		.mui-table-view{
			background-color: #f6f9ff;
		}
		.mui-card {
				box-shadow: initial!important;
			}
			
			.mui-numbox {
				border: 0;
				background: transparent;
				    width: 110px!important;
			}
			
			.mui-numbox .mui-btn-numbox-minus,
			.mui-numbox .mui-btn-numbox-plus {
				height: 24px;
				width: 24px;
				border-radius: 50%;
				background: #e97a44;
				color: #fff;
				line-height: 24px;
				font-size: 20px;
				margin-top: 5px;
			}
			
			.mui-numbox .mui-btn-numbox-minus {
				background: #d8d8d8;
			}
			
			.mui-numbox .nums.mui-input-numbox {
				border: 0!important;
			}
			.mui-input-row label{
				padding: 11px 0!important;
				width: 40%!important;
			}
			.mui-table-view-cell{
				padding: 10px!important;
			}
			.mui-input-row .mui-numbox{
				margin: 2px 0!important;
			}
			.goodsTotal {
				height: 60px;
			    border-radius: 30px;
			    width: 95%;
   				margin: 10px auto;
			}
			
			.goodsTotal a {
				display: inline-block;
				vertical-align: middle;
				height: 100%;
				line-height: 60px;
				color: #FFFFFF;
				text-align: center;
				font-size: 16px;
				    border-top-left-radius: 30px;
   					 border-bottom-left-radius: 30px;
			}
			
			.goodsTotal .goodsCount {
				width: 69%;
				color: #313132;
			}
			
			.goodsTotal .finishBtn {
				width: 31%;
				background: #3076e6;
				border-top-left-radius: 0;
   			    border-bottom-left-radius: 0;
				border-top-right-radius: 30px;
   			    border-bottom-right-radius: 30px;
			}
			.mui-popover{
				 width: 100%!important;
				 margin: 0 auto;
				 left: 0!important;
				 border-bottom-left-radius: 0;
				 border-bottom-right-radius: 0;
				top: auto!important;
    			bottom: 0;
			}
			.mui-popover .mui-popover-arrow.mui-bottom{
				display: none!important;
			}
			.popoverIn{
				background:#eaeaea;
				    padding: 7px 10px;
			}
			.popoverIn .goodsTotal a{
				    float: left;
			}
			.popoverIn .goodsTotal .goodsCount{
				 background: #fff;
			}
			.headAddBox{
				   padding: 4px 0 10px 0;
				    position: relative;
				    z-index: 10;
				    border-bottom: 1px solid #e9eaf0;
				    margin-top: 55px;
			}
			.mui-input-row .mui-btn.headAdd{
				    width: 242px;
				    margin: 0 auto;
				    display: block;
				    float: none;
				    height: 25px;
				    line-height: 25px;
				    font-size: 13px;
				    padding: 0;
				    color: #2f78e5;
				    border: 1px solid #2f78e5;
				    border-radius: 20px;
			}
				.addIcon.mui-icon {
				    color: #346fe8;
				    font-size: 20px;
				    margin-right: 7px;
				}
			.mui-bar-nav~.mui-content{
				    padding-top: 95px!important;
			}
			input[type=search].searchInput{
				background: #fff;
   				border-radius: 20px;
			}
		</style>
	</head>
	<body>
			<header class="mui-bar mui-bar-nav" style="background: #3371e8;">
			<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear searchInput" placeholder="搜索您要配送的物品">
				</div>
		</header>
		<div class="headAddBox">
				<div class="mui-input-row">
					<a href="./HandAddGoods.html" style="display: block;"><button class="mui-btn mui-btn-block headAdd"><i class="addIcon mui-icon mui-icon-plus"></i>手动添加物品</button></a>
				</div>
		</div>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
				<!--<div id="item1" class="mui-control-content mui-active">
				</div>
				<div id="item2" class="mui-control-content">
				</div>
				<div id="item3" class="mui-control-content">
				</div>-->
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab goodsTotal">
				<a class="goodsCount" href="#bottomPopover">
					共 <span class="classCounts">0</span> 种物品 <span class="numCounts">0</span> 件
				</a>
				<a class="finishBtn">
					去配送
				</a>

			</nav>
			<div id="bottomPopover" class="mui-popover mui-popover-bottom">
					<div>
						<ul class="mui-table-view shopCar">
							<li style="padding: 10px 0;text-align: center;color: #5f5e5e;">空空如也，去添加物品吧！</li>
						</ul>
						<div class="popoverIn">
							<nav class="goodsTotal">
								<a class="goodsCount">
									共 <span class="classCounts">0</span> 种物品 <span class="numCounts">0</span> 件
								</a>
							<a class="finishBtn">
								去配送
							</a>
						</nav>
						</div>
						
					</div>
					
					
			</div>
		
		
		<script src="../layui/layui.js?1.1"></script>
		<script src="../js/jquery.min.js?1.1"></script>
		<script src="../js/mui.min.js?1.1"></script>
		<script src="../js/zepto.js?1.1"></script>
		<script src="../js/mui.zoom.js?1.1"></script>
    	<script src="../Script/Common/huayi.config.js?1.1"></script>
		<script src="../Script/Common/huayi.http.js?1.1"></script>
		<script>
			mui.init({
//				swipeBack: true //启用右滑关闭功能
			});
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			var i = 1,
				j = 1,
				m = 16, //左侧选项卡数量+1
				n = 21; //每个选项卡列表数量+1
			for (; i < m; i++) {
				html.push('<a class="mui-control-item" href="#content' + i + '">配送物品' + i + '</a>');
			}
			controls.innerHTML = html.join('');
			html = [];
			for (i = 1; i < m; i++) {
				html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
				for (j = 1; j < n; j++) {
					html.push('<li class="mui-table-view-cell">'+
					'<div class="mui-input-row">'+
						'<label>第' + i + '医疗用品-' + j + '</label>'+
						'<div class="mui-numbox" data-numbox-min="0">'+
							'<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
							'<input class="mui-input-numbox nums goodsListNums" type="number" onchange="changEvent()" />'+
							'<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
						'</div>'+
					'</div>'+
					'</li>');
				}
				html.push('</ul></div>');
			}
			contents.innerHTML = html.join('');
			 //默认选中第一个
			controls.querySelector('.mui-control-item').classList.add('mui-active');
			contents.querySelector('.mui-control-content').classList.add('mui-active');
			
			function changEvent(){
				var val=0,count=0,countsArray=[];
				 $('.goodsListNums').each(function(){
				 	val += +$(this).val();
				 	if($(this).val()>0){
				 		var objs={};
				 		count++
				 		objs.text=$(this).parent().prev('label').text();
				 		objs.nums=$(this).val();
				 		countsArray.push(objs);
				 	}
				 })
				 $('.numCounts').text(val);
				 $('.classCounts').text(count);
				 addShopCar(countsArray);
			}
			function addShopCar(arr){
				$('.shopCar').html('');
				$.each(arr,function(k,v){
					console.log(v.text)
					$('.shopCar').append('<li class="mui-table-view-cell">'+
					'<div class="mui-input-row">'+
						'<label>'+v.text+'</label>'+
						'<div class="mui-numbox mui-shaopCar" data-numbox-min="0">'+
							'<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
							'<input class="mui-input-numbox nums shopCarNums" type="number" value="'+v.nums +'" />'+
							'<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
						'</div>'+
					'</div>'+
					'</li>');
					mui('.mui-numbox.mui-shaopCar').numbox()
//					mui('.mui-numbox.mui-shaopCar').on('change','.mui-input-numbox', function(){
//								changEvent()
//			            });
				})
				
			}
			
		</script>
	</body>
</html>