mui支付密码页面

移动端支付输入六位密码界面（mui项目）

话不多说， 直接上代码

1. css部分

   	body {
   		background-color: rgba(255, 255, 255, .99);
   	}
   	#header {
   		box-shadow: 0px 0px 1px 0px rgba(204, 204, 204, 1);
   	}
   	
   	ul {
   		list-style: none;
   		margin: 0;
   		padding: 0;
   	}
   	
   	.mui-content {
   		background-color: rgba(255, 255, 255, .99);
   		box-sizing: border-box;
   		margin-top: 44px;
   		text-align: center;
   		/*padding-top: 1px;*/
   		padding: 10px 15px;
   	}
   	
   	.mui-icon-back:before,
   	.mui-icon-left-nav:before,
   	.mui-icon-arrowright {
   		color: rgba(166, 166, 166, .99);
   	}
   	
   	.title {
   		text-align: left;
   		color: dimgray;
   		font-size: 15px;
   		padding-top: 10px;
   		margin-bottom: 10px;
   	}
   	
   	.mui-input-row,
   	.mui-table-view-cell {
   		padding: 10px 0;
   		display: flex;
   		align-items: center;
   		padding-left: 15px;
   		justify-content: space-between;
   		border-bottom: 1px solid rgba(204, 204, 204, 1);
   	}
   	
   	.mui-input-row img,
   	.mui-table-view-cell img {
   		width: 45px;
   	}
   	
   	.mui-table-view-cell:after {
   		height: 0;
   	}
   	
   	.result {
   		font-size: 15px;
   		display: flex;
   		align-items: center;
   		justify-content: center;
   	}
   	
   	.bank {
   		margin: 0 20px;
   	}
   	
   	.good {
   		color: darkgray;
   	}
   	
   	input[type='text'] {
   		border: none;
   		margin: 0;
   		padding: 15px 15px 2px 15px;
   		font-size: 17px;
   	}
   	
   	.mui-input-row {
   		padding: 20px 15px;
   	}
   	
   	.mui-input-row .renminbi {
   		position: relative;
   		left: 4px;
   	}
   	
   	.extra_money {
   		margin-top: 5px;
   		text-align: left;
   		font-size: 13px;
   		color: darkgray;
   	}
   	
   	.extra_money>span:nth-child(2) {
   		color: cornflowerblue;
   	}
   	
   	.botton {
   		margin-top: 15%;
   		display: flex;
   		align-items: center;
   		justify-content: center;
   		height: 45px;
   		background-color: rgba(231, 231, 231, .99);
   		color: white;
   		border-radius: 20px;
   	}
   	
   	.botton_active {
   		background-color: rgba(24, 144, 255, .99);
   	}
   	
   	a:active {
   		color: white;
   	}
   	/*支付页面*/
   	
   	#pay {
   		background-color: rgba(255, 255, 255, .99);
   		position: fixed;
   		top: 20%;
   		height: 35%;
   		width: 90%;
   		margin-left: 5%;
   		text-align: center;
   		display: flex;
   		justify-content: center;
   	}
   	
   	#pay .mui-popover-close {
   		width: 25px;
   		height: 25px;
   		position: absolute;
   		top: 5px;
   		left: 5px;
   	}
   	
   	#pay .title {
   		display: inline-block;
   		margin-top: 8px;
   		font-size: 20px;
   	}
   	
   	.number {
   		color: black;
   		font-size: 18px;
   		font-weight: bold;
   	}
   	
   	.type {
   		margin-top: 20px;
   	}
   	
   	.number {
   		margin-bottom: 20px;
   	}
   	
   	.zfinput {
   		opacity: 0;
   		z-index: 2;
   		position: relative;
   		top: -50px;
   	}
   	
   	.table {
   		margin-top: 30px;
   		display: inline-block;
   		height: 40px;
   		display: flex;
   		justify-content: center;
   	}
   	
   	.table>div {
   		text-align: center;
   		line-height: 40px;
   		display: inline-block;
   		width: 40px;
   		height: 40px;
   		border: 1px solid rgba(187, 187, 187, .99);
   		border-right: none;
   	}
   	
   	.table>div:last-child {
   		border-right: 1px solid rgba(187, 187, 187, .99);
   	}
   	
   	#pay input[type='number'] {
   		width: 68%;
   		margin: 0;
   		padding: 0;
   		height: 50px;
   	}
   	
   	.blackpwd {
   		display: inline-block;
   		width: 10px;
   		height: 10px;
   		background-color: black;
   		border-radius: 50%;
   		opacity: 0;
   	}
   

