睿樂購電商課程設計——用戶模塊前端

睿樂購電商課程設計——用戶模塊前端

公共js函數

  • public.js
/**
 * 判空
 * 
 * @param obj
 * @returns {boolean}
 */
function isNull(obj) {
    if (obj == null || obj == undefined) {
        return true;
    }
    if (obj instanceof String && obj.trim() == '') {
        return true;
    }
    return false;
}

function checkContentIsNull(...p) {
    for (let i = 0, len = p.length; i < len; ++i) {
        if (isNull(p[i])) {
            alert('內容不能爲空');
            return true;
        }
    }
    return false;
}

/**
 * 參數長度驗證
 *
 * @param obj
 * @param length
 * @returns {boolean}
 */
function validLength(obj, length) {
    if (obj.trim().length < length) {
        return true;
    }
    return false;
}

/**
 * 用戶名稱驗證 4到16位(字母,數字,下劃線,減號)
 *
 * @param username
 * @returns {boolean}
 */
function validusername(username) {
    let pattern = /^[a-zA-Z0-9_-]{4,16}$/;
    if (pattern.test(username.trim())) {
        return (true);
    } else {
        return (false);
    }
}

/**
 * 用戶密碼驗證 最少6位,最多20位字母或數字的組合
 *
 * @param password
 * @returns {boolean}
 */
function validPassword(password) {
    let pattern = /^[a-zA-Z0-9]{6,20}$/;
    if (pattern.test(password.trim())) {
        return (true);
    } else {
        return (false);
    }
}

function checkUsername() {
    let token = sessionStorage.getItem("token");
    let username = sessionStorage.getItem("username");
    if (isNull(token)) {
        $('#myinfo').hide();
    } else {
        $('#username_info').html("<span style='color:red' >" + username + " </span> 睿樂購商城歡迎你");
        $("#index_register").hide();
        $("#index_login").hide();
    }
}

function checkCart(){
    let len = $.cookie("goodCartIdLen");
    if (isNull(len)) {
        len = 0;
    }
    $(".blockcart .count").text(len);
}

function addCart(id) {
    let ids = $.cookie("goodCartId");
    if (isNull(ids)) {
        ids = '';
    }
    let len = $.cookie("goodCartIdLen");
    if (isNull(len)) {
        len = 0;
    }
    if (len >= 10) {
        alert("親,購物車的商品已有夠多的商品了,清空一下,再添加");
    }
    len = parseInt(len) + 1;
    $.cookie("goodCartIdLen", len);
    $(".blockcart .count").text(len);
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        ids += ',' + id;
        $.cookie("goodCartId", ids);
        return;
    }
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: '/cart/add',
        contentType: "application/json; charset=utf-8",
        data:JSON.stringify({"goodsId":id}),
        beforeSend: function (request) {
            request.setRequestHeader("token", token); //設置header值
        },
        success: function (result) {
            if (result.status == 200) {
                console.log("添加到購物車成功");
            } 
            // else if (result.status == 404) {

            //     location.href = "404.html";
            //     return ;
            // } 
            else {
                console.log(result.msg);
                return ;
            }

        },
        error: function () {
            //location.href="404.html";
            console.log("接口異常,現在聯繫管理員處理");
            return;
        }
    });
}

function shopDetail(id){
    sessionStorage.setItem("goodsId",id);
    location.href="detail.html";
}

function goodSearch(){
   let searchName =   $("#searchName").val();
   sessionStorage.setItem("searchName",searchName);
   let searchId  =  $("#searchId option:selected").val();
   sessionStorage.setItem("searchId",searchId);
   location.href="shop.html";
   return false;
}

登錄

  • login.html
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>睿樂購——登錄</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>

