{extend name="shop/default/Member/base" /}
{block name="resources"}
<style type="text/css">
img{
    max-height: 120px !important;
}
.img {
    width: 120px;
    height: 120px;
    border: 1px solid #bbb;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
</style>
{/block}
{block name="main"}
    <div class="user-right">
    	<div class="box"> 
    	<script type="text/javascript">
    	 //预览个人头像
        function preview(file){
             var prevDiv = document.getElementById('preview');
             if (file.files && file.files[0]){
             var reader = new FileReader();
             reader.onload = function(evt){
             prevDiv.innerHTML = '<img src="' + evt.target.result + '" width="120xp" height="120px"/>';
            }
             reader.readAsDataURL(file.files[0]);
            }else{
             prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
             }
        }
		</script>
          <script type="text/javascript">
			function setTabCatGoods(name,cursel,n){
				for(i=1;i<=n;i++){
					var menu=document.getElementById(name+i);
					var con=document.getElementById("con_"+name+"_"+i);
					if(con!=null){
						con.style.display=i==cursel?"block":"none";
					}
					if(menu!=null){
						menu.className=i==cursel?"active":"";
					}
				}
			}
			$(document).ready(function(){
					//对表单进行优化,昵称，用户名，手机号,不能为空
          function verify(){
            if($("input[name=user_name]").val().length == 0){
              $("#username_message").show();
              return false;
            }else{
              $("#username_message").hide();
            }
				    if($("input[name=real_name]").val().length == 0){
              $("#realname_message").show();
              return false;
            }else{
              $("#realname_message").hide();
            }
             var phone = $("input[name='user_tel']").val()
            if(phone.length == 0){
              $("#mobile_message").show();
              return false;
            }else{
              $("#mobile_message").hide();
            }
            if(!(/^1[34578]\d{9}$/.test(phone))){
              $("#phone_message").show();
              return false;
            }else{
              $("#mobile_message").hide();
            }
            var email = $("input[name=user_email]").val()
            if(email.length > 0){
              if(!(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email))){
                $("#email_error_message").show();
                return false;
              }else{
                $("#email_error_message").hide();
              }
            }
            return true;
          }
          //提交订单
				  $("#btn_submit").click(function(){
            if(!verify()){
              return false;
            }
						$("#formEdit").submit();
				  });
	
				  sexsex = "{$member_info.user_info.sex}";
				if(sexsex == 0){
					//$("#baomi").attr("checked","checked");
				}else if(sexsex == 1){
					$("[checked]").removeAttr("checked");
					$("#nan").attr("checked","checked");
				}else{
					$("[checked]").removeAttr("checked");
					$("#nv").attr("checked","checked");
				}
				});
		  </script>
          <div class="tabmenu">
            <ul class="tab">
              <li class="active" id="tab1" onClick="setTabCatGoods('tab',1,3)">基本信息</li>
              <li class="normal" id="tab2" onClick="setTabCatGoods('tab',2,3)">更换头像</li>
            </ul>
          </div>
          <div class="ncm-user-profile">
            <div class="ncm-default-form"  id="con_tab_1">
              <form name="formEdit" action="SHOP_MAIN/Member/person" method="post" id="formEdit" enctype="multipart/form-data">
                <table cellpadding="10" width="600px" >
                     <tr>
                      <td width="35%" align="right">当前头像：</td>
                      <td width="65%" align="left" >
                      		{if condition="$member_img neq '' and $member_img neq '0'"}
							<img src="__UPLOAD__/{$member_img}" width="120px" height="120px" onClick="setTabCatGoods('tab',2,3)"/>
						    {else /}
							<img width="120px" height="120px" src="__TEMP__/{$style}/public/images/temp_default_user_portrait_0.png" />
						    {/if}
						    <span style=""></span>
                      </td>
                    </tr>
                    <tr>
                      <td width="35%" align="right"><span style="color:red;">*</span>&nbsp;&nbsp;昵称：</td>
                      <td width="65%" align="left">
                      <input type="text" name="user_name" value="{$member_info.user_info.nick_name}" size="25" class="inputBg" style="ime-mode:disabled" />
                        <span id="username_message" style="color:#E31939; display:none; width：30px;">昵称不能为空</span>
                      </td>
                    </tr>
                    <tr>
                      <td width="35%" align="right"><span style="color:red;">*</span>&nbsp;&nbsp;真实姓名：</td>
                      <td width="65%" align="left">
                      <input type="text" name="real_name" value="{$member_info.user_info.real_name}" size="25" class="inputBg" style="ime-mode:disabled" />
                        <span id="realname_message" style="color:#E31939; display:none;">姓名不能为空</span>
                      </td>
                    </tr>
                    <tr>
                    	<td width="35%" align="right"><span style="color:red;">*</span>&nbsp;&nbsp;手机号</td>
                    	<td width="65%" align="left">
                    	<input type="number" name="user_tel" value="{$member_info.user_info.user_tel}"  maxlength="11" class="inputBg" />
                        <span id="mobile_message" style="color:#E31939; display:none;">手机号不能为空</span>
                        <span id="phone_message" style="color:#E31939; display:none;">手机号格式不正确</span>
                        </td>
                    </tr>
                    <tr>
                      <td align="right">出生日期：</td>
                      <td width="65%" align="left">
                    	<input type="date" name="birthday" value="{$member_info.user_info.birthday}"  size="25" class="inputBg" style="ime-mode:disabled" />
                        <span id="birthday_message" style="color:#E31939"></span>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">性别：</td>
                      <td align="left">
                        <label><input type="radio" name="sex" value="0" checked="checked" id="baomi"/>保密 </label>&nbsp;
                        <label><input type="radio" name="sex" value="1" id="nan" />男</label>&nbsp;&nbsp;
                        <label><input type="radio" name="sex" value="2" id="nv"/>女 </label>
                       </td>
                    </tr>
                    <tr>
                      <td width="35%" align="right">所在地：</td>
                      <td width="65%" align="left">
                      <input type="text" name="location" value="{$member_info.user_info.location}"  size="25" class="inputBg" style="ime-mode:disabled" />
                        <span id="location_message" style="color:#E31939"></span>
                      </td>
                    </tr>
                    <tr>
                    	<td width="35%" align="right">qq</td>
                    	<td width="65%" align="left">
                    	<input type="number" name="user_qq" value="{$member_info.user_info.user_qq}"  size="25" class="inputBg" style="ime-mode:disabled" />
                        <span id="qq_message" style="color:#E31939"></span>
                        </td>
                    	
                    </tr>
                    <tr>
                    	<td width="35%" align="right">邮箱</td>
                    	<td width="65%" align="left">
                    	<input type="text" name="user_email" value="{$member_info.user_info.user_email}"  size="25" class="inputBg" style="ime-mode:disabled" />
                       
                        <span id="email_error_message" style="color:#E31939; display:none;">邮箱格式不正确</span>
                        </td>

                    </tr>
                    <tr>
                      	<td colspan="2" align="center">
                        	<label class="submit-border">
                          		<input name="act" type="hidden" value="act_edit_profile" />
                          		<input name="submit" type="submit" class="main-btn main-btn-large" value="确认修改"  id="btn_submit"/>
                        	</label>
                        </td>
                    </tr>
                    <tr>
                    	<td colspan="2"  align="center" id="xinxi" style="display:none;color:red;">
                    	</td>
                    </tr>
                </table>
              </form>
            </div>
            <div class="ncm-default-form"  id="con_tab_2" style="display:none; color:red">
              <form name="formEdit2" action="SHOP_MAIN/Member/person" method="post" enctype="multipart/form-data" >
                <table cellpadding="10"  >
                	<tr>
                    	<td width="35%" align="right">头像预览：</td>
                  	  	<td class="user-avatar">
                        	<div class="hint" >
                            	完善个人信息资料，上传头像图片有助于您结识更多的朋友。<br />
                      			<span>头像最佳默认尺寸为120x120像素。</span>
                            </div>
                 		</td>
                	</tr>
                	<tr>
                		<td colspan="2" align="center">
                		    <div class="img" id="preview" >
								{if condition="$member_img neq '' and $member_img neq '0'"}
								<img src="__UPLOAD__/{$member_img}" width="120px" height="120px"/>
							    {else /}
								<img width="120px" height="120px" src="__TEMP__/{$style}/public/images/temp_default_user_portrait_0.png" />
							    {/if}
							</div>
                		</td>
                	</tr>
                	<tr>
                    	<td width="35%" align="right">更换头像：</td>
                        <td>
                            <div class="ncm-upload-btn"> 
                                <a href="javascript:void(0);"><span><input type="file" name="user_headimg" class="file" onchange="preview(this)"></span></a>
                            </div>
                      	</td>
                    </tr>
                    <tr>
                      	<td colspan="2" align="center">
                        	<label class="submit-border">
                          		<input name="act" type="hidden" value="act_edit_img" />
                          		<input name="submit2" type="submit" class="main-btn main-btn-large" value="确认修改"  />
                        	</label>
                        </td>
                    </tr>
                </table>
              </form>
            </div>
            </div>
      </div>
    </div>
{/block}