confirm.html 16.3 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" />
    <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_3se1rq7vwl5.css" />
    <script type="text/javascript" src="__TMPL__/static/assets/font/iconfont.js"></script>
    <script type="text/javascript" src="__TMPL__/static/js/base.js"></script>
    <link rel="stylesheet" href="__TMPL__/static/css/orders_submitted.css" />
    <style>
        .weui-picker__group {
            font-size: 0.3rem;
        }
        .mold {
            display: none;
        }
        .weui-picker__action:first-child {
            text-align: left;
            color: #888;
        }

        .sss {
            display: none;
        }
        /*.move3 {
            display: none;
        }*/

        .move {
            display: none;
        }

        .move_main {
            animation: move 0.18s;
        }

        @keyframes move {
            0% {
                height: 1rem;
            }
            50% {
                height: 4rem;
            }
            100% {
                height: 4.55rem;
            }
        }

        .move_main3 {
            animation: move 0.18s;
        }

        .mold_out {
            display: none;
        }
    </style>
</head>

<body>
<div class="taocan">
    套餐信息
</div>
<div class="information">
    <ul>
        <li class="mingcheng">
					<span>
						套餐名称
					</span >
            <span class="liang">
						{$data.activity.name}
					</span>
        </li>
        <li class="mingcheng ming pelpe">
            <div class='li_span'>
						<span>
							出行时间
					    </span>
                <span class="liang lian ">
                    <span class="showcang">{$data.choose.time_text}</span>
						</span>
            </div>
            <span>
							<i class="iconfont icon-common-jinru-copy"></i>
					</span>
        </li>
        <li class="mingcheng shuliang" id="shuliang">
					<span>
						购买数量
					</span>
            <div class="suan">
                <span class="reduce" id="del">-</span>
                <span class="val" id="quantity">1</span>
                <span class="add" id="add">+</span>
            </div>
        </li>
        <li class="mingcheng chu">
					<span class="chuxing">
						出行信息
					</span>

        </li>
    </ul>
</div>
<a href="Pedestrian_choice.html">
    <div class="chengke">
        <span>乘客信息</span>
        <div class="xuan">
					<span class="xuanze">
				 	请选则出行人
					 </span>
            <i class="iconfont icon-common-jinru-copy"></i>
        </div>
    </div>
</a>
<div class="qita">
    其他信息
</div>

<ul class="youhui">
    <a href="discountCoupon.html">
        <li class="you">
					<span>
					优惠券
				   </span >

            <div class="wu">
					<span class="liang lian waitmoney" >
					  ￥5代金券
				     </span>
                <span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</span>
            </div>

        </li>
    </a>
    <li class="shang titles">
        <div>
            商家备注&nbsp;<span>(限十字以内)</span>
        </div>

        <input type="text" placeholder="点击可给商家留言" class="liang lian1"/>
    </li>
    <li class="dan jus">
				<span>
					单房差（一人一房）
				</span >
        <div class='dan_box'>
					<span class="liang lian2" >
					请选择
					</span>
            <span>
					<i class="iconfont icon-common-jinru-copy"></i>
				</span>
        </div>
    </li>
    <li class="dan1 me">
        <div class="danxuan">
            <i class="iconfont icon-duigou"></i>
        </div>
        <div class="wo">我已同意
            <a href="agreement.html" class="phurse">购买协议和合同协议</a>
        </div>
    </li>
</ul>
<div class="zhezhao">
</div>
<footer>
    <span>定金：￥<span id="down_price">{$data.down_price}</span></span>
    <span>总价：￥<span id="total">{$data.total}</span></span>
    <!--<a href="orderPay.html">-->
    <input type="button" value="提交订单" class="sub" id="sub" />
    <!--</a>-->
</footer>

<div class='mold'>
    <div class='mold_main'>
				<span class="fon30">
					是否允许绑定手机号码？
				</span>
        <span>
					<span class="fon30" id="no">否</span>
				<span class="fon30 green" id="yes">允许</span>
				</span>
        <span class="fon26">
					注：绑定后可获得￥10代金券一张
				</span>
    </div>
