Ei kuvausta

bindingPhone.html 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <!DOCTYPE html>
  2. <html>
  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. <title>绑定手机号</title>
  8. <link rel="stylesheet" type="text/css" href="public/public_css.css"/>
  9. <style type="text/css">
  10. body{
  11. padding-top: 0.25rem;
  12. background: #FFFFFF;
  13. }
  14. .label{
  15. color: #444444;
  16. font-size: 0.16rem;
  17. display: inline-block;
  18. width: 0.75rem;
  19. }
  20. input{
  21. border: none;
  22. font-size: 0.16rem;
  23. outline: none;
  24. margin-left: 0.16rem;
  25. }
  26. .tel{
  27. width: 3.2rem;
  28. margin: auto;
  29. margin-top: 0.16rem;
  30. padding-bottom: 0.05rem;
  31. border-bottom: 0.01rem solid #D8D8D8;
  32. }
  33. .tel button{
  34. width: 0.73rem;
  35. height: 0.28rem;
  36. border-radius: 0.06rem;
  37. background: #F4F4F4;
  38. font-size: 0.14rem;
  39. color: #666666;
  40. }
  41. input[data-type="password1"]{
  42. width: 1.45rem;
  43. }
  44. .button{
  45. width: 2.18rem;
  46. height: 0.41rem;
  47. border-radius: 0.26rem;
  48. background: #FFE100;
  49. color: #FFFFFF;
  50. box-shadow:0px 0.02rem 0px rgba(251,179,179,0.5);
  51. font-size: 0.2rem;
  52. margin: auto;
  53. margin-top: 0.68rem;
  54. display: block;
  55. }
  56. .getYzm{
  57. width: 2.54rem;
  58. background: #F2F2F2;
  59. border-radius: 0.06rem;
  60. margin: auto;
  61. margin-top: 0.15rem;
  62. margin-bottom: 0.15rem;
  63. }
  64. .getYzm input{
  65. font-size: 0.16rem;
  66. line-height: 0.22rem;
  67. color: #666666;
  68. background: #F2F2F2;
  69. width: 1.43rem;
  70. vertical-align: middle;
  71. }
  72. .getYzm img{
  73. height: 0.4rem;
  74. width: 0.8rem;
  75. display: inline-block;
  76. vertical-align: middle;
  77. margin: 0.1rem 0.1rem 0.1rem 0;
  78. }
  79. .yesOrNo{
  80. border-top: 0.01rem solid rgba(151,151,151,0.1998);
  81. }
  82. .yesOrNo button{
  83. width: 1.46rem;
  84. font-size: 0.14rem;
  85. line-height: 0.2rem;
  86. color: #0F7FFF;
  87. padding: 0.09rem 0 0.12rem 0;
  88. }
  89. .yesOrNo button:nth-of-type(1){
  90. border-right: 0.01rem solid rgba(151,151,151,0.1998);
  91. }
  92. .mobilePhone,.passwordPrompt,.passwordConfirm,.yzmPrompt{
  93. display: none;
  94. font-size: 0.12rem;
  95. color: red;
  96. margin-left: 1rem;
  97. position: relative;
  98. top: 0.1rem;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <p class="mobilePhone">请正确填写手机号</p>
  104. <div class="tel"><div class="label">手机号</div><input type="tel" id="mobile" placeholder="请输入手机号" onchange="mobileChange()"/></div>
  105. <p class="yzmPrompt">请填写手机验证码</p>
  106. <div class="tel">
  107. <div class="label">验证码</div>
  108. <input data-type="password1" id="code" type="tel" placeholder="请输入手机验证码" onchange="yzmChangeEvent()"/>
  109. <button id="mobileYzm" onclick="getYzmEvent()">验证码</button>
  110. </div>
  111. <p class="passwordPrompt">请正确填写6-16位数字、字母组合密码</p>
  112. <div class="tel"><div class="label">新密码</div><input type="password" id="password" placeholder="6-16位数字、字母组合" onchange="passwordBlur()"/></div>
  113. <p class="passwordConfirm">密码确认有误</p>
  114. <div class="tel"><div class="label">确认密码</div><input type="password" id="password01" placeholder="请再次输入密码" onchange="passwordCongirmEvent()"/></div>
  115. <button class="button" onclick="goSetPassword()">完成</button>
  116. <div class="maskYzm">
  117. <div class="yzmCon">
  118. <div class="getYzm">
  119. <input type="text" id="imgYzm" placeholder="请输入验证码"/>
  120. <img onclick="imgYzmChange()" src="/api/V1/imgCode?mobile=13621209952" />
  121. </div>
  122. <div class="yesOrNo">
  123. <button onclick="cancelYzm()">取消</button>
  124. <button onclick="yesYzm()">确定</button>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="mask">
  129. <div class="content">
  130. <h3>提示</h3>
  131. <p>密码错误啊啊啊啊啊</p>
  132. <div onclick="iknow()">我知道了</div>
  133. </div>
  134. </div>
  135. </body>
  136. </html>
  137. <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
  138. <script type="text/javascript">
  139. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  140. window.onresize = function(){
  141. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  142. }
  143. var book_id = '';
  144. var user_id = '';
  145. var str=location.href; //取得整个地址栏
  146. localStorage.setItem('addUrl',str)
  147. var num=str.indexOf("?");
  148. str=str.substr(num+1); //str得到?之后的字符串
  149. var brr=str.split("&");
  150. for(var i = 0 ; i<brr.length; i++){
  151. if(brr[i].indexOf('bookId') != -1){
  152. book_id = brr[i].split('=')[1];
  153. }
  154. if(brr[i].indexOf('userId') != -1){
  155. user_id = brr[i].split('=')[1];
  156. }
  157. }
  158. var time = '';
  159. var mobileFlag = false;
  160. var pwdFlag=false;
  161. var pwdConfirmFlag=false;
  162. var successFlag = false;
  163. var user_name = '';
  164. var book_name = '';
  165. var avatar = '';
  166. var user_code = 0;
  167. function iknow() {
  168. if(successFlag){
  169. // var addUrl = localStorage.getItem('addUrl')
  170. window.location.href='/shareBooks/wechatAddSuccess.html?appUrl=https%3A%2F%2Fitunes.apple.com%2Fcn%2Fapp%2F%2Fid1300097774%3Fmt%3D8&code=0&message=成功&avatar=' + avatar + "&userName=" + user_name + "&bookName=" + book_name;
  171. }
  172. $(".mask").css("visibility","hidden");
  173. $("#imgYzm").val("")
  174. }
  175. function cancelYzm(){
  176. $(".maskYzm").css("visibility","hidden")
  177. }
  178. function imgYzmChange () {
  179. //更换验证图片验证码
  180. $(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + $("#mobile").val() + '&tmp=' + Date.parse(new Date()));
  181. $("#imgYzm").val("")
  182. }
  183. function yesYzm () {
  184. var imgCode = $("#imgYzm").val();
  185. var teleNumber = $("#mobile").val();
  186. sendCode(imgCode,teleNumber)
  187. }
  188. function sendCode (imgCode,teleNumber) {
  189. $.ajax({
  190. type:"post",
  191. url:"/api/V1/h5SendCode",
  192. data: {
  193. img_code:imgCode,
  194. mobile:teleNumber,
  195. code_type:1,
  196. send_type:1
  197. },
  198. success: function (res) {
  199. console.log(JSON.parse(res))
  200. if(JSON.parse(res).code == 0){
  201. time = JSON.parse(res).res.time_out;
  202. timeInterval = setInterval(timeDown,1000);
  203. $(".maskYzm").css("visibility","hidden")
  204. }else{
  205. var msg = JSON.parse(res).message[0]
  206. $(".maskYzm").css("visibility","hidden");
  207. $(".mask").css("visibility","visible");
  208. if(msg.indexOf("img_code") != -1){
  209. msg = msg.replace('img_code', '图片验证码');
  210. }
  211. $(".mask .content p").html(msg);
  212. }
  213. }
  214. });
  215. }
  216. //密码正则
  217. function passwordBlur () {
  218. var password = $("#password").val();
  219. var pwd = /^[0-9A-Za-z]{6,16}$/;
  220. // var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
  221. if(!pwd.test(password)){
  222. //密码格式不正确
  223. $(".passwordPrompt").css('display','block');
  224. pwdFlag = false;
  225. }else{
  226. $(".passwordPrompt").css('display','none');
  227. pwdFlag = true;
  228. }
  229. }
  230. //手机号正则
  231. function mobileChange () {
  232. var teleNumber = $("#mobile").val();
  233. var myMobile=/^[0-9]{11}$/;
  234. if (!myMobile.test(teleNumber)) {
  235. //手机号码未填写及填写不正确
  236. $(".mobilePhone").css("display","block");
  237. mobileFlag=false;
  238. }else{
  239. $(".mobilePhone").css("display","none");
  240. mobileFlag=true;
  241. }
  242. }
  243. //确认密码
  244. function passwordCongirmEvent (){
  245. var pwd = $("#password").val();
  246. var pwdCongirm = $("#password01").val();
  247. if(pwd != pwdCongirm){
  248. $(".passwordConfirm").css("display","block");
  249. pwdConfirmFlag = false;
  250. }else{
  251. $(".passwordConfirm").css("display","none");
  252. pwdConfirmFlag = true;
  253. }
  254. }
  255. //手机验证码
  256. function yzmChangeEvent () {
  257. var code = $("#code").val();
  258. if(code != ''){
  259. $(".yzmPrompt").css("display","none");
  260. }else{
  261. $(".yzmPrompt").css("display","block");
  262. }
  263. }
  264. function getYzmEvent(){
  265. var teleNumber = $("#mobile").val();
  266. mobileChange();
  267. if(mobileFlag){
  268. $(".mask").css("visibility","hidden")
  269. $(".maskYzm").css('visibility','visible');
  270. $(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + teleNumber + '&tmp=' + Date.parse(new Date()));
  271. $("#imgYzm").val("");
  272. }
  273. }
  274. function timeDown () {
  275. $("#mobileYzm").attr('disabled','true')
  276. $("#mobileYzm").css("color","red");
  277. time -- ;
  278. if(time == 0){
  279. $("#mobileYzm").css("color","#666666");
  280. $("#mobileYzm").html('验证码');
  281. $("#mobileYzm").removeAttr('disabled')
  282. clearInterval(timeInterval);
  283. }else{
  284. $("#mobileYzm").html(time);
  285. }
  286. }
  287. //完成
  288. function goSetPassword(){
  289. mobileChange();
  290. passwordBlur();
  291. passwordCongirmEvent();
  292. if(mobileFlag&&pwdFlag&&pwdConfirmFlag){
  293. var code = $("#code").val();
  294. if(code != ''){
  295. resetPassword();
  296. }else{
  297. $(".yzmPrompt").css("display","block");
  298. }
  299. }
  300. }
  301. function resetPassword () {
  302. $.ajax({
  303. type:"post",
  304. url:"/api/V1/h5BindMobile",
  305. data:{
  306. 'mobile':$("#mobile").val(),
  307. 'password':$("#password").val(),
  308. 'c_password':$("#password01").val(),
  309. 'code':$("#code").val(),
  310. 'book_id':book_id,
  311. 'user_id':user_id
  312. },
  313. success: function (res){
  314. console.log(JSON.parse(res))
  315. if(JSON.parse(res).code == 0){
  316. //登录成功
  317. $(".mask").css("visibility","visible");
  318. var msg = JSON.parse(res).message[0];
  319. $(".content p").html('手机号绑定成功');
  320. user_name = JSON.parse(res).res.user_name;
  321. book_name = JSON.parse(res).res.book_name;
  322. avatar = JSON.parse(res).res.avatar;
  323. avatar = encodeURIComponent(avatar);
  324. successFlag = true;
  325. }else{
  326. var msg = JSON.parse(res).message[0]
  327. $(".mask").css("visibility","visible");
  328. if(msg.indexOf("mobile") != -1){
  329. msg = msg.replace('mobile', '手机号');
  330. }
  331. if(msg.indexOf("c_password") != -1){
  332. msg = msg.replace('c_password', '确认密码');
  333. }
  334. if(msg.indexOf("password") != -1){
  335. msg = msg.replace('password', '密码');
  336. }
  337. if(msg.indexOf("code") != -1){
  338. msg = msg.replace('code', '验证码');
  339. }
  340. $(".content p").html(msg);
  341. }
  342. }
  343. });
  344. }
  345. </script>