order_detail.html 19.9 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单评价</title>
    {include file="public/head"}
    <!--提示层插件引入-->
    <link rel="stylesheet" href="__CDN__/assets/store/css/message.css">
    <script type="text/javascript" src="__CDN__/assets/store/js/message.js"></script>
    <style>
        li {
            list-style-type: none;
        }

        ul {
            margin: 0;
        }

        .clear {
            clear: both;
        }

        /*菜单样式*/
        .content {
            width: 100%;
            font-size: 0;
            background: rgba(249, 249, 249, 1);
        }

        .content .navBarBox {
            width: 100%;
            height: 50px;
            background: rgba(0, 159, 142, 1);
        }

        .content .navBarBox ul {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            color: rgba(255, 255, 255, 1);
        }

        .content .navBarBox ul li {
            width: 144px;
            height: 100%;
            line-height: 50px;
            list-style-type: none;
            float: left;
        }

        .content .navBarBox ul li a {
            color: rgba(255, 255, 255, 1);
        }

        .content .titleImgContent {
            width: 100%;
            height: 146px;
        }

        .content .titleImgContent img {
            width: 100%;
            height: 100%;
        }

        /*主要内容*/
        .contentBox {
            width: 100%;
            background-color: #FFFFFF;
            margin-top: 12px;
        }

        .contentMain {
            margin: auto;
            width: 1200px;
        }

        .contentTop {
            height: 60px;
            line-height: 60px;
        }

        .titleText {
            padding-left: 17px;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 800;
            color: rgba(0, 159, 142, 1);
            vertical-align: middle;
        }

        .titleLine {
            line-height: 20px;
            display: inline-block;
            width: 6px;
            height: 20px;
            background: rgba(0, 159, 142, 1);
            opacity: 1;
            border-radius: 2px;
            vertical-align: middle;
        }

        .contentList {
            background: rgba(249, 249, 249, 1);
            border-radius: 8px;
            /*margin-bottom: 20px;*/
        }

        /*店铺信息*/
        .orderDesc {
            padding: 12px 25px;
            width: 100%;
            /*height: 75px;*/
            background: rgba(244, 244, 244, 0.8);
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(6, 18, 30, 1);
        }

        .orderDesc span {
            display: block;
            margin-bottom: 12px;
        }

        /*商品信息*/
        .goodsDescList {
            background-color: #FFFFFF;
            padding: 30px 25px 20px;
        }

        .goodsDesc {
            border-bottom: 1px solid rgba(238, 238, 238, 1);
        }

        /*.goodsDescList:last-child .goodsDesc:last-child{*/
        /*    border: 0;*/
        /*}*/
        .goodsDesc .storeName {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(61, 68, 77, 1);
        }

        .goodsPicText {
            margin-top: 16px;
        }

        .goodsPicText img {
            width: 72px;
            height: 72px;
        }

        .goodsPicText .goodsNameNum {
            margin-left: 13px;
            display: inline-block;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(61, 68, 77, 1);
            vertical-align: middle;
        }

        .goodsPicText .goodsNameNum span {
            display: block;
        }

        .goodsPicText .goodsNameNum span:first-child {
            margin-bottom: 15px;
        }

        /*商品评分*/
        .goodsScore {
            margin: 10px 0;
        }

        .goodsScoreLabel {
            margin-bottom: 0;
            vertical-align: middle;
            display: inline-block;
            padding: 0 10px 0 5px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(61, 68, 77, 1);
        }

        .goodsScoreTextarea {
            resize: none;
            background: rgba(249, 249, 249, 1) !important;
            padding: 20px;
            border: 0 !important;
            box-shadow: none !important;
        }

        /*输入框中placeholer文字颜色*/
        .goodsScoreTextarea::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(140, 145, 152, 1)
        }

        .goodsScoreTextarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(140, 145, 152, 1);
        }

        .goodsScoreTextarea::-moz-placeholder { /* Mozilla Firefox 19+ */
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(140, 145, 152, 1)
        }

        .goodsScoreTextarea:-ms-input-placeholder { /* Internet Explorer 10+ */
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(140, 145, 152, 1)
        }

        /*上传图片*/
        .uploadPic {
            margin-bottom: 50px;
        }

        .uploadPic label {
            display: inline-block;
            margin: 20px 0;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(61, 68, 77, 1);
        }

        /*按钮样式*/
        .refundBtn {
            margin: 30px;
            background-color: rgba(0, 159, 142, 1);
            color: #fff;
            width: 170px;
            height: 52px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            border: 0;
        }

        .refundBtn:hover, .refundBtn:visited, .refundBtn:focus {
            color: #fff;
            color: rgba(255, 255, 255, 1);
            border: 0;
        }

        /*上传图片*/
        .imgFileUploade {
            padding: 0;
        }
    </style>
    <style>
        .star_level span.star i {
            display: inline-block;
            background: url(/assets/store/images/no_star.png) no-repeat center center;
            background-size: 20px 20px;
            width: 30px;
            height: 20px;
            padding: 0;
            margin: 0;
        }

        .star_level span.star.sel i {
            display: inline-block;
            background: url(/assets/store/images/star.png) no-repeat center center;
            background-size: 20px 20px;
            width: 30px;
            height: 20px;
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
        }

        .imgClick {
            width: 150px !important;
            height: 96px !important;
            font-size: 0;
            position: relative;
            background: url(/assets/store/images/idCardBoxFileupload.png) no-repeat;
        }

        .imgClick input {
            width: 150px;
            height: 96px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        .images {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .imagesItem {
            width: 150px !important;
            height: 96px !important;
            font-size: 0;
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 10px 0 0 !important;
        }

        .imagesItem img {
            width: 100%;
            height: 100%;
        }

        .closeImage {
            position: absolute;
            top: -5px;
            right: 5px;
            width: 18px !important;
            height: 18px !important;
            background: rgba(197, 197, 197, 1);
            border-radius: 50%;
            padding: 0 !important;
            font-size: 16px;
            text-align: center;
            line-height: 18px;
            color: #efefef;
            font-style: normal;
            cursor: pointer;
            z-index: 777;
        }
    </style>
    <style>
        #payModal {
            display: none;
        }

        .modal-box {
            width: 716px;
            height: 438px;
            top: 25%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 666;
            overflow: hidden;
            position: fixed;
            border: 6px solid #bbb;
            background-color: #fff;
            -webkit-animation: scale-in both cubic-bezier(.4, 0, 0, 1.5) .3s;
            animation: scale-in both cubic-bezier(.4, 0, 0, 1.5) .3s;
        }

        .modal-left {
            float: left;
            width: 333px;
            padding: 20px 50px 25px 45px;
        }

        #payModal .modal-qrcode {
            width: 210px;
            height: 210px;
            display: block;
            margin: 0 auto 20px;
        }

        .icon-qrcode {
            width: 16px;
            height: 16px;
            margin-right: 3px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            background-position: 0 -88px;
        }

        .modal-left .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.rcJBe.png);
            background-size: 168px;
        }

        #payModal .modal-info {
            color: #f80;
            font-size: 12px;
            padding: 13px 0;
            text-align: center;
            background-color: #f7f7f7;
        }

        .modal-right {
            float: left;
        }

        #payModal p {
            font-size: 18px;
            text-align: center;
            line-height: 32px;
            margin-bottom: 16px;
        }

        #payModal .orange {
            color: #f80;
        }

        #payModal .modal-qr {
            padding-top: 20px;
            border: 1px solid #ddd;
        }

        .icon-clock {
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }

        .icon-close {
            top: 13px;
            right: 13px;
            width: 13px;
            height: 13px;
            z-index: 5;
            cursor: pointer;
            position: absolute;
            background-position: -17px -88px;
        }

        .modal-right .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.rcJBe.png);
            background-size: 168px;
        }

        #payModal .model-right img {
            width: 371px;
            height: 438px;
        }
    </style>