</div>

<div class='move'>
    <div class='move_main'>
        <div class="change">
            <div class="fang">
						<span class="call">
								取消
							</span>
                <span class="single1">
								单人间&nbsp;&nbsp;(一人一房)
							</span>

                <span class="confirm">
									确定
						</span>
            </div>
        </div>
        <div class="required">
            <span class="yes">需要</span>
            <span>不需要</span>
        </div>

    </div>

</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'></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'></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'></i>
                </div>
            </div>
            <div class="agreepay">
                确认支付
            </div>
        </div>
    </div>
</div>
<div class='mold_out'>
    <div class='mold_center'>
        <div class="scroll_out">
            <div class="scroll">
                <volist name="data.schedule" id="vo">
                    <div class="money" data-id="{$vo.schedule_id}">
                        <div class="year_change">
                            <if condition="$vo['schedule_id'] eq $data['choose']['schedule_id']">
                                <img src="__TMPL__/static/images/circle1.png"/>
                                <else/>
                                <img src="__TMPL__/static/images/circle.png"/>
                            </if>
                            <span>{$vo.start_time}&nbsp;至&nbsp;{$vo.end_time}</span>
                        </div>
                        <div class="price">￥{$vo.price}</div>
                    </div>
                </volist>
            </div>
            <button class="bottom_button" value="">确定</button>
        </div>

    </div>

</div>

<!--点击输入要绑定的手机号-->
<div class='move3'>
    <div class='move_main3'>
        <span class="tie_phone">输入绑定的手机号：</span>
        <input type="text" class="phone_input" placeholder="请输入手机号" />
        <span class="phone_btn"><span class="agreed">确认</span></span>
    </div>
</div>
</div>


