zhangdehua vor 1 Jahr
Ursprung
Commit
5ce6a20f23

+ 17 - 0
app/api/service/passport/Login.php

@@ -112,6 +112,23 @@ class Login extends BaseService
         return $this->setSession();
     }
 
+    public function resetPassword($email,$smsCode,$password)
+    {
+        //todo 电子烟校验邮箱mobile的验证码是否匹配
+        $mailCaptcha = new MailCaptcha();
+        $mailCaptcha->checkCaptcha($smsCode, $email);
+
+        $userInfo = !empty($email) ? UserModel::detail(['mobile'=>$email]) : null;
+        if (empty($userInfo)){
+            throwError('Not exit', 401, []);
+        }
+
+        $data = ['password' => md5($password . $userInfo['salt'])];
+
+        // 更新用户记录
+        return $userInfo->save($data) !== false;
+    }
+
     /**
      * 快捷登录:微信小程序用户
      * @param array $form

+ 21 - 0
app/index/controller/Passport.php

@@ -64,4 +64,25 @@ class Passport extends Controller
         return view('logIn');
     }
 
+
+    public function retrievePassword()
+    {
+        if ($this->request->method() =='GET'){
+            return view('retrievePassword');
+        }
+
+        $params = $this->postForm();
+        if (empty($params['mobile']) || empty($params['smsCode'])){
+            if ($params['password'] !== $params['password1']){
+                return $this->renderError('password not match');
+            }
+        }
+        $LoginService = new LoginService;
+        $r = $LoginService->resetPassword($params['mobile'],$params['smsCode'],$params['password']);
+        if ($r){
+            return $this->renderSuccess([], 'Reset success');
+        }
+        return $this->renderError('something wrong');
+    }
+
 }

+ 2 - 2
app/index/view/passport/logIn.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
 
 <head>
     <meta charset="UTF-8">
@@ -40,7 +40,7 @@
                         <p class="miTitle">Password</p>
                         <input class="input" type="password" name="" id="password">
                     </div>
-                    <p class="forgotPassword">Forget Your Password?</p>
+                    <a href="/index/passport/retrievePassword.html"><p class="forgotPassword">Forget Your Password?</p></a>
                     <!-- 登录 -->
                     <div class="pageButton" id="loginButton">Login</div>
                     <!-- 没有账户 -->

+ 214 - 0
app/index/view/passport/retrievePassword.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+    <meta name='apple-touch-fullscreen' content='yes'>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="keywords" content="电子烟,关键字" />
+    <meta name="Description" content="网站描述" />
+    <title>找回密码</title>
+    <link rel="stylesheet" href="/assets/index/css/common.css?t=10100">
+    <link rel="stylesheet" href="/assets/index/css/retrievePassword.css">
+</head>
+
+<body>
+    <main id="main">
+        <div class="pageContainer">
+            <div class="pageLogo">
+                <img src="/assets/index/asstes/icon/logo.png" alt="">
+            </div>
+            <section class="pageSection">
+                <!-- 登录模块 -->
+                <div id="loginModel">
+                    <h1 class="modelTitle">Retrieve password</h1>
+                    <div class="modelContainer">
+                        <!-- 电子邮箱 -->
+                        <div class="modelItem">
+                            <p class="miTitle">电子邮箱</p>
+                            <input class="input" type="text" name="" id="email">
+                        </div>
+                        <!-- 验证码 -->
+                        <div class="modelItem">
+                            <p class="miTitle">验证码</p>
+                            <input class="input" type="text" name="" id="vcode">
+                            <div class="modelItemButon" id="getCode">Get code</div>
+                        </div>
+                        <!-- 新密码 -->
+                        <div class="modelItem">
+                            <p class="miTitle">新密码</p>
+                            <input class="input" type="password" name="" id="password">
+                        </div>
+                        <!-- 确认新密码 -->
+                        <div class="modelItem">
+                            <p class="miTitle">确认密码</p>
+                            <input class="input" type="password" name="" id="confirmPassword">
+                        </div>
+                        <!-- 找回密码 -->
+                        <div class="pageButton" id="retrieve">找回密码</div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+    <!-- 吐司提示 -->
+    <div id="toastContainer"></div>
+</body>
+<script src="/assets/index/js/jquery-1.12.0.js"></script>
+<script src="/assets/index/js/flexible.js"></script>
+<script src="/assets/index/js/public.js"></script>
+<script src="/assets/index/js/login.js?y=10"></script>
+<script>
+    $(document).ready(function () {
+        //用户存储token名
+        const VAPES_TOKEN = "vapes_token"
+        //触屏事件 || 点击事件
+        const tap = "ontouchstart" in window ? "touchstart" : "click";
+        //倒计时秒数
+        let countdown = 60;
+        //定时器
+        let countdownTimer;
+
+        /**
+         * 吐司提示
+         * @param message 消息
+         * @returns 
+         */
+        function showToast(message) {
+            var toastElement = $('#toastContainer');
+            toastElement.text(message);
+            toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
+        }
+
+        //获取验证码
+        $("#getCode").on(tap, function (event) {
+            event.preventDefault();
+            // 如果倒计时已经在进行中,则忽略点击事件
+            console.log(countdownTimer)
+            if (countdownTimer) {
+                return;
+            }
+            const emailEle = $("#email");
+            if (!emailEle) {
+                return
+            }
+            //邮箱
+            const email = emailEle.val()
+            if (!email || email == "") {
+                emailEle.focus();
+                return
+            }
+            console.log("邮箱", email)
+
+            // 点击后立即执行一次倒计时
+            countdown = 60
+            $(this).text(countdown + 's');
+            countdown--;
+
+            // 开始倒计时
+            countdownTimer = setInterval(() => {
+                if (countdown <= 0) {
+                    clearInterval(countdownTimer);
+                    countdownTimer = null;
+                    // 倒计时结束后恢复按钮状态
+                    $(this).text('Get code');
+                } else {
+                    $(this).text(countdown + 's');
+                    countdown--;
+                }
+            }, 1000);
+        });
+
+        //找回密码
+        $("#retrieve").on(tap, function (event) {
+            event.preventDefault();
+            const emailEle = $("#email");
+            const vcodeEle = $("#vcode");
+            const passwordEle = $("#password");
+            const confirmPasswordEle = $("#confirmPassword");
+
+            //输入框不存在
+            if (!emailEle || !vcodeEle || !passwordEle || !confirmPasswordEle) {
+                return
+            }
+            //邮箱
+            const email = emailEle.val()
+            //验证码
+            const vcode = vcodeEle.val()
+            //密码
+            const password = passwordEle.val()
+            //确认密码
+            const confirmPassword = confirmPasswordEle.val()
+
+            if (!email || email == "") {
+                emailEle.focus();
+                return
+            }
+            if (!vcode || vcode == "") {
+                vcodeEle.focus();
+                return
+            }
+            if (!password || password == "") {
+                passwordEle.focus();
+                return
+            }
+            if (!confirmPassword || confirmPassword == "") {
+                confirmPasswordEle.focus();
+                return
+            }
+            console.log("邮箱", email)
+            console.log("验证码", vcode)
+            console.log("密码", password)
+            console.log("确认密码", confirmPassword)
+            if (password !== confirmPassword) {
+                showToast("两次密码不一致")
+                return
+            }
+
+            var dp = {
+                form: {
+                    mobile: email,
+                    smsCode: vcode,
+                    password: password,
+                    password1: confirmPassword,
+                    isParty: false,
+                    partyData: []
+                }
+            }
+
+            $.ajax({
+                url: "/index/passport/retrievePassword",
+                headers: {platform: 'H5'},
+                dataType: 'json',
+                data: JSON.stringify(dp),
+                type: "POST",
+                contentType: 'application/json',
+                success: function (obj) {
+                    console.log(obj);
+                    //return false;
+                    //注册成功后进入
+                    if (obj.status === 200 || obj.status === '200') {
+                        showToast(obj.message)
+                        setTimeout(function (){
+                            window.location.replace('/index/passport/logIn.html');
+                        },3000)
+                        //localStorage.setItem(VAPES_TOKEN, obj.data.token)
+                    }else {
+                        showToast(obj.message)
+                    }
+
+                }
+
+            })
+        });
+    })
+</script>
+
+</html>

