中现私募股权---移动端(银行卡管理：未绑定，绑定，绑定完成)总结

1.页面搭建

2.样式设置

3.js处理

页面展示：点击这里

源代码：点击这里

本文是对中现私募股权---移动端(银行卡管理：未绑定，绑定，绑定完成)页面的总结,主要涉及到的技术点有：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"
}