<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/myweui.js"></script>
<script type="text/javascript" src="__TMPL__/static/index.js"></script>
<script>
    var schedule_id='{$data.choose.schedule_id}'
    var max = '{$data.choose.allowMaximum}';
    var is_first='{$data.is_first}';
    $(function() {
        //获取选择出行人页面的数据

        var name = decodeURI(getQueryString('name')).replace(/,/g, ' ');
        if(!name) {
            $('.xuanze').html('请选择出行人');
        } else {
            $('.xuanze').html(name);
        }

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" +
                name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r) return unescape(r[2]);
            //return null;
            return '请选择出行人';
        }

        $('.money').click(function(event) {
            $(this).find('img').attr("src", "/themes/simpleboot3/static/images/circle1.png");
            $(this).siblings().find('img').attr("src", "/themes/simpleboot3/static/images/circle.png");
            schedule_id = $(this).attr('data-id');
        });
        //获取选择选择代金券的数据

        var price = decodeURI(getQueryString_money('price')).replace(/,/g);
        if(!price) {
            $('.waitmoney').html('请选择代金券');
        } else {
            $('.waitmoney').html('代金券￥' + price);
        }

        function getQueryString_money(price) {
            var reg = new RegExp("(^|&)" +
                price + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r) return unescape(r[2]);
            return '';
        }

        var mold = $('.mold');
        $('.mold').click(function() {
            $(this).hide();
        })

        $('.mold_main').click(function(e) {
            e.stopPropagation();
        })
        $('.move_main3').click(function(e) {
            e.stopPropagation();
        })
        $('.move3').click(function() {
            $(this).hide();
        })


        //点击增加
        $("#add").click(function() {
            var num =  parseInt($("#quantity").html());
            var aloowMax = parseInt(max);
            if(num >= aloowMax) {
                alert('名额超出');
            }else {
                numAdd();
                $.ajax({
                    url:"{:url('order/Order/confirm')}",
                    data:{
                        activity_id:'{$data.activity.activity_id}',
                        schedule_id:schedule_id,
                        num:$("#quantity").html()
                    },
                    type:"POST",
                    dataType:"JSON",

                    success: function (data) {
                        $("#down_price").html(data.data.down_price);
                        $("#total").html(data.data.total);
                    }
                })
            }
        });
        $("#del").click(function() {
            numDec();
            $.ajax({
                url:"{:url('order/Order/confirm')}",
                data:{
                    activity_id:'{$data.activity.activity_id}',
                    schedule_id:schedule_id,
                    num:$("#quantity").html()
                },
                type:"POST",
                dataType:"JSON",

                success: function (data) {
                    $("#down_price").html(data.data.down_price);
                    $("#total").html(data.data.total);
                }
            })
        });


        /*商品数量+1*/
        function numAdd() {

            var num_add = parseInt($("#quantity").html()) + 1;
            $("#quantity").html(num_add);
        }
        /*商品数量-1*/
        function numDec() {
            if($("#quantity").html() <= 1) {
                return false;
            }
            var num_dec = parseInt($("#quantity").html()) - 1;
            $("#quantity").html(num_dec);

        }

        //我已同意购买协议和合同协议
        $(".danxuan").click(function() {
            if($('.icon-duigou').css('display') == 'none') {
                $('.icon-duigou').css('display', 'block');
            } else {
                $('.icon-duigou').css('display', 'none');
            }
        });
        $('.sub').click(function() {
            if(is_first == 1) {
                $('.mold').css('display', 'block');
            }else {
                $('.move1').css('display', 'block');
            }


        })

        $(".agreepay").click(function () {
            alert('提交订单');
        })


        $('.dan').click(function() {
            $('.move').css('display', 'block');

        })
        $('#yes').click(function() {
            $('.mold').css('display', 'none');
            if($('.mold').css('display') == 'none') {
                $('.move3').css('display', 'block');
            }
        })
        $('#no').click(function() {
            $('.mold').css('display', 'none');
            if($('.mold').css('display') == 'none') {
                $('.move1').css('display', 'block');
            }
        })

        $('.move_main').click(function(e) {
            e.stopPropagation();
        })
        $('.move_main1').click(function(e) {
            e.stopPropagation();
        })

        $('#sub').click(function() {

        })

        var liangVal = $('.lian2').html();
        var tem = '';
        $('.required span').click(function(e) {

            tem = $(this).html();

            $(this).css('color', 'red');
            $(this).siblings().css('color', '#000');
        });
        $('.call').click(function() {
            $('.lian2').html(liangVal);
        })

        $('.confirm').click(function(e) {
            $('.lian2').html(tem);
            liangVal = tem;
            $('.move').css('display', 'none');

        })
        $('.call').click(function(e) {
            $('.move').css('display', 'none');

        })
        $('.move').click(function(e) {
            $('.move').css('display', 'none');

        })

    })

    $('.pelpe').click(function() {
        $('.mold_out').css('display', 'block');
    })


    var index = 0;
    var num = 0;


    $('.bottom_button').click(function() {
        var inputLength = $('.mold_center').find('img').length;
        for(var i = 0; i < inputLength; i++) {
            if($('.mold_center').find('img').eq(i).attr("src") =="../images/circle1.png") {
                num = num + 1;
                index = i;
            }
        }
        if(num == 0) {
            $('.mold_out').css('display', 'none');
            $("#quantity").html(1);
            $.ajax({
                url:"{:url('order/Order/confirm')}",
                data:{
                    activity_id:'{$data.activity.activity_id}',
                    schedule_id:schedule_id,
                    num:$("#quantity").html()
                },
                type:"POST",
                dataType:"JSON",

                success: function (data) {
                    $(".showcang").html(data.data.choose.time_text);
                    $("#down_price").html(data.data.down_price);
                    $("#total").html(data.data.total);
                    max = data.data.choose.allowMaximum;
                }
            })


        } else {
            $('.showcang').html($('.mold_center').find('span').eq(index).html());
            $('.mold_out').css('display', 'none');
        }
    })
    $('.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');
    })
    $('.dainji').click(function(){
        $('.dainji').css('display', 'none');
        $('.texteare1').focus();
    })
</script>

</body>

</html>