目录
页面展示:点击这里
源代码: 点击这里
本文是对中现私募股权---移动端(银行卡管理:未绑定,绑定,绑定完成)页面的总结,主要涉及到的技术点有:vue.js,less,gulp,webpack,html。
写在前面:由于这个项目是协作开发的,故webpack,gulp的具体配置文件不是我写的,我目前只是用到了webpack,gulp来帮助我实现上述四个页面,不过我最近也在加紧学习中......
页面搭建
整个银行卡管理功能是由三个子页面构成,分别是:点击绑定银行卡,用户输入银行卡信息,显示用户绑定的银行卡信息。
对于“点击绑定银行卡”页面,首先是放在<template>标签里的,然后是<section>标签里面两个<p>实现用户提示信息,和说明文字。
对于"用户输入银行卡信息"页面,考虑到要实时获取用户输入的信息并进行合法性进行验证,用到了vue.js中的v-on指令,绑定了blur事件,为了实现数据的双向绑定用到了v-model指令。
对于"显示用户绑定的银行卡信息"页面,本来银行的logo我是用<img>标签实现的,但最后考虑到实际中后台给的数据不可能包含银行logo,然后改成了<span>标签,银行logo做为background存在,这里还用到了vue.js中的Class与Style绑定的对象语法,即类似于v-bind:class="{'class-a':isA,'class-b':isB}" 根据isA和isB的值为true还是false实现根据用户填写的银行名称动态地切换class,进而显示相应的银行logo,此处用到了三目运算符来确定isA和isB的值。
样式设置
这三个页面全部是用less写的样式
对于“点击绑定银行卡”页面,用到了::first-letter这个伪元素,实现了“+”号和其后的文本大小相适应,因为开始没用这个伪元素时,尽管“+”和其后的文本在同一个<p>中,字体大小也相同,但是显示效果却不令人满意。对于点击跳转到用户输入银行卡信息页面,是用vue-router插件中的v-link指令来让用户在v-router应用的不同路径间跳转。
对于“点击绑定银行卡”页面为了实现错误提示能渐渐显示,用到了vue.js中的css过渡,关键代码如下:
.expand-transition{ transition : all .3s ease; } //expand-enter 定义进入的初始状态 //expand-leave 定义离开的结束状态 .expand-enter,.expand-leave { opacity: 0; }
js处理
对于“用户输入银行卡信息”页面主要用到了正则表达式对用户输入信息的和法性进行验证,部分代码如下:
methods:{ checkName : function(){ this.$set('userData.name',this.userData.name.replace(/(^\s*)|(\s*$)/g,'')); //去掉用户输入数据的首位空格 this.inputData.name=this.userData.name; //将用户输入的数据存储 var name=this.inputData.name; if(!name){ //当用户名为空时 this.isError=true; this.errMsg='姓名不能为空'; this.errHide(); //超时错误提示信息隐藏 }else{ //当用户名不为空时 var reg=/^[\u4E00-\u9FA5]{2,7}$/; if(reg.test(name)){ this.isError=false; this.isTrue[0]=true; }else{ this.isError=true; this.errMsg='姓名应为2-7个中文'; this.errHide(); //超时错误提示信息隐藏 } } } }
点击发送验证码,关键点是设置了两个flag,一个用来判断用户是否有输入合法手机号,另一个是为了避免用户重复点击导致倒计时出错而存在的,两个都初始化为false,关键代码如下:
sendVeriCode : function(){ //发送验证码 var _this=this; var i=0;//辅助倒计时的实现 if(_this.verTrue[0]){ _this.flaseVeriCode='1234'; //获得模拟发送的验证码 _this.verTrue[0]=false; }else{ if(_this.verTrue[2]){ _this.isError=true; _this.errMsg='手机号不能为空'; this.errHide(); //超时错误提示信息隐藏 _this.verTrue[2]=false; } } if(_this.verTrue[1]){ _this.verTrue[1]=false; var timer=setInterval(function(){ _this.veriTxt=(60-i)+'秒后重新发送'; i++; if(i==60){ clearInterval(timer); _this.veriTxt='发送验证码'; _this.verTrue=[true,true]; } },1000); } },
为了实现错误提示信息能在一段时间之后自动消失,用到了setTimeout()定时器,关键代码如下:
//用于实现超时错误提示信息的隐藏效果 errHide : function(){ var _this=this; setTimeout(function(){ _this.isError=false; //使得错误提示信息隐藏 },3000); },
显示错误提示信息用到了vue.js中的v-show指令,用来切换元素的css属性display,用法示例:
<h1 v-show="ok">Hello!</h1>
只需要设置ok的值为false还是true就可以控制上述那个h1元素的隐藏,显示
对于“显示用户绑定的银行卡信息”页面,用到了vue.js中数据绑定语法的文本插值,使得可以通过XMLHttpRequest获得的数据来动态显示用户绑定的信息,此处用到了vue.js中的vue-resource插件,关键代码如下:
ready : function(){ //使用vue-resource插件向服务器请求数据 var _this=this; this.$http.get('../src/lib/card.json',{},{ headers: { "X-Requested-With": "XMLHttpRequest" }, emulateJSON: true }).then(function(response){ //请求成功时 var data=response.data; this.$set('bankInfo',data); //为bookInfo添加属性并让它是响应的 },function(response){ //请求失败时 });
}
对于该页面的实现,我写了一个json文件来模拟从服务器端获得的数据,json文件如下:
{
"id" : "001",
"bankName" : "农业银行",
"userName" : "张三",
"bankNum" : "*************45678",
"explainTxt" : "说明:XXXXXXXXXXX"
}