xiaona.liu
/
signUp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>共叙北斗情</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #F4E5D3;
        }
        .item{
            margin-bottom: 14px;
            width: 100%;
        }
        .text{
            font-size: 15px;
            color: #000;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            margin-left: 4px;
        }
        .star{
            color: red;
            font-size: 12px;
            margin-right: 4px;
        }
        .ipt{
            display: flex;
            width: 100%;
            height: 50px;
            background: #FFFFFF;
            border-radius: 6px;
        }
        .dateIpt{
            box-sizing: border-box;
            width: 100%;
            height: 50px;
            font-size: 16px;
            border: none!important;
            padding: 14px 16px;
            background: #fff;
        }

        input::-webkit-input-placeholder{
            color:#999;
            font-size: 16px;
        }
        input[type=text]:focus{ outline: none!important;}
        input[type=number]:focus{ outline: none!important;}


        #submitBox{
            margin-top: 13px;
            padding: 10px;
        }
        #submitBtn{
            text-align: center;
            margin: 0 auto;
            width: 255px;
            height: 54px;
            line-height: 54px;
            background: #C13E2A;
            border-radius: 6px;
            color: #fff;
            font-size: 18px;
        }
        #maskBox {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
            text-align: center;
            font-size: 14px;
            color: #fff;
            padding-top: 60%;
            display: none;
        }
        #tips{
            color: red;
            font-size: 12px;
            text-align: center;
            display: none;
            margin-bottom: 4px;
        }

        .imgCon{
            height: 280px;
        }
        #echoBox{
            color: #000;
            font-size: 16px;
            padding: 30px 0;
            display: none;
        }
        .flex{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .infoImg{
            width: 34px;
            height: 34px;
            border-radius: 50%;
            margin-right: 6px;
        }
        #tipsText{
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="maskBox">加载中...</div>
    <div class="pageCon ">
        <div class="imgCon"><img src="https://lh-yhq.oss-cn-beijing.aliyuncs.com/image/bcg.png" alt="" style="width: 100%;height: 100%"></div>

        <!--   提交后的提示框     -->
        <div id="echoBox">
            <div class="flex">
                <img class="infoImg" src="./info.png" alt="">
                <div id="tipsText">提交成功！</div>
            </div>
        </div>

        <!--   form框     -->
        <div id="submitBox">
            <div class="item">
                <div class="text"><span class="star">*</span>姓名</div>
                <div class="ipt">
                    <input class="dateIpt" type="text" name="firstName" id="firstName" placeholder="请输入姓名">
                </div>
            </div>
            <div class="item">
                <div class="text"><span class="star">*</span>手机号</div>
                <div class="ipt">
                    <input class="dateIpt" type="number" name="phone" id="phone" placeholder="请输入手机号">
                </div>
            </div>
            <div class="item">
                <div class="text"><span class="star">*</span>抵京时间</div>
                <div class="ipt">
                    <input readonly class="dateIpt" type="text"  id="startTime"  name="startTime" placeholder="请选择"/>
                </div>
            </div>
            <div class="item">
                <div class="text">抵京航班/高铁班次</div>
                <div class="ipt">
                    <input class="dateIpt" type="text" id="enterShift" name="enterShift" placeholder="请输入航班号 例：航班CA1230/高铁G12">
                </div>
            </div>
            <div class="item">
                <div class="text"><span class="star">*</span>离京时间</div>
                <div class="ipt">
                    <input readonly class="dateIpt" type="text"  id="endTime"  name="endTime" placeholder="请选择"/>
                </div>
            </div>
            <div class="item">
                <div class="text">离京航班/高铁班次</div>
                <div class="ipt">
                    <input class="dateIpt" type="text" id="leaveShift" name="leaveShift" placeholder="请输入航班号 例： 航班CA1230/高铁G12">
                </div>
            </div>
            <div class="item">
                <div class="text">服装尺寸</div>
                <div class="ipt">
                    <input class="dateIpt" type="text" id="garmentSize" name="garmentSize" placeholder="请输入服装尺寸 例：女S/男XXL">
                </div>
            </div>

            <div style="margin: 58px 0">
                <div id="tips">* 姓名、手机号、进、离京时间为必填项哟！</div>
                <div id="submitBtn">提交</div>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./rolldate.js"></script>
<script type="text/javascript" src="./md5.js"></script>
<script type="text/javascript">
    // 日期插件
    window.onload = function () {
        new Rolldate({
            el: '#startTime',
            format: 'YYYY-MM-DD hh:mm',
            beginYear: 2023,
            endYear: 2023,
            theme: "#F4E5D3",
        })
        new Rolldate({
            el: '#endTime',
            format: 'YYYY-MM-DD hh:mm',
            beginYear: 2023,
            endYear: 2023,
            theme: "#F4E5D3",
        })
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var startTime = $("#startTime");
        var enterShift = $("#enterShift");
        var endTime = $("#endTime");
        var leaveShift = $("#leaveShift");
        var firstName = $("#firstName");
        var phone = $("#phone");
        var garmentSize = $("#garmentSize");

        //使用js代码实现类似php的ksort方法 ---- 按键排序
        function ksort(o) {
            var sorted = {},
                keys = Object.keys(o);
            keys.sort();
            keys.forEach((key) => {
                sorted[key] = o[key];
            })
            return sorted;
        }


        //点击事件
        $("#submitBtn").click(function(){
            //为空提示
            if(!firstName.val() || !phone.val() || !startTime.val() || !endTime.val()){
                $("#tips").show()
                return
            }

            // 提示隐藏
            $("#tips").hide()
            //遮罩显示
            $("#maskBox").show()

            //验签
            var dataParams = {
                name:firstName.val(),
                phone:phone.val(),
                arrive_at:startTime.val()+':00',
                leave_at:endTime.val()+':00',
                arrive_flight:enterShift.val(),
                leave_flight:leaveShift.val(),
                cloth_size:garmentSize.val(),
            }
            var ksort_data = ksort(dataParams);
            var str = '';
            for (let i in ksort_data) {
                let str_data = Array.isArray(ksort_data[i]) ? JSON.stringify(ksort_data[i]) : (ksort_data[i] || ksort_data[i] == 0 ? ksort_data[i] : '')
                str = str + i + '=' + str_data;
            }
            //验签结束

            $.ajax({
                url: 'https://kx.wenxingshuju.com/api/kx/signRecords',
                type: 'post', // 请求方式
                async: true,
                data: Object.assign({ sign: md5(md5(str) + 'ur904wtr5pfctaw5') }, ksort_data),
                contentType: 'application/x-www-form-urlencoded',
                dataType: 'json',
                success: function (res) {
                    //遮罩隐藏
                    $("#maskBox").hide()
                    $("#submitBox").hide()
                    $("#echoBox").show()
                    $("#tipsText").text(res.msg);

                },
                error: function(err) {
                    //遮罩隐藏
                    $("#maskBox").hide()
                    $("#submitBox").hide()
                    $("#echoBox").show()
                    $("#tipsText").text(err);
                }
            })
        });

    })
</script>
</html>