order.html 8.9 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery-1.2.6.min.js" type="text/javascript" ></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/t.js"></script>
<script>
 function tab(pid){
	$("li.or_li").removeClass("oron");
    $("li#or"+pid).addClass("oron");
	$("div.or_div").css("display","none");
    $("div#tab"+pid).css("display","block");
 }
 </script>

<style>
#tab2{
	display:none;
	}
#tab3{
	display:none;
	}
#tab4{
	display:none;
	}
    .empty{
        text-align: center;
        margin: 50% 0 0 0;
        color:#979797;
        box-shadow: none;
    }
body{
    box-shadow: none;
}
</style>
<title>我的订单</title>
</head>

<body>

<div class="orheader center">
	<div class="left orback"><a href="#" onClick="javascript:history.back(-1);"><img src="images/care_03.jpg"/></a></div>
    <div class="bloodtext">我的订单</div>
</div>

<div class="ornav center">
	<div class="ortopli">
    	<ul>
        	<li id="or1" class="or_li oron"><a href="#" onclick="tab('1')">全部</a></li>
            <li id="or2" class="or_li"><a href="#" onclick="tab('2')">待付款</a></li>
            <li id="or3" class="or_li"><a href="#" onclick="tab('3')">进行中</a></li>
            <li id="or4" class="or_li"><a href="#" onclick="tab('4')">已完成</a></li>
        </ul>
    </div>
</div>

<div class="or_div" id="tab1">


<!--<div class="orpart">-->
	<!--<div class="ordernum">订单号:009201800056<span class="cancel right">已取消</span></div>-->
    <!--<div class="orcon">-->
    	<!--<p class="cate center">专业护理</p>-->
        <!--<p class="ordesc textleft"><a href="#">【居家照护】适合出院后需要持续照护、失能/半失能以及...</a></p>-->
        <!--<p class="ortime">预约服务时间:2018-03-20  13:00</p>-->
        <!--<p class="right orprice">合计:<span>¥0</span></p>-->
    <!--</div>-->
<!--</div>-->
</div>

<div class="or_div" id="tab2">
<!--<div class="orpart">-->
    <!--<div class="ordernum">订单号:010201800078<span class="pay right">待付款</span></div>-->
    <!--<div class="orcon">-->
    	<!--<p class="cate center">家庭医生</p>-->
        <!--<p class="ordesc textleft"><a href="#">【家庭医生送长辈,安全可靠保健康】上有老、下有小是...</a></p>-->
        <!--<p class="ortime">预约下单日期:2018-02-19  17:22</p>-->
        <!--<p class="right orprice">合计:<span>¥5290</span></p>-->
    <!--</div>-->
    <!--<div class="right gopay"><a href="#">去支付</a></div>-->
<!--</div>-->
</div>

<div class="or_div" id="tab3">
    <!--<div class="orpart">-->
        <!--<div class="ordernum">订单号:009201800056<span class="cancel right">进行中</span></div>-->
        <!--<div class="orcon">-->
            <!--<p class="cate center">专业护理</p>-->
            <!--<p class="ordesc textleft"><a href="#">【居家照护】适合出院后需要持续照护、失能/半失能以及...</a></p>-->
            <!--<p class="ortime">预约服务时间:2018-03-20  13:00</p>-->
            <!--<p class="right orprice">合计:<span>¥0</span></p>-->
        <!--</div>-->
    <!--</div>-->
</div>

<div class="or_div" id="tab4">
    <!--<div class="orpart">-->
        <!--<div class="ordernum">订单号:009201800056<span class="cancel right">已完成</span></div>-->
        <!--<div class="orcon">-->
            <!--<p class="cate center">专业护理</p>-->
            <!--<p class="ordesc textleft"><a href="#">【居家照护】适合出院后需要持续照护、失能/半失能以及...</a></p>-->
            <!--<p class="ortime">预约服务时间:2018-03-20  13:00</p>-->
            <!--<p class="right orprice">合计:<span>¥0</span></p>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script src="js/common.js"></script>
