chore: 实现服务商的查询与查询密码的关联
This commit is contained in:
@@ -19,84 +19,276 @@
|
||||
{eyou:static file="users/skin/js/global.js" /}
|
||||
</head>
|
||||
<style>
|
||||
.header_title{
|
||||
margin-bottom: 50px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #bd2a15;
|
||||
/* 美化后的样式 */
|
||||
.container-wrapper {
|
||||
max-width: 600px;
|
||||
margin: 60px auto 0;
|
||||
}
|
||||
.sys_header{
|
||||
margin-top: 60px;
|
||||
|
||||
.search-container {
|
||||
padding: 40px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
.header_search{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header_search span{
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: right;
|
||||
font-size: 17px;
|
||||
|
||||
.header_title {
|
||||
margin-bottom: 30px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.header_search input{
|
||||
width: 600px;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
font-size: 17px;
|
||||
|
||||
.header_title:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: #bd2a15;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 14px 15px;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #bd2a15;
|
||||
box-shadow: 0 0 0 3px rgba(189, 42, 21, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: #bd2a15;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background: #a52513;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(189, 42, 21, 0.3);
|
||||
}
|
||||
|
||||
.result-container {
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.result-item:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
width: 120px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 40px;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.other-services {
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.other-services h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 960px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.services-list::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.services-list::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.services-list::-webkit-scrollbar-thumb {
|
||||
background: #bd2a15;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.services-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #a52513;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
font-size: 14px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background: #bd2a15;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-tag.match {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.qrcode-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: inline-block;
|
||||
padding: 10px 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #bd2a15;
|
||||
background: #fff;
|
||||
border: 2px solid #bd2a15;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.searchContainer{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
margin-left: 120px;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.searchContainer .searchBtn{
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 17px;
|
||||
|
||||
.close-btn:hover {
|
||||
background: #bd2a15;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header_search botton{
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background: #bd2a15;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
|
||||
.content-wrap {
|
||||
background: none;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
|
||||
.content-inner {
|
||||
background: url(../template/pc/skin/images/map.png) no-repeat center 20px;
|
||||
min-height: 960px;
|
||||
}
|
||||
.content-inner{
|
||||
background:url(../template/pc/skin/images/map.png) no-repeat center 20px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container-wrapper {
|
||||
margin: 30px 15px;
|
||||
}
|
||||
|
||||
.search-container,
|
||||
.result-container,
|
||||
.qrcode-container {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<!--头部--star-->
|
||||
{eyou:include file="header.htm" /}
|
||||
@@ -105,161 +297,129 @@
|
||||
{eyou:include file="layui.htm" /}
|
||||
<!---layui--->
|
||||
<div class="content-wrap">
|
||||
<div class="content-inner" style="height: 970px;">
|
||||
<!-- w1200 -->
|
||||
<div class="content ">
|
||||
<form class="layui-form sys_header" action="" name='theForm' id="theForm" method="post" style="text-align: center;padding-top: 80px;" >
|
||||
<div class="header_title" style="margin-left: -100px">服务商查询</div>
|
||||
<div class="header_search"><input name="realname" placeholder="">
|
||||
<botton>搜索</botton>
|
||||
<div class="content-inner">
|
||||
<div class="content">
|
||||
<div class="container-wrapper">
|
||||
<div class="search-container">
|
||||
<h2 class="header_title">服务商查询</h2>
|
||||
<form class="layui-form" name='theForm' id="theForm" method="post">
|
||||
<div class="form-group">
|
||||
<label class="form-label">关键词：</label>
|
||||
<input type="text" name="realname" class="form-control" placeholder="请输入服务商名称关键词">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">查询密码：</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="请输入查询密码">
|
||||
</div>
|
||||
<input type="button" name="submit" class="search-btn" value="搜索" />
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
<div style="width:100%;height:100%;display: none;" id="showqrcode">
|
||||
<div style="text-align: center;width: 100%;">
|
||||
<img src="" id="imgs" style="width: 600px">
|
||||
<div style="font-size: 50px;width: 100%;text-align: center;margin-top: 30px;">
|
||||
<span style="border-radius: 50px;border: solid 2px #fff;width: 60px;padding: 4px 20px;color:#fff" id="close">x</span>
|
||||
|
||||
<div class="result-container" id="show">
|
||||
<h3 class="result-title">查询结果</h3>
|
||||
<div class="result-item">
|
||||
<div class="result-label">关键词：</div>
|
||||
<div class="result-value" id="name"></div>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-label">申请状态：</div>
|
||||
<div class="result-value">可申请</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qrcode-container" id="showqrcode">
|
||||
<h3 class="result-title">二维码</h3>
|
||||
<img src="" id="imgs" class="qrcode-img">
|
||||
|
||||
<div class="other-services" id="otherServices">
|
||||
<h4>相关服务商列表</h4>
|
||||
<ul class="services-list" id="servicesList"></ul>
|
||||
</div>
|
||||
|
||||
<button type="button" class="close-btn" id="close" style="margin-top: 20px;">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
$('#close').click(function(){
|
||||
$('#close').click(function () {
|
||||
$('#showqrcode').hide();
|
||||
$('#theForm').show();
|
||||
})
|
||||
$('.search-container').show();
|
||||
})
|
||||
|
||||
$(function(){
|
||||
$('botton').on('click',function(){
|
||||
var realname = $('input[name=realname]');
|
||||
var password = $('input[name=password]');
|
||||
$(function () {
|
||||
$('input[name=submit]').on('click', function () {
|
||||
var realname = $('input[name=realname]');
|
||||
var password = $('input[name=password]');
|
||||
|
||||
if(realname.val() == ''){
|
||||
layer.msg('请输入关键词！', {time: 1500, icon: 5});
|
||||
realname.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if(password.val() == ''){
|
||||
layer.msg('密码不能为空！', {time: 1500, icon: 5});
|
||||
password.focus();
|
||||
return false;
|
||||
}
|
||||
var url = "{eyou:url link='api/Ajax/projectsearch' /}";
|
||||
// layer_loading('正在处理');
|
||||
var data = {
|
||||
realname:realname.val(),
|
||||
type:1
|
||||
}
|
||||
console.log(data)
|
||||
$.ajax({
|
||||
// async:false,
|
||||
url : url,
|
||||
data:data,
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
success:function(res){
|
||||
console.log(res)
|
||||
if(0 == res.code){
|
||||
layer.msg('服务商不存在', {time: 1500, icon: 5});
|
||||
}else{
|
||||
$('#imgs').attr('src',res.img)
|
||||
$('#showqrcode').show();
|
||||
$('#theForm').hide();
|
||||
}
|
||||
/* layer.alert(res.msg, {icon: 1, title: false, closeBtn: false},function(){
|
||||
//window.location.href = res.url;
|
||||
// $('#showqrcode').show();
|
||||
// layer.closeAll();
|
||||
|
||||
});*/
|
||||
/* if (1 == res.code) {
|
||||
if (5 == res.data.status) {
|
||||
layer.alert(res.msg, {icon: 5, title: false, closeBtn: false},function(){
|
||||
window.location.href = res.url;
|
||||
});
|
||||
}else{
|
||||
window.location.href = res.url;
|
||||
}
|
||||
} else {
|
||||
layer.closeAll();
|
||||
if ('vertify' == res.data.status) {
|
||||
fleshVerify();
|
||||
}
|
||||
|
||||
if (2 == res.data.status) {
|
||||
showErrorAlert(res.msg, 4);
|
||||
} else {
|
||||
layer.msg(res.msg, {icon: 5,time: 1500});
|
||||
}
|
||||
}*/
|
||||
},
|
||||
error:function(e) {
|
||||
layer.closeAll();
|
||||
showErrorAlert(e.responseText);
|
||||
if (realname.val() == '') {
|
||||
layer.msg('请输入关键词！', { time: 1500, icon: 5 });
|
||||
realname.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (password.val() == '') {
|
||||
layer.msg('密码不能为空！', { time: 1500, icon: 5 });
|
||||
password.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
var url = "{eyou:url link='api/Ajax/projectsearch' /}";
|
||||
// layer_loading('正在处理');
|
||||
var data = {
|
||||
realname: realname.val(),
|
||||
password: password.val(),
|
||||
type: 1
|
||||
}
|
||||
|
||||
// 发送Ajax请求
|
||||
$.ajax({
|
||||
// async:false,
|
||||
url: url,
|
||||
data: data,
|
||||
type: 'post',
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.code < 0) {
|
||||
layer.msg(res.msg, { time: 1500, icon: 5 });
|
||||
} else if (0 == res.code) {
|
||||
layer.msg('服务商不存在', { time: 1500, icon: 5 });
|
||||
} else {
|
||||
$('#imgs').attr('src', res.img)
|
||||
|
||||
// 显示其他服务商列表
|
||||
if (res.service_names && res.service_names.length > 0) {
|
||||
var servicesHtml = '';
|
||||
for (var i = 0; i < res.service_names.length; i++) {
|
||||
servicesHtml += '<li class="service-item">';
|
||||
servicesHtml += '<span class="service-name">' + res.service_names[i] + '</span>';
|
||||
servicesHtml += '<span class="service-tag ' + (i === 0 ? 'match' : '') + '">' + (i === 0 ? '匹配项' : '相关项') + '</span>';
|
||||
servicesHtml += '</li>';
|
||||
}
|
||||
$('#servicesList').html(servicesHtml);
|
||||
$('#otherServices').show();
|
||||
} else {
|
||||
$('#servicesList').html('<li class="service-item" style="justify-content: center; color: #999;">暂无其他相关服务商</li>');
|
||||
$('#otherServices').show();
|
||||
}
|
||||
|
||||
$('#showqrcode').show();
|
||||
$('#theForm').hide();
|
||||
$('.search-container').hide();
|
||||
}
|
||||
},
|
||||
error: function (e) {
|
||||
layer.closeAll();
|
||||
showErrorAlert(e.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/* layui.use(['table','form','upload','util','laydate','laypage',], function() {
|
||||
var table = layui.table,form = layui.form,laydate = layui.laydate, $ = layui.jquery,upload = layui.upload,util = layui.util;
|
||||
var laypage = layui.laypage
|
||||
|
||||
//监听搜索
|
||||
form.on('submit(demo1)', function(data){
|
||||
|
||||
var field = data.field;
|
||||
layer.alert(JSON.stringify(data.field), {
|
||||
title: '最终的提交信息'
|
||||
})
|
||||
//return false;
|
||||
var url = "{eyou:url link='api/Ajax/projectsearch' /}";
|
||||
console.log(url)
|
||||
// return false;
|
||||
$.ajax({
|
||||
// async:false,
|
||||
url : url,
|
||||
data: {},
|
||||
type:'post',
|
||||
dataType:'json',
|
||||
success:function(res){
|
||||
if (1 == res.code) {
|
||||
if (5 == res.data.status) {
|
||||
layer.alert(res.msg, {icon: 5, title: false, closeBtn: false},function(){
|
||||
window.location.href = res.url;
|
||||
});
|
||||
}else{
|
||||
window.location.href = res.url;
|
||||
}
|
||||
} else {
|
||||
layer.closeAll();
|
||||
if ('vertify' == res.data.status) {
|
||||
fleshVerify();
|
||||
}
|
||||
|
||||
if (2 == res.data.status) {
|
||||
showErrorAlert(res.msg, 4);
|
||||
} else {
|
||||
layer.msg(res.msg, {icon: 5,time: 1500});
|
||||
}
|
||||
}
|
||||
},
|
||||
error:function(e) {
|
||||
layer.closeAll();
|
||||
showErrorAlert(e.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});*/
|
||||
</script>
|
||||
|
||||
|
||||
<!--底部-star-->
|
||||
{eyou:include file="footer.htm" /}
|
||||
<!--底部--end-->
|
||||
|
||||
Reference in New Issue
Block a user