setting.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title></title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css?v=1.2" />
  11. <style>
  12. .border-none{
  13. text-align:center;font-size: 0.28rem;
  14. }
  15. .border-none p{
  16. color:#999999;
  17. }
  18. .border-none-img{
  19. width: 1.5rem;
  20. height: 1.5rem;
  21. border-radius: 50%;
  22. margin: 0.4rem 0;
  23. }
  24. .setting-item{
  25. height: 1rem;
  26. line-height: 1rem;
  27. font-size: 0.28rem;
  28. width: 100%;
  29. border-bottom: 1px solid #e8e8e8;
  30. text-align:left;
  31. }
  32. .setting-item label {
  33. position: relative;
  34. width: 1.2rem;
  35. text-align: justify;
  36. float: left;
  37. height: 1em;
  38. }
  39. .setting-item label::after{
  40. content: '';
  41. display: inline-block;
  42. width: 100%;
  43. }
  44. .setting-item img{
  45. width: 0.28rem;
  46. vertical-align:middle;
  47. margin-bottom:3px;
  48. }
  49. .setting-item input{
  50. width: 60%;
  51. border-bottom: none;
  52. font-size: 0.28rem;
  53. }
  54. .bot-input {
  55. padding: 0 0 0 0.25rem;
  56. }
  57. </style>
  58. <script>
  59. (function(w, d, m) {
  60. function r() {
  61. var t = 100,
  62. o = 750,
  63. e = d.documentElement.clientWidth || w.innerWidth,
  64. n = m.max(m.min(e, 480), 320),
  65. h = 50;
  66. 320 >= n && (h = m.floor(n / o * t * .99)),
  67. n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
  68. n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
  69. n > 375 && (h = m.floor(n / o * t * .97)),
  70. d.querySelector("html").style.fontSize = h + "px"
  71. };
  72. r();
  73. w.onresize = function() {
  74. r()
  75. }
  76. })(window, document, Math);
  77. </script>
  78. </head>
  79. <body>
  80. <div class="topbar"></div>
  81. <header class="back-header back-header-bottom">
  82. <ul>
  83. <li class="padding-20 back-btn"><img class="back-header-ico" src="../../image/nav_button_back_default.png" /></li>
  84. <li class="back-header-title">个人信息</li>
  85. <li class="more-btn">保存</li>
  86. </ul>
  87. </header>
  88. <section class="border-none padding-top">
  89. <img src="../../image/head.png" class="border-none-img" />
  90. <p>点击修改头像</p>
  91. </section>
  92. <div class="h20" style="height: 0.4rem"></div>
  93. <div class="back-h10" style="height: 0.3rem"></div>
  94. <section class="border-none">
  95. <div class="setting-item">
  96. <label class="el-form-item__label">用户ID</label>
  97. <input class="bot-input" id="member_name" type="text" value="" readonly="readonly" />
  98. </div>
  99. <div class="setting-item">
  100. <label class="el-form-item__label">用户姓名</label>
  101. <input class="bot-input" id="member_truename" type="text" placeholder="请输入姓名" />
  102. </div>
  103. <div class="setting-item">
  104. <label class="el-form-item__label">性别</label>
  105. <span class="member-sex" tag="1" style="margin-left: 0.24rem;"><img src="../../image/checkun.png" /> 男 </span><span class="member-sex" tag="0" style="margin-left: 0.24rem;"><img src="../../image/checkun.png" /> 女</span>
  106. </div>
  107. <div class="setting-item editpad">
  108. <label class="el-form-item__label">修改密码</label>
  109. <span style="float:right;color:#cccccc;" class="iconfont">&#xe62e;</span>
  110. </div>
  111. <div class="setting-item bindmobile">
  112. <label class="el-form-item__label">绑定手机</label>
  113. <span style="float:right;color:#cccccc;" class="iconfont">&#xe62e;</span>
  114. </div>
  115. </section>
  116. </body>
  117. <script type="text/javascript" src="../../script/api.js"></script>
  118. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  119. <script type="text/javascript" src="../../script/jquery.tap.js"></script>
  120. <script type="text/javascript">
  121. var _member_avatar = '';
  122. var _member_sex = 0;
  123. apiready = function() {
  124. setFixStatusBar();
  125. getRouteData();
  126. };
  127. function getRouteData() {
  128. var _memberid = $api.getStorage("memberid")
  129. $.ajax({
  130. url: siteurl + 'v2/member/info',//'?do=getuserinfo',
  131. data: {
  132. memberid: _memberid
  133. },
  134. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  135. dataType: 'json',
  136. type: 'post',
  137. success: function(datas) {
  138. if (datas.result) {
  139. $("#member_name").val(datas.data.member_name);
  140. $("#member_truename").val(datas.data.member_truename);
  141. if (datas.data.member_avatar) {
  142. $(".border-none-img").attr("src", datas.data.member_avatar);
  143. _member_avatar = datas.data.member_avatar;
  144. }
  145. $(".member-sex").each(function() {
  146. if ($(this).attr("tag") == datas.data.member_sex) {
  147. $(this).find("img").attr("src", "../../image/checkon.png");
  148. }
  149. })
  150. } else {
  151. errcode(datas, datas.code);
  152. }
  153. }
  154. });
  155. }
  156. $(".border-none-img").on("tap", function() {
  157. var has = hasPermission('storage');
  158. if(!has || !has[0] || !has[0].granted){
  159. api.confirm({
  160. title: '提醒',
  161. msg: "没有获得 存储 权限\n是否前往设置?",
  162. buttons: ['去设置', '取消']
  163. }, function (ret, err) {
  164. var index = ret.buttonIndex;
  165. if (index == 1) {
  166. reqPermission('storage');
  167. } else {
  168. api.toast({ msg: '获取存储权限失败...' });
  169. }
  170. });
  171. // $(".border-none").removeClass("mask-hidden");
  172. return false;
  173. }
  174. api.getPicture({
  175. sourceType: 'album',
  176. encodingType: 'jpg',
  177. mediaValue: 'pic',
  178. destinationType: 'url',
  179. allowEdit: false,
  180. quality: 100,
  181. targetWidth: 600,
  182. targetHeight: 600,
  183. saveToPhotoAlbum: false
  184. }, function(ret, err) {
  185. if (ret) {
  186. upimg(ret.data);
  187. }
  188. });
  189. return false;
  190. })
  191. function upimg(files) {
  192. if (files) {
  193. api.ajax({
  194. url: siteurl + 'v2/upload/tmp',//'?do=upfile',
  195. method: 'post',
  196. data: {
  197. files: {
  198. file: files
  199. }
  200. },
  201. headers: { "X-TOKEN": $api.getStorage("accesstoken") }
  202. }, function(ret, err) {
  203. if (ret) {
  204. $(".border-none-img").attr("src", ret.data.url);
  205. _member_avatar = ret.data.file_name;
  206. }
  207. });
  208. }
  209. }
  210. $(".more-btn").on("tap", function() {
  211. if (_member_avatar == "") {
  212. api.toast({ msg: '请上传头像!' });
  213. return false;
  214. }
  215. if ($("#member_truename").val() == "") {
  216. api.toast({ msg: '用户姓名不能为空!' });
  217. return false;
  218. }
  219. $.ajax({
  220. url: siteurl + 'v2/member/update',//'?do=edituserinfo',
  221. data: {
  222. memberid: $api.getStorage("memberid"),
  223. member_truename: $("#member_truename").val(),
  224. member_sex: _member_sex,
  225. member_avatar: _member_avatar
  226. },
  227. headers: { "X-TOKEN": $api.getStorage("accesstoken") },
  228. dataType: 'json',
  229. type: 'post',
  230. success: function(datas) {
  231. if (datas.result) {
  232. api.execScript({
  233. name: 'index',
  234. frameName: 'frame3',
  235. script: 'getRouteData()'
  236. });
  237. api.toast({ msg: '操作成功!' });
  238. setTimeCloseWin("setting");
  239. } else {
  240. errcode(datas, datas.code);
  241. }
  242. }
  243. });
  244. return false;
  245. })
  246. $(".editpad").on("tap", function() {
  247. api.openWin({
  248. name: 'editpad',
  249. url: './editpad.html',
  250. bounces: false
  251. });
  252. return false;
  253. })
  254. $(".bindmobile").on("tap", function() {
  255. api.openWin({
  256. name: 'bindmobile',
  257. url: './bindmobile.html',
  258. bounces: false
  259. });
  260. return false;
  261. })
  262. $(".member-sex").on("tap", function() {
  263. $(".member-sex").find("img").attr("src", "../../image/checkun.png");
  264. $(this).find("img").attr("src", "../../image/checkon.png");
  265. _member_sex = $(this).attr("tag");
  266. return false;
  267. })
  268. </script>
  269. </html>