vue-手机支付页面

末蓝、 2023-02-09 14:12 5阅读 0赞

手机自定义支付页面,不调用手机自带键盘,自定义键盘

## html部分 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    		<title></title>
    		<script src="./vue.js"></script>
    		<link rel="stylesheet" href="./payforToBss.css">
    	</head>
    	<body>
    		<div id="app">
    			<header>
    				
    				<a class="back" href="javascript:history.go(-1)">
    					<span class="icon"></span>
    					<span class="backTxt">返回</span>
    				</a>
    				<div class="title">向商家付款</div>
    			</header>
    			<div class="content">
    				<div class="userInfo">
    					<div class="userImg">
    						<img src="./aaa.jpg" >
    					</div>
    					<div class="userInfomation">
    						<div class="userName">
    							{
       {business}}
    						</div>
    						<div class="company">
    							{
       {company}}
    						</div>
    					</div>
    				</div>
    				
    			</div>
    			<div class="InpBox">
    				<div :class="['link-input' ,active?'link-input-active ':' linkInpNull' , linkInpNulls ? '':'linkInpNullBefore',InpErr?'InpErrToast':''] " ref='linkInp'  placeholder='请输入消费金额' @click="inpText" v-text="moneyVal"></div>
    				<input type="hidden" value="moneyVal"/>
    				
    				<div class="moneyIcon">￥</div>
    			</div>
    			<div v-if="InpErr" class="errNotice">请输入正确的消费金额</div>
    			
    			
    			<div class="keyWords" v-if="showKeyBord">
    				<ul class="keyWordsList">
    					<li :class="['keyWordsItem', 'bottom',touchs =='1' ?'keyUp':''] " @touchstart="touchNum('1')" @touchend="touchEnd">1</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='2' ?'keyUp':'']"  @touchstart="touchNum('2')" @touchend="touchEnd">2</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='3' ?'keyUp':'']"  @touchstart="touchNum('3')" @touchend="touchEnd">3</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='4' ?'keyUp':'']"  @touchstart="touchNum('4')" @touchend="touchEnd">4</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='5' ?'keyUp':'']"  @touchstart="touchNum('5')" @touchend="touchEnd">5</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='6' ?'keyUp':'']"  @touchstart="touchNum('6')" @touchend="touchEnd">6</li>
    					
    					<li :class="['keyWordsItem', 'bottom',touchs =='7' ?'keyUp':'']"  @touchstart="touchNum('7')" @touchend="touchEnd">7</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='8' ?'keyUp':'']"  @touchstart="touchNum('8')" @touchend="touchEnd">8</li>
    					<li :class="['keyWordsItem', 'bottom',touchs =='9' ?'keyUp':'']"  @touchstart="touchNum('9')" @touchend="touchEnd">9</li>
    					<li :class="['keyWordsItem',touchs =='00' ?'keyUp':'']"  @touchstart="touchNum('00')" @touchend="touchEnd">00</li>
    					<li :class="['keyWordsItem',touchs =='0' ?'keyUp':'']"  @touchstart="touchNum('0')" @touchend="touchEnd">0</li>
    					<li :class="['keyWordsItem',touchs =='.' ?'keyUp':'']"  @touchstart="touchNum('.')" @touchend="touchEnd">.</li>
    					
    				</ul>
    				<ul class="delAndSure">
    					<li :class="['del',touchs =='del' ?'keyUp':'']"  @touchstart="del" @touchend="touchEnd"><img src="del.png" ></li>
    					<li :class="['sure',linkInpNulls?'':'disabled']" @click="linkInpNulls ? submit() :''"><span class="sureTxt">确 认 </span><span>支 付</span></li>
    				</ul>
    			</div>
    		</div>
    		
    		
    	</body>
    </html>
    <script type="text/javascript">
    	
    	var app = new Vue({
    	  el: '#app',
    	  data: {
    			moneyVal:'',
    			active:false,
    			linkInpNulls:true,
    			InpErr:false,
    			showKeyBord:false,
    			touchs:'-1',
    			
    			// 用户数据
    			business:"财神府的老阿姨",
    			company:"科韵智慧"
    	  },
    		methods:{
    			touchNum(e){
    				
    				this.touchs = e
    				this.linkInpNulls = true
    				this.active = true
    				let price = this.moneyVal + String(e)
    				let isPrice = this.isPriceNumber(price)
    				if(isPrice){
    					this.moneyVal = price
    					this.InpErr = false
    					
    				}else{
    					this.InpErr = true
    				}
    			},
    			touchEnd(){
    				this.touchs = '-1'
    			},
    			del(){
    				this.touchs = 'del'
    				let inpVal = this.moneyVal 
    				let newVal = inpVal.slice(0,inpVal.length-1)
    				console.log(newVal)
    				if(this.moneyVal.length <= 1){
    					this.active = false
    					this.linkInpNulls = false
    					this.moneyVal = ''
    				}else{
    					let price = newVal
    					let isPrice = this.isPriceNumber(price)
    					if(isPrice){
    						this.moneyVal = price
    						this.InpErr = false
    						
    					}else{
    						this.InpErr = true
    					}
    				}
    			},
    			inpText($event){
    				this.active = false
    				this.showKeyBord = true
    				this.linkInpNulls = false
    				let h =  window.screen.width
    				console.log(h)
    			},
    			submit(){   //提交支付
    				let price = this.moneyVal
    				alert('提交支付'+ price)
    				
    			}, 
    			// 判断输入的数字符不符合规格
    			isPriceNumber(_keyword){
    				
    				if(_keyword == "0" || _keyword == "0." || _keyword == "0.0" || _keyword == "0.00"){
    						_keyword = "0"; return true;
    				}else{
    						var index = _keyword.indexOf("0");
    						var length = _keyword.length;
    						if(index == 0 && length>1){			/*0开头的数字串*/
    								var reg = /^[0]{1}[.]{1}[0-9]{1,2}$/;
    								if(!reg.test(_keyword)){
    										return false;
    								}else{
    										return true;
    								}
    						}else{			/*非0开头的数字*/
    								var reg = /^[1-9]{1}[0-9]{0,10}[.]{0,1}[0-9]{0,2}$/;
    								if(!reg.test(_keyword)){
    										return false;
    								}else{
    										return true;
    								}
    						}            
    						return false;
    				}
    		}
    			
    		},
    		
    	})
    </script>

