order_detail.html 13.1 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="http://at.alicdn.com/t/font_773803_5o00hpwhlb.css" />
    <script type="text/javascript" src="__TMPL__/static/assets/font/iconfont.js">
    </script>
    <link rel="stylesheet" href="__TMPL__/static/css/paybalance.css" />
    <link rel="stylesheet" href="__TMPL__/static/css/common.css"/>
    <link rel="stylesheet" href="__TMPL__/static/css/payed.css" />
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <style type="text/css">
        .bot_reason {
            display: none;
        }
    </style>
</head>

<body>
<div class="good">
    <span>订单号:{$data.baseInfo.order_sn}</span>
    <span class="confirmed">{$data.baseInfo.status_text}</span>
</div>
<div class="goods">
    <div class="pic_row">
        <span class="rock">
            <span class="pic">
                <img src="{$data.baseInfo.thumb}" alt="" style=" width: 2.04rem; height: 0.98rem;" />
            </span>
            <span class="two">
                <span>{$data.baseInfo.name}</span>
                <span class="price">
                    <span>定金 ¥{$data.baseInfo.down_price}</span>
                    <span>价格 ¥{$data.baseInfo.price}</span>
                </span>
            </span>
        </span>
    </div>
    <span class="five">
        x{$data.baseInfo.count}
    </span>
</div>
<div class="list">
    <div class="title">{$data.baseInfo.status_text}</div>
    <volist name="data.escort" id="vo" key="k">
        <div class="caned_out caned_bottom">
            <div class="caned">
                <div class="real">出行人{$k}:{$vo.name} {$vo.tel} x1 定金{$vo.down_price}</div>
                <if condition="$vo['status'] neq '0'">
                    <div class="refundmoneyed">
                        <span>已发起退款</span>
                        <i class="iconfont icon-iconset0413"></i>
                    </div>
                    <else/>
                    <span id="B_{$vo.id}" style="height: 30px">
                        <button class="cancel" id="escort_{$vo.id}" data-id="{$vo.id}">退款</button>
                    </span>
                </if>
            </div>
            <div class="refund_main_out">
                <div class="refund">
                    <span class="tui">
                        退款进度
                    </span>
                    <if condition="$vo['status'] eq '3'">
                    <span class="tui reson">查看原因</span>
                    </if>
                </div>
                {$vo.bar}
            </div>
            <div class="bot_reason">
                <div class="bottom_reason">
                    <span>{$vo.reason}</span>
                </div>
            </div>
        </div>
    </volist>
    <!--点击取消填写退款原因-->
    <div class="refund_reason_out" id="refund_reason_out">

        <div class="refund_reason">
            <i class="iconfont icon-chahao"></i>
            <textarea id="T" name="" rows="" cols="" placeholder="请填写申请退款原因"></textarea>
            <button class="refund_reason_submit">提交</button>
        </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>

    <div class="footer_out">
        <if condition="$data.baseInfo.status eq '1' || $data.baseInfo.status eq '3'">
        <div class="footer ok">
            立即支付
        </div>
        </if>

        <if condition="$data.baseInfo.status eq '4'">
            <div class="footer ko">
                确认完成
            </div>
        </if>

        <if condition="$data.baseInfo.status eq '5'">
            <div class="footer go">
                去评价
            </div>
        </if>
    </div>
    <!--选择支付方式-->
    <div class='move1'>
        <div class='move_main1'>
            <div class="shang2">
                <div class="shang1">
							<span class="choose">
							选择支付方式
						</span>
                </div>
                <div class="shang1 shan1 shang_list">
                    <div class="shang1_inner">
                        <div class="img_out">
                            <img src="__TMPL__/static/images/yue.png" alt="" class="yue" />
                        </div>
                        <div>
                            余额支付
                        </div>
                    </div>
                    <div>
                        <i class='iconfont icon-xuanzhong2' data-var="0"></i>
                    </div>
                </div>
                <div class="shang1 shan1">
                    <div class="shang1_inner">
                        <div class="img_out">
                            <img src="__TMPL__/static/images/wei.png" alt="" class="yue" />

                        </div>
                        <div>
                            微信支付
                        </div>
                    </div>
                    <div>
                        <i class='iconfont' data-var="1"></i>
                    </div>
                </div>
                <div class="shang1 shan1">
                    <div class="shang1_inner">
                        <div class="img_out">
                            <img src="__TMPL__/static/images/zhi.png" alt="" class="yue" />

                        </div>
                        <div>
                            支付宝支付
                        </div>
                    </div>
                    <div>
                        <i class='iconfont' data-var="2"></i>
                    </div>
                </div>

                    <div class="agreepay">
                        确认支付
                    </div>
            </div>
        </div>
    </div>

</div>
</body>

</html>
<script type="text/javascript" src="__TMPL__/static/assets/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="__TMPL__/static/assets/js/swiper-3.4.2.min.js"></script>
<script type="text/javascript" src="__TMPL__/static/assets/js/weui.js"></script>
<script type="text/javascript" src="__TMPL__/static/assets/js/common.js"></script>
<script type='text/javascript' src='__TMPL__/static/assets/js/Augly_Verification.js'></script>

