起因是因为公司需要一个移动端的支付页面，之前没写过，猛然间接到这样一个任务，有点儿手足无措，经过多方面的研究，最终还是顺利完成了，写篇博客，记录此次的收获，以后再接再厉。
html部分：
<!-- 登录frm -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>支付</title>
<link rel="stylesheet" type="text/css" href="css/api.css" />
<link rel="stylesheet" type="text/css" href="css/aui.css" />
<link rel="stylesheet" type="text/css" href="css/aui.2.0-override.css" />
<link rel="stylesheet" type="text/css" href="css/pay.css">
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
<div id="main" class="flex-con">
<div class="aui-content aui-margin-b-15 box-3">
<ul class="aui-list aui-media-list aui-margin-t-20 aui-margin-b-15">
<li class="aui-list-item aui-list-item-middle"
style="padding-right:0.75rem;width:100%;margin:0 auto;">
<div class="aui-media-list-item-inner"
style="width:auto;display: flex;margin:0 auto;text-align: center;">
<div class="aui-list-item-media" style="width: 3rem;">
<img src="image/bank.png" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title" style="font-size:17px;">西安唐车商贸有限公司</div>
</div>
<div class="aui-list-item-text">
<div class="text">门店</div>
<div style="margin-left:10px;font-size:13px;">西安唐车商贸有限公司</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="aui-content-padded aui-margin-t-20 box-1">
<div>金额</div>
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label">
￥
</div>
<div class="aui-list-item-input">
<input placeholder="请输入付款金额" style="font-size:26px;" style="font-size:50rpx;"
decimal="2" type="text" pattern="[0-9]*" v-model="paymentAmount" id="thisInput"
@click="thisFocus()">
</div>
</div>
</li>
</ul>
</div>
<!-- 备注 -->
<div class="aui-content-padded aui-margin-t-20" @click="remarksFun()">
<div class="remarks">{{remarks==''?'填写备注':remarks}}</div>
</div>
<!-- 键盘 -->
<div id="footer" v-if="customKeyboard">
<div>
<div class="aui-content-padded sweep">
全国三百万商户都在用
<div class="code">秒付码</div>
</div>
</div>
<div class="keyboard clear">
<div class="left-content">
<div class="number-item press-active" tapmode @click="input(1);">
<p class="text-font-size">1</p>
</div>
<div class="number-item press-active" tapmode @click="input(2);">
<p class="text-font-size">2</p>
</div>
<div class="number-item press-active" tapmode @click="input(3);">
<p class="text-font-size">3</p>
</div>
<div class="number-item press-active" tapmode @click="input(4);">
<p class="text-font-size">4</p>
</div>
<div class="number-item press-active" tapmode @click="input(5);">
<p class="text-font-size">5</p>
</div>
<div class="number-item press-active" tapmode @click="input(6);">
<p class="text-font-size">6</p>
</div>
<div class="number-item press-active" tapmode @click="input(7);">
<p class="text-font-size">7</p>
</div>
<div class="number-item press-active" tapmode @click="input(8);">
<p class="text-font-size">8</p>
</div>
<div class="number-item press-active" tapmode @click="input(9);">
<p class="text-font-size">9</p>
</div>
<div class="number-item press-active" tapmode @click="input('.');">
<p class="text-font-size">.</p>
</div>
<div class="number-item press-active" tapmode @click="input(0);">
<p class="text-font-size">0</p>
</div>
<div class="number-item press-active" tapmode>
<p class="text-font-size"> </p>
</div>
</div>
<div class="right-content">
<div class="control-item press-active" tapmode @click="deleteFun();">
<img class="delete-btn-img" src="image/del.png">
</div>
<div class="control-item-x2 press-active"
:style="paymentAmount!=''?'background:#0080ff;':'background:#67b2fd;'" id="submit_btn_Box"
tapmode @click="sumbitFun();">
<p class="text-font-size" id="ensureText" style="color:#fff;font-size:18px;">确认支付</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/layer_mobile/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/api.js"></script>
<script src="js/aui-dialog.js"></script>
<script src="js/pay.js"></script>
</body>
</html>
CSS部分：
.head-icon {
width: 7rem;
height: 7rem;
margin: 3rem auto 1rem;
border-radius: 100%;
background-position: center center;
border: 1px solid #DDDDDD;
}
.head-name {
font-size: 1rem;
text-align: center;
color: #555;
padding-bottom: 1rem;
}
/*Input*/
.clear {
clear: both;
}
.money-box {
margin: 1rem;
border: 1px solid #DDDDDD;
border-radius: 0.25rem;
overflow: hidden;
}
.money-box input {
outline: none;
width: 100%;
height: 3rem;
font-size: 1.3rem;
padding: 0.25rem 0.75rem;
}
.remarks{
font-size:14px;
padding-left:0.75rem;
color:#67b2fd;
}
/*Keyboard*/
#footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background: #FFF;
border-top: 1px solid #DDDDDD !important;
}
#footer .keyboard {
width: 100%;
border-top: 1px solid #DDDDDD !important;
}
#footer .keyboard .left-content {
width: 75%;
float: left;
}
#footer .keyboard .right-content {
width: 25%;
float: left;
}
#footer .delete-btn-img {
display: inline;
width: 1.5rem;
height: 1rem;
vertical-align: middle;
}
#footer .text-font-size {
font-size: 30px;
color: #333;
}
#footer .active {
background-color: #ff5400;
}
#footer .active .text-font-size {
color: #ffffff !important;
}
#footer .left-content .number-item {
float: left;
width: 33.3333%;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
overflow: hidden;
border-bottom: 1px solid #DDDDDD !important;
border-right: 1px solid #DDDDDD !important;
}
#footer .right-content .control-item {
float: left;
width: 100%;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
overflow: hidden;
border-bottom: 1px solid #DDDDDD !important;
}
#footer .right-content .control-item-x2 {
width: 100%;
height: 7.5rem;
line-height: 7.5rem;
text-align: center;
overflow: hidden;
}
#footer .press-active:active {
background-color: #F2F2F2;
}
#footer .disabled {
background-color: #dddddd;
}
/*提示框*/
.imagebox {
overflow: hidden;
padding: 20px;
}
.imagebox img {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}
.imagebox span {
line-height: 50px;
float: left;
}
#footer #submit_btn_Box .text-font-size {
width: 50px;
line-height: 30px;
}
#footer #submit_btn_Box {
display: flex;
align-items: center;
justify-content: center;
}
.content {
background: #FFF;
}
.moneybox {
border-top: 1px solid #CCC;
padding: 15px 20px;
}
.moneybox h5 {
font-weight: normal;
font-size: 0.8rem;
color: #555;
}
.moneyinput {
overflow: hidden;
}
.moneyinput strong {
float: left;
font-size: 2rem;
color: #333;
width: 2.5rem;
font-weight: 600;
line-height: 2.5rem;
}
.moneyinput div {
padding-left: 2.5rem;
position: relative;
z-index: 333;
}
.moneyinput div input {
font-size: 1.6rem;
font-weight: 600;
color: #333;
height: 2.5rem;
line-height: 2.5rem;
flex: 1;
}
.box-1,
.box-2 {
background-color: #fff;
}
.box-3 .text {
background-color: #ccc;
padding: 0px 3px;
font-size: 8px;
border-radius: 5px;
color: #fff;
display: inline-block;
}
.aui-media-list {
width: 100%;
margin: 0 auto;
}
.box-1 .aui-list-item-label {
width: 1%;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.box-1,
.box-2 {
border-radius: 4px;
border: 1px solid #eee;
padding: 5px 15px;
}
.box-1 li.aui-list-item {
padding-left: 0;
}
.box-2 .aui-list-item {
padding-right: 0.75rem;
}
.box-2 input[type="text"] {
height: 1.5rem;
font-size: 12px;
/* border: 1px solid #eee; */
padding: 0 15px;
border-radius: 5px;
margin-left: 0px;
}
.box-3 .aui-list .aui-list-item-text {
font-size: 0.7rem;
color: #757575;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
align-items: center;
}
#main {
background: #f1eff6;
}
/* 修改input默认样式开始 */
/* WebKit browsers */
input::-webkit-input-placeholder {
color: #a7a7a7;
font-size: 16px;
}
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
color: #a7a7a7;
opacity: 1;
font-size: 16px;
}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {
color: #a7a7a7;
opacity: 1;
font-size: 16px;
}
/* Internet Explorer 10+ */
input:-ms-input-placeholder {
color: #a7a7a7;
font-size: 16px;
}
/* 修改input默认样式结束 */
.aui-list {
position: relative;
font-size: 0.8rem;
background-color: none;
border-top: 0px solid #dddddd;
}
.aui-list .aui-list-item {
list-style: none;
margin: 0;
padding: 0;
padding-left: 0.75rem;
color: #212121;
border-bottom: 0px solid #dddddd;
position: relative;
min-height: 2.2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.sweep{
color: #858489;
text-align: center;
margin-top: 20px;
font-size:12px;
}
.sweep .code{
color: #0080ff;
display: inline-block;
}
JS部分：
var app = new Vue({
el: '#wrap',
data: {
customKeyboard: true,//自定义键盘的显示隐藏，false隐藏，true显示
paymentAmount: '',//支付金额
remarks: '',//备注内容
inputValue: [],//输入的数字
},
// 在 'methods' 对象中定义方法
methods: {
//获取支付金额
thisFocus() {
$('#thisInput').focus();
},
//获取备注
remarksFun() {
var that = this;
var dialog = new auiDialog();
dialog.alert({
title: "填写备注",
msg: '=====',
buttons: ['取消', '确定'],
input: true //是否有input输入框
}, function (ret) {
if (ret.buttonIndex) {
that.remarks = ret.text;
}
})
},
//删除输入的数值
deleteFun() {
//如果没有输入，直接返回
if (!this.paymentAmount.length) return false;
//否则删除最后一个
this.paymentAmount = this.paymentAmount.substring(0, this.paymentAmount.length - 1);
},
//获取键盘值
input(data) {
//如果包含小数点，直接返回
if (this.paymentAmount.indexOf('.') > -1) {
this.paymentAmount = this.paymentAmount
}
//如果有小数点且小数点位数不小于2
if (this.paymentAmount.indexOf('.') > -1 && this.paymentAmount.substring(this.paymentAmount.indexOf('.') + 1).length < 2)
this.paymentAmount = this.paymentAmount + data;
//没有小数点
if (!(this.paymentAmount.indexOf('.') > -1)) {
//如果第一位是0，只能输入小数点
if (data == 0 && this.paymentAmount.length == 0) {
this.paymentAmount = '0.';
} else if (data == '.' && this.paymentAmount.length == 0) {
//如果第一位是小数点
this.paymentAmount = '0.';
} else {
if (this.paymentAmount.length && Number(this.paymentAmount.charAt(0)) === 0) return;
this.paymentAmount = this.paymentAmount + data;
}
}
},
//提交订单
sumbitFun() {
var payAmount = this.paymentAmount;//支付金额
var remarksInput = this.remarks;//获取备注
console.log(remarksInput);
if (payAmount == '' || payAmount == null || payAmount == undefined) {
layer.open({
content: '请输入支付金额',
skin: 'msg',
time: 2 //2秒后自动关闭
});
}
},
},
//页面挂载
mounted() {
this.thisFocus();
setTimeout(() => {
this.thisFocus()
}, 0);
},
create: function () { }
})
使用到的js文件
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/layer_mobile/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/api.js"></script>
<script src="js/aui-dialog.js"></script>
均可以自行下载，也可以加QQ517861163