order_list.html 11.0 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_834805_0ml90wdq5hzm.css">
    <link rel="stylesheet" href="__INDEX__/css/base.css">
    <link rel="stylesheet" href="__INDEX__/css/myorder.css">
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
    <script type="text/javascript" src="__INDEX__/js/base.js"></script>
    <title>全部订单</title>
</head>
<body>
<div class="deletewrap" style="display:none">
    <div class="deletepop">
        <p class="suredelete">取消订单</p>
        <p class="certainornot">确定取消该订单吗?</p>
        <div class="certain">
            <p class="cancel">取消</p>
            <p class="sure">确认</p>
        </div>

    </div>
</div>
<div class="container">
    <div class="head">
        <ul class="order_list">
            <li class="active" ordertype="0">
                <em></em>
                全部
            </li>
            <li ordertype="1">
                <em></em>
                待支付
            </li>
            <li ordertype="2">
                <em></em>
                待发货
            </li>
            <li ordertype="3">
                <em></em>
                待收货
            </li>
            <li ordertype="4">
                <em></em>
                已完成
            </li>
        </ul>
    </div>
    <!--全部订单-->
    <div class="orderlist allorder">
        <volist name="data.all" id="vo">
        <div class="item_order_list">
            <div class="order_head">
                <div class="order_num">
                    <p class="order_list_num">订单号:</p>
                    <p class="item_num">{$vo.order_num}</p>
                </div>
                <p class="order_type">待付款</p>
            </div>
            <div class="order_content">
                <volist name="vo.detail" id="v">
                <div class="order_content_item">
                    <p class="content_item_img">
                        <img src="{$v.thumb}" alt="">
                    </p>
                    <div class="content_text">
                        <p class="good_name">{$v.name}</p>
                        <div class="good_test">
                            <p class="item_tast">{$v.intro}</p>
                            <p class="tast_num">x{$v.num}</p>
                        </div>
                        <p class="item_price">

                            <span class="item_money">{$v.price}</span>
                        </p>
                    </div>
                </div>
                </volist>
            </div>
            <if condition="$vo['step'] eq '1'">
                <div class="unpay">
                    <p class="pay">付款</p>
                    <p class="cancelorder cancellist">取消订单</p>
                </div>
            </if>
            <if condition="$vo['step'] eq '3'">
                <div class="unpay">
                    <p class="pay">确认收货</p>
                </div>
            </if>
            <if condition="$vo['step'] eq '5'">
                <div class="unpay">
                    <p class="pay eval" data-url="{:url('user/Center/evaluate',['oid'=>$vo['id']])}">评价</p>
                    <p class="cancelorder refund">申请退款</p>
                </div>
            </if>
        </div>
        </volist>
    </div>




    <!--待支付-->
    <div class="orderlist waitpay" style="display:none">
        <volist name="data.unpaid" id="vo">
        <div class="item_order_list">
            <div class="order_head">
                <div class="order_num">
                    <p class="order_list_num">订单号:</p>
                    <p class="item_num">{$vo.order_num}</p>
                </div>
                <p class="order_type">待付款</p>
            </div>
            <div class="order_content">
                <volist name="vo.detail" id="v">
                <div class="order_content_item">
                    <p class="content_item_img">
                        <img src="{$v.thumb}" alt="">
                    </p>
                    <div class="content_text">
                        <p class="good_name">{$v.name}</p>
                        <div class="good_test">
                            <p class="item_tast">{$v.intro}</p>
                            <p class="tast_num">x{$v.num}</p>
                        </div>
                        <p class="item_price">

                            <span class="item_money">{$v.price}</span>
                        </p>
                    </div>
                </div>
                </volist>
            </div>
            <div class="unpay">
                <p class="pay">付款</p>
                <p class="cancelorder cancellist">取消订单</p>
            </div>
        </div>
        </volist>
    </div>
    <!--待发货-->
    <div class="orderlist waitsend" style="display:none">
        <volist name="data.undelivered" id="vo">
        <div class="item_order_list">
            <div class="order_head">
                <div class="order_num">
                    <p class="order_list_num">订单号:</p>
                    <p class="item_num">{$vo.order_num}</p>
                </div>
                <p class="order_type">待发货</p>
            </div>
            <div class="order_content">
                <volist name="vo.detail" id="v">
                <div class="order_content_item">
                    <p class="content_item_img">
                        <img src="{$v.thumb}" alt="">
                    </p>
                    <div class="content_text">
                        <p class="good_name">{$v.name}</p>
                        <div class="good_test">
                            <p class="item_tast">{$v.intro}</p>
                            <p class="tast_num">x{$v.num}</p>
                        </div>
                        <p class="item_price">

                            <span class="item_money">{$v.price}</span>
                        </p>
                    </div>
                </div>
                </volist>
            </div>
        </div>
        </volist>
    </div>
    <!--待收货-->
    <div class="orderlist waittake" style="display:none">
        <volist name="data.unreceived" id="vo">
        <div class="item_order_list">
            <div class="order_head">
                <div class="order_num">
                    <p class="order_list_num">订单号:</p>
                    <p class="item_num">{$vo.order_num}</p>
                </div>
                <p class="order_type">待收货</p>
            </div>
            <div class="order_content">
                <volist name="vo.detail" id="v">
                <div class="order_content_item">
                    <p class="content_item_img">
                        <img src="{$v.thumb}" alt="">
                    </p>
                    <div class="content_text">
                        <p class="good_name">{$v.name}</p>
                        <div class="good_test">
                            <p class="item_tast">{$v.intro}</p>
                            <p class="tast_num">x{$v.num}</p>
                        </div>
                        <p class="item_price">

                            <span class="item_money">{$v.price}</span>
                        </p>
                    </div>
                </div>
                </volist>
            </div>
            <div class="unpay">
                <p class="pay">确认收货</p>

            </div>
        </div>
        </volist>
    </div>
    <!--已完成-->
    <div class="orderlist finish drawback" style="display:none">
        <volist name="data.completed" id="vo">
        <div class="item_order_list">
            <div class="order_head">
                <div class="order_num">
                    <p class="order_list_num">订单号:</p>
                    <p class="item_num">{$vo.order_num}</p>
                </div>
                <p class="order_type">已完成</p>
            </div>
            <div class="order_content">
                <volist name="vo.detail" id="vo">
                <div class="order_content_item">
                    <p class="content_item_img">
                        <img src="__INDEX__/img/apic01.png" alt="">
                    </p>
                    <div class="content_text">
                        <p class="good_name">{$v.name}</p>
                        <div class="good_test">
                            <p class="item_tast">{$v.intro}</p>
                            <p class="tast_num">x{$v.num}</p>
                        </div>
                        <p class="item_price">

                            <span class="item_money">{$v.price}</span>
                        </p>
                    </div>
                </div>
                </volist>
            </div>
            <div class="unpay">
                <p class="pay eval" data-url="{:url('user/Center/evaluate',['oid'=>$vo['id']])}">评价</p>
                <p class="cancelorder refund">申请退款</p>

            </div>
        </div>
        </volist>
    </div>