<body>


    <!-- =================
    Header Area Start 
    =====================-->
    <div class="header-area header-three">
        <!-- Header Top Start -->
        <div class="header-top full-border">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="header-top-left">
                            <p>睿樂購商城歡迎你</p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="box-right">
                            <ul>
                                <li class="settings">
                                    <a href="register.html">立即註冊</a>
                                </li>
                                <li class="settings">
                                    <a href="login.html">登錄</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header Top End -->



    <!--=====================
    Breadcrumb Aera Start
    =========================-->
    <div class="breadcrumbs_area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <ul>
                            <li>
                                <h1><a href="index.html">首頁</a></h1>
                            </li>
                            <li>登錄</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--=====================
    Breadcrumb Aera End
    =========================-->

    <!--======================
    login area Start
    ==========================-->
    <div class="login-area mt-25">
        <div class="container">
            <div class="row">
                <div class="offset-lg-3 col-lg-5">
                    <div class="checkout_info mb-20">
                        <form class="form-row" action="#" onsubmit="return false;">
                            <h1 class="last-title mb-30 text-center">登錄</h1>
                            <div class="form_group col-12">
                                <label class="form-label">用戶名 <span>*</span></label>
                                <input class="input-form" type="text" placeholder="請輸入用戶名" id="username" value="張三1號">
                            </div>
                            <div class="form_group col-12 position-relative">
                                <label class="form-label">密碼 <span>*</span></label>
                                <input class="input-form" type="password" placeholder="請輸入密碼" id="password"
                                    value="123456">
                            </div>

                            <div class="form_group  col-lg-4">
                                <label for="remember_box">
                                    <input id="remember_box" type="checkbox">
                                    <span> 記住我 </span>
                                </label>
                            </div>

                            <div class="form_group   col-lg-8 text-right">
                                <button class="login-register" type="submit" onclick="login()">登錄</button>
                            </div>
                            <div class="col-12  justify-content-center col-lg-4 text-left">
                                <p><a href="#" onclick="forget()">忘記密碼</a></p>
                            </div>
                            <div class="col-12 col-lg-8 text-right">
                                <p> 沒有賬戶? <a href="register.html">立即註冊</a>.</p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--======================
    login area End
    ==========================-->


    <script src="assets/js/vendor/vendor.min.js"></script>
    <script src="assets/js/plugins/plugins.min.js"></script>
    <script src="assets/js/plugins/jquery.cookie.js"></script>

    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/public.js"></script>
    <script src="assets/js/login.js"></script>
</body>

</html>
  • login.js
function forget() {
    let username = $("#username").val();
    if (!isNull(username)) {
        sessionStorage.setItem("username", username);
    }
    window.location.href = "forget.html"
}

function login() {
    let username = $("#username").val();
    let password = $("#password").val();
    if (isNull(username)) {
        alert("請輸入用戶名!");
        return;
    }
    if (isNull(password)) {
        alert("請輸入密碼!");
        return;
    }
    if (!validPassword(password)) {
        alert("請輸入正確的密碼!");
        return;
    }
    let data = {
        "username": username,
        "password": password
    }
    //console.log(data);
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/login",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (result) {
            //console.log(result);
            if (result.status == 200) {
                sessionStorage.setItem("token", result.data.token);
                sessionStorage.setItem("username", username);
                window.history.go(-1); // 前往上一個頁面
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            alert("接口異常,請聯繫管理員!");
            return;
        }
    });
}

註冊

  • register.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>睿樂購——註冊</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>

