caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>订单列表</title>
    <meta name="decorator" content="default"/>
    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
    <style type="text/css">
        *{margin: 0;padding: 0}
        a{list-style: none;text-decoration: none}
        body{background-color: rgb(228,228,228)}
        h3{border-left: 3px solid #08c;line-height: 20px;padding-left: 15px;}
        .filter-query{margin: 20px 0}
        .about-query{background-color: rgb(242,242,242);line-height: 35px;overflow: hidden}
        .about-query div{color: #666}
        .about-query .left-query{float: left;margin-left: 35px}
        .about-query .right-query{float: right;margin:2px 35px 0 0;background-color: rgb(215,215,215);padding: 5px 15px;line-height: normal;border-radius: 15px}
        .info{background-color: #fff;padding: 20px 0 0 0;}
        .info .orderDiv{display: inline-block}
        .orderDiv{width: 150px;padding:0 10px 20px 0;}
        .orderDiv label{font-size: 14px;line-height: 25px;}
        .orderDiv input,select{width:85px;line-height: 25px;height: 25px}
        .order-export{width: 280px}
        .order-export input:nth-child(2){margin-right: 5px}
        .data-list{font-size: 14px;color: rgb(51,51,51);background-color: #fff;height: 100%;}
        .data-top{line-height: 40px;background-color: rgb(242,242,242);padding-left: 15px;}
        .data-top a{display: inline-block;color: #000000; margin-left: 20px; padding: 3px 10px;text-align: center;border: 1px solid #ccc;line-height: normal;border-radius: 15px}
        /*.data-title{width: 100%; display: table;}*/
        /*.data-title ul li{display: table-cell; width: 6.25%;}*/
        .data-title{width: 100%;display: table;}
        .data-title ul li{word-break:break-all;display: table-cell;width:100px;border: 1px solid #000; text-align: center;height: 35px;vertical-align: middle;}
        .data-title ul{}
        .data-title ul li:last-of-type{width: 120px}
        .data-title ul li:nth-child(6){width: 80px}
        .spileOrder li:nth-of-type(1){position: relative}
        .san{width:10px;height:10px;border-top: 2px solid #000;border-right: 2px solid #000;transform: rotate(45deg);position: absolute;right: -2px;top: 50%;margin-top: -5px;cursor:pointer}
        .red-waring li{border-color: red !important;}
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var _show = document.getElementsByClassName('spileOrder');
        for(var i=0;i<_show.length;i++){
            _show[i].onclick = function () {

                console.log(this.getElementsByClassName('red-waring'));

                var spileflag = this.getElementsByClassName('red-waring');

                for(var i=0;i<spileflag.length;i++){
                    if(spileflag.length > 0){
                        spileflag[i].style.cssText='';
                    }else {
                        spileflag[i].style.cssText='display: none';
                    }
                }
                if(this.classList.contains('flag')){
                    console.log(22)
                    this.classList.remove("flag");
                    for(var i=0;i<spileflag.length;i++){
                        spileflag[i].style.cssText='display: none';
                    }

                }else {
                    console.log(33)
                    this.classList.add("flag");
                    for(var i=0;i<spileflag.length;i++){
                        spileflag[i].style.cssText='';
                    }

                }

            }
        }
    }


    </script>
</head>
<body>
<h3>订单列表</h3>
<div class="filter-query">
    <div class="about-query">
        <div class="left-query">筛选查询</div>
        <div class="right-query">查询</div>
    </div>
    <div class="info">
        <div class="orderDiv order-num">
            <label>订单编号</label>
            <input type="text"/>
        </div>
        <div class="orderDiv order-status">
            <label>订单状态</label>
            <input type="text"/>
        </div>
        <div class="orderDiv order-people">
            <label>收货人</label>
            <input type="text"/>
        </div>
        <div class="orderDiv order-type">
            <label>订单类型</label>
            <select class="select">
                <option>普通订单</option>
                <option>采购订单</option>
                <option>拆分订单</option>
            </select>
        </div>
        <div class="orderDiv order-export">
            <label>导出订单</label>
            <input placeholder="开始时间" type="text"/>
            <input placeholder="结束时间" type="text"/>
        </div>
    </div>
</div>
<div class="data-list">
    <div class="data-top">
        数据列表
        <a href="">添加列表</a>
    </div>
    <div class="data-title">
        <ul>
            <li>订单编号</li>
            <li>订单类型</li>
            <li>供应商</li>
            <li>收货人</li>
            <li>买家</li>
            <li>订单</li>
            <li>支付</li>
            <li>订单来源</li>
            <li>下单方式</li>
            <li>订单金额</li>
            <li>已收时间</li>
            <li>未收状态</li>
            <li>已付</li>
            <li>未付</li>
            <li>佣金</li>
            <li>操作</li>
        </ul>
        <ul class="spileOrder"><%--拆分订单--%>
            <li>大数据库的金卡是聚隆科技的三<div class="san"></div></li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <li>12123</li>
            <ul class="red-waring" style="display: none"><%--拆分订单的子订单--%>
                <li>大数据库的金卡是聚隆科技的三</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
            </ul>
            <ul class="red-waring" style="display: none"><%--拆分订单的子订单--%>
                <li>大数据库的金卡是聚隆科技的三</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
                <li>12123</li>
            </ul>
        </ul>
    </div>
</div>
</body>
</html>