order_list.html 8.8 KB

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <script type="text/javascript" src="__TMPL__/static/js/base.js"></script>
    <link rel="stylesheet" type="text/css" href="__TMPL__/static/assets/css/weui.min.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/static/assets/css/swiper-3.4.2.min.css" />
    <!--<link rel="stylesheet" type="text/css" href="__TMPL__/static/css/swiper-3.4.2.min.css" />-->
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_773803_6y9erxzbkn2.css" />
    <link rel="stylesheet" href="__TMPL__/static/css/common.css" />
    <script type="text/javascript" src="__TMPL__/static/assets/font/iconfont.js">
    </script>
    <link rel="stylesheet" href="__TMPL__/static/css/myOrder.css" />
    <style type="text/css">
        .inputStyle {
            width: 6.86rem;
            height: 0.8rem;
            font-size: 0.32rem;
            border: 1px solid rgba(235, 235, 235, 1);
            border-radius: 0.4rem;
            margin: 0.2rem auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #999;
            background: #fff;
            z-index: 99;
        }

        .icon-sousuo {
            font-size: 0.3rem;
            /*color: #ccc;*/
            margin-right: 0.2rem;
            margin-top: -0.09rem;
            font-size: 0.4rem;
        }

        .inputItem {
            padding-top: 0.06rem;
            outline: none;
            border: none;
            color: #777;
            width: 73%;
            height: 100%;
            /* padding-left: 2rem; */
            text-align: left;
            overflow: hidden;
        }

        .head {
            padding-bottom: 0.2rem;
            position: fixed;
            top: 0;
            background: #fff;
            justify-content: center;
            display: flex;
            width: 100%;
            z-index: 100;
            height: 1rem;
        }
    </style>
</head>

<body>
<div class="head">
    <form action="{:url('user/Center/orderList')}" method="get">
        <div id="" class="inputStyle" onclick="">
            <i class="iconfont icon-sousuo"></i>
            <input class="inputItem" type="text" name="order_sn" value="{$order_sn}" placeholder="搜索订单号" />
            <input type="hidden" name="status" value="{$status}">
            <label for="S"><span class="sou_right">搜索</span></label>
        </div>
        <input type="submit" id="S" style="display: none">
    </form>
</div>

<!-- 待付定金-->
<div class="choice" id="topNav">
    <div class="swiper-wrapper">
        <div <if condition="$status eq ''">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList')}">
            <span>全部</span>
        </div>
        <div <if condition="$status eq '1'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>1])}">

            待付定金

        </div>
        <div <if condition="$status eq '2'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>2])}">

            已付定金

        </div>
        <div <if condition="$status eq '3'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>3])}">

            待付尾款

        </div>
        <div <if condition="$status eq '4'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>4])}">

            已付尾款

        </div>
        <div <if condition="$status eq '5'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>5])}">

            待评价

        </div>
        <div <if condition="$status eq '6'">class="swiper-slide active_top"<else/>class="swiper-slide"</if> data-url="{:url('user/Center/orderList',['status'=>6])}">

            已完成

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

<volist name="data" id="vo">
    <a href="{:url('user/Center/orderDetail',['oid'=>$vo['oid']])}">
    <div class="good_out_stay" data-id="{$vo.oid}">
        <div class="good">
            <span>订单号:{$vo.order_sn}</span>
            <span class="confirmed">{$vo.status_text}</span>
        </div>
        <div class="goods">
            <div class="pic_row">
					<span class="rock">
		  			   <span class="pic">
		  			        <img src="{$vo.thumb}" alt="" style="width: 2.04rem; height: 0.98rem"/>
		  		       </span>
					<span class="two">
		  			        <span>{$vo.name}</span>
					<span class="price">
			  			    <span>定金 ¥{$vo.down_price}</span>
					<span>价格 ¥{$vo.price}</span>
					</span>
					</span>
					</span>
            </div>
            <span class="five">
		  			x{$vo.count}
		  	</span>
        </div>
        <if condition="$vo['status'] eq '1'">
            <div class="btnlist">
                <div class="btnleft can">取消</div>
                <div class="btnright ">付款</div>
            </div>
        </if>

        <if condition="$vo['status'] eq '3'">
            <div class="btnlist">
                <div class="btnright ">付款</div>
            </div>
        </if>

        <if condition="$vo['status'] eq '5'">
            <div class="btnlist">
                <div class="pingjia">评价</div>
            </div>
        </if>
    </div>
    </a>
</volist>





<!--确认取消弹出框-->
<div class="confirm_cancel">
    <div class="confirm_main">
        <div class="hint">
            确认取消?
        </div>
        <div class="true">确定取消订单吗?</div>
        <div class="choose">
            <span class="confirm_yes">取消</span>
            <span class="confirm_no">确定</span>
        </div>
    </div>
</div>
<!--toast-->
<div id="toast" style='display: none;'>
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <!--<i class="weui-icon-success-no-circle weui-icon_toast"></i>-->
        <p class="weui-toast__content">已完成</p>
    </div>
</div>
<script type="text/javascript" src="__TMPL__/static/assets/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="__TMPL__/static/js/swiper-3.4.2.jquery.min.js"></script>
<script>
    //初始化
    var mySwiper = new Swiper('#topNav', {
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        slidesPerView: 'auto',
        //		    loop:true,
        slideToClickedSlide: true,
        observer: true,
        observeParents: true,
    });
</script>
</body>

</html>
<script type="text/javascript" src="__TMPL__/static/assets/js/common.js"></script>
<script type="text/javascript" src="__TMPL__/static/assets/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="__TMPL__/static/js/swiper-3.4.2.jquery.min.js"></script>
<script>
    //确认取消弹出框
    $('.can').click(function() {
        var id = $(this).parents('.good_out').data("id");
        console.log(id);
        $('.confirm_cancel').css('display', 'block');
        $('.confirm_yes').click(function() {
            console.log("点击确定按钮获取整个li的id为:" + id);
            $('.confirm_cancel').css('display', 'none');
        })
        $('.confirm_no').click(function() {
            $('.confirm_cancel').css('display', 'none');
        })
        $('.confirm_main').click(function() {
            event.stopPropagation();
            //	 	$(this).css('display','none');
        })
    })

    //确认取消弹出框
    $('.btnright').click(function() {
        var id = $(this).parents('.good_out').data("id");
        console.log(id);
        $('.confirm_cancel').css('display', 'block');
        $('.confirm_yes').click(function() {
            console.log("点击确定按钮获取整个li的id为:" + id);
            $('.confirm_cancel').css('display', 'none');
        })
        $('.confirm_no').click(function() {
            $('.confirm_cancel').css('display', 'none');
        })
        $('.confirm_main').click(function() {
            event.stopPropagation();
            //	 	$(this).css('display','none');
        })
    })
    //阻止按钮的点击冒泡
    $('.btnlist').click(function(event) {
        event.stopPropagation();
    });
    $('.choice .swiper-slide').click(function() {
        $(this).addClass("active_top").siblings().removeClass("active_top");
    })

</script>
<script>
    $('.sou_right').click(function() {
        var val = $('.inputItem').val();
        var patrn = /^[0-9]*$/;
        if(!patrn.test(val)) {
            toast('请输入数字');

        }
    })
</script>

<script>
    $(".swiper-slide").click(function () {
        window.location.href=$(this).attr('data-url');
    })
</script>