</div>

</body>
<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script>
    $(".order_list li").click(function(){
        $(this).addClass("active");
        $(this).siblings("li").removeClass("active");
        if($(this).attr("ordertype")==0){
            $(".allorder").css("display","block");
            $(".allorder").siblings(".orderlist").css("display","none")
        }else if($(this).attr("ordertype")==1){
            $(".waitpay").css("display","block");
            $(".waitpay").siblings(".orderlist").css("display","none")
        }else if($(this).attr("ordertype")==2){
            $(".waitsend").css("display","block");
            $(".waitsend").siblings(".orderlist").css("display","none")
        }else if($(this).attr("ordertype")==3){
            $(".waittake").css("display","block");
            $(".waittake").siblings(".orderlist").css("display","none")
        }else if($(this).attr("ordertype")==4){
            $(".finish").css("display","block");
            $(".finish").siblings(".orderlist").css("display","none")
        }
    })
    //取消订单弹出层
    $(".cancellist").click(function(){
        $(".deletewrap").show();
    })
    //确认取消订单
    $(".sure").click(function(){
        $(".deletewrap").hide();
    })
    $(".cancel").click(function(){
        $(".deletewrap").hide();
    })
    //申请退款
    $(".refund").click(function(){
        window.event.stopPropagation()
        window.location.href='application.html'
    })
    //评价
    $(".eval").click(function(){
        window.event.stopPropagation()
        window.location.href=$(this).attr('data-url');
    })
    //退款申请详情页
    $(".drawback").click(function(){
        window.location.href='applicationdetail.html'
    })
</script>
</html>