+ 209 - 0
public/assets/index/css/retrievePassword.css

@@ -0,0 +1,209 @@
+
+.pageContainer{
+    max-width: 13.2rem;
+    min-height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.pageLogo{
+    padding-top: 1rem;
+}
+.pageLogo img{
+    height: .3rem;
+}
+.pageSection{
+    flex: 1;
+    padding-top: 1.6rem;
+}
+#registerModel{
+    display: none;
+}
+#emailVerifyModel,#setPasswordModel{
+    display: none;
+}
+.modelTitle{
+    font-weight: bold;
+    font-size: .36rem;
+    color: #333333;
+}
+.modelTips{
+    font-size: .14rem;
+    color: #999999;
+    padding-top: .08rem;
+}
+.modelContainer{
+    padding-top: .48rem;
+}
+.modelItem{
+    border-radius: .08rem;
+    height: .58rem;
+    width: 4.5rem;
+    border: .02rem solid rgba(0, 0, 0, .05);
+    margin-bottom: .24rem;
+    position: relative;
+    display: flex;
+    justify-content: space-between; 
+    align-items: center;
+    transition: border .1s;
+}
+.modelItem .miTitle{
+    position: absolute;
+    z-index: 1;
+    background: #FFF;
+    line-height: 1;
+    color: #666666;
+    font-size: .14rem;
+    left: .12rem;
+    top: 0;
+    transform: translateY(-50%);
+    padding: 0 .08rem;
+    transition: color .1s;
+}
+.modelItem.active{
+    border-color: rgba(79, 73, 222, 1);
+}
+.modelItem.active .miTitle{
+    color: rgba(79, 73, 222, 1);
+}
+.modelItem .input{
+    flex: 1;
+    height: 100%;
+    outline: none;
+    font-size: .18rem;
+    padding-left: .12rem;
+    padding: .12rem;
+    padding-top: .1rem;
+    box-sizing: border-box;
+    border: none;
+    background-color: transparent;
+}
+.modelItemButon{
+    color: rgba(79, 73, 222, .8);
+    cursor: pointer;
+    padding: .06rem 0;
+    width: 1rem;
+    text-align: center;
+    margin: 0 .12rem;
+    border: .02rem solid rgba(79, 73, 222, .8);
+    border-radius: .08rem;
+}
+.pageButton{
+    width: 4.5rem;
+    height: .6rem;
+    background-color: rgba(79, 73, 222, 1);
+    border-radius: .08rem;
+    font-size: .22rem;
+    letter-spacing: .02rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    cursor: pointer;
+}
+.otherButton{
+    width: 4.5rem;
+    height: .5rem;
+    border-radius: .08rem;
+    font-size: .18rem;
+    letter-spacing: .02rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #434343;
+    cursor: pointer;
+    margin-top: .24rem;
+}
+.accountTips{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: .24rem;
+    font-size: .16rem;
+    color: #434343;
+}
+.accountTips span{
+    color: rgba(79, 73, 222, 1);
+    cursor: pointer;
+}
+
+@media (max-width: 899px) {
+    .modelTitle{
+        font-size: .4rem;
+    }
+   .pageSection{
+        width: 6rem;
+        padding-top: 1rem;
+   }
+   .modelItem{
+        width: 100%;
+        height: .7rem;
+        margin-bottom: .32rem;
+   }
+   .modelItem .miTitle{
+    font-size: .18rem;
+   }
+   .modelItem .input{
+    font-size: .22rem;
+   }
+   .pageButton{
+        width: 100%;
+        height: .8rem;
+        font-size: .26rem;
+   }
+   .forgotPassword{
+    font-size: .16rem;
+   }
+   .accountTips{
+    font-size: .18rem;
+   }
+   .modelTips{
+    font-size: .18rem;
+   }
+}
+@media (max-width: 750px) {
+    .modelTitle{
+        font-size: .42rem;
+    }
+   .pageSection{
+        width: 5.5rem;
+        padding-top: 2rem;
+   }
+   .modelItem{
+        width: 100%;
+        height: .8rem;
+        margin-bottom: .32rem;
+   }
+   .modelItem .miTitle{
+    font-size: .2rem;
+   }
+   .modelItem .input{
+    font-size: .24rem;
+   }
+   .pageButton{
+        width: 100%;
+        height: .8rem;
+        font-size: .26rem;
+   }
+   .forgotPassword{
+    font-size: .18rem;
+   }
+   .accountTips{
+    font-size: .2rem;
+   }
+   .modelTips{
+    font-size: .2rem;
+    padding-top: .18rem;
+   }
+   .modelContainer{
+    padding-top: .6rem;
+   }
+   .modelItemButon{
+    font-size: .2rem;
+    width: 1.2rem;
+    padding: .1rem 0;
+   }
+}