master

分支 (1)

管理

管理

master

integral_mall
/
OrderDetails.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <script type="text/javascript" src="https://www.funbling.net/Public/static/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/clipboard.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            width: 99.99%;
        }

        ul li {
            list-style: none;
        }

        .header{width: 100%;height: 1rem;background: #ffffff;text-align: center;position: relative;border-bottom: 1px solid #eeeeee;}
        .header .title{height: 1rem;line-height: 1rem;color: #2f2f2f;}
        .header .back{width: 0.2rem;height: 0.38rem;position: absolute;top: 0.31rem;left: 0.25rem;}

        .ban {
            width: 100%;
            margin: 0 auto;
            position: relative;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-bottom: 0.14rem #f6f6f6 solid;
        }

        .ban .ban_bg {
            width: 100%;
            height: 2rem;
        }

        .ban .bg_cont {
            width: 100%;
            height: 0.42rem;
            line-height: 0.42rem;
            position: absolute;
            top: 0.79rem;
            font-size: 0.36rem;
            color: #fff;
        }

        .ban .bg_goods {
            width: 90%;
            display: flex;
            height: 1rem;
            top: 0.68rem;
            left: 5%;
            position: absolute;
            font-size: 0.32rem;
            color: #fff;
            text-align: left;
            display: none;
        }

        .bg_goods_num {
            flex: 1;
        }

        .bg_goods_live {
            width: 1.5rem;
            font-size: 0.38rem;
            height: 1rem;
            line-height: 0.4rem;
        }

        .ban .ban_chosed {
            width: 0.42rem;
            height: 0.42rem;
            vertical-align: middle;
            margin-top: -0.1rem;
            margin-right: 0.15rem;
        }

        .ban .ban_live {
            width: 0.8rem;
            height: 0.6rem;
            vertical-align: middle;
            margin-top: -0.1rem;
            margin-right: 0.15rem;
        }

        .code {
            width: 90%;
            padding: 0 5%;
            border-bottom: 0.14rem #f6f6f6 solid;
        }
        .code1 {
            width: 90%;
            padding: 0 5%;
            border-bottom: 0.14rem #f6f6f6 solid;
        }

        .code_p {
            display: flex;
            margin-top: 0.3rem;
        }

        .code_p1 {
            flex: 1;
            color: #333;
            font-size: 0.34rem;
            /* margin-top: -0.1rem; */
        }

        .code_p2 {
            width: 0.82rem;
            height: 0.34rem;
            line-height: 0.34rem;
            text-align: center;
            color: #FF7C35;
            border: 0.02rem #FF7C35 solid;
            border-radius: 0.18rem;
            font-size: 0.26rem;
        }

        .code_p3 {
            margin: 0.26rem 0 0.3rem 0;
            color: #999;
        }

        .code_p4 {
            font-size: 0.3rem;
            color: #333;
            margin-top: 0.3rem;
        }

        .code_p5 {
            font-size: 0.3rem;
            color: #333;
            margin: 0.3rem 0;
        }

        .order {
            font-size: 0.32rem;
            height: 0.34rem;
            line-height: 0.34rem;
            margin-top: 0.3rem;
            color: #2F2F2F;
        }

        .order_details {
            width: 100%;
            display: flex;
            height: 1rem;
            margin: 0.3rem 0;
        }

        .order_img {
            width: 1.34rem;
            height: 0.96rem;
            border: 0.02rem #EAEAEA solid;
            margin-right: 0.2rem;
        }

        .order_p {
            flex: 1;
            height: 1rem;
            font-size: 0.3rem;
            color: #333;
        }

        .gt {
            height: 1rem;
            line-height: 1rem;
            width: 0.2rem;
        }

        .order_time {
            border-top: 1px solid #f6f6f6;
        }

        .order_time p {
            font-size: 0.3rem;
            color: #333;
            margin: 0.3rem 0;
        }

        .attention {
            text-indent: 2em;
            font-size: 0.28rem;
            color: #666;
            line-height: 0.5rem;
            margin: 0.3rem 0 1rem 0;
        }

        .phone {
            background: #f6f6f6;
            height: 1.2rem;
            text-align: center;
            font-size: 0.28rem;
            color: #999;
        }

        .logistics {
            border-top: 1px #f6f6f6 solid;
            position: relative;
            height: 1.5rem;
            overflow: hidden;
        }

        .logistics_list {
            position: relative;
            display: flex;
        }

        .logistics_list::after {
            content: '';
            position: absolute;
            left: 1.3rem;
            border: 1px solid #f6f6f6;
            height: 100%;
            z-index: -2;
        }

        .logistics_list:last-of-type::after {
            height: 40%;
        }

        .logistics_list_l {
            width: 0.9rem;
            text-align: right;
            margin: 0.3rem 0;
        }

        .logistics_list_l p {
            line-height: 0.5rem;
            color: #666;
            font-size: 0.24rem;
        }

        .logistics_list_img {
            width: 0.4rem;
            height: 0.4rem;
            margin-left: 0.2rem;
            margin-top: 0.35rem;
        }

        .logistics_list_r {
            flex: 1;
            text-align: left;
            margin: 0.3rem 0 0.3rem 0.2rem;
            color:#999999;
        }

        .logistics_list_r p {
            /* color: #FF7C35; */
            font-size: 0.26rem;
            line-height: 0.5rem;
        }

        .li_active{
            color: #FF7C35;
        }

        .btn1 {
            width: 100%;
            text-align: center;
            height: 0.26rem;
            line-height: 0.26rem;
            font-size: 0.26rem;
            color: #999;
            margin-bottom: 0.3rem;
        }

        .btn2 {
            width: 100%;
            text-align: center;
            height: 0.26rem;
            line-height: 0.26rem;
            font-size: 0.26rem;
            color: #999;
            padding-top: 0.15rem;
            margin-bottom: 0.3rem;
        }

        .back-ul {
            width: 100%;
            height: 10px;
            box-shadow: 0px -20px 15px #FFFFFF;
            position: absolute;
            bottom: -18px;
        }

        .pack{
            width:0.26rem;height: 0.14rem;margin-left:0.1rem;
        }
        .kahao{
            width: 90%;
            padding: 0 5%;
            border-bottom: 0.14rem #f6f6f6 solid;
            display: none;
        }
        .otitle{
            display: flex;
        }
        .otitle .delete{
            width: 1.4rem;
            height: 0.4rem;
            color: #666666;
            font-size: 0.24rem;
            border: 1px solid #ebebeb;
            border-radius: 0.4rem;
            text-align: center;
            line-height: 0.4rem;
            margin-top: 0.24rem;
            display: none;
        }
    </style>
    <script>
        (function (designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width > maxWidth && (width = maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            refreshRem();
            win.addEventListener("resize", function () {
                clearTimeout(tid)
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener("pageshow", function (e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);
            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function (e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);
    </script>
</head>

<body>
    <header class="header">
        <img class="back" src="images/back.png" alt="">
        <p class="title">订单详情</p>
    </header>
    <div class="ban">
        <img class="ban_bg" src="images/bg.png" />
        <!-- 兑换成功/待发货 -->
        <div class="bg_cont">
           <!-- <span>xue</span> -->
        </div>
        <!--待收货-->
       <div class="bg_goods">
             <div class="bg_goods_num">
                <p style="height:0.32rem;line-height:0.32rem">韵达快递</p>
                <p style="height:0.32rem;line-height:0.32rem;margin-top:0.2rem;">快递单号：&nbsp;&nbsp;<span class="orderNumber">42251124354</span>&nbsp;&nbsp;<img
                        style="width:0.3rem;height:0.32rem;" src="images/copy_img.png" /></p>
            </div>
            <p class="bg_goods_live">待收货</p>
        </div>
    </div>
    <!--兑换码-->
    <div class="code1">
        <p class="code_p">兑换码：<span class="code_p1">FGGR-BHJG-HJTF-JGFV</span><span class="code_p2" data-clipboard-action="copy" data-clipboard-target=".code_p1">复制</span></p>
        <p class="code_p3">有效期至：&nbsp;&nbsp;<span class="a4">2018年12月20日</span></p>
    </div>

    <div class="kahao">
        <p class="code_p">卡号：<span class="code_p1">FGGR-BHJG-HJTF-JGFV</span><span class="code_p2" data-clipboard-action="copy" data-clipboard-target=".code_p1">复制</span></p>
        <p class="code_p">密码：<span class="code_p1">FGGR-BHJG-HJTF-JGFV</span></p>
        <p class="code_p3">有效期至：&nbsp;&nbsp;<span class="a4">2018年12月20日</span></p>
    </div>
    <!--收件人-->
    <div class="code" style="position:relative;box-shadow:0 0 10px #f9f9f9;
	-moz-box-shadow:0 0 10px #f9f9f9;
	-webkit-box-shadow:0 0 10px #f9f9f9;">
        <p class="code_p4"><span style="color:#666;">收件人：</span>&nbsp;&nbsp;<span></span>&nbsp;&nbsp;<span></span></p>
        <p class="code_p5"><span style="color:#666;">收货地址：</span>&nbsp;&nbsp;<span></span></p>
        <!--物流信息-->
        <div class="logistic_s">
            <ul class="logistics">
                <!-- <li class="logistics_list">
                    <div class="logistics_list_l">
                        <p style="color:#333;font-size:0.28rem;">07-18</p>
                        <p>08:10</p>
                    </div>
                    <div class="logistics_list_img"><img style="width:100%;height:100%;" src="images/wuliu.png" /></div>
                    <div class="logistics_list_r">
                        <p style="font-size:0.32rem;">运输中</p>
                        <p>快件由深圳分拨中心正在发往武汉</p>
                    </div>
                </li>
                <li class="logistics_list">
                    <div class="logistics_list_l">
                        <p style="color:#333;font-size:0.28rem;">07-18</p>
                        <p>08:10</p>
                    </div>
                    <div class="logistics_list_img"><img style="width:100%;height:100%;" src="images/wuliu.png" /></div>
                    <div class="logistics_list_r">
                        <p style="font-size:0.32rem;">运输中</p>
                        <p>快件由深圳分拨中心正在发往武汉</p>
                    </div>
                </li>
                <li class="logistics_list">
                    <div class="logistics_list_l">
                        <p style="color:#333;font-size:0.28rem;">07-18</p>
                        <p>08:10</p>
                    </div>
                    <div class="logistics_list_img"><img style="width:100%;height:100%;" src="images/wuliu.png" /></div>
                    <div class="logistics_list_r">
                        <p style="font-size:0.32rem;">运输中</p>
                        <p>快件由深圳分拨中心正在发往武汉</p>
                    </div>
                </li> -->

            </ul>
            <!-- <div class="back-ul show"></div> -->
            <p class="btn1">点击收起<img class="pack" src="images/up.png" /></p>
            <p class="btn2 show">查看更多</p>
        </div>

    </div>
    <script>
        $(document).ready(function () {
            var roomBtn1 = $('.code .btn1');
            var roomBtn2 = $('.code .btn2');
            var roombox = $('.code .logistics');
            var roomshow = $('.code .show');
            roomBtn1.hide();
            roomshow.show();
            roomBtn2.click(function () {
                roomshow.hide();
                roomBtn1.show();
                roombox.css("height", "auto");
            });
            roomBtn1.click(function () {
                roomBtn1.hide();
                roomshow.show();
                $('html, body').height($(window).height());
                roombox.css("height", "1.5rem");
            });
        });
    </script>
    <!--订单信息-->
    <div class="code">
        <div class="otitle">
            <p class="order">订单信息</p>
            <div style="flex:1"></div>
            <p class="delete">删除订单</p>
        </div>
        <div class="order_details">
            <p class="order_img"><img style="width:100%;height:100%;" src="images/2.png" /></p>
            <div class="order_p">
                <p>爱奇艺会员兑换券</p>
                <p><span style="color:#FF7C35;font-size:0.4rem">9</span>币</p>
            </div>
            <p class="gt"><img style="width:0.14rem;height:0.26rem;" src="images/join.png" /></p>
        </div>
        <div class="order_time">
            <p ><span style="color:#666;">订单编号：</span><span class="order_num"></span></p>
            <p><span style="color:#666;">兑换时间：</span ><span  class="order_t"></span></p>
        </div>
    </div>
    <!--注意事项-->
    <div class="code">
        <p class="order">注意事项</p>
        <p class="attention">房比邻周边T恤，T恤衫是春夏季人们最喜欢的服装之一，特别是烈日炎炎，酷暑难耐的盛夏，T恤衫以其自然、舒适、潇洒又不失庄重之感的优点而逐步代替昔日男士们穿件背心或汗衫外加一件短袖衬衫或香港衫的模式出现在社交场合，成为人们乐于穿着的时令服装。目前已成为全球男女老幼均爱穿着的时髦装。据说全世界年销量已高达数十亿件，与牛仔裤构成了全球最流行、穿着人数最多的服装。</p>
    </div>
    <!--底部客服电话-->
    <div class="phone">
        <p style="padding-top:0.3rem;">客服电话：<span style="color:#286EA9;">400-8950-555</span></p>
    </div>

</body>
<script>
    // function scopy(){
    //     var content = $(".code_p1").text();
    //     console.log(content);
    //     var input = document.getElementById("input");
    //     input.value = content; // 修改文本框的内容
    //     input.select(); // 选中文本
    //     document.execCommand("copy"); // 执行浏览器复制命令
    // }

    // var clipboard = new Clipboard('.code_p2');
    // clipboard.on('success', function(e) {
    //     alert("文字已复制到剪贴板中");
    //     console.log(e);
    // });
    // clipboard.on('error', function(e) {
    //     alert("异常错误： " + JSON.stringify(e));
    //     console.log(e);
    // });

$('.back').click(function(){

})

function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
}

    $.ajax({
        url:'http://192.168.1.44/shop/Shop/orderDetail',
        type:"get",
        data:{
            customer_id:localStorage.getItem('customer_id'),
            order_id:localStorage.getItem('orderId')
        },
        success:function(data){
            var datas = JSON.parse(data);
            console.log(datas);
            $('.code_p4>span').eq(1).text(datas.data.address_name);
            $('.code_p4>span').eq(2).text(datas.data.address_phone);
            $('.code_p5>span').eq(1).text(datas.data.address);
            var headHtml = '';
            var logistics = '';
            switch (datas.data.status){
                case "1":
                headHtml='<img class="ban_live" src="images/Pendingdelivery@2x.png" /> <span>待发货</span>';

        //  '<img class="ban_chosed" src="images/chosed.png" /> <span>兑换成功</span>'


                $('.bg_cont').html(headHtml);
                $('.logistic_s').hide();
                $('.code1').css("display","none");
                break;

                case "2":
                $(".bg_goods").css("display","flex");
                $(".bg_cont").css("display","none");
                $(".orderNumber").text(datas.data.express_no);
                var state = datas.data.traces.traces;

                console.log(state);

                $.each(state,function(i,e){
                    var arr1 = e.AcceptTime.slice(5,10);
                    var arr2 = e.AcceptTime.slice(11,16)
                    console.log(arr1);
                    logistics += '<li class="logistics_list">'
                        +'<div class="logistics_list_l">'
                        +'<p style="color:#333;font-size:0.28rem;">'+arr1+'</p>'
                        +'<p>'+arr2+'</p>'
                        +'</div>'
                        +'<div class="logistics_list_img">'
                        +'<img style="width:100%;height:100%;" src="images/alTwo.png" />'
                        +'</div>'
                        +'<div class="logistics_list_r">'
                        +'<p style="font-size:0.32rem;">'+(e.Remark?e.Remark:"")+'</p>'
                        +'<p>'+e.AcceptStation+'</p>'
                        +'</div>'
                        +'</li>'
                })
                $("ul").html(logistics);
                // $("ul li:first-child .logistics_list_r").css("color","#FF7C35");
                $("ul li:first-child .logistics_list_r").addClass("li_active");
                if(datas.data.traces.state=="3"){
                    $(".bg_goods_live").text("已签收");
                    $("ul li:first-child img").attr("src","images/alThree.png");
                }
                if(datas.data.traces.state=="2"){
                    $(".bg_goods_live").text("待收货");
                    $("ul li:first-child img").attr("src","images/alTwox.png");
                }
                if(state.length==1){
                    $("ul li:first-child img").attr("src","images/alrOnex.png");
                }
                if(state.length>1){
                    $("ul li:last-child img").attr("src","images/alrOne.png");
                }
                $(".code1").css("display","none");
                break;

                case "5":
                $(".otitle .delete").css("display","block");
                headHtml='<img class="ban_live" src="images/cancel.png" /> <span>订单已取消</span>';
                $('.bg_cont').html(headHtml);
                $('.logistic_s').hide();
                $('.code_p4').css("display","none");
                $('.code_p5').css("display","none");
                break;

                case "6":
                headHtml='<img class="ban_chosed" src="images/chosed.png" /> <span>兑换成功</span>';
                $('.code_p4').css("display","none");
                $('.code_p5').css("display","none");
                $('.logistic_s').css("display","none");
                $('.code_p1').text(datas.data.card_no);
                $('.a4').text(datas.data.create_time);
                $('.bg_cont').html(headHtml);
                break;

                case "7":
                headHtml='<img class="ban_chosed" src="images/fail.png" /> <span>兑换失败</span>';
                $('.code_p4').css("display","none");
                $('.code_p5').css("display","none");
                $('.logistic_s').css("display","none");
                $('.code1').css("display","none");
                $('.bg_cont').html(headHtml);
                break;
            }

            $('.order_p>p').eq(0).text(datas.data.goods_title);
            $('.order_p>p>span').text(datas.data.blings);
            $('.order_num').text(datas.data.order_no);
            $('.order_t').text(datas.data.create_time);
            $('.order_img>img').attr('src',datas.data.img);
           $('.attention').text(datas.data.description);
        }
    })

    $(".otitle .delete").click(function (){
        $.ajax({
            url:"http://192.168.1.44/shop/Shop/orderDel",
            type:"get",
            data:{
                customer_id: localStorage.getItem('customer_id'),
                order_id: localStorage.getItem('orderId')
            },
            success: function(res) {
                console.log(res);
            }
        })
    })
</script>
</html>