睿乐购电商课程设计——用户模块前端
公共js函数登录注册忘记密码个人信息
公共js函数
public.js
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;
}
function validLength(obj
, length
) {
if (obj
.trim().length
< length
) {
return true;
}
return false;
}
function validusername(username
) {
let pattern
= /^[a-zA-Z0-9_-]{4,16}$/;
if (pattern
.test(username
.trim())) {
return (true);
} else {
return (false);
}
}
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
);
},
success
: function (result
) {
if (result
.status
== 200) {
console
.log("添加到购物车成功");
}
else {
console
.log(result
.msg
);
return ;
}
},
error
: function () {
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">
<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>
<div class="header-area header-three">
<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>
<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>
<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>
<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>
<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
}
$
.ajax({
type
: "POST",
dataType
: "json",
url
: "/user/login",
contentType
: "application/json; charset=utf-8",
data
: JSON.stringify(data
),
success
: function (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">
<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>
<div class="header-area header-three">
<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>
<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>
<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="2464210826@qq.com">
</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>
<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>
<script src="assets/js/main.js"></script>
<script src="assets/js/public.js"></script>
<script>
$(function () {
$("#username").change(function () {
let username = $("#username").val();
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
}
$.ajax({
type: "POST",
dataType: "json",
url: "/user/register",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function (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">
<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>
<div class="header-area header-three">
<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>
<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>
<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">×</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>
</div>
</div>
<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>
<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>
<div class="header-area">
<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>
<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>
<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">
<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>
<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>
<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>
<div id="address" class="tab-pane">
<h3 class="last-title">收货地址
</h3>
<div class="table-responsive">
<table class="table" id="showAddress">
</table>
</div>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
<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">×</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>
</div>
</div>
<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>
<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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
);
},
success
: function (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
);
},
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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
+= ' <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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
) {
request
.setRequestHeader("token", token
);
},
success
: function (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
);
},
success
: function (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");
return;
}
},
error
: function () {
console
.log("接口异常")
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();
});
