160 lines
4.3 KiB
Vue
160 lines
4.3 KiB
Vue
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>查询验证码</title>
|
|||
|
|
<script src="./jquery-3.6.0.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#code {
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 30px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-table {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
input {
|
|||
|
|
height: 30px;
|
|||
|
|
}
|
|||
|
|
table {
|
|||
|
|
width: 90%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
font-size: 16px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.table{
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th,
|
|||
|
|
td {
|
|||
|
|
border: 1px solid rgb(153, 153, 153)
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="code">
|
|||
|
|
<form class="search-block" action="javascript:void 0">
|
|||
|
|
<input type="search" placeholder="手机号" class="coach-text" />
|
|||
|
|
|
|||
|
|
</form>
|
|||
|
|
<button class="text-icon">查询</button>
|
|||
|
|
<div class="main-table">
|
|||
|
|
<table style="border-collapse: collapse;text-align:center">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>手机号码</th>
|
|||
|
|
<th>验证码</th>
|
|||
|
|
<th>过期时间</th>
|
|||
|
|
<th>是否使用</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody class="table">
|
|||
|
|
<tr>
|
|||
|
|
<td>{phone}</td>
|
|||
|
|
<td>{checkCode}</td>
|
|||
|
|
<td>{lostTime}</td>
|
|||
|
|
<td>{isUse}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
<tbody class="table1">
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="4">无数据记录 </td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
let baseUrl = "https://ddjdtest.duolunxc.com"
|
|||
|
|
//列表展示
|
|||
|
|
let $output = $(".table");
|
|||
|
|
let articleList = []
|
|||
|
|
$('.coach-text').bind('keypress', function (event) {
|
|||
|
|
if (+event.keyCode === 13) {
|
|||
|
|
getData()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
$(".text-icon").click(function () {
|
|||
|
|
getData()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function getData() {
|
|||
|
|
$.ajax({
|
|||
|
|
//请求方式
|
|||
|
|
type: "GET",
|
|||
|
|
//请求的媒体类型
|
|||
|
|
contentType: "application/json;charset=UTF-8",
|
|||
|
|
//请求地址
|
|||
|
|
url: baseUrl + "/qdjx/baseinfo/getCheckCodeList.do",
|
|||
|
|
//数据，json字符串
|
|||
|
|
data:{
|
|||
|
|
phone:$(".coach-text").val()
|
|||
|
|
},
|
|||
|
|
//请求成功
|
|||
|
|
success: function (res) {
|
|||
|
|
articleList = res.data
|
|||
|
|
// articleList = [{ phone: 11231234123, checkCode: 1233, lostTime: "2022-03-18 15:00", isUse: 1 }]
|
|||
|
|
if(articleList&&articleList.length>0){
|
|||
|
|
$(".table").show()
|
|||
|
|
$(".table1").hide()
|
|||
|
|
}else{
|
|||
|
|
$(".table").hide()
|
|||
|
|
$(".table1").show()
|
|||
|
|
}
|
|||
|
|
$.each($output, function (index, item) {
|
|||
|
|
render(articleList, $(this));
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//请求失败，包含具体的错误信息
|
|||
|
|
error: function (e) {
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function render(list, item) {
|
|||
|
|
var template =
|
|||
|
|
"<tr>\
|
|||
|
|
<td>{phone}</td>\
|
|||
|
|
<td>{checkCode}</td>\
|
|||
|
|
<td>{lostTime}</td>\
|
|||
|
|
<td>{isUse}</td>\
|
|||
|
|
</tr>";
|
|||
|
|
//console.log("数据数据++", list, template);
|
|||
|
|
var html = list.map(function (item) {
|
|||
|
|
return template
|
|||
|
|
.replace("{phone}", item.phone)
|
|||
|
|
.replace("{checkCode}", item.checkCode)
|
|||
|
|
.replace("{lostTime}", item.lostTime)
|
|||
|
|
.replace("{isUse}", item.isUse);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
item.html(html);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|