Sin descripción

enlist_three.html 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>招募令</title>
  9. <script src="./js/jquery.js"></script>
  10. <!--<script type="text/javascript" src="js/enlist_three.js"></script>-->
  11. <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
  12. <link rel="stylesheet" type="text/css" href="css/enlist_three.css">
  13. </head>
  14. <body>
  15. <div class="warp">
  16. <div class="enlist_img">
  17. <img src="images/KX01.png?v=1" style="display: block;">
  18. </div>
  19. <form class="enlist_form">
  20. <!--<p class="enlist_form_p">姓名<span class="fbc_required">*</span></p>
  21. <div class="enlist_form_input">
  22. <div class="enlist_form_input_icon">
  23. <i class="iconfont icon-icon1"></i>
  24. </div>
  25. <input type="text" class="enlist_form_input_item" id="user">
  26. </div>-->
  27. <p class="enlist_form_p">手机<span class="fbc_required">*</span></p>
  28. <div class="enlist_form_input">
  29. <div class="enlist_form_input_icon">
  30. <i class="iconfont icon-icon"></i>
  31. </div>
  32. <input type="tel" class="enlist_form_input_item" id="tel" >
  33. </div>
  34. <!--<p class="enlist_form_p">邮箱<span class="fbc_required">*</span></p>
  35. <div class="enlist_form_input">
  36. <div class="enlist_form_input_icon">
  37. <i class="iconfont icon-email-outline"></i>
  38. </div>
  39. <input type="email" class="enlist_form_input_item" id="email">
  40. </div>-->
  41. <p class="enlist_form_p">微信<span class="fbc_required">*</span></p>
  42. <div class="enlist_form_input">
  43. <div class="enlist_form_input_icon">
  44. <i class="iconfont icon-weixin"></i>
  45. </div>
  46. <input type="text" class="enlist_form_input_item" id="vx">
  47. </div>
  48. <!--<p class="enlist_form_p">QQ<span class="fbc_required">*</span></p>
  49. <div class="enlist_form_input">
  50. <div class="enlist_form_input_icon">
  51. <i class="iconfont icon-qq"></i>
  52. </div>
  53. <input type="number" class="enlist_form_input_item" id="qq">
  54. </div>-->
  55. <div class="enlist_form_button" >立即报名</div>
  56. </form>
  57. <!--弹层-->
  58. <div class="mask" style="z-index:989;" >
  59. <div class="content">
  60. <p class="con_tit">报名成功 <img src="images/close1.png" onclick="shut()" alt=""/></p>
  61. <p class="con_con" style="height:0.3rem">欢迎加入“猎豆优选代理群”</p>
  62. <p class="con_con">免费获取全套营销课程,还能与创始人面对面交流。</p>
  63. <div class="code"><img id="evm_zml" src="https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/evm_zml.jpg" alt="二维码" id="code"/></div>
  64. <!--<div id="save" onclick="downloadIamge('canvas', '001')">保存二维码</div>-->
  65. <p class="con_con" style="line-height: 0.3rem;text-align: center;">截图保存二维码</p>
  66. <p class="con_course" onclick="goCourse()">查看使用教程</p>
  67. </div>
  68. </div>
  69. <!--教程弹层-->
  70. <div class="mask_two" style="z-index:989;" >
  71. <div class="content_two" >
  72. <p class="con_tit_two">
  73. <img src="images/back1.png" alt="返回" " onclick="back()" />
  74. 淘口令使用教程 <img src="images/close1.png" onclick="shut()" alt="关闭" />
  75. </p>
  76. <div class="course_item">
  77. <p class="p_text">1.保存进群二维码图片</p>
  78. <img src="images/1.png" alt="" />
  79. <p class="p_text">2.打开微信右上方的“+”</p>
  80. <img src="images/2.png" alt="" />
  81. <p class="p_text">3.点击【扫一扫】</p>
  82. <img src="images/3.png" alt="" />
  83. <p class="p_text">4.点击右上角【相册】</p>
  84. <img src="images/4.png" alt="" />
  85. <p class="p_text">5.选择刚才保存的群二维码图片</p>
  86. <img src="images/5.png" alt="" />
  87. <p class="p_text">6.点击右上角的【完成】</p>
  88. <img src="images/6.png" alt=""/>
  89. <p class="p_text">7.成功加入“猎豆优选代理群”</p>
  90. <img src="images/7.png" alt=""/>
  91. </div>
  92. </div>
  93. </div>
  94. <!--失败弹层-->
  95. <div class="fail">
  96. <div class="content_fail">
  97. <h3>提示</h3>
  98. <p>提示内容</p>
  99. <div onclick="iknow()">我知道了</div>
  100. </div>
  101. </div>
  102. </div>
  103. </body>
  104. <script type="text/javascript">
  105. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  106. window.onresize = function(){
  107. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  108. }
  109. $().ready(function () {
  110. $("#evm_zml").attr("src","https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/evm_zml.jpg?time=" + new Date().getTime())
  111. })
  112. //弹层
  113. function iknow() {
  114. $(".fail").css("visibility","hidden");
  115. }
  116. //获取焦点时 改变图片颜色 边框颜色
  117. $("input").focus(function(e){
  118. $(e.currentTarget).parent().css("border-color","#a5a5a5");
  119.         $(e.currentTarget).prev().find('i').css('color', '#2c8ad0');
  120.     });
  121.     $("input").blur(function(e){
  122. $(e.currentTarget).parent().css("border-color","#D3D3D3");
  123.         $(e.currentTarget).prev().find('i').css('color', '#7fbceb');
  124.     });
  125. $('.enlist_form_button').click(function(){
  126. getData();
  127. })
  128. //请求数据
  129. function getData(){
  130. $.ajax({
  131. type: "GET",
  132. url: "https://tbk.726p.com/api/v2/signUp/insertInfo",
  133. data:{
  134. user:new Date().getTime(),
  135. tel:$('#tel').val(),
  136. email:'00000@163.com',
  137. vx:$('#vx').val(),
  138. qq:'00000',
  139. source:'1000'
  140. },
  141. success:function(msg){
  142. console.log(msg)
  143. //判断返回值
  144. if(msg.errno==4003){
  145. // $('.mask .content p').html(msg.err)
  146. $('.mask').css("visibility","visible");
  147. $('input').val('');
  148. }else if(msg.errno==10009){
  149. $('.fail').css("visibility","visible");
  150. $('.fail .content_fail p').html(msg.rst.msg)
  151. }
  152. },
  153. fail:function (err){
  154. console.log(err)
  155. }
  156. });
  157. }
  158. function back(){
  159. $(".mask_two").css('visibility','hidden')
  160. $(".mask").css('visibility','visible')
  161. }
  162. function goCourse(){
  163. $(".mask").css('visibility','hidden')
  164. $(".mask_two").css('visibility','visible')
  165. }
  166. function shut(){
  167. $(".mask_two").css('visibility','hidden')
  168. $(".mask").css('visibility','hidden')
  169. }
  170. </script>
  171. </html>