|
@@ -0,0 +1,354 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta
|
|
|
+ name="viewport"
|
|
|
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
|
+ />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
+ <title>绑定手机</title>
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body,
|
|
|
+ p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ html {
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-banner {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-phone__wrap {
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ border-radius: 6px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 125px 13px 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-phone__wrap .wrap-banner {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form {
|
|
|
+ margin-top: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .form-item {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: start;
|
|
|
+ -ms-flex-pack: start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 12px;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .form-item input {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .form-item input::-webkit-input-placeholder {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .form-item .get-code {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #ff7130;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .form-item:not(:last-child) {
|
|
|
+ margin-bottom: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .submit-wrap {
|
|
|
+ margin-top: 69px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .submit-wrap button {
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ line-height: 45px;
|
|
|
+ background: #ff7130;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .submit-wrap button.to-refuse {
|
|
|
+ color: #b3b3b3;
|
|
|
+ background: #ecf2f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .submit-wrap button.to-refuse__enable {
|
|
|
+ border-color: #ff7130;
|
|
|
+ color: #ff7130;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-form .submit-wrap button:not(:last-child) {
|
|
|
+ margin-right: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content {
|
|
|
+ position: absolute;
|
|
|
+ width: 90%;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content .dialog-img {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ top: 50%;
|
|
|
+ -webkit-transform: translate(0%, -50%);
|
|
|
+ transform: translate(0%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content .content-info {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content .content-info .bind-title {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content .content-info i {
|
|
|
+ color: #ff7130;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-wrap .dialog-content .close {
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ width: 175px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #fff;
|
|
|
+ background: #ff7130;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin: 0 auto 26px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<main>
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/bind-phone/doing.jpg" alt="" class="page-banner" />
|
|
|
+ <div class="bind-phone__wrap">
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/bind-phone/title.jpg" alt="" class="wrap-banner" />
|
|
|
+ <div class="bind-form">
|
|
|
+ <form action="">
|
|
|
+ <div class="form-item">
|
|
|
+ <input
|
|
|
+ type="phone"
|
|
|
+ name="phone"
|
|
|
+ id="phone"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ name="code"
|
|
|
+ id="code"
|
|
|
+ placeholder="请输入手机验证码"
|
|
|
+ />
|
|
|
+ <span class="get-code">获取验证码</span>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="submit-wrap">
|
|
|
+ <button class="to-bind" id="bind">立即绑定</button>
|
|
|
+ <!-- 可以点击的时候 多加一个class->to-refuse__enable -->
|
|
|
+ <button class="to-refuse" id="refuse" disabled>残忍拒绝</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+<div class="dialog-wrap" style="display: none">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <img src="https://cdn-novel.iycdm.com/h5/bind-phone/success.png" alt="" class="dialog-img" />
|
|
|
+ <div class="content-info">
|
|
|
+ <p class="bind-title">绑定成功</p>
|
|
|
+ <p class="bind-text">手机号绑定成功,赠送您<i>100</i>书币</p>
|
|
|
+ </div>
|
|
|
+ <button class="close" id="close">知道了</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
|
|
+<script>
|
|
|
+ var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/;
|
|
|
+ var refuseNumber = 10;
|
|
|
+ var getPhoneCodeNumber = 60;
|
|
|
+
|
|
|
+ // 倒计时
|
|
|
+ function countDown(time, cb) {
|
|
|
+ var timer = null
|
|
|
+ timer = setInterval(function() {
|
|
|
+ $.ajax({
|
|
|
+ url:"/api/order/issuccess",
|
|
|
+ data:{
|
|
|
+ order:"{{ $order }}"
|
|
|
+ },
|
|
|
+ success:function(res){
|
|
|
+ if(res['code'] == 0){
|
|
|
+ time = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (time === 1) clearInterval(timer);
|
|
|
+ time--;
|
|
|
+ if (cb) cb(time);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 残忍拒绝事件
|
|
|
+ $("#refuse").on("click", function() {
|
|
|
+ if(!$(this).attr('disabled')){
|
|
|
+ location.href = "{!! $url !!}";
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 残忍拒绝倒计时
|
|
|
+ countDown(refuseNumber, function(time) {
|
|
|
+ if (time === 0) {
|
|
|
+ $("#refuse").text("残忍拒绝");
|
|
|
+ $("#refuse").attr("disabled", false);
|
|
|
+ $("#refuse").addClass("to-refuse__enable");
|
|
|
+ } else $("#refuse").text("残忍拒绝(" + time + "s)");
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取验证码
|
|
|
+ var code_getting = false;
|
|
|
+ $(".get-code").on("click", function() {
|
|
|
+ var phone = $("#phone").val();
|
|
|
+ if (!phone) {
|
|
|
+ alert("请输入手机号!");
|
|
|
+ return;
|
|
|
+ } else if (!reg.test(phone)) {
|
|
|
+ alert("手机号不合法!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url:'/api/bindphone/sendcode',
|
|
|
+ type:'post',
|
|
|
+ data:{phone:phone},
|
|
|
+ success:function () {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (!code_getting) {
|
|
|
+ code_getting = true;
|
|
|
+ countDown(getPhoneCodeNumber, function(time) {
|
|
|
+ if (time === 0) {
|
|
|
+ $(".get-code").text("获取验证码");
|
|
|
+ code_getting = false;
|
|
|
+ } else $(".get-code").text(time + "s");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 立即绑定事件
|
|
|
+ $("#bind").on("click", function() {
|
|
|
+ var phone = $("#phone").val();
|
|
|
+ var code = $("#code").val();
|
|
|
+ if (!phone || !code) alert("手机号或验证码不能为空");
|
|
|
+ else {
|
|
|
+ // 绑定逻辑
|
|
|
+ $.ajax({
|
|
|
+ url:'/api/bindphone/bind',
|
|
|
+ type:'post',
|
|
|
+ data:{phone:phone,code:code},
|
|
|
+ success:function ($res) {
|
|
|
+ if($res.code == 0){
|
|
|
+ $(".dialog-wrap").fadeIn();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 关闭弹窗
|
|
|
+ $(".dialog-content").delegate(".close", "click", function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ $(".dialog-wrap").fadeOut();
|
|
|
+ setTimeout(function(){
|
|
|
+ location.href = "{!! $url !!}";
|
|
|
+ },50);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+</html>
|