profile.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <style>
  2. .profile-avatar-container {
  3. position:relative;
  4. width:100px;
  5. }
  6. .profile-avatar-container .profile-user-img{
  7. width:100px;
  8. height:100px;
  9. }
  10. .profile-avatar-container .profile-avatar-text {
  11. display:none;
  12. }
  13. .profile-avatar-container:hover .profile-avatar-text {
  14. display:block;
  15. position:absolute;
  16. height:100px;
  17. width:100px;
  18. background:#444;
  19. opacity: .6;
  20. color: #fff;
  21. top:0;
  22. left:0;
  23. line-height: 100px;
  24. text-align: center;
  25. }
  26. .profile-avatar-container button{
  27. position:absolute;
  28. top:0;left:0;width:100px;height:100px;opacity: 0;
  29. }
  30. </style>
  31. <div id="content-container" class="container">
  32. <div class="row">
  33. <div class="col-md-3">
  34. {include file="common/sidenav" /}
  35. </div>
  36. <div class="col-md-9">
  37. <div class="panel panel-default">
  38. <div class="panel-body">
  39. <h2 class="page-header">{:__('Profile')}</h2>
  40. <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}">
  41. {:token()}
  42. <input type="hidden" name="avatar" id="c-avatar" value="{:$user->getData('avatar')}" />
  43. <div class="form-group">
  44. <label class="control-label col-xs-12 col-sm-2"></label>
  45. <div class="col-xs-12 col-sm-4">
  46. <div class="profile-avatar-container">
  47. <img class="profile-user-img img-responsive img-circle plupload" src="{$user.avatar|cdnurl}" alt="">
  48. <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>
  49. <button id="plupload-avatar" class="plupload" data-mimetype="png,jpg,jpeg,gif" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="form-group">
  54. <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>
  55. <div class="col-xs-12 col-sm-4">
  56. <input type="text" class="form-control" id="username" name="username" value="{$user.username|htmlentities}" data-rule="required;username;remote({:url('api/validate/check_username_available')}, id={$user.id})" placeholder="">
  57. </div>
  58. </div>
  59. <div class="form-group">
  60. <label class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label>
  61. <div class="col-xs-12 col-sm-4">
  62. <input type="text" class="form-control" id="nickname" name="nickname" value="{$user.nickname|htmlentities}" data-rule="required" placeholder="">
  63. </div>
  64. </div>
  65. <div class="form-group">
  66. <label for="c-bio" class="control-label col-xs-12 col-sm-2">{:__('Intro')}:</label>
  67. <div class="col-xs-12 col-sm-8">
  68. <input id="c-bio" data-rule="" data-tip="一句话介绍一下你自己" class="form-control" name="bio" type="text" value="{$user.bio|htmlentities}">
  69. </div>
  70. </div>
  71. <div class="form-group">
  72. <label for="c-email" class="control-label col-xs-12 col-sm-2">{:__('Email')}:</label>
  73. <div class="col-xs-12 col-sm-4">
  74. <div class="input-group">
  75. <input type="text" class="form-control" id="c-email" name="email" value="{$user.email|htmlentities}" disabled placeholder="">
  76. <span class="input-group-btn" style="padding:0;border:none;">
  77. <a href="javascript:;" class="btn btn-info btn-change" data-type="email">{:__('Change')}</a>
  78. </span>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label for="c-mobile" class="control-label col-xs-12 col-sm-2">{:__('Mobile')}:</label>
  84. <div class="col-xs-12 col-sm-4">
  85. <div class="input-group">
  86. <input type="text" class="form-control" id="c-mobile" name="mobile" value="{$user.mobile|htmlentities}" disabled placeholder="">
  87. <span class="input-group-btn" style="padding:0;border:none;">
  88. <a href="javascript:;" class="btn btn-info btn-change" data-type="mobile">{:__('Change')}</a>
  89. </span>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="form-group normal-footer">
  94. <label class="control-label col-xs-12 col-sm-2"></label>
  95. <div class="col-xs-12 col-sm-8">
  96. <button type="submit" class="btn btn-success btn-embossed disabled">{:__('Ok')}</button>
  97. <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
  98. </div>
  99. </div>
  100. </form>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <script type="text/html" id="emailtpl">
  107. <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}">
  108. <div class="form-body">
  109. <input type="hidden" name="action" value="changeemail" />
  110. <div class="form-group">
  111. <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label>
  112. <div class="col-xs-12 col-sm-8">
  113. <input type="text" class="form-control" id="email" name="email" value="" data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})" placeholder="{:__('New email')}">
  114. <span class="msg-box"></span>
  115. </div>
  116. </div>
  117. <div class="form-group">
  118. <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
  119. <div class="col-xs-12 col-sm-8">
  120. <div class="input-group">
  121. <input type="text" name="captcha" id="email-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)" />
  122. <span class="input-group-btn" style="padding:0;border:none;">
  123. <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="changeemail">获取验证码</a>
  124. </span>
  125. </div>
  126. <span class="msg-box"></span>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="form-footer">
  131. <div class="form-group" style="margin-bottom:0;">
  132. <label class="control-label col-xs-12 col-sm-3"></label>
  133. <div class="col-xs-12 col-sm-8">
  134. <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
  135. </div>
  136. </div>
  137. </div>
  138. </form>
  139. </script>
  140. <script type="text/html" id="mobiletpl">
  141. <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
  142. <div class="form-body">
  143. <input type="hidden" name="action" value="changemobile" />
  144. <div class="form-group">
  145. <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
  146. <div class="col-xs-12 col-sm-8">
  147. <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})" placeholder="{:__('New mobile')}">
  148. <span class="msg-box"></span>
  149. </div>
  150. </div>
  151. <div class="form-group">
  152. <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
  153. <div class="col-xs-12 col-sm-8">
  154. <div class="input-group">
  155. <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)" />
  156. <span class="input-group-btn" style="padding:0;border:none;">
  157. <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a>
  158. </span>
  159. </div>
  160. <span class="msg-box"></span>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="form-footer">
  165. <div class="form-group" style="margin-bottom:0;">
  166. <label class="control-label col-xs-12 col-sm-3"></label>
  167. <div class="col-xs-12 col-sm-8">
  168. <button type="submit" class="btn btn-md btn-info">{:__('Submit')}</button>
  169. </div>
  170. </div>
  171. </div>
  172. </form>
  173. </script>
  174. <style>
  175. .form-layer {height:100%;min-height:150px;min-width:300px;}
  176. .form-body {
  177. width:100%;
  178. overflow:auto;
  179. top:0;
  180. position:absolute;
  181. z-index:10;
  182. bottom:50px;
  183. padding:15px;
  184. }
  185. .form-layer .form-footer {
  186. height:50px;
  187. line-height:50px;
  188. background-color: #ecf0f1;
  189. width:100%;
  190. position:absolute;
  191. z-index:200;
  192. bottom:0;
  193. margin:0;
  194. }
  195. .form-footer .form-group{
  196. margin-left:0;
  197. margin-right:0;
  198. }
  199. </style>