hexiugang
/
iamberry-common-parent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
							<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>领取质保卡</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/mui.min.css?v=2017092601" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/mui.picker.min.css?v=2017092601" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/iconfont.css?v=2017092601" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/css/style.css?v=2017092601" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/wateroPF/new/css/personal_information.css?v=2017092601" />
	<style>
		h4{margin-top:5px;margin-bottom: 5px;font-size: 20px;}
		.btn-pull-code{position: absolute;right: 10px;top:7px;height:34px;padding:0 6px;border-radius: 5px; line-height: 34px;font-size: 12px; color: #fff; background: #24cae9;}
		.btn-pull-code .active{background: #c8c8c8;}
		.icon-fuxuankuang a{color: #24cae9;}
		.icon-yanse,.icon-youhui,.icon-fuxuankuang,.icon-jiage,.icon-songhuo{font-size: 15px;padding-left: 22px;}
		.icon-yanse:before,.icon-fuxuankuang:before,.icon-youhui:before,.icon-jiage:before,.icon-songhuo:before{font-size: 18px;color: #24cae9;position: absolute;left: 0;width: 20px;height: 18px;}
		.try_price{color: #f1436c;}
		.ul_radio{width: 100%;}
		.ul_radio li{width:21%;height: 55px;margin: 0 1%;border: 1px solid rgba(0,0,0,.1);border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
		.ul_radio .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}

		.head-img {position: absolute;bottom: 15px;right: 13px;width: 60px;height: 60px;border-radius: 30px;border: 3px solid #E5E5E5;}
		.mui-table-view .mui-media .mui-media-body{height: 41px;line-height: 41px;color: #333;}
		.mui-table-view .mui-media .mui-media-body>span{color: #f1436c;}
		.my-table-view-try{border-top: .6em solid #f0f0f0;border-bottom: .6em solid #f0f0f0;padding-bottom: 10px;}
		.my-table-view-try .mui-table-view-cell{padding:10px 13px 10px 30px !important;font-size: 12px;}
		.mui-table-view-cell:after,.mui-table-view:before,.mui-table-view:after,.mui-input-group .mui-input-row:after,.mui-input-group:before,.mui-input-group:after{display: none;}
		.mui-table-view-cell>a:not(.mui-btn){color: #666;margin: -15px -15px;}
		.mui-table-view-cell>a .mui-pull-right{color: #999;font-size: 14px;}
		#btn_submit{color: #fff;padding: 10px 0;font-size: 18px;background: #24cae9;width: 70%;margin:40px auto 0 auto;}
		.mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
		.icon-fuxuankuang.mui-active:before{color: #c8c8c8;}
		.mui-content-padded{margin: 10px 13px;}
		.tips{padding: 25px 10px;background: #36a4c6;text-align: center;color: #fff;}
		.mui-input-group .mui-input-row {height: 50px;padding: 5px 0;border: 1px solid rgba(0,0,0,.1); margin:10px 0;}
		.mui-input-row label{color: #666;width:27%;font-size: 15px;}
		.mui-input-row label~input{width:73%;}
		.mui-input-row label~input::-webkit-input-placeholder{font-size: 15px;}
		.triangle-down {width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;}
		.my-arrowright{position: absolute;right: 18px;top: 28px;color: #666;pointer-events:none;}
		.mui-btn-red{background-color: #e9004c;}
		.icon-saoma{position: absolute;right: 0;top:0;padding: 12px;color: #55c0dc;}
		.mui-icon-arrowdown{position: absolute;right: 0;top:0;padding: 12px;color: #999;pointer-events: none;}
	</style>
</head>
<body style="background: #fff;">
<div class="loading-bg">
	<div class="mui-loading">
		<div class="mui-spinner">
		</div>
		&nbsp;&nbsp;加载中...
	</div>
</div>

<div class="mui-content" style="background: #fff;">
	<div class="tips more">
		<h4>现在完善机器信息！</h4>
		<span>尊享WaterO全面服务保障</span>
		<div></div>
	</div>
	<div class="mui-content-padded">
		<div><span class="iconfont icon-dingwei" style="color: #f00;"></span>地址：<span id="wx-ads"></span></div>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>姓名</label>
				<input type="text" maxlength="12" class="mui-input-clear" placeholder="请填写您的姓名" id="ipt-name">
			</div>
			<div class="mui-input-row">
				<label>邮箱</label>
				<input type="text" maxlength="32" class="mui-input-clear" placeholder="请填写您的邮箱" id="ipt-email">
			</div>
			<div class="mui-input-row">
				<label>水质</label>
				<input type="text"  placeholder="请选择您的水质范围" id="ipt-water" txtvalue="" readonly="readonly">
			</div>
			<div class="mui-input-row">
				<label>手机号</label>
				<input type="tel" maxlength="11" class="mui-input-clear" placeholder="请填写物流发货时预留的手机号" id="ipt-phone">
			</div>
			<div class="mui-input-row">
				<label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
				<input type="text" maxlength="4" placeholder="请输入验证码" id="ipt-code">
				<span class="btn-pull-code" id="pull-code">获取验证码</span>
			</div>
			<div id="div_message" style="display: none;">
				<label style="color: red;"><b>*注意：</b><label id="txt_message">请填写与您物流信息相符的联系电话，否则将会无法识别您的产品信息</label></label>
			</div>

		</form>
	</div>
	<div class="mui-content-padded">
		<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-outlined mui-active" id="btn_submit" disabled="disabled" >提交</button>
	</div>
</div>

<script src="//s.iamberry.com/wateroPF/js/mui.min.js?v=2016101701"></script>
<script src="//s.iamberry.com/wateroPF/js/mui.picker.min.js"></script>
<script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
<script src="//s.iamberry.com/wateroPF/js/shop/main.js?v=2016101701"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="//s.iamberry.com/wateroPF/js/shop/wechat-utils-1.0.js"></script>
<script type="text/javascript">

    var check = false,alert_msg='';
    var mobile=/^(13|14|15|18)[0-9]{9}$/; //手机号码
    var uname = /^[\u4e00-\u9fa5a-zA-Z]{1,12}$/; //中文英文
    var email=/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,18}$/;
    var code = /^[0-9]{4}$/; //数字
    var numberProvince = null;
    var numberCity = null;
    var numberDistrict = null;
    mui.ready(function(){
        //选择示例
        var userPicker = new mui.PopPicker();
        userPicker.setData([{
            value: '1',
            text: '0-100 TDS'
        }, {
            value: '2',
            text: '101-250 TDS'
        }, {
            value: '3',
            text: '251-500 TDS'
        }, {
            value: '4',
            text: '501 TDS 以上 '
        }]);
        var showUserPickerButton = document.getElementById('ipt-water');
        showUserPickerButton.addEventListener('tap', function(event) {
            userPicker.show(function(items) {
                document.getElementById('ipt-water').value = items[0].text;
                $('#ipt-water').attr('txtvalue',items[0].value);
                var txt_message = '';
                switch (items[0].value) {
                    case '1':
                        txt_message = '您家水质良好。';
                        break;
                    case '2':
                        txt_message = '您家水质偏差，WaterO可彻底净化，请使用柠檬酸每3个月清洗。';
                        break;
                    case '3':
                        txt_message = '您家水质较差，WaterO可彻底净化，请使用柠檬酸每2个月清洗。';
                        break;
                    case '4':
                        txt_message = '您家水质很差，WaterO可彻底净化，请使用柠檬酸每1个月清洗。';
                        break;
                }
                $('#txt_message').html(txt_message);
                $('#div_message').show();
            });
        }, false);
        document.querySelector('.loading-bg').style.display='none';
    });

    wx.ready(function () {
        // 7.2 获取当前地理位置
        wx.getLocation({
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                getlocation(latitude,longitude);
            },
            cancel: function (res) {
                $("#wx-ads").text('定位失败');
            }
        });
    });

    function getlocation(latitude,longitude){
        var data_array = {
            "latitude":latitude,
			"longitude":longitude
        };
        $.ajax({
            type: 'get',
            url: base_path + '/qrcode/get_location_by_qq',
			data:data_array,
            dataType: 'json',
            timeout: 15000,
            success: function(dt) {
                if(dt.status){
                    numberProvince = dt.data.numberProvince;
                    numberCity = dt.data.numberCity;
                    numberDistrict = dt.data.numberDistrict;
                    $("#wx-ads").text(numberProvince+"-"+numberCity+"-"+numberDistrict);
                }
            },
            error: function(xhr, type, errorThrown) {
                console.log("请检查网络或刷新页面重试！");
            }
        });
    }
    mui('body').on('tap', '#btn_submit', function() {
        change_input();
        if(check){
            console.log("提交");
            mui(this).button('loading');
            setTimeout(function() {
                mui(this).button('reset');
            }.bind(this), 2000);
            //mui.alert("本批watero试用机为新机，请您在试用过程中足够爱惜，切勿刮划机身及损坏包装，感谢您的配合！");
            var data_array = {
                "userTel":$('#ipt-phone').val()
            };
            $.ajax({
                type: 'post',
                url: base_path + '/qrcode/select_efast_order_num',
                data:data_array,
                dataType: 'json',
                timeout: 15000,
                success: function(dt) {
                    if (dt.status) {
                        var num = dt.data.num;
                        var txtTime = dt.data.txtTime;
                        var text = '';
                        if (dt.data.num > 0) {
                            text = '您有'+ dt.data.num + '个订单，是否确认领取质保卡？';
                        } else {
                            mui.alert('未搜索到订单，请确认后提交，如有疑问，请联系公众号客服!');
                            return;
                        }
                        var btnArray = ['否', '是'];
                        mui.confirm(text, '提示', btnArray, function(e) {
                            if (e.index == 1) {
                                var data_all = {
                                    "phoneCode":$('#ipt-code').val(),
                                    "userName":$('#ipt-name').val(),
                                    "userTel":$('#ipt-phone').val(),
                                    "userEmail":$('#ipt-email').val(),
                                    "numberWatero":$('#ipt-water').attr('txtvalue'),
                                    "numberProvince":numberProvince,
                                    "numberCity":numberCity,
                                    "numberDistrict":numberDistrict,
                                    "txtTime":txtTime
                                };
                                $.ajax({
                                    type: 'post',
                                    url: base_path + '/qrcode/add_warranty_card',
                                    data:data_all,
                                    dataType: 'json',
                                    timeout: 15000,
                                    success: function(dt) {
                                        if (dt.status) {
                                            mui.openWindow({
                                                url: '/wateroPF/view/warranty_card.html'
                                            })
                                        } else {
                                            mui.alert(dt.message);
                                        }
                                    },
                                    error: function(xhr, type, errorThrown) {
                                        mui.alert("请检查网络或刷新页面重试！");
                                    }
                                });
                            }
                        });
                    } else {
                        mui.alert(dt.message);
                    }
                },
                error: function(xhr, type, errorThrown) {
                    mui.alert("请检查网络或刷新页面重试！");
                }
            });
        }else{
            console.log("未通过");
            mui.alert(alert_msg);
        }
    });
    mui('body').on('tap', '#xieyi-dalog', function() {
        mui.openWindow({
            url: 'try_xieyi.html'
        });
    });
    $(".ul_radio li").each(function() {
        $(this).on("click", function() {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
        });
    });
    $(document).on('tap', '#btn-tongyi', function() {
        var btn_submit=$("#btn_submit");
        console.log($(this).hasClass("mui-active"));
        if($(this).hasClass("mui-active")){
            $(this).removeClass("mui-active");
            btn_submit.removeClass("mui-active");
        }else{
            $(this).addClass("mui-active");
            btn_submit.addClass("mui-active");
        }
    });
    $(document).on('tap', '#pull-code', function() {
        if($("#ipt-phone").val().trim()=="" &&(!$("#pull-code").hasClass("mui-active"))){
            mui.alert("请填写手机号码");
            return;
        }else{
            if(!mobile.test($("#ipt-phone").val().trim())){
                mui.alert("手机号码不正确，请重新填写");
                return;
            }else{
                if($(this).hasClass("mui-active")){
                    mui.alert();
                    return;
                }else{
                    $(this).addClass("mui-active");
                    $('#btn_submit').removeClass("mui-active");
                    $('#btn_submit').removeAttr("disabled");
                    settime("pull-code");
                    $.ajax({
                        type: 'post',
                        url: base_path + '/qrcode/send_phone_code',
                        data:{
                            "phone" : $("#ipt-phone").val()
                        },
                        dataType: 'json',
                        timeout: 15000,
                        success: function(dt) {
                        },
                        error: function(xhr, type, errorThrown) {
                            mui.alert("请检查网络或刷新页面重试！");
                        }
                    });
                }
            }
        }
    });
    var countdown=60;
    function settime(val) {
        pullid=dc(val);
        if (countdown == 0) {
            pullid.removeAttribute("disabled");
            pullid.className='btn-pull-code';
            pullid.innerText="获取验证码";
            countdown = 60;
            return false;
        } else {
            pullid.setAttribute("disabled", true);
            pullid.className='btn-pull-code mui-active';
            pullid.innerText="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
            settime(val)
        },1000)
    }
    function change_input() {
        //活动暂时结束   下次开启时注释这段代码就好了
		/*alert_msg="活动已暂停，开始时间请联系客服";
		 check=false;
		 return false;*/


        $(".mui-input-group input").each(function(index) {
            switch ($(this).attr("id")){
                case "ipt-name":
                    if($(this).val().trim()==""){
                        alert_msg="请填写姓名";
                        check=false;
                        return false;
                    }else{
                        if(uname.test($(this).val())) {
                            check=true;
                        }else{
                            alert_msg="姓名格式不正确，请重新填写";
                            check=false;
                            return false;
                        }
                    }
                    break;
                case "ipt-email":
                    if($(this).val().trim()==""){
                        alert_msg="请填写您的邮箱";
                        check=false;
                        return false;
                    }else{
                        if(email.test($(this).val())) {
                            check=true;
                        }else{
                            alert_msg="邮箱格式不正确，请重新填写";
                            check=false;
                            return false;
                        }
                    }
                    break;
                case "ipt-phone":
                    if($(this).val().trim()==""){
                        alert_msg="请填写手机号";
                        check=false;
                        return false;
                    }else{
                        if(mobile.test($(this).val().trim())) {
                            check=true;
                        }else{
                            alert_msg="手机号码不正确，请重新填写";
                            check=false;
                            return false;
                        }
                    }
                    break;
                case "ipt-code":
                    if($(this).val().trim()==""){
                        alert_msg="请填写验证码";
                        check=false;
                        return false;
                    }else{
                        if(code.test($(this).val().trim())) {
                            check=true;
                        }else{
                            alert_msg="验证码格式不正确，请重新填写";
                            check=false;
                            return false;
                        }
                    }
                    break;
                default:
                    break;
            }
        });
        var btn_submit = dc('btn_submit');
        if(check) {
            console.log("通过")
        } else {
            console.log(alert_msg);
        }
    }


    var flag = false;
    var mask = mui.createMask(function() {
        return flag;
    }); //callback为用户点击蒙版时自动执行的回调；
    mui('body').on('tap', '#ipt-date', function() {
        var th = this;
        var picker = new mui.DtPicker({
            type: "date", //设置日历初始视图模式
            beginDate: new Date(2016, 7, 1), //设置开始日期
            endDate: new Date() //设置结束日期
        });
        console.log(picker)
        picker.show(function(rs) {
            th.value = rs.text;
            picker.dispose();
        });
    });
</script>
</body>
</html>