<body>

    <!-- =================
    Header Area Start 
    =====================-->
    <div class="header-area header-three">
        <!-- Header Top Start -->
        <div class="header-top full-border">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="header-top-left">
                            <p>睿樂購商城歡迎你</p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="box-right">
                            <ul>
                              
                                <li class="settings">
                                    <a href="login.html">登錄</a>
                                </li>
                              

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Top End -->



        <!--=====================
    Breadcrumb Aera Start
    =========================-->
        <div class="breadcrumbs_area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb_content">
                            <ul>
                                <li>
                                    <h1><a href="index.html">首頁</a></h1>
                                </li>
                                <li>註冊</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--=====================
    Breadcrumb Aera End
    =========================-->

        <!--======================
    Register area Start
    ==========================-->
        <div class="register-area login-area mt-25">
            <div class="container">
                <div class="row">
                    <div class="offset-lg-3 col-lg-6">
                        <div class="checkout_info mb-20">
                            <form class="form-row" action="#" onsubmit="return false;">
                                <h5 class="last-title mb-10 text-center">會員註冊</h5>
                                <div class="col-lg-12 text-left mb-20">
                                    <p class="register-page"> 已有賬戶? <a href="login.html">立即登錄</a></p>
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">用戶名: <span id="username_info"
                                            style="color: red;">*</span></label>
                                    <input class="input-form" type="text" id="username" value="ant">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">密碼 <span>*</span></label>
                                    <input class="input-form input-login" type="password" id="password" value="antrain">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">密碼確認<span>*</span></label>
                                    <input class="input-form input-login" type="password" id="password2" id="password2"
                                        value="antrain">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">聯繫電話 <span>*</span></label>
                                    <input class="input-form" type="tel" id="phone" value="15733518352">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">郵箱 <span>*</span></label>
                                    <input class="input-form" type="email" id="email" value="[email protected]">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label"> 密保問題 <span>*</span></label>
                                    <input class="input-form" type="text" id="question" value="幾班的">
                                </div>
                                <div class="form_group col-12">
                                    <label class="form-label">密保答案 <span>*</span></label>
                                    <input class="input-form input-login" type="text" id="answer" value="7">
                                </div>


                                <div class="form-row">
                                    <div class="form-group col-12">
                                        <div class="form-check">
                                            <div class="custom-checkbox">
                                                <input class="form-check-input" type="checkbox" id="agree-condition-2">
                                                <span class="checkmark"></span>
                                                <label class="form-check-label" for="agree-condition-2">同意協議並註冊 <a
                                                        href="#">《知曉用戶協議》</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row mt-20">
                                    <input type="submit" class="btn-secondary" value="註冊" onclick="register()">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--======================
    Register area End
    ==========================-->


        <script src="assets/js/vendor/vendor.min.js"></script>
        <script src="assets/js/plugins/plugins.min.js"></script>
        <script src="assets/js/plugins/jquery.cookie.js"></script>

        <!-- Main JS -->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/public.js"></script>
        <script>
            $(function () {
                $("#username").change(function () {
                    let username = $("#username").val();
                    //console.log("--"+username);
                    if (isNull(username)) {
                        return;
                    }
                    let data = {
                        "str": username,
                        "type": "username",
                    }
                    $.ajax({
                        type: "POST", //方法類型
                        dataType: "json", //預期服務器返回的數據類型
                        url: "/user/checkValid",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(data),
                        success: function (result) {
                            if (result.status == 1) {
                                $('#username_info').text("   該用戶名存在")
                            } else if (result.status == 200) {
                                $('#username_info').text("*")
                            } else if (result.status == 404) {
                                location.href = "404.html";
                                return;
                            }
                        },
                        error: function () {
                            alert("接口異常,請聯繫管理員!");
                            return;
                        }
                    });
                });
            });

            function register() {
                if ($('#username_info').text() != '*') {
                    alert('該用戶名存在, 請重新輸入');
                    return;
                }
                if (!$('#agree-condition-2')[0].checked) {
                    alert('註冊前先閱讀用戶協議');
                    return false;
                }
                let username = $("#username").val();
                let password = $("#password").val();
                let password2 = $("#password2").val();
                let email = $("#email").val();
                let question = $("#question").val();
                let answer = $("#answer").val();
                let phone = $("#phone").val();
                if (isNull(username)) {
                    alert("請輸入用戶名!");
                    return;
                }
                if (isNull(password)) {
                    alert("請輸入密碼!");
                    return;
                }
                if (password !== password2) {
                    alert("兩次輸入的密碼不一致");
                    return;
                }
                let data = {
                    "username": username,
                    "password": password,
                    "email": email,
                    "question": question,
                    "answer": answer,
                    "phone": phone
                }
                //console.log(data);
                $.ajax({
                    type: "POST", //方法類型
                    dataType: "json", //預期服務器返回的數據類型
                    url: "/user/register",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    success: function (result) {
                        //console.log(result);
                        if (result.status == 200) {
                            alert(result.msg);
                            window.location.href = "login.html";
                        } else if (result.status == 404) {
                            location.href = "404.html";
                            return;
                        } else {
                            alert(result.msg);
                        }
                    },
                    error: function () {
                        alert("接口異常,請聯繫管理員!");
                        return;
                    }
                });
            }
        </script>
