{include file="./app/home/view/mobile/head.html" /}
<div class="body gray-bg">
    <div class="header">
        <div class="menu">
            <a class="back-btn"></a>
        </div>
        <div class="logo">
            {switch name="$_GET['status']"}
            {case value="0"}待付款{/case}
            {case value="3"}待收货{/case}
            {case value="2"}待评价{/case}
            {case value="99"}已完成{/case}
            {/switch}
        </div>
        <div class="user"><a href="{:url('user/index/index')}"></a></div>
    </div>
    <div class="wrap">
        <div class="search">
            <form action="">
                <input type="text" name="search" placeholder="请输订单编号/商品名/查询" value="{$_GET['search']}">
                <button type="submit">搜索</button>
            </form>
        </div>
        <div class="goods-list cart service mescroll"  id="mescroll">
            <ul id="newsList" class="news-list">
                {volist name="list" id="vo"}
                <?php $product = json_decode($vo['productlist'], true); $address = json_decode($vo['address'], true);?>
                <li>
                    <div class="top">交易状态：
                        {if condition="'cash' eq $vo['pay_type'] and ((2 neq $vo['status']) and (99 neq $vo['status']))"}
                        货到付款
                        {else}
                        {switch name="vo.status"}
                        {case value="0"}待付款{/case}
                        {case value="1"}已付款{/case}
                        {case value="3"}待收货 ({$vo['shipping']}){/case}
                        {case value="2"}待评价 ({$vo['shipping']}){/case}
                        {case value="99"}已完成 ({$vo['shipping']}){/case}
                        {/switch}
                        {/if}
                    </div>
                    <!--<div class="ch-btn"><input type="checkbox" id="ch1"><label for="ch1"></label></div>-->
                    <div class="left"><img src="{:imgUrl($product[0]['thumb'])}" alt="{$vo.name}"><!--<i>热卖</i>--></div>
                    <div class="right">
                        <p class="tit">{$vo.name}</p>
                        <!--<p class="des">精品礼盒一斤装</p>-->
                        <p class="des1">实付款（含运费）<span class="price">￥{$vo.amount}</span></p>
                        <!-- btn1 待付款  btn2 待评价 btn3 待收货  btn4 追加评价 -->
                        {switch name="vo.status"}
                        {case value="0"}<a href="{:url('user/order/pay')}?sn={$vo.sn}" ><p class="btn btn1"></p></a><!--/<a href="javascript:layer.confirm('确定要删除吗？', function(){location.href='{:url(\'user/order/del\')}?sn={$vo.sn}'})">删除</a>-->{/case}
                        {case value="1"}{/case}
                        {case value="3"}<a href="javascript:if(confirm('确定要收货吗？')) location.href='{:url(\'user/order/confirm\')}?sn={$vo.sn}';" ><p class="btn btn3"></p></a>{/case}
                        {case value="2"}<a href="{:url('user/order/comment')}?sn={$vo.sn}" ><p class="btn btn2"></p></a>{/case}
                        {default /}<a href="javascript:;" ><p class="btn btn4"></p></a>
                        {/switch}
                    </div>
                    <div class="bottom">
                        <p>订单编号：{$vo.sn}</p>
                        <p>创建时间：{:date("Y/m/d", $vo.createtime)}</p>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
        <!--<div class="cart-foot order-foot">
            <span class="all checked">全选</span>
            <span class="del">删除选中商品</span>
        </div>-->
    </div>
    <link rel="stylesheet" href="__HOME__/css/mescroll.min.css">
    <style type="text/css">
        /*说明*/
        .mescroll .notice{
            font-size: 14px;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            text-align: center;
            color:#555;
        }
        /*列表*/
        .mescroll{
            position: fixed;
            top: 1.6rem;
            bottom: 0;
            height: 80%;
        }
    </style>
    <script src="__HOME__/js/mescroll.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            //创建MeScroll对象
            var mescroll = new MeScroll("mescroll", {
                down: {
                    isLock:true,
                    //auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
                    //callback: downCallback //下拉刷新的回调
                },
                up: {
                    auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                    page : {num:1, size:2},
                    /*toTop:{ //配置回到顶部按钮
                     src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                     //offset : 1000
                     }*/
                }
            });

            /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
            function upCallback(page){
                //联网加载数据
                getListDataFromNet(page.num, page.size, function(curPageData){
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                    console.log("page.num="+page.num+", page.size="+page.size+", curPageData.length="+curPageData.length);

                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

                    //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                    //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

                    //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
                    mescroll.endSuccess(curPageData.length);

                    //提示:curPageData.length必传的原因:
                    // 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
                    // 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
                    // 3.使配置的noMoreSize生效

                    //设置列表数据
                    setListData(curPageData, true);
                }, function(){
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr();
                });
            }

        });

        /*设置列表数据*/
        function setListData(curPageData, isAppend) {
            var listDom=document.getElementById("newsList");
            for (var i = 0; i < curPageData.length; i++) {
                var newObj=curPageData[i];
                var productList = eval('(' + newObj.productlist + ')');
                var status = '待付款';
                if (newObj['status'] == 0) {
                    status = '待付款';
                } else if (newObj['status'] == 1) {
                    status = '已付款';
                } else if (newObj['status'] == 2) {
                    status = '待评价 (' + newObj['shipping'] + ')';
                } else if (newObj['status'] == 3) {
                    status = '待收货 (' + newObj['shipping'] + ')';
                } else if (newObj['status'] == 99) {
                    status = '已完成 (' + newObj['shipping'] + ')';
                }

                var str = '<div class="top">交易状态：'+ status +'</div>';
                str += '<div class="left"><img src="'+imgUrl(productList[0].thumb)+'" alt="'+newObj['name']+'"><!--<i>热卖</i>--></div>';
                str += '<div class="right">';
                str += ' <p class="tit">'+newObj['name']+'</p>';
                str += '   <p class="des1">实付款（含运费）<span class="price">￥'+newObj['amount']+'</span></p>';
                //str += '    <!-- btn1 待付款  btn2 待评价 btn3 待收货  btn4 追加评价 -->
                if (newObj['status'] == 0) {
                    str += '<a href="/user/order/pay?sn='+newObj['sn']+'"><p class="btn btn1"></p></a>';
                } else if(newObj['status'] == 1) {
                    str += '';
                } else if(newObj['status'] == 3) {
                    str += '<a href="javascript:if(confirm(\'确定要收货吗？\')) location.href=\'{:url(\'user/order/confirm\')}?sn='+newObj['sn']+'\';"><p class="btn btn3"></p></a>';
                } else if(newObj['status'] == 2) {
                    str += '<a href="/user/order/comment?sn='+newObj['sn']+'"><p class="btn btn2"></p></a>';
                } else {
                    str += '<a href="javascript:;" ><p class="btn btn4"></p></a>';
                }

                str += '</div>';
                //str += '    <a href="/user/order/pay.html?sn=201905101625341859"><p class="btn btn1"></p></a></div>';
                str += ' <div class="bottom">';
                str += '    <p>订单编号：'+newObj['sn']+'</p>';
                str += '    <p>创建时间：'+date('Y/m/d', newObj['createtime'])+'</p>';
                str += '  </div>';

                var liDom=document.createElement("li");
                liDom.innerHTML=str;

                if (isAppend) {
                    listDom.appendChild(liDom);//加在列表的后面,上拉加载
                } else{
                    listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
                }
            }
        }

        /*联网加载列表数据
         在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
         请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
         实际项目以您服务器接口返回的数据为准,无需本地处理分页.
         * */
        function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
            $.ajax({
                type:"get",
                dataType:"json",
                url:"",
                data:{"page":pageNum},
                success:function(data){
                    successCallback&&successCallback(data);
                },
                errorCallback
            });
        }
    </script>
{include file="./app/home/view/mobile/foot.html" /}