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> |