PC端（原生）——简单列表样式并传参

一、列表

先附图，有鼠标覆盖动画效果，按钮鼠标覆盖变手指：

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