weilaibike
/
weilaibike-h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>未来bike-全省寻找城市合伙人</title>
    <style>
        html,
        body {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100%;
            height: 100%;
            /* background: #05E5C7; */
            background-image: url('http://resource.weilaibike.com/H5/H5_background.png');
            background-size: 100% 100%;
            margin: 0;
            padding: 0;
            padding-bottom: 50px !important;
        }

        .one {
            width: 100%;
        }

        .date {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .bottom_back {
            width: 100%;
            height: 30px;
            background: #05E5C7;
        }

        .bottom {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #05E5C7;
        }

        .bottom .div {
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* height:547px; */
            background: rgba(255, 255, 255, 1);
            border-radius: 10px;
            padding-bottom: 26px;
            padding-top: 19px;
        }

        .bike {
            width: 262.5px;
            height: 38px;
            border: 1px solid rgba(229, 229, 229, 1);
            font-size: 16px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-appearance: none;
        }

        .bottom .div div {
            display: flex;
            flex-direction: column;
            padding-top: 20px;
            width: 80%;
        }

        .bottom .div div span {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(62, 59, 63, 1);
        }

        .bottom .div .check {
            width: 80%;
        }

        .bottom .div .check p {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(62, 59, 63, 1);
            margin: 8px 0px;
        }

        .bottom .div .radio {
            display: flex;
            align-items: center;
            flex-direction: row;
            width: 80%;
        }

        .bottom .div .radio span {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(62, 59, 63, 1);
        }

        .bottom .div .btn1 {
            width: 80%;
            height: 39px;
            background: linear-gradient(0deg, rgba(24, 213, 185, 1) 0%, rgba(89, 240, 202, 1) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 0px !important;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            border: none !important;
            margin-top: 23px;
        }

        .bottom_phone {
            margin: 0;
            padding: 0;
            position: fixed;
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            bottom: 0px;
            left: 0px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: white;
            background: linear-gradient(266deg, rgba(255, 150, 93, 1) 0%, rgba(255, 81, 77, 1) 100%);
        }

        a {
            text-decoration: none;
            color: white;
        }

        /*正常的未被访问过的链接*/
        a:link {
            text-decoration: none;
            color: white;
        }

        /*已经访问过的链接*/
        a:visited {
            text-decoration: none;
            color: white;
        }

        /*鼠标划过(停留)的链接*/
        a:hover {
            text-decoration: none;
            color: white;
        }

        /* 正在点击的链接*/
        a:active {
            text-decoration: none;
            color: white;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="app">
            <div class="date">
                <img src="http://resource.weilaibike.com/H5/H5_one.png" alt="" class="one">
                <img src="http://resource.weilaibike.com/H5/five.jpg" alt="" class="one">
                <img src="http://resource.weilaibike.com/H5/six.jpg" alt="" class="one">
                <!-- <img src="http://resource.weilaibike.com/H5/H5_four1.png" alt="" class="one"> -->
                <div class="bottom">
                    <div class="div">
                        <div>
                            <span style="padding-bottom: 7px;">姓名（方便称呼）<span style="color:red;">*</span></span>
                            <input class="bike name" />
                        </div>
                        <div>
                            <span style="padding-bottom: 7px;">电话（方便联系您）<span style="color:red;">*</span></span>
                            <input class="bike phone" />
                        </div>
                        <div class="check">
                            <span>您还想要了解什么问题（多选）<span style="color: red;">*</span></span>
                            <p class="p1 p"><input type="checkbox" name="怎么投资加盟？" /><label>怎么投资加盟？</label></p>
                            <p class="p2 p"><input type="checkbox" name="这个项目的利润是怎么样的？" /><label>这个项目的利润是怎么样的？</label>
                            </p>
                            <p class="p3 p"><input type="checkbox" name="想了解关于车辆使用的问题？" /><label>想了解关于车辆使用的问题？</label>
                            </p>
                            <p class="p4 p"><input type="checkbox"name="关于车辆押金和骑行费用的问题？" /><label>关于车辆押金和骑行费用的问题？</label>
                            </p>
                        </div>
                        <div>
                            <span style="padding-bottom: 7px;">您还有什么疑问吗？</span>
                            <input class="bike remark">
                        </div>
                        <!-- <div class="radio">
                            <input type="checkbox" name="item">
                            <span>输入历史手机号</span>
                            <span style="color: #02B89B;">《个人信息授权与保护声明》</span>
                        </div> -->
                        <div class="btn1">
                            <span style="color:rgba(255,255,255,1);">免费获取加盟利润资料</span>
                        </div>
                    </div>
                </div>
                <div class="bottom_back"></div>
                <div class="bottom_phone">
                    <img src="http://resource.weilaibike.com/H5/phone1.png" alt="" style="width: 24px;height: 24px;">
                    <a href="tel:15981810505">拨打电话</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        $(".p").click(function () {
            if ($(this).children("input").is(':checked')) {
                $(this).children("input").prop("checked", false);
            } else {
                $(this).children("input").prop("checked", true);
            }
        });
        $(".radio").click(function () {
            if ($(this).children("input").is(':checked')) {
                $(this).children("input").prop("checked", false);
            } else {
                $(this).children("input").prop("checked", true);
            }
        });
        $(".bike").blur(function () {
            var height = $('.bike').offset().top
            $("html,body").animate({ scrollTop: height }, 500);
        })
        $(".btn1").click(function () {
            var name = $(".name").val();
            var phone = $(".phone").val();
            var remark = $(".remark").val();
            var p1 = $('.p1').children("input").is(":checked");
            var p2 = $('.p2').children("input").is(":checked");
            var p3 = $('.p3').children("input").is(":checked");
            var p4 = $('.p4').children("input").is(":checked");
            var reg1 = /^[\u4E00-\u9FA5]{2,4}$/;
            var arr = []
            if (p1) {
                arr = arr.concat($('.p1').children("input").prevObject[0].innerText)
            }
            if (p2) {
                arr = arr.concat($('.p2').children("input").prevObject[0].innerText)
            }
            if (p3) {
                arr = arr.concat($('.p3').children("input").prevObject[0].innerText)
            }
            if (p4) {
                arr = arr.concat($('.p4').children("input").prevObject[0].innerText)
            }
            console.log(arr)
            if (!reg1.test(name)) {
                alert('请输入正确的姓名')
                return;
            } else if (phone.length != 11) {
                alert('请输入正确的电话')
                return;
            } else if (arr == '') {
                alert('请选择要了解的问题')
                return;
            } else {
                $.ajax({
                    url: 'https://api.weilaibike.dev.hanyiyun.com/api/h5/business',
                    method: 'POST',
                    data: {
                        'name': name,
                        'mobile': phone,
                        'question': arr,
                        'remark': remark
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            alert('申请成功')
                        }
                        if (res.status_code == 422 || res.status_code == 500) {
                            alert('失败，请重试~')
                        }
                    },
                    fail: function () {
                    }
                })
            }
        })
        $(".clear").click(function () {
            $('.bike').val('');
            $('#demo1').val('');
            $('#demo2').val('');
        })
    </script>
</body>

</html>