personal_info.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  7. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  8. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}"/>
  9. <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  12. <style type="text/css">
  13. body {
  14. overflow: hidden;
  15. background: #fff;
  16. }
  17. /* .personal-info-box input,
  18. .personal-info-box .input-append input {
  19. border: 1px solid #eee;
  20. }
  21. #distpicker5 select {
  22. width: 160px;
  23. }
  24. #distpicker5 select:focus,
  25. #name:focus {
  26. border-color: rgba(82, 168, 236, 0.8);
  27. outline: 0;
  28. outline: thin dotted \9;
  29. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  30. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  31. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  32. }
  33. #name {
  34. padding: 4px 6px;
  35. }
  36. #viewPhoto {
  37. height: inherit;
  38. } */
  39. .geren-font {
  40. margin-left: 15px;
  41. color: #666;
  42. line-height: 32px;
  43. }
  44. .geren-font i {
  45. margin-right: 6px;
  46. color: #f60;
  47. font-style: normal;
  48. }
  49. #distpicker5 select {
  50. display: inline-block;
  51. width: 180px;
  52. }
  53. #remarks {
  54. width: 90%;
  55. padding: 4px;
  56. }
  57. #viewPhotoParent {
  58. width: 140px;
  59. height: 150px;
  60. margin-bottom: 10px;
  61. margin-left: 8px;
  62. border: 1px solid #ddd;
  63. }
  64. .upload-avatar {
  65. width: 160px;
  66. height: 30px;
  67. line-height: 30px;
  68. display: block;
  69. text-align: center;
  70. background: #fff;
  71. color: #333;
  72. border: 1px #ccc solid;
  73. border-radius: 3px;
  74. position: relative;
  75. cursor: pointer;
  76. }
  77. #uploadPhoto {
  78. display: block;
  79. width: 100%;
  80. height: 30px;
  81. cursor: pointer;
  82. filter: alpha(opacity=0);
  83. -moz-opacity: 0;
  84. opacity: 0;
  85. position: absolute;
  86. left: 0;
  87. top: 0;
  88. }
  89. .font-tips {
  90. line-height: 20px;
  91. color: #999;
  92. padding-top: 5px;
  93. font-size: 12px;
  94. }
  95. input:read-only{
  96. cursor: not-allowed;
  97. }
  98. </style>
  99. <body>
  100. <div id="content">
  101. <div class="row">
  102. <div class="col-xs-7">
  103. <form action="#" method="post" class="form-horizontal">{% csrf_token %}
  104. <div class="form-group">
  105. <label class="col-sm-3 control-label no-padding-right">
  106. 用户名:</label>
  107. <div class="col-sm-9">
  108. <div class="data-input">
  109. <input type="text" readonly="readonly" class="enter-personal" name="username" maxlength="32" minlength="4" required id="name" placeholder="请输入用户名"
  110. value={{user.username}}> {% if role == "superuser" %}
  111. <span class="geren-font">
  112. <i>*</i>权限: 超级管理员
  113. </span>
  114. {% endif %}
  115. </div>
  116. </div>
  117. </div>
  118. <div class="form-group">
  119. <label class="col-sm-3 control-label no-padding-right">
  120. 用户手机号:</label>
  121. <div class="col-sm-9">
  122. <div class="data-input">
  123. <input type="text" name="userphone" maxlength="11" class="input-personal" id="userPhone" placeholder="请输入手机号码" value={{user.user_phone}}>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="form-group">
  128. <label class="col-sm-3 control-label no-padding-right">
  129. 地址:</label>
  130. <div class="col-sm-9">
  131. <div class="data-input">
  132. <div id="distpicker5">
  133. <select class="form-control enter-select" name="province" id="province10"></select>
  134. <select class="form-control" name="city" id="city10"></select>
  135. <select class="form-control" name="area" id="district10"></select>
  136. <input type="hidden" id="provinceHide" value={{user.user_pro}}>
  137. <input type="hidden" id="cityHide" value={{user.user_city}}>
  138. <input type="hidden" id="areaHide" value={{user.user_area}}>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <div class="form-group">
  144. <label class="col-sm-3 control-label no-padding-right">
  145. 邮箱:</label>
  146. <div class="col-sm-9">
  147. <div class="data-input">
  148. <input type="email" name="email" required id="email" readonly="readonly" class="enter-personal" value={{user.email}}>
  149. </div>
  150. </div>
  151. </div>
  152. <!-- <div class="form-group">
  153. <label class="col-sm-3 control-label no-padding-right">
  154. 备注信息:</label>
  155. <div class="col-sm-9">
  156. <div class="data-input">
  157. <textarea rows="5" class="textarea-addto" id="remarks" name="userremark" maxlength="200" placeholder="请输入您的备注信息,限制200字以内。">{{user.user_remark}}</textarea>
  158. </div>
  159. </div>
  160. </div> -->
  161. <div class="">
  162. <div class="col-md-offset-3 col-md-9">
  163. <button type="button" onclick="submit_info()" class="btn btn-primary btn-save-cancel">保存</button>
  164. </div>
  165. </div>
  166. </form>
  167. </div>
  168. <div class="col-xs-5">
  169. <form action="" method="post" id="userPhoto" class="form-horizontal" enctype="multipart/form-data">{% csrf_token %}
  170. <div class="form-group">
  171. <label class="col-sm-3 control-label no-padding-right">
  172. 头像:</label>
  173. <div class="col-sm-9">
  174. <div class="data-input">
  175. <div class="personal-avatar">
  176. <div class="top-avatar" id="viewPhotoParent">
  177. <img id="viewPhoto" src="{{user.user_picture}}" width="138" height="148">
  178. </div>
  179. <a class="upload-avatar" href="javascript:;">
  180. <input class="upload-btn" name="upicture" onchange="previewImage(this,'viewPhotoParent','viewPhoto','uploadPhoto',140,150)"
  181. type="file" id="uploadPhoto">选择您要上传的头像</a>
  182. <p class="font-tips">仅支持jpg、gif、jpeg、bmp格式,文件小于4M</p>
  183. <input type="hidden" name="req" value="photo">
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </form>
  189. </div>
  190. </div>
  191. </div>
  192. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  193. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  194. <script src="{% static '/lib/js/newdistpicker.js' %}" type="text/javascript" charset="utf-8"></script>
  195. <script src="{% static '/lib/js/main.js' %}" type="text/javascript" charset="utf-8"></script>
  196. <script type="text/javascript">
  197. $.ajaxSetup({
  198. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  199. });
  200. </script>
  201. <script src="{% static '/js/home/personal_info.js' %}?versions=0.5.4"></script>
  202. </body>
  203. </html>