</body>

</html>

忘記密碼

  • forget.html
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>睿樂購——找回密碼</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>

<body>
    <!-- =================
    Header Area Start 
    =====================-->
    <div class="header-area header-three">
        <!-- Header Top Start -->
        <div class="header-top full-border">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="header-top-left">
                            <p>睿樂購商城歡迎你</p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="box-right">
                            <ul>
                                <li class="settings">
                                    <a href="register.html">立即註冊</a>
                                </li>
                                <li class="settings">
                                    <a href="login.html">登錄</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header Top End -->

    <!--=====================
    Breadcrumb Aera Start
    =========================-->
    <div class="breadcrumbs_area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <ul>
                            <li>
                                <h1><a href="index.html">首頁</a></h1>
                            </li>
                            <li>找回密碼</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--=====================
    Breadcrumb Aera End
    =========================-->

    <div class="login-area mt-25">
        <div class="container">
            <div class="row">
                <div class="offset-lg-3 col-lg-5">
                    <div class="checkout_info mb-20">
                        <form class="form-row" action="#" onsubmit="return false;">
                            <h1 class="last-title mb-30 text-center">找回密碼</h1>
                            <div class="form_group col-12">
                                <label class="form-label">用戶名 <span>*</span></label>
                                <input class="input-form" type="text"  id="username" >
                            </div>
                            <div class="form_group col-12 position-relative">
                                <label class="form-label">密保問題 <span>*</span></label>
                                <input class="input-form" type="text" id="question">
                            </div>
                            <div class="form_group col-12 position-relative">
                                <label class="form-label">密碼答案 <span>*</span></label>
                                <input class="input-form" type="text" id="answer">
                            </div>
                            <div class="col-12">
                                <button class="btn btn-info" type="submit" id="btn1">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="passwordModel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">輸入新密碼</h4>
            </div>
            <div class="modal-body">
                <form class="form-row" action="#" onsubmit="return false;">
                    <div class="form_group col-12">
                        <label class="form-label">密碼 <span>*</span></label>
                        <input class="input-form" type="password"  id="password" placeholder="請輸入新密碼">
                    </div>
                    <div class="form_group col-12 position-relative">
                        <label class="form-label">密碼確認 <span>*</span></label>
                        <input class="input-form" type="password" id="password2" placeholder="確認新密碼"> 
                    </div>
                </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
              <button type="button" class="btn btn-primary" id="btn2">確定修改</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->


    <script src="assets/js/vendor/vendor.min.js"></script>
    <script src="assets/js/plugins/plugins.min.js"></script>
    <script src="assets/js/plugins/jquery.cookie.js"></script>

    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/public.js"></script>
    <script src="assets/js/forget.js"></script>
</body>

</html>
  • forget.js
