caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<%@ 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}
        i{font-style: normal}
        body{background-color: rgb(255,255,255);}
        h3{line-height: 20px;padding:20px 0 20px 15px; border-bottom: 1px solid #CCCCCC;}
       .body-margin{margin:0 26px;}
       .stockorder{margin:0 26px;}
        .left-span{width: 3px;height: 20px;margin-right:10px;background-color: #00A6C7;display: inline-block;vertical-align: bottom}
        .no-pay{padding-left: 15px;font-style: normal}
        .now-status{font-size: 14px}
        .now-status p{padding: 20px}
        .now-status span{display: inline-block;width: 160px;line-height: 35px;margin:0 15px 15px 0;cursor: pointer; border:1px solid #CCCCCC;text-align: center;border-radius: 5px}
        .buyInfo{font-size: 14px}
        .the-h{padding:20px 0 20px 15px;border-bottom: 1px solid #CCCCCC;font-size: 16px;font-weight: normal}
        .buyInfo p{ padding: 15px 5px 0;}
        .buyInfo p label{width: 60px;display: inline-block;}
        .buyInfo p span{padding-left: 10px}
        .shopInfo{font-size: 14px}
        .table{width: 100%;border-collapse: collapse;margin-top: 20px}
        .table th{background-color: #CCCCCC}
        .table th,.table td{font-weight: normal;border: 1px solid #CCCCCC;height: 35px;text-align: center}
        .table td .div-img{box-sizing: border-box;position: relative}
        .table td .div-img img{width: 100px;height: 100px;vertical-align: middle}
        .table td .div-img span{}
        .paid{position: absolute;top: -10%;left:4%;width:50px;height:50px;line-height: 50px;text-align: center; background-color: #00A6C7;color: #fff;border-radius: 50%;}
        .orderInfo{}
        .div-order{font-size: 14px;margin-top: 20px}
        .div-order span{width: 260px; display: inline-block;margin-right: 50px}
        .costInfo{position: relative;text-align: right;font-size: 14px;}
        .the-h{text-align:left}
        .text-result{padding: 15px 0}
        .text-result p{padding-top: 15px}
        .mask{color: red;font-size: 14px;margin-top: 20px}
        .text-cost{text-align: left;}
        .text-cost p{padding: 20px 0}
        .moeny-cost{position: absolute;top:70px;right: 0;}
        .moeny-cost p{padding: 10px 0 0 0;text-align: left}
        .moeny-cost p label{display: inline-block;}
        .Staging{background-color: #fff;}
        .Staging table{width: 100%;border-collapse: collapse;margin-top: 20px}
        .Staging table th,.Staging table td{font-weight: normal;border: 1px solid #000;height: 35px;text-align: center;width: 10%;}
        .cancel-order{position: fixed;left: 50%;top:50%;transform:translate(-50%,-159%);z-index: 999; background-color: #fff;box-shadow: 0px 0px 10px #ccc;box-sizing: border-box;padding: 30px;}
        .cancel-order p{padding-bottom:15px;}
        .cancel-order textarea{width:237px;height: 80px;}
        .layer-status{margin-top: 10px;}
        .layer-status span{display: inline-block;width: 80px;line-height: 35px;background-color: #00A6C7;text-align: center;color: #fff;cursor: pointer}
        .layer-status span:nth-of-type(1){}
        .layer-status span:nth-of-type(2){margin-left: 72px;}
        .bj{position: fixed;width: 100%;height: 100%;bottom: 0;top:0;left: 0;z-index: 99;}
        .center-title{width: 100%;text-align: center;}
        textarea{border: 1px solid #000}
        .reason{color: red}
        .reason i{color: #000000; padding-left: 15px;}
        .title-waring{color: red;}
        /*取消订单*/
        .warn-title{color: red;padding: 15px 20px;font-size: 14px;}
        .reason-cancel{font-size: 14px;padding: 0 20px;}
        .reason-cancel label{margin-right: 20px;}
        .reason-cancel textarea{width: 270px;height: 80px; resize: none;vertical-align: text-top;border: 1px solid #CCCCCC}
        .btn-same{}
        /*修改收货人弹窗*/
        .change-info{position: fixed;top: 20%;left: 50%;transform:translateX(-50%);z-index: 999; width: 800px;background-color: #fff;box-shadow: 0px 0px 15px #ccc;}
        .title-same{line-height: 40px;background-color: rgb(102,102,102);color: #fff;padding-left: 15px;}
        .item-div{margin-top: 20px;}
        .item-div label{width: 260px;text-align: right;display: inline-block;margin-right: 50px;}
        .item-div input{width: 300px;line-height: 35px;border: 1px solid #CCCCCC;display: inline-block}
        .item-div select{width: 90px;height: 35px;margin-right: 10px;}
        .item-div textarea{border: 1px solid #CCCCCC;margin-top: 20px;width: 300px;height: 80px;resize:none}
        .select-div{display: inline-block;vertical-align: top}
        .item-div .iphone1{width: 80px;}
        .item-div .iphone2{width: 210px;}
        #btn{margin:10px 0 30px 320px;}
        /*确认订单*/
        .same-style{position: fixed;top: 20%;left: 50%;transform: translateX(-50%); width: 500px;background-color: #fff;z-index: 999;box-shadow: 0 0 15px #666;}
        .title-same span{width: 25px; height: 25px;line-height: 25px;cursor:pointer; display: inline-block;float: right;margin:8px 10px 0 0; background-color: #fff;color: #000000; text-align: center;border-radius:50%;}
        .order-title{text-align: center;padding: 40px 0;}
        .order-btn{float: right;margin:0 20px 20px 0;padding: 10px 15px;background-color: #00A6C7;color: #fff;}
        .btn-same{text-align: center;margin-bottom: 10px;}
    </style>

</head>
<body>
<%--修改收货人信息--%>
<div class="change-info" style="display: none">
    <div class="info-title title-same">修改收货人信息</div>
    <div class="item-div">
        <label><i>*</i>收货人姓名</label>
        <input type="text"/>
    </div>
    <div class="item-div">
        <label><i>*</i>收货地址</label>
        <div class="select-div">
            <select>
                <option></option>
            </select>
            <select>
                <option></option>
            </select>
            <select>
                <option></option>
            </select><br/>
            <textarea></textarea>
        </div>
    </div>
    <div class="item-div">
        <label><i>*</i>电话号码</label>
        <input class="iphone1" type="text"/>
        <input class="iphone2" type="text"/>
    </div>
    <div class="item-div">
        <label><i>*</i>手机号</label>
        <input type="text"/>
    </div>
        <div class="layer-status" id="btn">
            <span class="btn1">确定</span>
            <span class="btn2">取消</span>
        </div>
</div>

<%--确认订单1--%>
<div class="confirmOrder1 same-style" style="display: none">
    <div class="title-same">确认订单 <span class="close">X</span></div>
    <p class="order-title">确认订单成功,等待买家付款</p>
    <div class="order-btn">提醒买家付款</div>
</div>
<%--确认订单2--%>
<div class="confirmOrder2 same-style" style="display: none">
    <div class="title-same">确认订单<span class="close">X</span></div>
    <p class="order-title">客户未确认订单！是否确认?</p>
    <div class="layer-status btn-same" id="btn-confirm">
        <span class="btn1" id="confirm2">确定</span>
        <span class="btn2" id="cancel2">取消</span>
    </div>
</div>


<%--取消订单--%>
<div class="bj" style="display: none"></div>
<div class="cancelOrder same-style" style="display: none">
    <div class="title-same">取消订单</div>
    <p class="warn-title">建议取消之前，电话通知买家，达成一致意见。</p>
    <div class="reason-cancel">
        <label><i>*</i>取消原因</label>
        <textarea  style="resize:none" ></textarea>
    </div>
    <div class="layer-status btn-same">
        <span class="btn1">确定</span>
        <span class="btn2">取消</span>
    </div>
</div>

<input type="hidden" id="hidden" value="1">
<div class="body-margin">
    <h3><span class="left-span"></span>订单列表--确认订单</h3>
    <div class="now-status">
        <p>当前订单状态:<i class="no-pay">待付款</i></p><%--根据状态自行修改--%>
        <span class="cancel-btn">取消订单</span>
        <span class="changeInfo">修改收货人信息</span>
        <span>修改商品信息</span>
        <span>发货</span><%--代发货和部分发货状态--%>
        <span>修改收货信息</span><%--代发货--%>
        <span class="">查看物流</span><%--部分发货状态 和待收货状态--%>
        <span class="">添加物流</span><%--部分发货状态--%>
        <span class="">确认收货</span><%--待收货状态--%>
        <span class="">删除订单</span><%--交易成功状态--%>
        <span class="">删除订单</span><%--交易关闭状态--%>
        <div class="reason">买家取消订单原因:<i>的骄傲是可敬的卡视角打开了聚隆科技</i></div>
    </div>
    <div class="buyInfo">
    <h4 class="the-h">买家信息</h4>
        <p><label>收货人:</label><span>没事件惦记</span></p>
        <p><label>手机号码:</label><span>13212341223</span></p>
        <p><label>收货地址:</label><span>深圳深圳深圳</span></p>
    </div>
    <div class="shopInfo">
        <h4 class="the-h">商品信息</h4>
        <table class="table">
            <tr>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>优惠</th>
                <th>成本价</th>
                <th>库存</th>
                <th>小计</th>
            </tr>
            <tr>
                <td>
                    <div class="div-img">
                        <img src="123.jpg"/>
                        <span>这是谁是谁</span>
                        <div class="paid">已付款</div><%--部分发货状态 和待收货--%>
                    </div>
                </td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
        </table>
    </div>
    <div class="orderInfo">
        <h4 class="the-h">订单信息</h4>
        <div class="div-order">
            <span>订单编号:98565633232</span>
            <span>子订单编号:2356895656</span>
        </div>
        <div class="div-order">
            <span>支付方式:货到付款</span>
            <span>下单时间:2356895656</span>
            <span>来源:2356895656</span>
        </div>
        <div class="div-order">
            <span>付款时间:货到付款</span>
        </div>
        <div class="div-order">
            <span>买家留言:货到付款</span>
        </div>
        <div class="div-order">
            <span>发票抬头:1222323656</span>
        </div>
        <div class="div-order">
            <span>纳税人识别号:FG1212454545</span>
        </div>
    </div>
    <div class="costInfo">
        <h4 class="the-h">费用信息</h4>
        <div class="text-result">
            <span>商品总金额：￥1231</span> +
            <span> 发票税额：￥11</span>  +
            <span>  配送费用￥10.00</span>-
            <span> 折扣：￥10.00</span>
        <p>=订单总额:￥2099.00</p>
        </div>
    </div>
</div>
<div class="stockorder"><%--采购订单--%>
    <h3><span class="left-span"></span>订单列表--确认订单</h3>
    <div class="now-status">
        <p>当前订单状态:<i class="no-pay">待付款</i></p>
        <span>修改订单消息</span>
        <span class="cancel-btn">取消订单</span>
        <span class="confirm">确认订单</span><%--待确认状态--%>
        <span class="">发货</span><%--待发货状态 和部分发货状态--%>
        <span class="">查看物流</span><%--部分发货状态 和待收货状态--%>
        <span class="">添加物流</span><%--部分发货状态--%>
        <span class="">确认收货</span><%--待收货状态--%>
        <span class="">删除订单</span><%--交易成功状态--%>
    </div>
    <div class="buyInfo">
        <h4 class="the-h">买家信息</h4>
        <p><label>买家:</label><span>没事件惦记会所</span></p>
        <p><label>收货人:</label><span>没事件惦记</span></p>
        <p><label>手机号码:</label><span>13212341223</span></p>
        <p><label>收货地址:</label><span>深圳深圳深圳</span></p>
    </div>
    <div class="shopInfo">
        <h4 class="the-h">商品信息</h4>
        <table class="table">
            <tr>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量(赠品数)</th>
                <th>折扣</th>
                <th>折后单价</th>
                <th>税率</th>
                <th>税费</th>
                <th>能否复购</th>
                <th>库存</th>
                <th>小计</th>
            </tr>
            <tr>
                <td>
                    <div class="div-img">
                        <img src="123.jpg"/>
                        <span>这是谁是谁</span>
                        <div class="paid">已付款</div><%--代发货状态已付款--%>
                    </div>
                </td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
                <td>123</td>
            </tr>
        </table>
    </div>
    <div class="orderInfo">
        <h4 class="the-h">订单信息</h4>
        <div class="div-order">
            <span>订单编号:98565633232</span>
            <span>子订单编号:2356895656</span>
        </div>
        <div class="div-order">
            <span>支付方式:货到付款</span>
            <span>下单时间:2356895656</span>
            <span>来源:2356895656</span>
        </div>
        <div class="div-order">
            <span>付款时间:货到付款</span>
        </div>
        <div class="mask">备注:</div>
        <div class="div-order">
            <span>买家留言:货到付款</span>
        </div>
        <div class="div-order">
            <span>发票抬头:1222323656</span>
        </div>
        <div class="div-order">
            <span>纳税人识别号:FG1212454545</span>
        </div>
        <div class="mask">
            <span>售后条款:无条款</span>
        </div>
    </div>
    <div class="costInfo">
        <h4 class="the-h">费用信息</h4>
        <div class="text-cost">
            <p>是否分期：是</p>
            <p>手续费：12%</p>
            <p>分期免息金额：￥0.00</p>
        </div>
        <div class="moeny-cost">
            <p><label>商品总金额：</label>￥1231</p>
            <p><label>发票税额：</label>￥11</p>
            <p> <label>运费</label>  ￥10.00</p>
            <p> <label>优惠：</label>￥10.00</p>
            <p> <label>经理折扣：</label></p>
            <p> <label>订单总额：</label>￥2099.00</p>
        </div>
    </div>
    <div class="Staging">
        <table>
            <tr>
                <th>期数</th>
                <th>日期</th>
                <th>分期说明</th>
                <th>产品</th>
                <th>金额</th>
                <th>产品添加</th>
                <th>采美</th>
                <th>第三方</th>
                <th>供应商</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        var cancelBtn = document.getElementsByClassName('cancel-btn');//取消订单
        var btn2_ = document.getElementsByClassName('btn2');//取消按钮 -- 弹窗
        var confirm_ = document.getElementsByClassName('confirm'); //确认订单
        var confirmOrder_ = document.getElementsByClassName('same-style'); //确认按钮
        var hidden_ =document.getElementById('hidden').value;//判断用户是那种状态 (确认按钮的弹窗)
        var close_ = document.getElementsByClassName('close');
        console.log(hidden_);

        if(document.getElementsByClassName('changeInfo').length == 0){

        }else {
            var changeInfo_ = document.getElementsByClassName('changeInfo');//修改收货人消息
            changeInfo_[0].onclick = function () {
            document.getElementsByClassName('change-info')[0].style.cssText = 'display:block';
            }
        }

        for(var i=0;i<cancelBtn.length;i++){
            cancelBtn[i].onclick = function () {
                document.getElementsByClassName('cancel-order')[0].style.cssText = 'display:block';
                document.getElementsByClassName('bj')[0].style.cssText = 'display:block';
            }
        }
        for(var i=0;i<btn2_.length;i++){
            btn2_[i].onclick = function () {
                document.getElementsByClassName('cancel-order')[0].style.cssText = 'display:none';
                document.getElementsByClassName('bj')[0].style.cssText = 'display:none';
                document.getElementsByClassName('change-info')[0].style.cssText = 'display:none';
                for(var j=0;j<confirmOrder_.length;j++){
                    confirmOrder_[j].style.cssText = 'display:none';
                }

            }
        }
        confirm_[0].onclick =function () {
            document.getElementsByClassName('bj')[0].style.cssText = 'display:none';
            if(hidden_ == 1){
                document.getElementsByClassName('confirmOrder1')[0].style.cssText = 'display:block';
            }else if(hidden_ == 2){
                document.getElementsByClassName('confirmOrder2')[0].style.cssText = 'display:block';
            }
        };
        for(var i=0;i<close_.length;i++){
            close_[i].onclick = function () {
                for(var j=0;j<confirmOrder_.length;j++){
                    document.getElementsByClassName('same-style')[j].style.cssText = 'display:none';
                }
            }
        }


    }
</script>
</body>
</html>