my-vip-message.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我的会员信息</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
  11. <link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
  12. <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
  13. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  14. <link rel="stylesheet" type="text/css" href="css/main.css" />
  15. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  16. <script>
  17. //屏蔽分享
  18. // document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  19. // WeixinJSBridge.call('hideOptionMenu');
  20. // });
  21. </script>
  22. </head>
  23. <body>
  24. <div class="mui-content">
  25. <ul class="mui-table-view mui-table-view-chevron my-vip-msg-list">
  26. <li class="mui-table-view-cell" style="padding: 0;">
  27. <div class="mui-input-row">
  28. <label>姓名</label>
  29. <input id="ipt-name" class="mui-text-right" type="text" placeholder="请输入姓名" value="">
  30. </div>
  31. </li>
  32. <li class="mui-table-view-cell">
  33. <a class="mui-navigate-right" id="btn-sex">性别 <i class="mui-pull-right update">请选择</i></a>
  34. </li>
  35. <li class="mui-table-view-cell">
  36. <a class="mui-navigate-right" id="btn-age">生日 <i class="mui-pull-right update">请选择日期</i></a>
  37. </li>
  38. <li>
  39. <div class="mui-input-row">
  40. <label>电话</label>
  41. <input id="ipt-tel" class="mui-text-right" type="text" placeholder="请输入电话号码" value="">
  42. </div>
  43. </li>
  44. </ul>
  45. <div class="mui-content-padded mui-text-center">
  46. <br />
  47. <a href="vip-explain.html" class="cl-red" style="text-decoration: underline;">会员说明</a>
  48. <!--<p class="mui-h6">
  49. <span class="iconfont icon-shuoming" style="color: #333;font-size: 16px;margin-right: 5px;"></span>会员说明:生日当天赠送积分、各种特权享不停。
  50. </p>-->
  51. </div>
  52. <div class="mui-text-center mui-content-padded">
  53. <br />
  54. <button type="button" class="my-btn-block" id="my-btn-submit" style="margin: 0 auto;padding: 10px 0;">保存</button>
  55. </div>
  56. </div>
  57. <!-- 加载ing begin-->
  58. <div class="loading covers">
  59. <div class="loading-bj"></div>
  60. <p>正在加载...</p>
  61. </div>
  62. <!-- 加载ing end -->
  63. <script type="text/javascript" src="js/mui.min.js"></script>
  64. <script type="text/javascript" src="js/mui.picker.min.js"></script>
  65. <!--<script type="text/javascript" src="js/mui.poppicker.js"></script>-->
  66. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  67. <script type="text/javascript" src="js/main.js"></script>
  68. <script type="text/javascript">
  69. window.addEventListener('pageshow', function(e) {
  70. // 通过persisted属性判断是否存在 BF Cache
  71. if(e.persisted) {
  72. location.reload();
  73. }
  74. });
  75. mui.ready(function() {
  76. if(!window.sessionStorage) {
  77. mui.alert("您的浏览器不支持sessionStorage");
  78. } else {
  79. //读取上一个页面带过来的sessionStorage
  80. user_data = JSON.parse(sessionStorage.getItem('user_data'));
  81. if(user_data != null) {
  82. $("#ipt-name").val(user_data.userName);
  83. $("#btn-sex i").text(user_data.sex==1?"男":"女").attr("name",user_data.sex);
  84. // var age='';
  85. // switch (user_data.age){
  86. // case 1:
  87. // age='80后'
  88. // break;
  89. // case 2:
  90. // age='85后'
  91. // break;
  92. // case 3:
  93. // age='90后'
  94. // break;
  95. // case 4:
  96. // age='95后'
  97. // break;
  98. // case 5:
  99. // age='00后'
  100. // break;
  101. // default:
  102. // age='其他'
  103. // break;
  104. // }
  105. $("#btn-age i").text(user_data.userBirthDate).attr("name",user_data.userBirthDate);
  106. $("#ipt-tel").val(user_data.tel);
  107. }else{
  108. mui.alert("sessionStorage异常!",function(){
  109. location.href="my-center.html";
  110. });
  111. }
  112. }
  113. //选择性别
  114. var userPicker = new mui.PopPicker();
  115. userPicker.setData([{
  116. value: '1',
  117. text: '男'
  118. }, {
  119. value: '2',
  120. text: '女'
  121. }]);
  122. var showUserPickerButton = dc('btn-sex');
  123. showUserPickerButton.addEventListener('tap', function(event) {
  124. userPicker.show(function(items) {
  125. $("#btn-sex i").text(items[0].text).attr("name",items[0].value);
  126. //返回 false 可以阻止选择框的关闭
  127. //return false;
  128. });
  129. }, false);
  130. //选择年龄
  131. //var userPicker1 = new mui.PopPicker();
  132. var date = new Date();
  133. var y = date.getFullYear();
  134. var m = date.getMonth();//获取当前月份的日期
  135. var d = date.getDate();
  136. var userPicker1 = new mui.DtPicker({
  137. type: "date", //设置日历初始视图模式
  138. beginDate: new Date(1930, 00, 01), //设置开始日期
  139. endDate: new Date(2010,00, 01) //设置结束日期
  140. });
  141. var showUserPickerButton1 = dc('btn-age');
  142. showUserPickerButton1.addEventListener('tap', function(event) {
  143. userPicker1.show(function(items) {
  144. //$("#btn-age i").text(items[0].text).attr("name",items[0].value);
  145. $("#btn-age i").text(items.text);
  146. userPicker1.dispose();
  147. userPicker1 = null;
  148. //返回 false 可以阻止选择框的关闭
  149. //return false;
  150. });
  151. }, false);
  152. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  153. });
  154. //保存按钮事件
  155. $(document).on('tap', '#my-btn-submit', function() {
  156. validate(); //先校验文本框
  157. if(validate_flag) { //判断是否验证通过
  158. var parameter = {}; //ajax参数json集合
  159. parameter["userName"] = $("#ipt-name").val().trim(); //姓名
  160. parameter["userSex"] = $("#btn-sex i").attr("name"); //性别
  161. if(parameter["userAgeStage"] != null && parameter["userAgeStage"] != "" && typeof(parameter["userAgeStage"])) {
  162. parameter["userAgeStage"] =6;
  163. }else{
  164. parameter["userBirthDate"] = $("#btn-age i").attr("name"); //年龄段
  165. }
  166. parameter["userTel"] = $("#ipt-tel").val().trim(); //电话
  167. console.log(parameter);
  168. $.ajax(base_path + '/wechat/member/updateMyMember?dates=' + new Date().getTime(), {
  169. data: parameter,
  170. dataType: 'json',
  171. xhrFields: {
  172. withCredentials: true
  173. },
  174. crossDomain: true,
  175. type: 'post',
  176. timeout: 15000,
  177. success: function(dt) {
  178. if(dt.isRedirect) {
  179. location.href = dt.redirectURL;
  180. } else {
  181. if(dt.status) {
  182. mui.alert("保存成功!");
  183. } else {
  184. mui.alert("保存失败!");
  185. }
  186. }
  187. },
  188. error: function(xhr, type, errorThrown) {
  189. console.log(xhr);
  190. mui.alert("保存失败!网络错误");
  191. }
  192. });
  193. } else {
  194. mui.alert(dalog_msg);
  195. }
  196. });
  197. //正则表达式示例
  198. var dalog_msg = '',
  199. validate_flag = false;
  200. function validate() {
  201. var ch_en_num = /^[A-Za-z_\-\u4e00-\u9fa5]{2,10}$/; //简体中文英文(2-10位)
  202. var telCode = /^(0?(13|14|15|17|18)[\d]{9}$|(01|02|03|04|05|06|07|08|09)[\d]{7,10}$|(400|800)[0-9]{7}$)/; //手机号,座机(400-800)
  203. var name = $("#ipt-name").val().trim(),tel = $("#ipt-tel").val().trim();
  204. var full_date = /^\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}$/; //日期格式 (2016\12\12,2016-12-12,2016.12.12)
  205. if(ch_en_num.test(name)) {
  206. if($("#btn-sex i").text() != '请选择') {
  207. //选择性别通过
  208. if($("#btn-age i").text() != '请选择日期') {
  209. if(full_date.test($("#btn-age i").text())) {
  210. //选择生日通过
  211. if(telCode.test(tel)) {
  212. //电话验证通过
  213. validate_flag = true;
  214. } else {
  215. //电话未通过验证
  216. if(tel != '') {
  217. dalog_msg = '您的电话号码格式不正确';
  218. } else {
  219. dalog_msg = '请您填写电话号码';
  220. }
  221. validate_flag = false;
  222. }}else{
  223. dalog_msg = '您的生日格式不正确';
  224. }
  225. } else {
  226. //选择生日未通过验证
  227. dalog_msg = '请选择您的生日';
  228. }
  229. } else {
  230. //选择性别未通过验证
  231. dalog_msg = '请选择您的性别';
  232. }
  233. } else {
  234. //姓名未通过验证
  235. if(name != '') {
  236. dalog_msg = '您的姓名格式不正确';
  237. } else {
  238. dalog_msg = '请填写您的姓名';
  239. }
  240. validate_flag = false;
  241. }
  242. return dalog_msg; //返回提示信息
  243. }
  244. </script>
  245. </body>
  246. </html>