qy-platform/Application/Home/View/default/Safe/bindTel.html

<extend name="Public/promote_base"/>
<block name="css">
  <link href="__CSS__/20180207/account.css" rel="stylesheet" >
	<style>.notice_tip {padding-left:20px;color:#999;font-size:12px;} 
	.formtxt{display:inline-block;width:232px;}
	.trunk-list .table2 .r .qrcodeboxwrap {padding-left:0;padding-right:20px;padding-bottom:20px;}
	.qrcodebox img {width:100px;height:100px;}
	.qrcodebox p {font-size:12px;margin:0;color:#666;}
	.qrcodebox p span{color:red;}
	.qrcodeboxwrap~.notice_tip{vertical-align:top;display:inline-block;margin-top:20px;}

    .mail_suffix {position: absolute;
        top: 43px;
        border: 1px solid rgb(229,229,229);
        border-radius: 2px;
        color: #666;
        font-size: 11px;
        width: 230px;
        padding: 0 10px;
        line-height: 1.4;
        z-index: 1;
        background: #FFF;
        height: 200px;
        overflow: hidden;
        overflow-y: auto;}
    .mail_suffix li {
        padding: 2px 0;
        cursor: pointer;
        }
        .mail_suffix li:first-child {padding-top:4px;}
        .mail_suffix li:last-child{padding-bottom:4px;}
    </style>
</block>

<block name="body">
    <script type="text/javascript" src="__STATIC__/provincecityarea/area1.js" ></script>
    <div class="page-list normal_list promote-base_info-form">
      <div class="trunk-title">
     
      	<span class="title_main">手机号绑定</span>
      </div>
      <div class="trunk-content article">
          <div class="trunk-list baseInfo">
           
              <form action="{:U('Safe/addLoginMobile')}" novalidate="novalidate" method="post" class="paw_info">
                  <table class="table2" style="margin-top:50px;margin-left:50px">
                      <tr>
                        <td class="l"><span style="color:red">*</span>手机号码</td>
                        <td class="r">
                            <!-- <input type="text" class="input txt" name="login_phone"  id="login_phone" style="width:430px" placeholder="请输入手机号码"> -->
                            <if condition="$login_phone neq null">
                                <input type="text"   class="input txt" name="login_phone" id="login_phone"  style="width:430px"  value="{$login_phone}">
                          <else />
                                <input type="text" class="input txt" name="login_phone"  id="login_phone" style="width:430px" placeholder="请输入手机号码">
                            </if>
                        <span id="confirm_password_tip"></span></td>
                      </tr>
                      <tr>
                        <td class="l"><span style="color:red">*</span>短信验证码</td>
                        <td class="r"><input type="text" class="input txt" name="code" id="code"  style="width:230px" placeholder="请输入短信验证码">
                        <span id="confirm_password_tip"></span>
                        <button id="sendtelCode"  class="tj btn" target-form="paw_info">发送验证码</button>
                        </td>
                      </tr>
                      
                      <tr>
                        <td class="l"></td>
                        <td class="r">
                          <input type="hidden" name="id" value="{$data.id}">
                          <input type="submit" class="tj btn ajax-post" value="保存" style="width:200px" title="" target-form="paw_info">
                        </td>
                      </tr>
                  </table>
              </form>
            
              
            
          </div>
      </div>
    </div>





</block>
<block name="script">
    <script type="text/javascript" src="__JS__/20170831/select2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/mail_suffix.js"></script>
    <script type="text/javascript" src="__STATIC__/bank.js"></script>
	  <script type="text/javascript">
    var ajaxurl="{:U('Account/getArea')}";
    function loadArea(areaId,areaType) {
    $.post(ajaxurl,{'areaId':areaId},function(data){
        if(areaType=='city'){
           $('#'+areaType).html('<option value="-1">市/县</option>');
           $('#district').html('<option value="-1">镇/区</option>');
        }else if(areaType=='district'){
           $('#'+areaType).html('<option value="-1">镇/区</option>');
        }
        if(areaType!='null'){
            $.each(data,function(no,items){
                $('#'+areaType).append('<option value="'+items.area_id+'">'+items.area_name+'</option>');
            });
        }
    });
} 
  var tot="";
    $("#province").change(function() {
        tot+=$("#province").val();
  });
      $("#city").change(function() {
        tot+=","+$("#city").val()
  });
        $("#district").change(function() {
         tot+=","+$("#district").val()
  });
  $(".btn").click(function() {
    $("#town").val(tot);
  });

    function add_mail_suffix(that) {
        var suffix = $(that).data('suffix');
        var input = $(that).closest('.mail_suffix').prev();
        if(input.attr('data-mail').length>0) {
            input.val(input.attr('data-mail')+suffix);
        }
    }
  
  $(function() {
      $('.tab td').on('click',function() {
        var that = $(this);
        $('.tabpan').removeClass('current');
        that.siblings().removeClass('current');
        that.addClass('current');
        $('.tabpan').eq(that.index()).addClass('current');
        return false;
      });
      
       $(".select_gallery").select2();

       $('#email').focus(function () {
           var val = $.trim($(this).val());
           if(val) {
               var index = val.indexOf('@');
               if(index>-1){
                   var suffix = val.substring(index);
                   val = val.substring(0,index);
                   $(this).val(val).attr('data-suffix',suffix).attr('data-mail',val);
               }
           }
           var html = '<ul class="mail_suffix">';
            for(var item in mail_suffix) {
                html += '<li onclick="add_mail_suffix(this)" data-suffix="'+mail_suffix[item]+'">'+mail_suffix[item]+'</li>';
            }

            html += '</ul>';
            $(this).after(html);
            $('body').click(function (event) {
                var e = event || window.event;
                var target = e.target || e.srcElement;

                if($(target).attr('id') != 'email' && $(target).attr('class') != 'mail_suffix') {
                    $('.mail_suffix').remove();
                }
                return false;
            });
           return false;
       }).blur(function (event) {
           var e = event || window.event;
           var target = e.target || e.srcElement;
           var that = $(this);
           if($(target).attr('id') == 'email' && $(target).attr('class') == 'mail_suffix') {
               $('.mail_suffix').remove();
           }
           if(that.attr('data-mail')) {
               var data_mail_index = that.attr('data-mail').indexOf('@');
               if(data_mail_index>-1){
                   var data_mail = that.attr('data-mail');
                   that.val(data_mail);
                   that.attr('data-mail',data_mail.substring(0,data_mail_index));
                   that.attr('data-suffix',data_mail.substring(data_mail_index));
               } else {
                   that.val(that.attr('data-mail')+that.attr('data-suffix'));
               }

           }
           return false;
       }).keyup(function () {
           var val = $.trim($(this).val());
           if(val.length>64) {val = val.substr(0,64);$(this).val(val);}
           $(this).attr('data-mail',val);

           return false;
       });

       var data_bank_name = '{$data.bank_name}';
        var bank_name = '<option value="">请选择收款银行</option>';console.log(bank);
        for(var bn in bank) {
            if(data_bank_name == bank[bn]) {
                bank_name += '<option value="'+bank[bn]+'" selected>'+bank[bn]+'</option>';
            } else {
                bank_name += '<option value="'+bank[bn]+'">'+bank[bn]+'</option>';
            }
        }
        $('#bank_name').html(bank_name).select2();



       
	// AF.users.account_edit(1429);
	// AF.users.account_content_edit(1429);
	_init_area();	
		_reset_area('','','');
	});
</script>
<script>
       $('#sendtelCode').on('click',function() {
                if ($(this).hasClass('g-btntn')) {
                    return false;
                }
                var phone = $.trim($('#login_phone').val());
                if (phone == '') {
                    alert("手机号不能为空");
                    return false;
                }
                if (phone.length !== 11 || !(/^[1][35789][0-9]{9}$/.test(phone))) {
                    pmsg.msg("格式不正确");
                    return false;
                }
                $.ajax({
                    type:'post',
                    dataType:'json',
                    data:{'phone':phone, 'exceptExists':0},
                    url:'{:U("telsafecode")}',
                    success:function(data) {
                        if (data.status ==1) {
                            r(1);
                        } else {
                            alert(data.msg);
                        }
                    },
                    error:function() {
                        alert('服务器开小差了，请稍后再试。');
                    }
                });
                var r = function(i, t) {
                    var e = $('#sendtelCode');
                    var t = 60;
                    e.addClass('disabled').attr('disabled', true).text(t+'秒');
                    var a = setInterval(function() {    
                        t--;
                        e.text(t+'秒');
                        t>0 || (clearInterval(a),e.removeClass('disabled').attr('disabled', false).text('重新发送'));
                    },1000);
                };
                return false;
            });
</script>
</block>