Nenhuma Descrição

upgrade.html 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script src="jquery.js"></script>
  9. <script>
  10. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  11. window.onresize = function(){
  12. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  13. }
  14. </script>
  15. <style>
  16. *{margin:0;padding:0;color: #333;}
  17. body{font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; background:#fff;-webkit-text-size-adjust:100%;}
  18. body,html{width: 100%;height: 100vh; }
  19. input{outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0);border-radius: 0;font-size: 0.13rem;}
  20. .alert-info {position: absolute;top: 1.74rem;right: 0;left: 0;bottom: 0;text-align: center;}
  21. .alert-info p {display: inline-block;color: #fff;font-size: 0.14rem;line-height: 0.36rem;padding: 0 0.10rem;background-color: rgba(0, 0, 0, 0.7);border-radius: 5px;}
  22. .cont {
  23. position: absolute;
  24. top: 0;
  25. bottom: 0;
  26. left: 0;
  27. right: 0;
  28. margin: auto;
  29. height: 90%;
  30. width: 80%;
  31. border: 0.005rem #797979 solid;
  32. }
  33. .head{
  34. line-height: 0.6rem;
  35. font-size: 0.22rem;
  36. text-align: center;
  37. }
  38. .input_con{
  39. padding-bottom: 1rem;
  40. margin: auto;
  41. }
  42. .input_con span {
  43. font-size: 0.16rem;
  44. margin-right: 0.15rem;
  45. margin-left: 0.2rem;
  46. }
  47. #phone{
  48. width: 1.8rem;
  49. height:0.27rem;
  50. text-indent: 1em;
  51. }
  52. #upgrade{
  53. width: 2rem;
  54. height: 0.4rem;
  55. background-color: #169bd5;
  56. color: #fffff3;
  57. font-size: 0.15rem;
  58. line-height: 0.4rem;
  59. text-align: center;
  60. border-radius: 0.2rem;
  61. margin: auto;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <div class="cont">
  67. <p class="head">猎豆优选</p>
  68. <div class="input_con">
  69. <span>手机号</span><input type="tel" id="phone">
  70. </div>
  71. <p id="upgrade">升级为超级会员</p>
  72. </div>
  73. <div class="alert-info" style="display: none;">
  74. <!-- tip提示,3s后消失 -->
  75. <p></p>
  76. </div>
  77. </body>
  78. <script>
  79. $('#upgrade').click(function(){
  80. // if($("#phone").val()==""||$("#phone").val()==null){
  81. // alert("请输入手机号!");
  82. // return false;
  83. // }else{
  84. // var myreg = /^1[3|4|5|7|8][0-9]\d{4,8}$/; //手机号校验
  85. // if(!myreg.test($("#phone").val())) {
  86. // alert("请填写 有效的手机号码!");
  87. // return;
  88. // }
  89. // }
  90. //发送数据
  91. $.ajax({
  92. type: 'GET',
  93. url: 'http://tbkadmin.726p.com/admin/userlevel/up',
  94. data: {
  95. phone:$('input[type="tel"]').val()
  96. },
  97. success: function(msg){
  98. var obj=eval("("+ msg +")")
  99. // console.log(obj)
  100. //升级成功
  101. if(obj.code==200){
  102. showMsg(obj.message)
  103. }else if(obj.code==300){
  104. //已经是超级会员
  105. showMsg(obj.message)
  106. }else if(obj.code==400){
  107. //升级失败
  108. showMsg(obj.message)
  109. }
  110. }
  111. });
  112. })
  113. function showMsg(msg) {
  114. var msgBox = $('.alert-info');
  115. msgBox.children('p').text(msg);
  116. msgBox.show();
  117. setTimeout(function() {
  118. msgBox.hide();
  119. }, 2000);
  120. }
  121. </script>
  122. </html>