北京蜂行动手势密码

static-res/bj-skymarketing/biz/css/base.css

@@ -676,4 +676,30 @@
}
.user-help-link p{
  margin-left: 40%;
}
}
/*手势密码*/
.gesture-msg {
  padding: 0rem .1rem .2rem;
  text-align: center;
  font-size: .15rem;;
}
.gesture-info {
  margin: 0 auto;
  top: 40%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.pass-footer{
  text-align: center;
  height: .3rem;
  color: #0F76FD;
}
.gesture-error-msg{
  padding: 0rem .1rem .2rem;
  text-align: center;
  color: #F04134;
  font-size: .14rem;;
}

static-res/bj-skymarketing/biz/js/gp.js

@@ -0,0 +1,36 @@
require(['jquery', 'gp'], function ($) {
    var winWidth = $(window).width()*.9;
    if(winWidth == 0){
        winWidth = 320*.9;
    }
    var winHeight = winWidth;
    $("#gesturepwd").GesturePasswd({
        backgroundColor:"transparent",  //背景色
        color:"#008bcc",   //主要的控件颜色
        roundRadii:winWidth*.1,    //大圆点的半径
        pointRadii:winWidth*.03, //大圆点被选中时显示的圆心的半径
        space:winWidth*.133,  //大圆点之间的间隙
        width:winWidth,   //整个组件的宽度
        height:winHeight,  //整个组件的高度
        lineColor:"#008bcc",   //用户划出线条的颜色
        zindex :100  //整个组件的css z-index属性
    });
    $("#gesturepwd").bind("hasPasswd",function(e,passwd){
        if(passwd == "1234"){
            $("#gesturepwd").trigger("passwdDIY", ["#008bcc"]); // 可自己传颜色
        } else if(passwd != "1235789"){
            //显示一下错误的手势线（红色的，只显示一秒）
            $("#gesturepwd").trigger("passwdWrong");
            alert("手势锁密码错误，解锁手势为：Z ");
        } else {
            //显示一下正确的手势线（绿色的，只显示一秒）
            $("#gesturepwd").trigger("passwdRight");
            window.location.href="index.html";
        }
    });
});

static-res/bj-skymarketing/biz/js/require-config.js

@@ -8,7 +8,8 @@ require.config({
        'ipuUI':'../ipu/ui/js/ipuUI',
        'dragsort': '../biz/lib/dragsort/jquery.dragsort-0.5.2',
        'commonUtil': '../biz/js/common/commonUtil'
        'commonUtil': '../biz/js/common/commonUtil',
      'gp': '../biz//lib/gesture/gesture.password'
    },
    shim:{
        'dragsort': { deps: ['jquery'] }

static-res/bj-skymarketing/biz/lib/gesture/gesture.password.js

@@ -0,0 +1,274 @@
;
define(["jquery"],function($){
    var GesturePasswd= function (element, options) {
        this.$element	= $(element);
        this.options	= options;
        var that=this;
        this.pr=options.pointRadii;
        this.rr=options.roundRadii;
        this.o=options.space;
        this.color=options.color;
        //ȫ����ʽ
        this.$element.css({
            "position":"relation",
            "width":this.options.width,
            "height":this.options.height,
            "background-color":options.backgroundColor,
            "overflow":"hidden",
            "cursor":"default"
        });
        //ѡ�����淶
        if(! $(element).attr("id"))
            $(element).attr("id",(Math.random()*65535).toString());
        this.id="#"+$(element).attr("id");
        var Point = function (x,y){
            this.x  =x;this.y=y
        };
        this.result="";
        this.pList=[];
        this.sList=[];
        this.tP=new Point(0,0);
        this.$element.append('<canvas class="main-c" width="'+options.width+'" height="'+options.height+'" >');
        //this.$element.append('<canvas class="main-p" width="'+options.width+'" height="'+options.height+'" >');
        this.$c= $(this.id+" .main-c")[0];
        this.$ctx=this.$c.getContext('2d');
        this.initDraw=function(){
            this.$ctx.strokeStyle=this.color;
            this.$ctx.lineWidth=2;
            for(var j=0; j<3;j++ ){
                for(var i =0;i<3;i++){
                    this.$ctx.moveTo(this.o/2+this.rr*2+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
                    this.$ctx.arc(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr),this.rr,0,2*Math.PI);
                    var tem=new Point(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
                    if (that.pList.length < 9)
                        this.pList.push(tem);
                }
            }
            this.$ctx.stroke();
            this.initImg=this.$ctx.getImageData(0,0,this.options.width,this.options.height);
        };
        this.initDraw();
        //this.$ctx.stroke();
        this.isIn=function(x,y){
            for (var p in that.pList){
                //console.log(that.pList[p][x]);
                //  console.log(( Math.pow((x-that.pList[p][x]),2)+Math.pow((y-that.pList[p][y]),2)));
                if(( Math.pow((x-that.pList[p]["x"]),2)+Math.pow((y-that.pList[p]["y"]),2) ) < Math.pow(this.rr,2)){
                    return that.pList[p];
                }
            }
            return 0;
        };
        this.pointDraw =function(c){
            if (arguments.length>0){
                that.$ctx.strokeStyle=c;
                that.$ctx.fillStyle=c;
            }
            for (var p in that.sList){
                that.$ctx.moveTo(that.sList[p]["x"]+that.pr,that.sList[p]["y"]);
                that.$ctx.arc(that.sList[p]["x"],that.sList[p]["y"],that.pr,0,2*Math.PI);
                that.$ctx.fill();
            }
        };
        this.lineDraw=function (c){
            if (arguments.length>0){
                that.$ctx.strokeStyle=c;
                that.$ctx.fillStyle=c;
            }
            if(that.sList.length > 0){
                for( var p in that.sList){
                    if(p == 0){
                        //console.log(that.sList[p]["x"],that.sList[p]["y"]);
                        that.$ctx.moveTo(that.sList[p]["x"],that.sList[p]["y"]);
                        continue;
                    }
                    that.$ctx.lineTo(that.sList[p]["x"],that.sList[p]["y"]);
                    //console.log(that.sList[p]["x"],that.sList[p]["y"]);
                }
            }
        };
        this.allDraw =function(c){
            if (arguments.length>0){
                this.pointDraw(c);
                this.lineDraw(c);
                that.$ctx.stroke();
            }
            else {
                this.pointDraw();
                this.lineDraw();
            }
        };
        this.draw=function(x,y){
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            //that.initDraw();
            that.$ctx.putImageData(this.initImg,0,0);
            that.$ctx.lineWidth=4;
            that.pointDraw(that.options.lineColor);
            that.lineDraw(that.options.lineColor);
            that.$ctx.lineTo(x,y);
            that.$ctx.stroke();
        };
        this.pointInList=function(poi,list){
            for (var p in list){
                if( poi["x"] == list[p]["x"] && poi["y"] == list[p]["y"]){
                    return ++p;
                }
            }
            return false;
        };
        this.touched=false;
        $(this.id).on ("mousedown touchstart",{that:that},function(e){
            e.data.that.touched=true;
        });
        $(this.id).on ("mouseup touchend",{that:that},function(e){
            e.data.that.touched=false;
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            that.$ctx.putImageData(e.data.that.initImg,0,0);
            that.allDraw(that.options.lineColor);
            // that.$ctx.stroke();
            for(var p in that.sList){
                if(e.data.that.pointInList(that.sList[p], e.data.that.pList)){
                    e.data.that.result= e.data.that.result+(e.data.that.pointInList(that.sList[p], e.data.that.pList)).toString();
                }
            }
            $(element).trigger("hasPasswd",that.result);
        });
        //
        $(this.id).on('touchmove mousemove',{that:that}, function(e) {
            if(e.data.that.touched){
                var x= e.pageX || e.originalEvent.targetTouches[0].pageX ;
                var y = e.pageY || e.originalEvent.targetTouches[0].pageY;
                x=x-that.$element.offset().left;
                y=y-that.$element.offset().top;
                var p = e.data.that.isIn(x, y);
                //console.log(x)
                if(p != 0 ){
                    if ( !e.data.that.pointInList(p,e.data.that.sList)){
                        e.data.that.sList.push(p);
                    }
                }
               //console.log( e.data.that.sList);
                e.data.that.draw(x, y);
            }
        });
        $(this.id).on('passwdWrong',{that:that}, function(e) {
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            that.$ctx.putImageData(that.initImg,0,0);
            that.allDraw("#cc1c21");
            that.result="";
            that.pList=[];
            that.sList=[];
            setTimeout(function(){
                that.$ctx.clearRect(0,0,that.options.width,that.options.height);
                that.$ctx.beginPath();
                that.initDraw()
            },500)
        });
        $(this.id).on('passwdRight',{that:that}, function(e) {
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            that.$ctx.putImageData(that.initImg,0,0);
            that.allDraw("#00a254");
            that.result="";
            that.pList=[];
            that.sList=[];
            setTimeout(function(){
                that.$ctx.clearRect(0,0,that.options.width,that.options.height);
                that.$ctx.beginPath();
                that.initDraw()
            },500)
        });
        $(this.id).on('passwdDIY',{that:that}, function(e, color) {
            that.$ctx.clearRect(0,0,that.options.width,that.options.height);
            that.$ctx.beginPath();
            that.$ctx.putImageData(that.initImg,0,0);
            that.allDraw(color || that.options.lineColor);
            that.result="";
            that.pList=[];
            that.sList=[];
            setTimeout(function(){
                that.$ctx.clearRect(0,0,that.options.width,that.options.height);
                that.$ctx.beginPath();
                that.initDraw()
            },500)
        });
    };
    GesturePasswd.DEFAULTS = {
        zindex :100,
        roundRadii:25,
        pointRadii:6,
        space:30,
        width:240,
        height:240,
        lineColor:"#00aec7",
        backgroundColor:"#252736",
        color:"#FFFFFF"
    };
    function Plugin(option,arg) {
        return this.each(function () {
            var $this   = $(this);
            var options = $.extend({}, GesturePasswd.DEFAULTS, typeof option == 'object' && option);
            var data    = $this.data('GesturePasswd');
            var action  = typeof option == 'string' ? option : NaN;
            if (!data) $this.data('danmu', (data = new GesturePasswd(this, options)));
            if (action)	data[action](arg);
        })
    }
    $.fn.GesturePasswd             = Plugin;
    $.fn.GesturePasswd.Constructor = GesturePasswd;
});

static-res/bj-skymarketing/gesture-pass.html

@@ -0,0 +1,47 @@
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>手势密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"><!-- 宽度自动适配 -->
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
    <link rel="stylesheet" type="text/css" href="ipu/lib/mdi/css/mdi.css">
    <link rel="stylesheet" type="text/css" href="biz/css/base.css">
    <script src="ipu/lib/requirejs/require.min.js"></script>
    <script src="biz/js/require-config.js"></script>
    <script src="biz/js/gp.js"></script>
</head>
<body class="pages-gesture-pass">
<div class="ipu-flex-row ipu-flex-vertical">
    <div class="ipu-flex-col">
        <div class="pages-header">
            <header class="ipu-toolbar">
                <a class="ipu-fn-left link-back" href="javascript:history.back(-1);">
                    <i class="ipu-icon mdi mdi-chevron-left"></i>返回
                </a>
                <h1 class="ipu-toolbar-title">手势密码</h1>
            </header>
        </div>
    </div>
    <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="gesture-info">
            <div class="gesture-msg">请设置手势密码，最少四位数字</div>
            <div class="gesture-error-msg">手势密码不正确，剩余尝试次数4次</div>
            <div id="gesturepwd"></div>
        </div>
    </div>
    <div class="ipu-flex-col">
        <div class="pass-footer">
            <a href="login.html">
                账号密码登录
            </a>
        </div>
    </div>
</div>
</body>
</html>