function getQuestion() {
    let username = $("#username").val();
    if (isNull(username)) {
        return;
    }
    let data = {
        "username": username,
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/forgetGetQuestion",
        data: data,
        success: function (result) {
            if (result.status == 200) {
                $('#question').val(result.data.question)
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function forgetCheckAnswer() {
    let username = $("#username").val();
    let question = $("#question").val();
    let answer = $("#answer").val();
    if (isNull(username) || isNull(question) || isNull(answer)) {
        alert("內容不能爲空");
        return;
    }
    let data = {
        "username": username,
        "question": question,
        "answer": answer
    }
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/forgetCheckAnswer",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.status == 200) {
                sessionStorage.setItem("data", result.data);
                $('#passwordModel').modal('show');
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function forgetResetPassword() {
    let password = $("#password").val();
    let password2 = $("#password2").val();
    let username = $("#username").val();
    if (isNull(password) || isNull(password2)) {
        alert("內容不能爲空");
        return;
    }
    if (password !== password2) {
        alert("兩次輸入密碼不一致");
    }
    let data = {
        "username": username,
        "password_new": password,
        "forget_token": sessionStorage.getItem("data")
    }
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/forgetResetPassword",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.status == 200) {
                alert(result.msg);
                sessionStorage.removeItem("data");
                window.location.href = "login.html";
                return ;
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

$(function () {
    $("#username").change(function () {
        getQuestion();
    });
    let username = sessionStorage.getItem("username");
    if (!isNull(username)) {
        $("#username").val(username);
        getQuestion();
    }

    $('#btn1').click(function () {
        forgetCheckAnswer();
    });
    $('#btn2').click(function () {
        forgetResetPassword();
    });
});

個人信息

  • my-account.html
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>睿樂購商城-綜合網購首選-正品低價、品質保障、配送及時、輕鬆購物!
    </title>
    <!-- 網站說明 -->
    <meta name="description"
        content="睿樂購商城-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務,爲您提供愉悅的網上購物體驗!" />
    <!-- 關鍵字 -->
    <meta name="keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡" />
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>

<body>
    <!-- =================
           Header Area Start 
           =====================-->
    <div class="header-area">
        <!-- Header Top Start -->
        <div class="header-top full-border">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="header-top-left">
                            <p id="username_info">睿樂購商城歡迎你</p>
                        </div>
                    </div>
                    <div class="col-lg-8 col-12">
                        <div class="box-right">
                            <ul>
                                <li class="settings">
                                    <a href="my-account.html">我的賬戶</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Top End -->


        <!--=====================
    Breadcrumb Aera Start
    =========================-->
        <div class="breadcrumbs_area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb_content">
                            <ul>
                                <li>
                                    <h1><a href="index.html">首頁</a></h1>
                                </li>
                                <li>個人中心</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--=====================
    Breadcrumb Aera End
    =========================-->

        <!--======================
    My Account area Start
    ==========================-->
        <div class="my-account-area mt-50">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-2">
                        <ul class="nav flex-column dashboard-list mb-20 role=" tablist">
                            <li><a class="nav-link  active show" data-toggle="tab" href="#dashboard"
                                    onclick="info()">個人信息</a></li>
                            <li> <a class="nav-link" data-toggle="tab" href="#orders" onclick="getAllOrder()">歷史訂單</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#updatePwd">修改密碼</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#address" onclick="getAll()">收貨地址</a></li>
                            <li><a class="nav-link" data-toggle="tab" href="#account-details"
                                    onclick="return getAddressTotal();">添加地址</a></li>
                            <li><a class="nav-link" onclick="logout()">退出登錄</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-12 col-lg-10">
                        <!-- Tab panes -->
                        <div class="tab-content dashboard-content mb-20">

                            <!-- 個人信息 -->
                            <div id="dashboard" class="tab-pane fade active show">
                                <h3 class="last-title">個人信息</h3>
                                <div class="checkout_info">
                                    <form class="form-row" action="#" onsubmit="return false" method="POST">


                                        <div class="form_group col-12">
                                            <label class="form-label">聯繫電話 <span>*</span></label>
                                            <input class="input-form" type="text" id="phone">
                                        </div>
                                        <div class="form_group col-12">
                                            <label class="form-label">郵箱<span>*</span></label>
                                            <input class="input-form input-login" type="text" id="email">
                                        </div>

                                        <div class="form_group col-12">
                                            <label class="form-label"> 密保問題 <span>*</span></label>
                                            <input class="input-form" type="text" id="question">
                                        </div>

                                        <div class="form_group col-12">
                                            <label class="form-label"> 密保答案 <span>*</span></label>
                                            <input class="input-form" type="text" id="answer">
                                        </div>

                                    </form>
                                </div>
                                <div class="form_group col-12 col-lg-6">
                                    <button type="button" class="btn btn-info"
                                        onclick="updateInformation()">確定修改</button>
                                </div>
                            </div> <!-- end of tab-pane -->


                            <div id="orders" class="tab-pane fade">
                                <h3 class="last-title">歷史訂單</h3>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>訂單編號</th>
                                                <th>實際付款金額</th>
                                                <th>付款類型</th>
                                                <th>郵費</th>
                                                <th>購買時間</th>
                                                <th>訂單狀態</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>¥200.00</td>
                                                <td>支付寶</td>
                                                <td>¥0.00</td>
                                                <td>2020-6-8 </td>
                                                <td>交易完成</td>
                                                <td><button type="button" class="btn btn-info">查看信息</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div> <!-- end of tab-pane -->

                            <div id="updatePwd" class="tab-pane fade">
                                <h3 class="last-title">修改密碼</h3>
                                <div class="checkout_info">
                                    <form class="form-row" action="#" onsubmit="return false" method="POST">

                                        <div class="form_group col-12">
                                            <label class="form-label"> 舊密碼 <span>*</span></label>
                                            <input class="input-form" type="password" id="password_old" value="123456">
                                        </div>
                                        <div class="form_group col-12">
                                            <label class="form-label"> 新密碼 <span>*</span></label>
                                            <input class="input-form" type="password" id="password_new" value="1234567">
                                        </div>
                                        <div class="form_group col-12">
                                            <label class="form-label">確認新密碼 <span>*</span></label>
                                            <input class="input-form" type="password" id="password2" value="1234567">
                                        </div>
                                    </form>

                                </div>
                                <button type="button" class="btn btn-info" onclick="updatePwd()">確定修改</button>
                            </div> <!-- end of tab-pane -->

                            <div id="address" class="tab-pane">
                                <h3 class="last-title">收貨地址 </h3>
                                <div class="table-responsive">
                                    <table class="table" id="showAddress">

                                    </table>
                                </div>
                            </div> <!-- end of tab-pane -->


                            <div id="account-details" class="tab-pane fade">

                                <h3 class="last-title">添加收貨地址 </h3>
                                <div class="checkout_info">
                                    <form class="form-row" action="#" onsubmit="return false;">
                                        <div class="form_group col-12 col-lg-4">
                                            <label class="form-label"><span>*</span></label>
                                            <input class="input-form" type="text" id="rp" value="河北省">
                                        </div>
                                        <div class="form_group col-12 col-lg-4">
                                            <label class="form-label"><span>*</span></label>
                                            <input class="input-form" type="text" id="rc" value="秦皇島市">
                                        </div>
                                        <div class="form_group col-12 col-lg-4">
                                            <label class="form-label">區/縣 <span>*</span></label>
                                            <input class="input-form" type="text" id="rd" value="海港區">
                                        </div>
                                        <div class="form_group col-12 col-lg-8">
                                            <label class="form-label">詳細地址 <span>*</span></label>
                                            <input class="input-form input-login" type="text" id="ra"
                                                value="燕山大學西校區宿舍4B">
                                        </div>
                                        <div class="form_group col-12 col-lg-4">
                                            <label class="form-label">郵編 <span>*</span></label>
                                            <input class="input-form input-login" type="number" id="rz" value="066000">
                                        </div>
                                    </form>
                                    <button type="button" class="btn btn-info" onclick="add()">添加地址</button>
                                </div>


                            </div> <!-- end of tab-pane -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--======================
    My Account area End
    ==========================-->
        <div class="modal fade" tabindex="-1" role="dialog" id="showAddressTo">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改地址信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-row" action="#" onsubmit="return false;">
                            <div class="form_group col-12 col-lg-4">
                                <label class="form-label"><span>*</span></label>
                                <input class="input-form" type="text" id="urp">
                            </div>
                            <div class="form_group col-12 col-lg-4">
                                <label class="form-label"><span>*</span></label>
                                <input class="input-form" type="text" id="urc">
                            </div>
                            <div class="form_group col-12 col-lg-4">
                                <label class="form-label">區/縣 <span>*</span></label>
                                <input class="input-form" type="text" id="urd">
                            </div>
                            <div class="form_group col-12 col-lg-8">
                                <label class="form-label">詳細地址 <span>*</span></label>
                                <input class="input-form input-login" type="text" id="ura">
                            </div>
                            <div class="form_group col-12 col-lg-4">
                                <label class="form-label">郵編 <span>*</span></label>
                                <input class="input-form input-login" type="text" id="urz">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                        <button type="button" class="btn btn-primary" onclick="updAddress()" id="btn2">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


        <script src="assets/js/vendor/vendor.min.js"></script>
        <script src="assets/js/plugins/plugins.min.js"></script>
        <script src="assets/js/plugins/jquery.cookie.js"></script>
        <!-- Main JS -->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/public.js"></script>
        <script src="assets/js/personal.js"></script>
</body>

</html>
  • personal.js
function info() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/getInformation",
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 200) {
                $("#phone").val(result.data.phone);
                $("#email").val(result.data.email);
                $("#question").val(result.data.question);
                $("#answer").val(result.data.answer);
            } else if (result.status == 1) {
                alert(result.msg);
            }else if (result.status == 404) {
                location.href = "404.html";
                return;
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function updatePwd() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    let password_old = $("#password_old").val();
    let password_new = $("#password_new").val();
    let password2 = $("#password2").val();
    if (checkContentIsNull(password_old, password_new, password2)) {
        return;
    }
    if (password_new !== password2) {
        alert("兩次輸入的新密碼不一致,請重新輸入");
        return false;
    }
    let data = {
        "password_old": password_old,
        "password_new": password_new
    }
    $.ajax({
        type: "PUT", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/resetPassword",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        beforeSend: function (request) {

            request.setRequestHeader("token", token);//設置header值
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 200) {
                window.location.href = "login.html";
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function logout() {
    sessionStorage.clear();
    window.location.href = "index.html";
}

function updateInformation() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    let phone = $("#phone").val();
    let email = $("#email").val();
    let question = $("#question").val();
    let answer = $("#answer").val();
    if (checkContentIsNull(phone, email, question, answer)) {
        return;
    }
    let data = {
        "email": email,
        "question": question,
        "answer": answer,
        "phone": phone
    }
    $.ajax({
        type: "PUT", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/updateInformation",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        beforeSend: function (request) {
            request.setRequestHeader("token", token); //設置header值
        },
        success: function (result) {
            if (result.status == 404) {
                location.href = "404.html";
                return;
            }
            alert(result.msg);

        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function getAll() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/address/getAll",
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);

            if (result.status == 200) {
                let data = result.data;
                let str = '<thead><tr><th>編號</th><th>省</th><th>市</th>';
                str += ' <th>區</th><th>詳細地址</th> <th>操作</th></tr></thead><tbody>';
                for (let i = 0, len = data.length; i < len; ++i) {
                    str += ' <tr>';
                    str += '<td>' + (i + 1) + '</td>';
                    str += '<td>' + data[i].receiver_province + '</td>';
                    str += '<td>' + data[i].receiver_city + '</td>';
                    str += '<td>' + data[i].receiver_district + '</td>';
                    str += '<td>' + data[i].receiver_address + '</td>';
                    str += ' <td><button class="btn btn-primary" οnclick="showAddressTo(' + data[i].id + ',' +i+')">修改</button>';
                    str += '&nbsp;&nbsp;<buttona class="btn btn-danger" οnclick="delAddress(' + i + ',' + data[i].id + ')">刪除</button></td> </tr>';
                }
                str += '';
                $table = $('#showAddress');
                $table.empty();
                $table.append(str);
            } else if (result.status == 404) {
                window.location.href = '404.html';
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function getAddressTotal() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/address/total",
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 417) {
                alert(result.msg);
                return false;
            } else if (result.status == 200) {
                return true;
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            }
            return true;
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function getAddress(id) {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/address/get/" + id,
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 200) {
                $('#urp').val(result.data.receiver_province);
                $('#urc').val(result.data.receiver_city);
                $('#urd').val(result.data.receiver_district);
                $('#ura').val(result.data.receiver_address);
                $('#urz').val(result.data.receiver_zip);
                return true;
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
            }

        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function add() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    let rp = $('#rp').val();
    let rc = $('#rc').val();
    let rd = $('#rd').val();
    let ra = $('#ra').val();
    let rz = $('#rz').val();
    if (checkContentIsNull(rp, rc, rd, ra, rz)) {
        return;
    }
    let data = {
        'receiver_province': rp,
        'receiver_city': rc,
        'receiver_district': rd,
        'receiver_address': ra,
        'receiver_zip': rz
    }
    $.ajax({
        type: "POST", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/address/add",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 417) {
                alert(result.msg);
                return false;
            } else if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
                return;
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function updAddress() {
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    let rp = $('#urp').val();
    let rc = $('#urc').val();
    let rd = $('#urd').val();
    let ra = $('#ura').val();
    let rz = $('#urz').val();
    let id = $('#btn2').attr('value');
    if (checkContentIsNull(rp, rc, rd, ra, rz, id)) {
        return;
    }
    let data = {
        'receiver_province': rp,
        'receiver_city': rc,
        'receiver_district': rd,
        'receiver_address': ra,
        'receiver_zip': rz,
        'id': id,
    }
    $.ajax({
        type: "PUT", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/user/address/update",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        beforeSend: function (request) {
            //設置header值
            request.setRequestHeader("token", token);
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 200){
                alert(result.msg);
                
                $('#showAddressTo').modal('hide');
            }
            if (result.status == 404) {
                location.href = "404.html";
                return;
            } else {
                alert(result.msg);
                $('#showAddressTo').modal('hide');
                return;
            }
        },
        error: function () {
            location.href="404.html";
            return;
        }
    });
}

function showAddressTo(id) {
    getAddress(id);
    $('#btn2').attr('value', id);
    $('#showAddressTo').modal('show');
}

function delAddress(index, id) {
    if (confirm('是否刪除第' + index + '條記錄')) {
        let token = sessionStorage.getItem("token");
        if (isNull(token)) {
            alert("登錄已過期,修改信息請先登錄");
            window.location.href = "login.html";
            return;
        }
        $.ajax({
            type: "DELETE", //方法類型
            dataType: "json", //預期服務器返回的數據類型
            url: "/user/address/del/" + id,
            beforeSend: function (request) {
                //設置header值
                request.setRequestHeader("token", token);
            },
            success: function (result) {
                //console.log(result);
                if (result.status == 200){
                    $(".address .table tbody:eq("+index+")").remove();
                }else if (result.status == 404) {
                    location.href = "404.html";
                    return;
                } else {
                    alert(result.msg);
                }

            },
            error: function () {
                location.href="404.html";
                return;
            }
        });
    }
}

function getAllOrder(){
    let token = sessionStorage.getItem("token");
    if (isNull(token)) {
        alert("登錄已過期,修改信息請先登錄");
        window.location.href = "login.html";
        return;
    }
    $.ajax({
        type: "GET", //方法類型
        dataType: "json", //預期服務器返回的數據類型
        url: "/order/list",
        beforeSend: function (request) {
            request.setRequestHeader("token", token); //設置header值
        },
        success: function (result) {
            //console.log(result);
            if (result.status == 200) {
                orderShow(result.data);
            } else if (result.status == 1) {
                alert(result.msg);
            }else if (result.status == 404) {
                console.log("getAllOrder---404");
                //location.href = "404.html";
                return;
            }
        },
        error: function () {
            console.log("接口異常")
            //location.href="404.html";
            return;
        }
    });
}

function orderContent(order){
    return `<tr><td>${order.order_no}</td>
    <td>¥${order.payment}</td>
    <td>${order.payment_type}</td>
    <td>¥${order.postage}</td>
    <td>${order.create_time}</td>
    <td>${order.statusDesc}</td>
    <td><button type="button" class="btn btn-info" οnclick="showOrderDetail(${order.order_no})";>查看信息</button></td></tr>`
                                            
}

function orderShow(data){
    if(isNull(data)){
        return;
    }
    $table = $("#orders .table tbody");
    $table.empty();
    for(let i = 0, len = data.length; i < len; ++i){
        $table.append(orderContent(data[i]));
    }
}

function showOrderDetail(id){
    sessionStorage.setItem("orderId",id);
    location.href="orderDetail.html";
}

$(function () {
    checkUsername();
    checkCart();
    info();
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章