一、列表
先附图,有鼠标覆盖动画效果,按钮鼠标覆盖变手指:
1、html结构:
<div class="ui_body medical_container">
<div class="ui_left">
<div th:include="adminLeft.html::left"></div>
</div>
<div class="medical_right">
<div class="hover_all"></div>
<div class="loading_box">
<div class="spinner1">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div class="right_top">
<div class="right_top_style">
<a href="##">
<div class="right_menu active_span">
<span class="right_top_style_span2 " type="1">用户列表</span>
</div>
</a>
<div class="search_user">
<input type="text" placeholder="姓名、电话搜索" class="search_user_input">
<div class="search_user_a" onclick="findMessage()">
<i class="search_ico fa fa-search"></i>
</div>
</div>
</div>
</div>
<div class="right_container">
<!--内容样式-->
<div class="sub_title_bar">
<span class="sub_message">总数(0)</span>
<div class="add_button_box" onclick="addNewAccount()">
<div class="add_button">+ 新加账号</div>
</div>
<div class="clear"></div>
</div>
<!--表格-->
<div class="new_user_container">
<div class="user_table">
<div class="user_top">
<div class="top_css user_id_top">商户id</div>
<div class="top_css user_phone_top">手机号</div>
<div class="top_css user_name_top">管理员姓名</div>
<div class="top_css user_manage_top">操作</div>
<div class="clear"></div>
</div>
<div class="user_message_line_box">
<!--<div class="user_message_line">
<div class="msg_css user_shop_id">222</div>
<div class="msg_css user_phone">12345678901</div>
<div class="msg_css user_name">哈哈哈</div>
<div class="msg_css manage_button" data-id="1">
<div class="edit_css allocation_button wx_public_button" data-type="0"
onclick="configuration(0)">公众号配置
</div>
<div class="edit_css allocation_button wx_merchant_button" data-type="1"
onclick="configuration(1)">商户号配置
</div>
<div class="edit_css allocation_button shop_manage_button" onclick="shopList()">店铺管理
</div>
<div class="edit_css delete_button" onclick="deleteUser(this)">删除</div>
<div class="edit_css reset_button">重置密码</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>-->
</div>
</div>
</div>
<!--弹出框-->
<div id="eject_box"></div>
<!--内容样式-->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="page_container">
<div class="page_box">
<div class="page_prev" onclick="loadPage.pagePrev()">
<div class="arrow prev_arrow"></div>
</div>
<div class="page_number">
<span class="page_current"></span>
<span>/</span>
<span class="page_content"></span>
</div>
<div class="page_next" onclick="loadPage.pageNext()">
<div class="arrow next_arrow"></div>
</div>
<input type="text" class="page_input_number">
<div class="page_go" onclick="loadPage.checkPageTo();">
<span>跳转</span>
</div>
<div class="clear"></div>
</div>
<div class="page_set" onclick="pageSet.showPageSetDrop(this)" onmouseleave="pageSet.hidePageSet(this)">
<span class="page_set_style">每页</span>
<span class="page_set_number show_page">20</span>
<span class="page_set_style">条</span>
<ul class="page_set_ul">
</ul>
<div class="down1"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
2、然后设置css样式:
<style>
.pop_mid {
padding: 30px;
max-height: 500px;
overflow: auto;
}
.userManage_container_ul {
/*border: 1px solid #e8e8e8;*/
width: 100%;
margin: 0 auto;
}
.user_list_li_title {
/*background: #f4f5f9;*/
margin-bottom: 0px;
}
.user_list_title_span, .user_list_span {
float: left;
text-align: left;
height: 46px;
line-height: 46px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
width: 19%;
padding-left: 20px;
box-sizing: border-box;
}
.user_list_title_span_small {
width: 10%;
}
.user_list_li {
border-top: 1px dashed #e8e8e8;
cursor: pointer;
position: relative;
}
.user_list_li:hover {
box-shadow: 2px 2px 10px 2px #e8e8e8;
}
.operation_list {
padding: 0 4px;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
}
.update_list {
color: #1abc9c;
}
.update_list:hover {
color: #169BD5;
}
.delete_list {
color: #e74c3c;
}
.delete_list:hover {
color: #c0392b;
}
.user_mine {
width: 70px;
color: #888;
}
@media screen and (max-width: 1240px) {
.user_mine {
width: 50px;
}
}
/*布局样式*/
.group_box {
/*padding: 10px 0;*/
background-color: #fff;
border: 1px solid #e8e8e8;
}
.group_operation i {
display: inline-block;
/* padding: 0px 5px; */
line-height: 34px;
cursor: pointer;
width: 26px;
text-align: center;
}
.group_box_right {
box-sizing: border-box;
width: 100%;
/*padding-left: 210px;*/
}
.userManage_container {
margin-top: 0px;
/*padding: 0 20px;*/
}
.add_group i {
margin-right: 10px;
}
.pop_box {
min-height: 190px;
width: 560px;
}
.pop_box_container {
top: 20%;
}
.sub_title_bar {
margin-bottom: 15px;
}
.user_list_span_img {
width: 30px;
position: relative;
top: 10px;
border-radius: 50%;
margin-right: 5px;
}
.slide_li_title {
float: left;
margin-right: 20px;
line-height: 40px;
width: 84px;
text-align: left;
}
.slide_li {
line-height: 40px;
margin-bottom: 30px;
}
.slide_li:last-child {
margin-bottom: 0px;
}
.slide_li_box {
float: left;
position: relative;
}
.input_style {
width: 350px;
}
/*checkBox样式*/
.check_box {
display: inline-block;
line-height: 38px;
margin-right: 20px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.check_style {
color: #169bd5;
width: 18px;
}
.slide_url_container {
display: none;
}
.check_box_img {
width: 80px;
}
.check_box_slide {
text-align: center;
}
.check_box_slide .check_box {
margin-right: 30px;
}
.check_box_img {
border: 1px solid #e8e8e8;
width: 80px;
display: block;
}
.operation_box {
text-align: center;
}
.editor_box {
margin-top: 20px;
}
.time_box input {
width: 200px;
}
.user_box_li span {
margin-bottom: 20px;
display: inline-block;
width: 110px;
text-align: right;
}
.user_box_li .input_style {
margin-left: 10px;
}
.page_set {
margin-right: 10px;
}
/*表格*/
.user_table {
background: #fff;
margin-bottom: 10px;
}
.user_top {
border-bottom: 1px solid #e8e8e8;
/*text-align: center;*/
padding: 20px;
font-weight: 600;
}
.top_css {
float: left;
width: 200px;
}
.user_message_line {
/*text-align: center;*/
border-bottom: 1px solid #e8e8e8;
padding: 20px;
}
.user_message_line:hover {
box-shadow: 2px 2px 10px 2px #e8e8e8;
}
.user_manage_top {
text-align: center;
width: 400px;
}
.msg_css {
float: left;
width: 200px;
position: relative;
}
.edit_css {
float: right;
/*width: 50px;*/
color: #fff;
border-radius: 26px;
padding: 2px;
cursor: pointer;
width: 84px;
background: #3498db;
position: relative;
/*right: 110px;*/
margin-right: 10px;
}
.manage_button {
text-align: center;
width: 400px;
}
.edit_button {
background: #3498db;
right: 123px;
position: relative;
}
.delete_button {
background: #f44;
right: 56px;
position: relative;
}
.reset_button {
background: #f39c12;
right: -30px;
position: relative;
width: 72px;
}
.add_button_box {
float: right;
background: #00a8ff;
color: #fff;
padding: 8px 17px;
border-radius: 40px;
top: 7px;
position: relative;
cursor: pointer;
}
.allocation_button {
}
.user_id_top, .user_shop_id {
width: 100px;
}
.user_box_li .file_button_name {
background: #00a8ff;
color: #fff;
padding: 9px 5px;
text-align: center;
border-radius: 5px;
float: left;
margin-left: 10px;
cursor: pointer;
}
.file_word {
float: left;
}
.file_name {
color: #00a8ff;
position: relative;
left: 10px;
float: left;
margin-right: 20px;
margin-bottom: 10px;
}
.user_box_li {
margin-bottom: 10px;
}
.shop_manage_button {
background: #27ae60;
}
.template_message {
background: #e67e22;
}
.wx_merchant_button {
background: #9b59b6;
}
.template_span{
float: left;
}
.template_messages{
min-height: 200px;
line-height: 25px;
}
</style>
这样一个简单的表格就画出来了。
3、现在与后台对接放数据:
//请求接口
function listInterface() {
var obj = {
page: global_page,
size: size
}
operation.operation_ajax_async("/list", "get", obj, pageBranch);
}
//分页
function pageBranch() {
$('.user_message_line').remove();
count = global_data.count;
loadPage.checkUserPrivilege(count, userShopList);
}
//追加列表
function userShopList() {
var data = global_data.data;
data.map(function (v) {
// console.log(v)
$(".user_message_line_box").append('<div class="user_message_line" data-id="' + v.store_id + '">' +
'<div class="msg_css user_shop_id">' + v.store_id + '</div>' +
'<div class="msg_css user_phone">' + v.store_mobile + '</div>' +
'<div class="msg_css user_name">' + v.store_manager + '</div>' +
'<div class="msg_css manage_button" data-id="1">' +
'<div class="edit_css wx_public_button" data-type="0"' +
'onclick="configuration(this,0)">公众号配置' +
'</div>' +
'<div class="edit_css wx_merchant_button" data-type="1"' +
'onclick="configuration(this,1)">商户号配置' +
'</div>' +
'<div class="edit_css template_message" data-type="2" onclick="configuration(this,2)">模板消息</div>' +
'<div class="edit_css shop_manage_button" onclick="shopList(this)">店铺管理' +
'</div>' +
// '<div class="edit_css reset_button">重置密码</div>'+
'<div class="clear"></div>' +
'</div>' +
'<div class="clear"></div>' +
'</div>'
)
})
}
//查询列表
function findMessage() {
$('.user_message_line').remove();
var obj = {
keyword: $(".search_user_input").val(),
page: global_page,
size: size
};
operation.operation_ajax_async("/list", 'get', obj, pageBranch);
}
二、弹出框
监听点击按钮,弹出框样式:
1、html布局:
<!--弹出框-->
<div class="pop_box_container animated" id="pop_box">
<div class="pop_box">
<div class="pop_box_top drag">
<span class="pop_box_title"></span>
<i class="fa fa-close"></i>
</div>
<div class="pop_mid">
<div class="user_box">
<ul>
<li class="user_box_li">
<span>微信公众号appid</span>
<input class="input_style" placeholder="请输入appid">
</li>
<li class="user_box_li">
<span>微信公众号secret</span>
<input class="input_style" placeholder="请输入secret">
</li>
</ul>
</div>
</div>
<div class="slide_container_bottom">
<span class="sure_slide" onclick="checkInput()">确 认</span>
<span class="cancel_slide">取 消</span>
</div>
</div>
</div>
2、css样式://这是从上面css文件中单独分离出来的弹出框的框架布局.
//这是从上面css文件中单独分离出来的弹出框的框架布局
/*弹出框css*/
.pop_box_container {
top: 20%;
}
.pop_box {
min-height: 190px;
width: 528px;
}
.pop_mid {
padding: 30px;
max-height: 500px;
overflow: auto;
}
/*弹出框css*/
3、传值:
//弹出框
var global_type;
var global_store_id;
function configuration(that, type) {
global_store_id = $(that).closest(".user_message_line").attr("data-id");
global_type = type;
if (type == 0) {
var html = '<form id="fileForm1" enctype="multipart/form-data">' +
'<span class="user_box">' +
'<ul>' +
'<li class="user_box_li">' +
'<span>公众号appid</span>' +
'<input class="input_style public_appid" placeholder="请输入appid">' +
'</li>' +
'<li class="user_box_li">' +
'<span>公众号secret</span>' +
'<input class="input_style public_secret" placeholder="请输入secret">' +
'</li>' +
'<li class="user_box_li">' +
'<span class="file_word">授权回调检验文件</span>' +
'<div class="document_name"></div>' +
'<input class="public_document" id="test_document" type="file" name="cert" multiple style="display: none">' +
'<span class="file_button_name" onclick="fileButton()">上传文件</span> ' +
'<div class="clear"></div> ' +
'</li>' +
'</ul>' +
'</div>' +
'</form> ';
showHover("微信公众号配置", html);
//上传文件
addFile();
}
//回显微信信息
wxDeployEdit();
}
//弹出框——提交配置按钮
function checkInput() {
if (global_type == 0) {
//公众号配置
var obj = {
status: 1,
store_id: global_store_id,
app_id: $(".public_appid").val(),
app_secret: $(".public_secret").val(),
mp_verify: global_back_file
}
/* if(global_deploy_data!=''){
obj.mp_verify=
}*/
// console.log(obj)
operation.operation_ajax_async("/add", "post", obj, function () {
})
}
$(".pop_box_container").hide();
}
//回显配置信息
var global_deploy_data;//商户微信信息
function wxDeployEdit() {
var obj = {
store_id: global_store_id,
time: global_time,
key: md5Key(global_store_id, global_time)
}
operation.operation_ajax_async("/wx_info", "get", obj, function () {
var data = global_data.data;
global_deploy_data=data;
// console.log(global_deploy_data);
//公众号
$(".public_appid").val(data.wx_app_id);
$(".public_secret").val(data.wx_app_secret);
//商户号
$(".shop_number").val(data.wx_mch_id);
$(".shop_key").val(data.wx_api_secret_key);
if (global_type == 0 && data != '') {
$(".file_button_name").before('<div class="file_name">文件已上传</div>');
global_back_file=data.wx_mp_verify;
} else if (global_type == 1 && data != '') {
$(".file_button_name").before('<div class="file_name">已上传</div>');
global_refund_file=data.wx_apiclient_cert_url;
// $(".file_button_name").before('<div class="file_name">'+global_deploy_data.wx_apiclient_cert_url+'</div>');
}
//模板消息
$(".template_messages").val(data.wx_template);
})
}
三、文件上传
根据上面布局中上传文件监听按钮,上传传给后台并回显上去。
//上传文件button
function fileButton() {
$('.public_document').click();
}
//回显上传的文件名字
var global_file_size;
var global_file_name;
function addFile() {
document.getElementById("test_document").addEventListener('change', function (event) {
if (global_type == 0) {
uploadCallbackFile();
} else if (global_type == 1) {
uploadRefundFile();
}
// console.log(event)
for (var i = 0; i < event.target.files.length; i++) {
global_file_size = event.target.files[0].size;
global_file_name = event.target.files[0].name;
$(".file_name").remove();
$(".file_button_name").before('<div class="file_name">' + global_file_name + '</div>');
$(".file_button_name").text("重新上传");
}
});
};
var global_back_file;
//授权回调检验文件上传,一定需要form表单
function uploadCallbackFile() {
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#fileForm1')[0]),
processData: false,
contentType: false,
success: function (data) {
// console.log(data)
if (data.status == true) {
// alert(1111)
global_back_file = data.data;
// console.log(global_back_file)
} else {
toastr.warning(data.message);
}
},
error: function (data) {
toastr.error(data.message);
}
})
}
四、key值转换
思想:先将key值MD5化,然后再将所需要的time和store_id的值加起来再将总和MD5,最后传给后台。
//输出总MD5后的key值,用到return
//md5_key
function md5Key(store_id, time) {
var key = "a01417adf0f65162fe9ec7f78d36e0cf26456729de4c8ac864ccbc093acd6ff2";
var me5_key = hex_md5(key);
var allData = me5_key + store_id + time;
var new_key = hex_md5(allData);
// global_key=new_key;
return new_key;
}
//将返回的key值传给后台
var obj = {
store_id: global_store_id,
time: global_time,
key: md5Key(global_store_id, global_time)
}