profile.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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" src="{$user.avatar|htmlentities|cdnurl}" alt="">
  48. <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>
  49. <button type="button" id="faupload-avatar" class="faupload" 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;remote({:url('api/validate/check_nickname_available')}, id={$user.id})" 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-primary 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({$Think.config.captcha.length});digits;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. <div class="col-xs-12 col-sm-8 col-sm-offset-3">
  133. <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
  134. </div>
  135. </div>
  136. </div>
  137. </form>
  138. </script>
  139. <script type="text/html" id="mobiletpl">
  140. <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
  141. <div class="form-body">
  142. <input type="hidden" name="action" value="changemobile" />
  143. <div class="form-group">
  144. <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
  145. <div class="col-xs-12 col-sm-8">
  146. <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')}">
  147. <span class="msg-box"></span>
  148. </div>
  149. </div>
  150. <div class="form-group">
  151. <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
  152. <div class="col-xs-12 col-sm-8">
  153. <div class="input-group">
  154. <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)" />
  155. <span class="input-group-btn" style="padding:0;border:none;">
  156. <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a>
  157. </span>
  158. </div>
  159. <span class="msg-box"></span>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="form-footer">
  164. <div class="form-group" style="margin-bottom:0;">
  165. <div class="col-xs-12 col-sm-8 col-sm-offset-3">
  166. <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
  167. </div>
  168. </div>
  169. </div>
  170. </form>
  171. </script>
  172. <style>
  173. .form-layer {height:100%;min-height:150px;min-width:300px;}
  174. .form-body {
  175. width:100%;
  176. overflow:auto;
  177. top:0;
  178. position:absolute;
  179. z-index:10;
  180. bottom:50px;
  181. padding:15px;
  182. }
  183. .form-layer .form-footer {
  184. height:50px;
  185. line-height:50px;
  186. background-color: #ecf0f1;
  187. width:100%;
  188. position:absolute;
  189. z-index:200;
  190. bottom:0;
  191. margin:0;
  192. }
  193. .form-footer .form-group{
  194. margin-left:0;
  195. margin-right:0;
  196. }
  197. </style>