<script>
    //点击选择支付方式
    $('.ok').click(function() {
        $('.move1').css('display', 'block');
    })
    $('.move1').click(function() {
        $(this).css('display', 'none');
    })
    $('.move_main').click(function(e) {
        e.stopPropagation();
    })
    $('.move_main1').click(function(e) {
        e.stopPropagation();
    })
    $('.shan1').click(function() {
        $(this).find('i').attr('class', 'iconfont icon-xuanzhong2');
        $(this).siblings().find('i').attr('class', 'iconfont');
    })
    $('.move1').click(function() {
        $(this).css('display', 'none');
    })
    $('.phone_btn').click(function() {
        $('.move3').css('display', 'none');
    })

    $('.reson').click(function() {
        if($(this).parents('.caned_out').find('.bot_reason').css('display') == 'none') {
            $(this).parents('.caned_out').find('.bot_reason').css('display', 'block');
        } else {
            $(this).parents('.caned_out').find('.bot_reason').css('display', 'none');

        }
    })

    $('.refundmoneyed').click(function() {
        if($(this).parents('.caned_out').find('.refund_main_out').css('display') == 'none') {
            $(this).parents('.caned_out').find('.refund_main_out').css('display', 'block');
            //$(this).parents('.caned_out').find('.iconfont').attr("class", "iconfont icon-chahao icon-iconset0414");
            $('#icon-chahao').attr("class", "iconfont icon-chahao");
        } else {
            $(this).parents('.caned_out').find('.refund_main_out').css('display', 'none');
            $(this).parents('.caned_out').find('.bot_reason').css('display', 'none');
            //$(this).parents('.caned_out').find('.iconfont').attr("class", "iconfont icon-chahao icon-iconset0413");
            $('#icon-chahao').attr("class", "iconfont icon-chahao");
        }

    })

    var id='';

    $(function(){
        //确认取消弹出框
        $('.cancel').click(function(){
            id = $(this).attr('data-id');
            $('.refund_reason_out').css('display','block');
        })
        //阻止按钮的点击冒泡
        $('.btnlist').click(function(event) {
            event.stopPropagation();
        });
        $('.choice .swiper-slide').click(function(){
            $(this).addClass("active_top").siblings().removeClass("active_top");

        })
		//点击提交
        $('.refund_reason_submit').click(function(){
            $('.refund_reason_out').css('display','none');
            if($("#T").val() == '') {
                setTimeout("toast('请填写您的退款原因');", 900);
            }else {
                $.ajax({
                    url: "{:url('user/Center/refund')}",
                    data: {
                        id: id,
                        cause: $("#T").val()
                    },
                    type: "POST",
                    dataType: "JSON",

                    success: function (data) {
                        if (data.data === true) {
                            if(setTimeout("toast('提交成功');", 900)) {

                            }
                        }
                    }
                })
            }
        })
        $('.refund_reason_out').click(function(event){
            $(this).css('display','none');
        })
        $('.icon-chahao').click(function(){
            $(this).parents('.refund_reason_out').css('display','none');
        })
        $('.refund_reason').click(function(event){
            event.stopPropagation();
        })

    })
</script>

<script>
    $(".agreepay").click(function () {
        $.ajax({
            url:"{:url('order/Order/done2')}",
            data:{
                oid:'{$data.baseInfo.oid}',
                payment:$(".icon-xuanzhong2").attr('data-var')
            },
            type:"POST",
            dataType:"JSON",
            
            success: function (data) {
                if($(".icon-xuanzhong2").attr('data-var') == 1) {
                    console.log(data);
                    wx.chooseWXPay({
                        timestamp: data.data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: data.data.nonceStr, // 支付签名随机串,不长于 32 位
                        package: data.data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
                        signType: data.data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
                        paySign: data.data.paySign, // 支付签名
                        success: function (res) {
                            // 支付成功后的回调函数
                        }
                    });
                }else if($(".icon-xuanzhong2").attr('data-var') == 0) {
                    if(data.code == 20000) {
                        window.location.href=data.url;
                    }
                }else {

                }
            }
        })
    })
</script>

<script>
    $(".ko").click(function () {
        if(window.confirm('是否确认完成?')) {
            $.ajax({
                url:"{:url('user/Center/confirmOrder')}",
                data:{
                    oid:'{$data.baseInfo.oid}'
                },
                type:"POST",
                dataType:"JSON",

                success: function (data) {
                    if(data.code == 20000) {
                        window.location.reload();
                    }
                }
            })
        }else {
            return false;
        }
    })
</script>

<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '{$js_sdk.appId}', // 必填,公众号的唯一标识
        timestamp: '{$js_sdk.timestamp}', // 必填,生成签名的时间戳
        nonceStr: '{$js_sdk.nonceStr}', // 必填,生成签名的随机串
        signature: '{$js_sdk.signature}',// 必填,签名
        jsApiList: [
            'chooseWXPay'
        ] // 必填,需要使用的JS接口列表
    });

</script>