2. html部分

   
   	
   	
   提现
   
   
   	
   提现到银行卡
   	
   
   		
   
   			
   			中国银行(1234)
   			快捷
   		
   
   
   	
   	
   
   		
   		
   	
   	
   
   		当前日结钱包余额1000.00,
   		全部提现
   	
   	
   		提现
   	
   
   
   	
   	
   请输入支付密码
   	
   日结钱包提现
   	
   ¥1000.00
   	
   额外扣除1.00服务费
   	
   
   		
   
   		
   
   		
   
   		
   
   		
   
   		
   
   	
   	
   
   

3.js部分

mui('.mui-content').on('tap', '.botton', function() {
			var val1 = '¥' + $('.money_num').val();
			$('.number').html(val1)
			$('.zfinput').focus();
		})
		if($('.money_num').val().length != 0) {
			$('.botton').addClass('botton_active');
		}
		mui.init();
		mui('#pay').on('tap', '.mui-popover-close', function() {
			mui('#pay').popover('hide');
		})
		$('.money_num').bind('input propertychange', function() {
			if($(this).val().length != 0) {
				$('.botton').addClass('botton_active');
			} else {
				$('.botton').removeClass('botton_active');
			}
		});
		mui('.mui-content').on('tap', '.txaction', function(e) {
			var money_num = $('.up').html();
			$('.money_num').val(money_num);
			if($('.money_num').val().length != 0) {
				$('.botton').addClass('botton_active');
			} else {
				$('.botton').removeClass('botton_active');
			}
		})
		mui('#pay').on('tap', '.mui-popover-close', function() {
			mui('#pay').popover('hide');
		})
		$('.zfinput').bind('input propertychange', function() {
			$('.table>div>.blackpwd').css('opacity', '0');
			var length = $(this).val().length;
			$('.table>div>.blackpwd').slice(0, length).css('opacity', '1');
			if(length >= 6) {
				var val = $('.zfinput').val();
				$.ajax({
					type: "post",
					url: "",
					data: {'password':val},
					success: function(data) {
						if(data.status == 0) {
							mui.openWindow({
								id: 'tixianzhuangtai',
								url: 'tixianzhuangtai.html',
								show: {
									aniShow: 'none'
								}
							});
						}
					},
					error: function(data) {
						mui('#pay').popover('hide');
						mui.confirm('支付密码错误， 请重试', '警告', ['重试', '忘记密码'], function(e) {
							if(e.index == 0) {
								$('.zfinput').val('');
								$('.table>div>.blackpwd').css('opacity', '0');
								mui('#pay').popover('show');
							} else {
								mui.openWindow({
									id: 'identity',
									url: 'identity.html',
									show: {
										aniShow: 'none'
									}
								});
							}
						});
					}
				});
			}
		});

需引用

全部代码

	
		
		
		
		
		
	

	
		

			
			
提现
		
		

			
提现到银行卡
			

				

					
					中国银行(1234)
					快捷
				

				

			
			

				
				
			
			

				当前日结钱包余额1000.00,
				全部提现
			
			
				提现
			
		
		

			
			
请输入支付密码
			
日结钱包提现
			
¥1000.00
			
额外扣除1.00服务费
			

				

				

				

				

				

				

			
			
		
	
	
	
	

样式大概是这样的

输入密码主要是用了透明度为0的input， 检测input的长度来同步输入密码框的样式。适合app需要自己的提现或者支付页面， 如果是微信或者支付宝的话可以直接调他们的接口。支付页面是不用写的。