</head>
<body>
{include file="public/header"}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--主要内容-->
    <div class="contentBox">
        <div class="contentMain">
            <div class="contentTop">
                <span class="titleLine"></span>
                <span class="titleText">
                   订单详情
                </span>
            </div>
            <div class="contentList">
                <!--店铺信息-->
                <div class="orderDesc">
                    <span>
                        订单号：{$data.num}
                    </span>
                    <span>
                        状态：{$data.status}
                    </span>
                    <span>
                        收货人：{$data.name}
                    </span>
                    <span>
                        收货人联系方式：{$data.mobile}
                    </span>
                    <span>
                        地址：{$data.province_name} {$data.city_name} {$data.county_name} {$data.address}
                    </span>
                    <span>
                        下单时间：{$data.createtime}
                    </span>
                    <span>
                        支付类型：{eq name="$data.pay_type" value='1'}微信支付{/eq}{eq name="$data.pay_type" value='2'}支付宝支付{/eq}
                    </span>
                    <span>
                        支付时间：{notempty name="$data.paytime"}{:date('Y-m-d H:i',$data.paytime)}{else /}尚未支付{/notempty}
                    </span>
                    <span>
                        配送方式：{eq name="$data.express" value='1'}快递运输{/eq}{eq name="$data.express" value='2'}达达下单{/eq}{eq name="$data.express" value='3'}美团跑腿{/eq}
                    </span>
                    <span>
                        配送费：￥{$data.postage_total}
                    </span>
                    <span>
                        运单号：￥{$data.logistic_code}
                    </span>
                    <span>
                        商品金额：￥{$data.goods_total}
                    </span>
                    <span>
                        总计：￥{$data.total}
                    </span>
                </div>
                <!--商品信息-->
                {volist name="$data.goods" id="vo"}
                <div class="goodsDescList" data-goods_id="{$vo.goods_id}" data-order_info_id="{$vo.id}">
                    <div class="goodsDesc">
                        <span class="storeName">{$data.store_name}</span>
                        <div class="goodsPicText">
                            <img src="{$vo.goods_image}" alt="">
                            <div class="goodsNameNum">
                                <span>{$vo.goodsname}</span>
                                <span>数量×{$vo.number}</span>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
            {$data.operate}
        </div>
    </div>
