{extend name="default/users/base" /}
{block name="title"}用户资料 - 用户中心 - {:WSTConf('CONF.shopName')}{__block__}{/block}
{block name="css"}
<link href="__STATIC__/plugins/validator/jquery.validator.css?v={$v}" rel="stylesheet">
<link rel="stylesheet" href="__STATIC__/plugins/jcrop/css/jquery.Jcrop.css?v={$v}" type="text/css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/webuploader/webuploader.css?v={$v}" />
{/block}
{block name="content"}
<div class="wst-user-box"><div class="wst-user-info">
<div class="wst-user-head">用户资料</div>
<form id="userEditForm" autocomplete="off" data-validator-option='{theme:"yellow_right"}'>
	<div id='tab' class="wst-tab-box">
		<ul class="wst-tab-nav">
			<li id="wst-msg-li-0" style="padding-left:0px;border-left:0px;">个人资料<span style="display:none;" class="wst-order-tips-box"></span></li>
			<li id="wst-msg-li-1">头像照片<span style="display:none;"></span></li>
		</ul>
		<div class="wst-clear"></div>
		<div class="wst-tab-content">
			<div class='wst-tab-item' >
		<table class='wst-form uinfo-form' >
		<tr>
	      <th>登录账号<font color='red'>  </font>：</th>
	      <td width="260" class="gray">
	          <div id='user_account'>{:session('WST_USER.loginName')}</div>
	      </td>
	      <td class="gray" style='padding-left:15px;'>个人头像：</td>
	    </tr>
	  <tr>
	      <th width='100'><font color='red'>*</font>昵称：</th>
	          <td class="uinfo">
	              <input type="text" class="ipt" id="userName" name="userName" value="{$data['userName']}" />
	          </td>
	          <td rowspan="6" valign="top">
	              	<div id='userPhotoPreview1' style="width:150px;height:150px;margin-left:15px;">
				      	<img  class="usersImg usersImgs" data-original='{:WSTUserPhoto($data["userPhoto"])}' height='150' src="__RESOURCE_PATH__/{:WSTConf('CONF.userLogo')}"/>
				      	<br/>
			         </div>
	          </td>
	   </tr>
	   		<tr>
	          <th>真实姓名<font color='red'></font>：</th>
	          <td class="uinfo">
	              <input type="text" class="ipt" id="trueName" name="trueName" value="{$data['trueName']}" />
	          </td>
	       </tr>
	         <tr>
	            <th><font color='red'>*</font>性别：</th>
	            <td>
	            	<div class="radio-box">
	            	<label><input type='radio' class='ipt wst-radio' name='userSex'  id="userSex-1" <?=($data['userSex']==1)?'checked':'';?> value="1" /><label class="mt-1" for="userSex-1"></label> 男</label>
	             	<label><input type='radio' class='ipt wst-radio' name='userSex'  id="userSex-2" <?=($data['userSex']==2)?'checked':'';?> value="2" /><label class="mt-1" for="userSex-2"></label> 女</label>
	             	<label><input type='radio' class='ipt wst-radio' name='userSex'  id="userSex-3" <?=($data['userSex']==0)?'checked':'';?> value="0" /><label class="mt-1" for="userSex-3"></label> 保密</label>
	             	</div>
	            </td>
	         </tr>
	       <tr>
	          <th>生日<font color='red'></font>：</th>
	          <td class="uinfo">
	              <input  id="brithday"   class="ipt laydate-icon" id="brithday" name="brithday" value="{$data['brithday']}">
	          </td>
	       </tr>

	        <tr>
	          <th>QQ<font color='red'>  </font>：</th>
	          <td class="uinfo">
	              <input type="text" class="ipt" id="userQQ" name="userQQ" value="{$data['userQQ']}" />
	          </td>
	       </tr>

	      

	  <tr>
	     <td colspan='2' style="text-align:center">
	       <input type="hidden" name="id" id="userId" class="ipt" value="{$data['userId']}" />
	       <button type="submit"  class="wst-button wst-btn-default">保存</button>
	       <button type="reset"  class="wst-button wst-btn-gray">重置</button>
	     </td>
	  </tr>
	</table>

			</div>


<div class='wst-tab-item' style="display:none;padding-left: 30px;" >

	<table class='wst-form'  id="userPhoto">
		<tr>
	      <td colspan="2">
	      	<input type='hidden' id='userPic' value='{$data['userPhoto']}'/>
             <div id="userPhotoPicker" style='margin-left:0px;margin-top:5px;height:30px;overflow:hidden'>请选择您要上传的头像</div>
             头像默认大小为:150 x 150 (px)，格式为 gif, jpg, jpeg, png
		  </td>
	   </tr>
	   <tr>
   		<td colspan="2" style="border:1px solid #ccc;paading:25px;">
          	<div id='userPhotoPreview'>
		      	<img class="usersImg" data-original='{:WSTUserPhoto($data["userPhoto"])}' height='150' width="150" src="__RESOURCE_PATH__/{:WSTConf('CONF.userLogo')}"/>
		      	<br/>
	         </div>
          </td>
	   </tr>
    </table>



    <div class="container"  id="userPhotoCut" style="display:none;">
	<div class="row">
		<div class="span12">
			<div class="jc-demo-box">
				<div id="img-src" style="text-align:center;max-width:500px;height:auto;">
				  <p>裁剪区域</p>
				</div>


				  <div id="userPhotoCutBox" style="position:relative;min-height:505px;">
					  <div id="cutArea"></div><p></p>
				  </div>




				 <form action="<?=url('Home/Users/editUserPhoto')?>" method="post" id="userPhotoInfo">
						<input type="hidden" id="x" name="x" class="photo-size" />
						<input type="hidden" id="y" name="y" class="photo-size" />
						<input type="hidden" id="w" name="w" class="photo-size" />
						<input type="hidden" id="h" name="h" class="photo-size" />
						<input type="hidden" id="photoSrc" name="photoSrc" value="">
						<div id="c-btn">
							<input type="button" value="保存" class="wst-button wst-btn-default" onclick="checkCoords()">
							<input type="button" value="返回" class="wst-button wst-btn-gray" onclick="returnPhotoPage()">
						</div>
				  </form>

			<div class="wst-clear"></div>

					</div>
				</div>
			</div>
		</div>


</div>

		</div>
	</div>


	
</form>
</div></div>
{/block}
{block name="js"}
	<script type='text/javascript' src='__STATIC__/plugins/webuploader/webuploader.js?v={$v}'></script>
	<script type="text/javascript" src="__STATIC__/plugins/jcrop/js/jquery.Jcrop.js?v={$v}"></script>
	<script type='text/javascript' src='__STYLE__/users/user.js?v={$v}'></script>
	<script type="text/javascript" src="__STATIC__/plugins/validator/jquery.validator.min.js?v={$v}"></script>
	<script type="text/javascript" src="__STATIC__/plugins/layer/laydate.js?v={$v}"></script>
{/block}