## css部分 ##

html,
    body,
    div,
    input ,ul,li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #app {
    	font-size: 16px;
    
    }
    
    body,
    html {
    	background: #F4F4F4;
    	width: 100%;
    	height: 100%;
    }
    
    header {
    	background: #20A4F7;
    	width: 100%;
    	height: 64px;
    	padding-left: 10px;
    	display: flex;
    	align-items: center;
    	color: #FFFFFF;
    	box-sizing: border-box;
    }
    .back{
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    .icon {
    	display: inline-block;
    	width: 10px;
    	height: 10px;
    	border: 3px solid transparent;
    	border-top-color: #FFFFFF;
    	border-left-color: #FFFFFF;
    	transform: rotate(-45deg);
    }
    
    .title {
    	text-align: center;
    	width: 70%;
    }
    
    .content {
    	width: 100%;
    	height: 110px;
    	background: #FFFFFF;
    }
    
    .userImg {
    	width: 46px;
    	height: 46px;
    	border-radius: 50%;
    }
    
    .userImg img {
    	border-radius: 50%;
    	width: 100%;
    	height: 100%;
    }
    
    .content {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	padding: 0 10px;
    	box-sizing: border-box;
    }
    
    .userInfo,
    .InpBox {
    	display: flex;
    	align-items: center;
    }
    
    .company {
    	font-size: 12px;
    	color: #737681;
    
    }
    
    .userInfomation {
    	margin-left: 13px;
    }
    
    
    .InpBox {
    	justify-content: center;
    	margin-top: 40px;
    	position: relative;
    }
    
    @keyframes flick {
    	0% {
    		opacity: 0;
    	}
    
    	40% {
    		opacity: 0;
    	}
    
    	50% {
    		opacity: 1;
    	}
    
    	100% {
    		opacity: 1;
    	}
    }
    
    @keyframes flick { 
    	0% { opacity: 0; } 
    	40% { opacity: 0; } 
    	50% { opacity: 1; } 
    	100% { opacity: 1; } 
    }
    .link-input-active:after { 
    	content: ''; 
    	display: inline-block; 
    	width: 1px; 
    	height: 19px; 
    	margin-left: 5px;
    	background: #444; 
    	animation: flick 1s infinite;
    }
    
    .linkInpNull:empty::after{
    	content: attr(placeholder);
    	color: #737681;
    	font-size: 17px;
    	position: absolute;
    	bottom: 8px;
    	left: 9%;
    }
    .linkInpNullBefore::before { 
    	content: ''; 
    	display: inline-block; 
    	width: 1px; 
    	height: 19px; 
    	margin-left: 5px;
    	background: #444; 
    	animation: flick 1s infinite;
    }
    
    .link-input {
    	width: 90%;
    	height: 55px;
    	line-height: 38px;
    	padding: 10px;
    	box-sizing: border-box;
    	outline: none;
    	border: none;
    	border-radius: 5px;
    	background: #FFFFFF;
    	font-size: 23px;
    }
    
    .moneyIcon {
    	position: absolute;
    	right: 8%;
    	font-size: 20px;
    }
    .keyWords{
    	width: 100%;
    	height: 250px;
    	position: fixed;
    	bottom: 0;
    	background: #FFFFFF;
    	display: flex;
    	border-top: 1px solid #B4B4B4;
    }
    .keyWordsList{
    	width: 75%;
    	display: flex;
    	flex-wrap: wrap;
    	align-items: center;
    	justify-content: center;
    }
    .keyWordsItem ,.del,.sure{
    	width: 32.95%;
    	height: 62px;
    	line-height: 62px;
    	text-align: center;
    	border-right: 1px solid #B4B4B4;
    }
    .bottom{
    	border-bottom: 1px solid #B4B4B4;
    }
    .del,.sure{
    	width: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .sure{
    	height: calc(250px - 62px);
    	line-height: 30px;
    	font-size: 20px;
    	background: #20A4F7;
    	color: #FFFFFF;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    }
    .sureTxt{
    	display: block;
    	width: 100%;
    }
    .delAndSure{
    	width: 25%;
    }
    .disabled{
    	background: #A3DBFF;
    }
    .keyUp{
    	background: #F4F4F4;
    }
    
    
    .errNotice{
    	color: red;
    	margin-left: 5%;
    	margin-top: 20px;
    	
    }
    .InpErrToast{
    	border:1px solid red;
    }

记得引入vue包,才能正常使用

图标哪几个图片,替换成自己的图即可