瀏覽代碼

debug fcode

huanggang 8 年之前
父節點
當前提交
e6d9858d98
共有 3 個文件被更改,包括 181 次插入181 次删除
  1. 18 7
      data/resource/mobile/fcode/css/main.css
  2. 94 155
      data/resource/mobile/fcode/js/fcode.js
  3. 69 19
      mobile/templates/default/fcode/bind.php

+ 18 - 7
data/resource/mobile/fcode/css/main.css

@@ -1,7 +1,6 @@
 html,
 body {
     height: 100%;
-    max-height: 100%;
     color: #fff;
     font-family: "PingFang SC","Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;;
 }
@@ -35,6 +34,7 @@ body {
 }
 .p_absolute {
     position: absolute;
+    bottom: 0;
 }
 .p_fixed {
     position: fixed;
@@ -59,9 +59,6 @@ body {
     border-radius: 10px;
     margin-top: 0.5rem;
 }
-.block_goods {
-
-}
 .block_goods_msg {
     margin-top: 0.32rem;
 }
@@ -69,7 +66,17 @@ body {
 .bg_write {
     background: #fff;
 }
-
+.bg_red {
+    background: #FF4E4E;
+}
+.fcode_init_bg {
+    background: #D0D0D0;
+    color: #000;
+}
+.fcode_success_bg {
+    background: #FF4E4E;
+    color: #fff;
+}
 .bit_img {
     background: url("../images/index_bg.png") #FF4E4E bottom left no-repeat;
     background-size: 10rem 4.4rem;
@@ -234,8 +241,6 @@ input,button,.btn {
     width: 5.05rem;
     height: 1.08rem;
     line-height: 1.08rem;
-    background: #D0D0D0;
-    color: #000000;
     font-size: 16px;
     border-radius: 80px;
     margin-top: 1.1rem;
@@ -297,4 +302,10 @@ input,button,.btn {
 .btn_pressed {
     box-shadow: 5px 5px 30px #ccc;
     -webkit-box-shadow: 5px 5px 30px #ccc;
+}
+.receive_state {
+    width: 2.13rem;
+    height: 2.13rem;
+    margin-top: 0.91rem;
+    margin-bottom: 0.57rem;
 }

+ 94 - 155
data/resource/mobile/fcode/js/fcode.js

@@ -1,161 +1,100 @@
-$(function(){
-    var tel={
-        //总入口
-        init:function(){
-            var that=this;
-            that.validate('#hack',that.msg.no_tel);
-            that.time('#hack');
-            that.active();
-            that.blurValidatetel('keyup');
-            that.blurValidatetel('blur');
-            that.focu(document);
-        },
 
-        //弹出信息
-        msg:{
-            no_tel:'请认真填写你的手机号',
-            no_yanz:'请填写验证码',
-            yanz_err:'验证码错误',
-            lg:'该手机已经领取过红包',
-            no_lq:'该手机不能领取红包',
-            remove:'获取验证码哦',
-            over:'该手机已经领取过红包',
-            no_pass:'该手机号不能领取红包'
-        },
-        //判断验证顺序
-        b:false,
-        //插入验证结构
-        validate:function(id,msg,btnmsg,sj){
-            var that=this;
-            $(id).on('tap',function(e){
-                e.preventDefault();//阻止浏览器默认事件
-                var telVal=$('#tel_number').val(),
-                    tel=new RegExp("^[1][3-8]+\\d{9}");
-                //验证输入手机规则
-                if(telVal==''||(!tel.test(telVal))){
-                    alert(msg);
-                    that.b=false;
-                }
-                else{
-                    that.b=true;
-                    return;
-                }
-            })
-        },
-        blurValidatetel:function(eve){
-            var that=this;
-            $("#tel_number").on(eve,function(){
-                var thisVal=$(this).val(),
-                    tel=new RegExp("^[1][3-8]+\\d{9}");
-                if(thisVal==''||(!tel.test(thisVal))){
-                    that.b=false;
-                    return false;
-                }
-                else {
-                    that.b=true;
-                }
-            })
-        },
-        //留言
-        input_msg:function(){
-            var   dom='<div class="layer_box" id="bomb">'+
-                '<div class="layer" style="padding-bottom: 2px">'+
-                '<div class="top_msg" style="padding: 0 20px;line-height: 126px">'+
-                '<div><textarea id="pass_msg" placeholder="写下你想说的话" style="width:98%;height:50px;font-size: 0.4rem;line-height: 0.4rem;"></textarea></div>'+
-                '</div>'+
-                '<div class="bottom_btn center" style="background: #fff;">'+
-                '<p id="go" class="post_btn" style="float: left;width: 50%;border-top: 1px solid #bfbfbf;color: #000;">取消</p>'+
-                '<p id="post" style="float:left; color: #ff4e4e;width: 49.5%;border-top: 1px solid #bfbfbf;border-left: 1px solid #bfbfbf;">发送</p>'+
-                '</div>'+
-                '</div>'+
-                '</div>';
-            $('body').append(dom);
-        },
-        //倒计时
-        time:function(id,msg,btnmsg){
-            var that=this,
-                times=function(){
-                    if(that.b==false){
-                        return;
-                    }
-                    tel = $("#tel_number").val();
-                    var url_host=window.location.hostname;
-                    $.post("/mobile/index.php?act=login&op=getcode&type=getfcode&client_type=ajax", {
-                        mobile: tel
-                    }), function (data, status) {
-                        return;
-                    };
-                    var yzVal = $('#yanz').val(),
-                        time = 60,
-                        a = setInterval(function () {
-                            time = time - 1;
-                            $(id).text(time);
-                            if (time == 0) {
-                                clearInterval(a);
-                                $(id).text('重新发送');
-                            }
-                        }, 1000);
-                };
-            $(id).on('tap', function () {
-                //判断倒计时是否开始了
-                var text = $(this).text();
-                if (text == '重新发送' || text == '获取验证码') {
-                    times();
-                }
-                else {
-                    return;
-                }
-            })
-        },
-        //验证码验证
-        active: function ()
+var Validate = function(){
+    this.required = function(id)
+    {
+        var inputVal=$(id).val();
+        if(inputVal=="")
         {
-            var that = this;
-            $('#bind').on('tap', function () {
-                var b = that.b;
-                if (b == false) {
-                    alert(that.msg.no_tel);
-                }
-                else {
-                    if (yanzVal == '') {
-                        alert(that.msg.no_yanz);
-                    }
+            return false;
+        }
+        else {
+            return true;
+        }
+    };
+    this.mobile = function (id)
+    {
+        var inputVal=$(id).val();
+        var tel=new RegExp("^[1][3-8]+\\d{9}");
+        if(tel.test(inputVal))
+        {
+            return true;
+        }
+        else
+        {
+            return false;
+        }
+    }
+};
 
-                    else {
-                        var yanzVal = $("#yanz").val();
-                        var tel = $("#tel_number").val();
-                        $.ajax({
-                            type:'post',
-                            dataType:'json',
-                            url:'/mobile/index.php?act=fcode&op=bind&client_type=ios',
-                            data:{
-                                mobile: tel,
-                                code: yanzVal
-                            },
-                            success:function(data)
-                            {
-                                if (data.code==200) {
-                                    alert('领取成功');
-                                }
-                                else {
-                                    alert(that.msg.yanz_err);
-                                }
-                            }
-                        });
-                    }
-                }
-            })
-        },
-        //收起键盘
-        focu:function(id){
-            $(id).on('tap',function(event){
-                var eventName=event.target.localName;
-                if(eventName.indexOf('input')!==-1||eventName.indexOf('button')!==-1){
-                    return;
+var CountDown = function(time)
+{
+    if(isNaN(time))
+    {
+        return;
+    }
+    this.time = time;
+    this.countDown = function(){
+        if(this.isStart())
+        {
+            return false;
+        }
+        else
+        {
+            var that=this;
+            var target=event.target;
+            var time = parseInt(that.time);
+            var a = setInterval(function()
+            {
+                time = time - 1;
+                target.innerHTML = time;
+                if(time <= 0)
+                {
+                    clearInterval(a);
+                    target.innerHTML = '重新发送';
                 }
-                $('input').blur();
-            })
+            },1000);
         }
     };
-    tel.init();
-});
+    this.isStart = function()
+    {
+        var target = event.target;
+        if(target.innerHTML == '重新发送' || target.innerHTML == '获取验证码')
+        {
+            return false;
+        }
+        else
+        {
+            return true;
+        }
+    }
+
+};
+
+var ajaxServer = function(type,url,data,callback)
+{
+    $.ajax({
+        type:type,
+        dataType:'json',
+        url:url,
+        data:data,
+        success:callback
+    });
+};
+
+
+var app=function()
+{
+    var app=navigator.userAgent.toLowerCase(),//判断设备
+        app_nav=navigator.appVersion.toLowerCase(),
+        href='';
+    if (app_nav.indexOf('iphone')>-1&&app.indexOf('iphone')){
+        href='http://a.app.qq.com/o/simple.jsp?pkgname=com.lrlz.beautyshop';
+    } else if (app.indexOf('micromessenger')>-1 && app_nav.indexOf('android')>-1) {
+        href = "http://p.lrlz.com/hfive/android_down/index.html";
+    }
+    else {
+        href="javascript:void(0)";
+    }
+    return href;
+};
+

+ 69 - 19
mobile/templates/default/fcode/bind.php

@@ -20,7 +20,7 @@
         </ul>
     </div>
     <div class="bind_tel_box p_absolute bg_write">
-        <div class="fcode t_center layout_center"><?php echo $output['fcode']['fc_code']; ?></div>
+        <div class="fcode t_center layout_center fcode_init_bg"><?php echo $output['fcode']['fc_code']; ?></div>
         <div class="tel layout_center">
             <div class="mobile_box p_relative"><input type="number" placeholder="手机号" class="mobile block" id="tel_number"/></div>
             <div class="overflow get_box p_relative">
@@ -32,7 +32,19 @@
             <button class="btn btn_submit block t_center layout_center" id="bind">提交领取</button>
         </div>
     </div>
-    <div class="p_fixed advert">
+
+<!--领取状态显示-->
+
+<!--    <div class="bind_tel_box p_absolute bg_write">-->
+<!--        <div class="fcode t_center layout_center fcode_success_bg">HSDX012778301408</div>-->
+<!--        <div class="receive_state layout_center">-->
+<!--            <img src="--><?php //echo RESOURCE_SITE_URL; ?><!--/mobile/fcode/images/success.png" alt="成功"/>-->
+<!--        </div>-->
+<!--        <h4 class="t_center">恭喜你领取成功!</h4>-->
+<!--        <p class="t_center">可前往熊猫美妆APP中查看</p>-->
+<!--    </div>-->
+
+    <div class="p_absolute advert bg_write">
         <div class="f_left logo">
             <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/fcode/images/logo.png" alt="logo"/>
         </div>
@@ -49,26 +61,64 @@
 <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/fcode/js/fcode.js?<?php echo bonus_version(); ?>"></script>
 <script type="text/javascript">
     $(function(){
-        function app()
-        {
-            var app=navigator.userAgent.toLowerCase(),//判断设备
-                    app_nav=navigator.appVersion.toLowerCase(),
-                    href='';
-            if (app_nav.indexOf('iphone')>-1&&app.indexOf('iphone')){
-                href='http://a.app.qq.com/o/simple.jsp?pkgname=com.lrlz.beautyshop';
-            } else if (app.indexOf('micromessenger')>-1 && app_nav.indexOf('android')>-1) {
-                href = "http://p.lrlz.com/hfive/android_down/index.html";
+        $('#link').attr('href',app());
+
+        $('body').height($('body')[0].clientHeight);
+
+        $('#hack').on('tap',function(){
+            var validate = new Validate();
+            var mobile=validate.mobile('#tel_number');
+            if(!mobile)
+            {
+                alert('请输入正确的电话号码');
+                return;
             }
-            else {
-                href="javascript:void(0)";
+            else
+            {
+                var data = {};
+                data.mobile = $('#tel_number').val();
+                var countTime = new CountDown(60);
+                countTime.countDown();
+                ajaxServer('post','https://www.baidu.com',data,function(data){
+                    return;
+                });
             }
-            return href;
-        }
+        });
 
-        function href() {
-            $('#link').attr('href',app());
-        }
-        href();
+        $('#bind').on('tap',function (){
+            var validate = new Validate();
+            var mobile = validate.mobile('#tel_number');
+            var yz_code = validate.required('#yanz');
+            var data = {};
+            data.mobile = $('#tel_number').val();
+            data.code = $('#yanz').val();
+            if(!mobile)
+            {
+                alert('请输入正确的电话号码');
+                return;
+            }
+            if(!yz_code)
+            {
+                alert('请输入正确的验证码');
+                return;
+            }
+            ajaxServer('post','https://www.baidu.com',data,function(data){
+                if (data.code==200) {
+                    alert('领取成功');
+                }
+                else {
+                    alert("验证码错误请重新输入");
+                }
+            });
+        });
+
+        $(document).on('tap',function(){
+            var eventName=event.target.localName;
+            if(eventName.indexOf('input')!==-1||eventName.indexOf('button')!==-1){
+                return;
+            }
+            $('input').blur();
+        });
     })
 </script>
 </body>