起因是因为公司需要一个移动端的支付页面，之前没写过，猛然间接到这样一个任务，有点儿手足无措，经过多方面的研究，最终还是顺利完成了，写篇博客，记录此次的收获，以后再接再厉。
html部分：
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
style="padding-right:0.75rem;width:100%;margin:0 auto;">
style="width:auto;display: flex;margin:0 auto;text-align: center;">
￥
decimal="2" type="text" pattern="[0-9]*" v-model="paymentAmount" id="thisInput"
@click="thisFocus()">
全国三百万商户都在用
1
2
3
4
5
6
7
8
9
.
0
:style="paymentAmount!=''?'background:#0080ff;':'background:#67b2fd;'" id="submit_btn_Box"
tapmode @click="sumbitFun();">
确认支付
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文件
均可以自行下载，也可以加QQ517861163