</div>
{include file="public/footer"}
<!--begin:提示弹层-->
<div class="toast">提示框</div>
<div class="bg"></div>
<!--支付窗口-->
<div id="payModal">
    <div class="modal-box">
        <div class="modal-left">
            <p>
                <span>请使用 </span>
                <span class="orange">微信 </span>
                <i class="icon icon-qrcode"></i>
                <span class="orange"> 扫一扫</span><br>扫描二维码支付
            </p>
            <div class="modal-qr">
                <img class="modal-qrcode"
                     src=""
                     alt="您的浏览器版本太低, 请升级您的浏览器">
                <div class="modal-info">
                    <img class="icon-clock" src="__CDN__/assets/store/images/clock.png">
                    <span>二维码有效时长为2小时, 请尽快支付</span>
                </div>
            </div>
        </div>
        <div class="modal-right"><i class="icon icon-close"></i><img
                src="https://mpay.meituan.com/resource/cashier/img/weixin-qrcode.1xf1oN.jpg" alt="微信扫码">
        </div>
    </div>
</div>
<script>
    var order_id = "{$data.id}";
    $(function () {

    });

    // 付款
    $('.contentMain').on('click', '.topay', function () {
        var data = {
            order_id: order_id
        };
        $.ajax({
            type: "post",
            url: "{:url('topay')}",
            data: data,
            dataType: "json",
            success: function (e) {
                if (e.code == 1) {
                    if (e.data.pay_type == 1) {
                        //微信支付
                        order_id = e.data.order_id;
                        $('#payModal').show();
                        $('.modal-left .modal-qrcode').attr('src', e.data.url);
                    } else if (e.data.pay_type == 2) {
                        //支付宝支付
                        order_id = e.data.order_id;
                        window.open(e.data.url);
                    }
                } else {
                    toast(e.msg);
                }
            },
            error: function (e) {
                console.log(e);
                toast('网络错误，请重试');
            }
        });
    });
    //取消订单
    $('.contentMain').on('click', '.cancel', function () {
        if (confirm('是否确认取消订单？')) {
            var data = {
                order_id: order_id
            };
            $.ajax({
                type: "post",
                url: "{:url('cancel_submit')}",
                data: data,
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        toast(e.msg, 1000, 1);
                    } else {
                        toast(e.msg);
                    }
                },
                error: function (e) {
                    console.log(e);
                    toast('网络错误，请重试');
                }
            });
        }
    });

    // 去评价
    $('.contentMain').on('click', '.comment', function () {
        var base_url = "{:url('comment')}";
        var base_arr = base_url.split('.');
        var url = base_arr[0] + '/order_id/' + order_id + '.' + base_arr[1];
        window.location.href = url;
    });

    // 退款
    $('.contentMain').on('click', '.refund', function () {
        var base_url = "{:url('refund')}";
        var base_arr = base_url.split('.');
        var url = base_arr[0] + '/order_id/' + order_id + '.' + base_arr[1];
        window.location.href = url;
    });

    //确认收货
    $('.contentMain').on('click', '.confirm', function () {
        if (confirm('是否确认收货？')) {
            var data = {
                order_id: order_id
            };
            $.ajax({
                type: "post",
                url: "{:url('confirm')}",
                data: data,
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        toast(e.msg, 1500, 1);
                    } else {
                        toast(e.msg);
                    }
                },
                error: function (e) {
                    console.log(e);
                    toast('网络错误，请重试');
                }
            });
        }
    });

    // 删除
    $('.contentMain').on('click', '.delete', function () {
        if (confirm('删除后无法恢复，是否确认？')) {
            var data = {
                order_id: order_id
            };
            $.ajax({
                type: "post",
                url: "{:url('delete')}",
                data: data,
                dataType: "json",
                success: function (e) {
                    if (e.code == 1) {
                        toast(e.msg, 1500, 1);
                    } else {
                        toast(e.msg);
                    }
                },
                error: function (e) {
                    console.log(e);
                    toast('网络错误，请重试');
                }
            });
        }
    });
    // 取消支付
    $('.icon-close').click(function () {
        $('#payModal').hide();
    });

    //提示弹层
    function toast(msg = '玩命加载中~', time = 2000, reload = 0) {
        $('.toast').text(msg);
        $('.toast').fadeToggle();
        // $('.bg').show();
        setTimeout(function () {
            $('.toast').fadeToggle();
            // $('.bg').hide();
            if (reload == 1) {
                location.reload();
            }
        }, time);
    }
</script>
</body>
</html>