<script>
    // 我的订单接口
    var post={};
    var header={
        DeviceType:1,
        Token:1
    }
    sendAjax('post', 'user/Order/myOrder', post, header, function (res) {
        let myOrder_data = res;
        let htmlall = '';
        let htmldoing='';
        let htmlunpay='';
        let htmlcomplete='';
        console.log(res);
        if (myOrder_data.code == 1) {
            // 全部订单
            if (myOrder_data.data.unpay.length == 0) {
                $('#tab1').append('<div class="empty">暂无数据信息!</div>');
            } else {
                for (let j in myOrder_data.data.all) {
                    htmlall += `<div class="orpart" data_id="${ myOrder_data.data.all[j].id}">
	<div class="ordernum">订单号:${ myOrder_data.data.all[j].order_sn }<span class="pay right">${myOrder_data.data.all[j].order_type}</span></div>
    <div class="orcon">
    	<p class="cate center">${myOrder_data.data.all[j].post_title}</p>
        <p class="ordesc textleft"><a href="#">${myOrder_data.data.all[j].other_title}</a></p>
        <p class="ortime">预约下单日期:${myOrder_data.data.all[j].service_time}</p>
        <p class="right orprice">合计:<span>¥${myOrder_data.data.all[j].price}</span></p>
    </div>
    <div class="right gopay"><a href="#">去支付</a></div>
</div>`;
                }
                $('#tab1').append(htmlall);
            }
            // 待付款

            if (myOrder_data.data.unpay.length == 0) {
                $('#tab2').append('<div class="empty">暂无数据信息!</div>');
            } else {
                for (let j in myOrder_data.data.unpay) {
                    htmlunpay += `<div class="orpart" data_id="${ myOrder_data.data.unpay[j].id}">
	<div class="ordernum">订单号:${ myOrder_data.data.unpay[j].order_sn }<span class="pay right">${myOrder_data.data.unpay[j].order_type}</span></div>
    <div class="orcon">
    	<p class="cate center">${myOrder_data.data.unpay[j].post_title}</p>
        <p class="ordesc textleft"><a href="#">${myOrder_data.data.unpay[j].other_title}</a></p>
        <p class="ortime">预约下单日期:${myOrder_data.data.unpay[j].service_time}</p>
        <p class="right orprice">合计:<span>¥${myOrder_data.data.unpay[j].price}</span></p>
    </div>
    <div class="right gopay"><a href="#">去支付</a></div>
</div>`;
                }
                $('#tab2').append(htmlunpay);
            }

            // 进行中
            if (myOrder_data.data.doing.length == 0) {
                $('#tab3').append('<div class="empty">暂无数据信息!</div>');
            } else {
                for (let j in myOrder_data.data.doing) {
                    htmldoing += `<div class="orpart" data_id="${ myOrder_data.data.doing[j].id }">
        <div class="ordernum">订单号:${ myOrder_data.data.doing[j].order_sn }<span class="cancel right">进行中</span></div>
        <div class="orcon">
            <p class="cate center">${myOrder_data.data.doing[j].post_title}</p>
            <p class="ordesc textleft"><a href="#">${myOrder_data.data.doing[j].other_title}</a></p>
            <p class="ortime">预约服务时间:${myOrder_data.data.doing[j].service_time}</p>
            <p class="right orprice">合计:<span>¥${myOrder_data.data.doing[j].price}</span></p>
        </div>
    </div>`;
                }
                $('#tab3').append(htmldoing);

            }

            // 已完成
            if (myOrder_data.data.complete.length == 0) {
                $('#tab4').append('<div class="empty">暂无数据信息!</div>');
            } else {
                for (let j in myOrder_data.data.complete) {
                    htmlcomplete += `<div class="orpart" data_id="${ myOrder_data.data.complete[j].id }">
        <div class="ordernum">订单号:${ myOrder_data.data.complete[j].order_sn }<span class="cancel right">进行中</span></div>
        <div class="orcon">
            <p class="cate center">${myOrder_data.data.complete[j].post_title}</p>
            <p class="ordesc textleft"><a href="#">${myOrder_data.data.complete[j].other_title}</a></p>
            <p class="ortime">预约服务时间:${myOrder_data.data.complete[j].service_time}</p>
            <p class="right orprice">合计:<span>¥${myOrder_data.data.complete[j].price}</span></p>
        </div>
    </div>`;
                }
                $('#tab4').append(htmlcomplete);
            }
        }

        else
            {
                console.log(res.msg)
            }
    })

</script>
<script src="js/jquery-1.9.1.js" type="text/javascript" ></script>
<script>
    alert(1)
    $(" #tab1").on("click",".orpart",function(){

        let id= $(this).attr("data_id");
        alert(id)
    })
</script>
</body>