手機自定義支付頁面,不調用手機自帶鍵盤,自定義鍵盤
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包,才能正常使用
圖標哪幾個圖片,替換成自己的圖即可