EditUp.html 5.26 KB
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <title>添加抬头</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <meta name="format-detection" content="telephone=no" />
	    <meta name="format-detection" content="email=no" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
	    <meta name="apple-mobile-web-app-capable" content="yes" />
	    <meta name="apple-mobile-web-app-title" content="">
	    <meta name="google" value="notranslate"><!-- 禁止Chrome 浏览器中自动提示翻译 -->
	    <link rel="stylesheet" type="text/css" href="../../../../iconfont/iconfont.css"/>
	    <link href="../../../../css/reset.css"  rel="stylesheet"/>
	</head>
	<style>
		.slidebtn{
			width: 55px;
			height: 25px;
			display: inline-block;
			border-radius: 13px;
			border: 1px solid #AAAAAA;
			position: relative;
			/*margin:50px 50px;*/
			transition: all 0.5s;
			background: #fff;
		}		
		.slidebtn>span{
			display: inline-block;
			width: 25px;
			height: 25px;
			border-radius: 13px;
			position: absolute;
			top: 0;
			left: -5px;
			border: 1px solid #AAAAAA;
			background: #fff;
			transition: all 0.3s;
		}
		.slidebtn.active{
			background: #009688;
		}
		.slidebtn.active span{
			left: 30px;
		}
		.checkgroup{
			
		}
		.dcheck{
			
		}
		.dcheck i{
			width: 25px;
			height: 25px;
			border-radius: 50%;
			border: 1px solid #C0C0C0;
			color: #fff;
		}
		.dcheck.actived i{
			border: 1px solid #007DDB;
			color: #007DDB;
		}
		
		.uptip{
			font-size: 13px;
			color: #F76260;
			padding: 5px 10px;
		}
		.uptable{
			background: #fff;
			width: 100%;
		}
		.uptable tr td{
			height: 44px;
			padding:0 10px;
		    border-bottom: 1px solid #CCCCCC;
		    vertical-align: middle;
			/*width: 88px;*/
		}
		.uptable input{
			height: 100%;
		}
		.ultop{
			margin-bottom:10px ;
		}
		.ultop td{
			
		}
		.ultop .slidebtn{
			float: right;
		}
		
		.upbtn{
			width: 90%;
			display: block;
			margin: 10px auto 0;
			padding: 8px ;
		}
	</style>
	<body>
		<table class="uptable ultop">
			<tr>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>
					<input type="text" id="upname" placeholder="填写准确的抬头名称"/>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<span>默认抬头</span>
					<span class="slidebtn">
						<span></span>
					</span>
				</td>
			</tr>
		</table>
		
		<table class="uptable">
			<tr>
				<td colspan="2">
					<div class="checkgroup" data-checkname='单位'>
						<span class="dcheck actived" data-name="单位">
							<i class="icon iconfont">&#xe685;</i>
							单位&nbsp;
						</span>
						<span class="dcheck" data-name="个人">
							<i class="icon iconfont">&#xe685;</i>
							个人
						</span>
					</div>
					
				</td>
			</tr>
			<tr>
				<td>
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				</td>
				<td>
					<input type="text" id="ushuihao" placeholder="输入纳税人识别号"/>
				</td>
			</tr>
			<tr>
				<td>
					<span>单位地址</span>
				</td>
				<td>
					<input type="text" id="udizhi" placeholder="收票单位注册地址"/>
				</td>
			</tr>
			<tr>
				<td>
					<span>电话号码</span>
				</td>
				<td>
					<input type="text" id="uphone" placeholder="输入公司电话号码"/>
				</td>
			</tr>
			<tr>
				<td>
					<span>开户银行</span>
				</td>
				<td>
					<input type="text" id="ubank" placeholder="收票单位开户银行"/>
				</td>
			</tr>
			<tr>
				<td>
					<span>银行账号</span>
				</td>
				<td>
					<input type="text" id="ubanknum" placeholder="收票单位银行账户"/>
				</td>
			</tr>
		</table>
		<p class="uptip">修改发票的抬头,不会影响已开具的发票</p>
		<button class="upbtn">保存</button>
	</body>
</html>
<script src="../../../../js/jquery-3.2.1.min.js"></script>
<script>
	
	var func = {
		defaultup:'0',
		uptype:'单位'
	};
	$(function(){
		
		var slidebtn = false;
		$('.slidebtn').click(function(){
			if(!slidebtn){
				$(this).addClass('active');
				func.defaultup = '1';
				slidebtn = true;
			}else{
				$(this).removeClass('active');
				func.defaultup = '0';
				slidebtn = false;
			}			
		});
		
		//点击单选
		$('.checkgroup').on('click','.dcheck',function(){
			var dname= $(this).attr('data-name');
			$(this).addClass('actived');
			$(this).siblings().removeClass('actived');
			func.uptype = dname;
			//$(this).attr('data-checkname',dname);
		});
		
		//点击保存按钮
		$('body').on('click','.upbtn',function(){
			var upname = $('#upname').val();//名称
			var defaultup = func.defaultup;//默认抬头
			var uptype = func.uptype;//类型名称
			var ushuihao = $('#ushuihao').val();//税号
			var udizhi = $('#udizhi').val();//地址
			var uphone = $('#uphone').val();//电话
			var ubank = $('#ubank').val();//开户银行
			var ubanknum = $('#ubanknum').val();//银行账户  
			console.log("名称 "+upname+"/n默认抬头 "+defaultup+"/n类型名称 "+uptype
			+"/n税号 "+ushuihao
			+"/n地址 "+udizhi
			+"/n电话 "+uphone
			+"/n开户银行 "+ubank
			+"/n银行账户   "+ubanknum);
		});
		console.log(document.referrer);
		
		var urll =  document.referrer;
		var arrurl = urll.split('/');
		console.log(arrurl.length);
		console.log(arrurl[arrurl.length-1]);
	})
</script>