phone.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>兑奖页面</title>
  5. <!--#include virtual="/h5v2/htm2/head.htm" -->
  6. <style type="text/css">
  7. body {
  8. background-image: url(img/phone.jpg);
  9. }
  10. .phoneNum {
  11. float: left;
  12. font-size: 20px;
  13. color: #392316;
  14. font-weight: bold;
  15. width: 60px;
  16. height: 60px;
  17. text-align: center;
  18. line-height: 60px;
  19. border: 3px solid transparent;
  20. margin-right: 2px;
  21. margin-bottom: 2px;
  22. border: 3px solid #ffb727;
  23. }
  24. .btn_focus_btn {
  25. border: 3px solid #ffffff;
  26. border-radius: 5px;
  27. }
  28. .btn_focus_btn1 {
  29. border: 3px solid #ffffff;
  30. border-radius: 20px;
  31. box-shadow: 0px 0px 10px #3794e2;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="buttonDiv"></div>
  37. <div id="phoneRightDiv" style="visibility:hidden;"></div>
  38. <!--#include virtual="/h5v2/htm2/foot.htm" -->
  39. <!--#include virtual="activity_cfg.htm" -->
  40. <script type="text/javascript">
  41. var linkImage = CONFIG.SPACER; //透明图片
  42. var buttons = []; //按钮数组
  43. var act_id = ACTIVITY_CFG.ACT_ID,
  44. act_code = ACTIVITY_CFG.ACT_CODE; //活动id及code
  45. var dudu_is_vip = PageH5.cookie.get('activity_is_vip');
  46. var uid = PageH5.cookie.get('activity_userid');
  47. var prizeImg = PageH5.getParam('prizeImg');
  48. var pnFocus = false,
  49. pn = '';
  50. var myKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'd', 'c'];
  51. PageH5.eventHandler = function(keyCode) {
  52. if (keyCode == KEY_LEFT) {
  53. PageH5.Button.move('left');
  54. } else if (keyCode == KEY_RIGHT) {
  55. PageH5.Button.move('right');
  56. } else if (keyCode == KEY_UP) {
  57. PageH5.Button.move('up');
  58. } else if (keyCode == KEY_DOWN) {
  59. PageH5.Button.move('down');
  60. } else if (keyCode == KEY_ENTER) {
  61. PageH5.Button.click();
  62. } else if (keyCode == KEY_BACK || keyCode == KEY_EXIT) {
  63. back();
  64. } else if (pnFocus) {
  65. if (G('pn').innerText.length < 11) {
  66. if (keyCode == KEY_0) {
  67. pn += '0';
  68. } else if (keyCode == KEY_1) {
  69. pn += '1';
  70. } else if (keyCode == KEY_2) {
  71. pn += '2';
  72. } else if (keyCode == KEY_3) {
  73. pn += '3';
  74. } else if (keyCode == KEY_4) {
  75. pn += '4';
  76. } else if (keyCode == KEY_5) {
  77. pn += '5';
  78. } else if (keyCode == KEY_6) {
  79. pn += '6';
  80. } else if (keyCode == KEY_7) {
  81. pn += '7';
  82. } else if (keyCode == KEY_8) {
  83. pn += '8';
  84. } else if (keyCode == KEY_9) {
  85. pn += '9';
  86. } else if (keyCode == KEY_BACK || keyCode == KEY_EXIT) {
  87. pn = pn.substring(0, pn.length - 1);
  88. }
  89. G('pn').innerHTML = pn;
  90. }
  91. }
  92. }
  93. function init() {
  94. var html = '';
  95. html += '<div style="position:absolute;left: 736px;top:247px;z-index:1;border-radius: 13px;width: 288px;height:34px;" id="pnBorder"></div>';
  96. html += '<div id="pn" style="position:absolute;left: 736px;top: 248px;width: 290px;height: 34px;line-height:30px;text-align:center;font-size:30px;overflow: hidden;color:color: #513b27;border: 2px solid #feb728;border-radius: 12px;"></div>';
  97. for (var i = 0; i < myKeys.length; i++) {
  98. html += '<div class="phoneNum" id="key_' + i + '" style="position:absolute;left:' + (738 + (i % 4) * 75) + 'px;top:' + (i < 4 ? 315 : i >= 4 && i < 8 ? 385 : 455) + 'px;">' + (i > 10 ? '清空' : i == 10 ? '删除' : i == 9 ? 0 : (i + 1)) + '</div>';
  99. var obj = {
  100. id: 'key_' + i,
  101. action: goKey,
  102. index: i,
  103. left: 'key_' + (i - 1),
  104. right: 'key_' + (i + 1),
  105. up: ['key_' + (i - 4), 'pnBorder'],
  106. down: ['key_' + (i + 4), 'submit'],
  107. focusClass: 'btn',
  108. };
  109. buttons.push(obj);
  110. }
  111. html += '<div style="position:absolute;left:400px;top:640px;"><img id="back" src="img/btn_back.png"/></div>';
  112. html += '<div style="position:absolute;left:770px;top:640px;"><img id="submit" src="img/btn_submit.png"/></div>';
  113. G('buttonDiv').innerHTML = html;
  114. var phoneRightDivHTML = '<div style="position:absolute;left:0px;top:0px;z-index:11;"><img src="img/markdown.jpg" width="1280" height="720"/></div>';
  115. phoneRightDivHTML += '<div style="position:absolute;left:572px;top:613px;z-index:11;"><img id="right_btn" src="./img/btn_back.png"/></div>';
  116. G('phoneRightDiv').innerHTML = phoneRightDivHTML;
  117. buttons.push({
  118. id: 'pnBorder',
  119. left: '',
  120. right: '',
  121. up: '',
  122. down: 'key_0',
  123. focusClass: 'btn',
  124. focusHandler: "pnFocus=true",
  125. blurHandler: "pnFocus=false"
  126. });
  127. buttons.push({
  128. id: 'submit',
  129. action: submit,
  130. left: 'back',
  131. right: '',
  132. up: 'key_9',
  133. down: '',
  134. focusClass: 'btn1',
  135. });
  136. buttons.push({
  137. id: 'back',
  138. action: back,
  139. left: '',
  140. right: 'submit',
  141. up: 'key_8',
  142. down: '',
  143. focusClass: 'btn1'
  144. });
  145. var phoneRightBtn = {
  146. id: 'right_btn',
  147. action: back,
  148. left: '',
  149. right: '',
  150. up: '',
  151. down: '',
  152. focusClass: 'btn1',
  153. };
  154. buttons.push(phoneRightBtn);
  155. PageH5.btn.init('pnBorder', buttons, '', false);
  156. }
  157. function goKey(button) {
  158. if (button.index == 10) {
  159. pn = pn.substring(0, pn.length - 1);
  160. } else if (button.index == 11) {
  161. pn = '';
  162. } else {
  163. if (G('pn').innerText.length < 11)
  164. pn += myKeys[button.index];
  165. }
  166. G('pn').innerHTML = pn;
  167. }
  168. function submit() {
  169. var phone = G('pn').innerHTML;
  170. var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //19或16新号段也放开
  171. if (!myreg.test(phone)) {
  172. PageH5.tip('手机号码格式有误!');
  173. } else {
  174. ajax({
  175. url: webUrl + "index.php?m=Home&c=Activityv2&a=setUserInfo",
  176. data: {
  177. uid: uid,
  178. act_code: act_id,
  179. is_vip: dudu_is_vip,
  180. phone: phone
  181. },
  182. success: function(res) {
  183. if (res.code == 0) {
  184. goPhoneRight();
  185. } else {
  186. PageH5.tip('抱歉,号码保存失败!');
  187. }
  188. }
  189. })
  190. }
  191. }
  192. function goPhoneRight() {
  193. S('phoneRightDiv');
  194. H('buttonDiv');
  195. PageH5.btn.set('right_btn');
  196. }
  197. function back() {
  198. // if (PageH5.getParam('from') == 'winningInfo') {
  199. // location.href = './winningInfo.html';
  200. // } else if (PageH5.getParam('from') == 'medalInfo') {
  201. // location.href = './medalInfo.html';
  202. // } else {
  203. location.href = './prize.html';
  204. // }
  205. }
  206. window.onload = function() {
  207. init();
  208. }
  209. </script>
  210. </body>
  211. </html>