<!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/watero/css/mui.min.css?v=2016111701">
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/iconfont.css?v=2016111701" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/style.css?v=2016111701" />
	<style>
		.head {height: 60px;}
		#head {line-height: 60px;}
		h3{margin-top:5px;margin-bottom: 0;}
		.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;}
		.radio1{background: url(//s.iamberry.com/watero/images/cp-1.jpg) center center /auto 85% no-repeat;}
		.radio2{background: url(//s.iamberry.com/watero/images/cp-2.jpg) center center /auto 85% no-repeat;}
		.radio3{background: url(//s.iamberry.com/watero/images/cp-3.jpg) center center /auto 85% no-repeat;}
		.radio4{background: url(//s.iamberry.com/watero/images/cp-4.jpg) center center /auto 85% no-repeat;}
		.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:1px solid rgba(0,0,0,.1);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 .mui-pull-right{color: #999;font-size: 14px;}
		#btn_submit{color: #fff;padding: 10px 0;font-size: 18px;background: #24cae9;border:0;}
		.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: 20px 10px;background: #24cae9;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;}
		.ul-addres{padding-left: 24px;color: #333;font-size:12px;}
	</style>
	<script>
        // 屏蔽分享
        window.hiddenAllWechatMenu = true;
	</script>
</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">
		<h3>申请试用</h3>
		<span>（仅限山西省）</span>
	</div>
	<div class="mui-content-padded">
		<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="tel" maxlength="11" class="mui-input-clear" placeholder="请输入手机号" id="ipt-phone">
			</div>
			<div class="mui-input-row">
				<label>验证码</label>
				<input type="text" maxlength="4" placeholder="请输入验证码" id="ipt-code">
				<span class="btn-pull-code" id="pull-code">获取验证码</span>
			</div>
			<div style="display: table;width: 100%;padding: 10px 0;">
				<div style="display: table-cell;width: 30%;vertical-align: top;"><span class="iconfont icon-yanse">选择颜色</span></div><div style="display:table-cell;width:70%;text-align: right;">
				<ul class="ul_radio">
					<!-- 							<li class="radio1 active"></li>
                                                    <li class="radio2"></li>
                                                    <li class="radio3"></li>
                                                    <li class="radio4"></li> -->
				</ul>
			</div>
			</div>
			<div>
				<span class="iconfont icon-jiage">商品价格</span><span class="mui-pull-right ft-12"><!-- <s class="mui-h6">原价：¥<span id="productPrice">0</span></s> --><span>试用期内体验价：<span class="try_price">0元</span></span>&nbsp;&nbsp;<span>，<span id="productDiscount" class="try_price">0</span></span></span>
			</div>
		</form>
	</div>
	<ul class="mui-table-view" style="border-top:1px solid rgba(0,0,0,.1);">
		<li class="mui-table-view-cell" style="padding:12px 15px;">
			<a class="mui-navigate-right" id="open-wechat-addres-a">
				<span class="iconfont icon-songhuo">收货信息</span>
				<ul class="ul-addres">
					<!-- <li>收  货  人：林林</li>
                    <li>手 机 号：15999999999</li>
                    <li>详细地址：广东省深圳市福田区莲花街道特区报业大厦12B</li> -->
				</ul>
			</a>
		</li>
	</ul>
	<ul class="mui-table-view my-table-view-try">
		<li style="padding: 10px 0 0 10px;" style="display:none">
			<span class="iconfont icon-youhui" style="display:none">支付优惠</span>
		</li>
		<li class="mui-table-view-cell" style="display:none">
			<img width="100%" src="//s.iamberry.com/watero/images/cp-zeng.jpg" />
		</li>
		<li style="padding: 20px 10px;text-align: center;">
			<span class="iconfont icon-fuxuankuang mui-active" id="btn-tongyi">已阅,并同意<a id="xieyi-dalog">《用户试用协议》</a></span>
			<br /><span>请务必阅读</span>
		</li>
	</ul>

	<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" >申请试用</button>
	</div>
</div>

<script src="//s.iamberry.com/watero/js/mui.min.js"></script>
<script src="//s.iamberry.com/watero/js/jquery-2.1.1.min.js"></script>
<script src="//s.iamberry.com/watero/js/shop/wechat-utils-1.0.js"></script>
<script src="//s.iamberry.com/watero/js/shop/main.js?v=2017021501"></script>
<script type="text/javascript">
    var check = false,alert_msg='';
    var mobile=/^(13|14|15|18)[0-9]{9}$/; //手机号码
    var uname = /^[\u4e00-\u9fa5]{1,12}$/; //中文英文
    var code = /^[0-9]{4}$/; //数字
    mui.ready(function(){
        $.ajax({
            type: 'post',
            url: base_path+'/probation/getUserInfo',
            data: {},
            dataType: 'json',
            timeout: 15000,
            success: function(dt) {
                //console.log(dt);
                if(dt==2){
                    $.ajax({
                        type: 'post',
                        url: base_path+'/probation/getProductList',
                        data: {},
                        dataType: 'json',
                        timeout: 15000,
                        success: function(dt) {
                            if(dt.status) {
                                //console.log(dt.data[0]);
                                var str='';
                                mui(dt.data[0].colorList).each(function(index) {
                                    if(index==0){
                                        //$("#productPrice").text(accDiv(this.productPrice, 100));
                                        //console.log(this.colorList[0].colorDiscount)
                                        $("#productDiscount").text("试用价¥"+accDiv(this.colorDiscount, 100));
                                        str+='<li id="'+this.colorProductId+'" productPrice="'+accDiv(this.colorPrice, 100)+'" productDiscount="'+accDiv(this.colorDiscount, 100)+'" class="radio'+(index+1)+' active" colorid="'+(index+1)+'"></li>'
                                    }else{
                                        str+='<li id="'+this.colorProductId+'" productPrice="'+accDiv(this.colorPrice, 100)+'" productDiscount="'+accDiv(this.colorDiscount, 100)+'" class="radio'+(index+1)+'" colorid="'+(index+1)+'"></li>'
                                    }
                                });
                                $(".ul_radio").html(str);
                                $(".ul_radio li").each(function() {
                                    $(this).on("click", function() {
                                        $(this).addClass("active");
                                        //$("#productPrice").text($(this).attr("productPrice"));
                                        $("#productDiscount").text("试用价¥"+$(this).attr("productDiscount"));
                                        $(this).siblings().removeClass("active");
                                    });
                                });
                                //console.log("页面加载完毕")
                                document.querySelector('.loading-bg').style.display='none';
                            } else {
                                mui.alert(dt.message);
                            }
                        },
                        error: function(xhr, type, errorThrown) {
                            //异常处理；
                            console.log(xhr);
                            mui.alert("请检查网络或刷新页面重试！");
                        }
                    });
                }else if(dt==0){
                    mui.alert("请先关注\"watero\"水时代", '', function() {
                        mui.openWindow({url: base_path+'/index'});
                    });
                }else{
                    mui.alert("您暂时还不能参与本次活动，详情请咨询watero微信商城客服", '', function() {
                        mui.openWindow({url: base_path+'/index'});
                    });
                }
            },
            error: function(xhr, type, errorThrown) {
                //异常处理；
                console.log(xhr);
                mui.alert("请检查网络或刷新页面重试！");
            }
        });
    });
    mui('body').on('tap', '#btn_submit', function() {
        //console.log($(".ul_radio .active").attr("colorid"));
        var th=this;
        change_input();
        if(check){
            mui(th).button('loading');
            var param = {
                "puserName": $("#ipt-name").val(),
                "puserTel": $("#ipt-phone").val(),
                "puserProductid": $(".ul_radio .active").attr("id"),
                "puserNickName":nickname ,
                "puser": ads_tel,
                "puserAddress": address,
                "colorId":$(".ul_radio .active").attr("colorid"),
            };

            $.ajax({
                type: 'get',
                url: base_path+'/probationOrder/validation_code',
                data: {"phone":$("#ipt-phone").val().trim(),"code":$("#ipt-code").val().trim(),"colorId":$(".ul_radio .active").attr("colorid")},
                dataType: 'json',
                timeout: 15000,
                success: function(dt) {
                    //console.log(dt);
                    if(dt.returnCode==200) {
                        $.ajax({
                            type: 'post',
                            url: base_path+'/probationOrder/addProbationOrder',
                            data: param,
                            dataType: 'json',
                            timeout: 15000,
                            success: function(dt) {
                                //console.log(dt);
                                if(dt.status) {
                                    mui.alert("本批watero试用机为新机，请您在试用过程中足够爱惜，切勿刮划机身及损坏包装，感谢您的配合！", '', function() {
                                        mui.openWindow({url: base_path+'/agentWechat/member'})
                                    });
                                } else {
                                    mui(th).button('reset');
                                    mui.alert(dt.message);
                                }
                            },
                            error: function(xhr, type, errorThrown) {
                                //异常处理；
                                console.log(xhr);
                                mui.alert("请检查网络或刷新页面重试！");
                                mui(th).button('reset');
                            }
                        });
                    }else{
                        mui(th).button('reset');
                        mui.alert(dt.returnMsg.returnMsg);
                    }
                },
                error: function(xhr, type, errorThrown) {
                    //异常处理；
                    mui(th).button('reset');
                    console.log(xhr);
                    mui.alert("请检查网络或刷新页面重试！");
                }
            });
        }else{
            //console.log("未通过");
            mui.alert(alert_msg);
        }
    });
    mui('body').on('tap', '#xieyi-dalog', function() {
        mui.openWindow({
            url:base_path+ '/probation/try_agreement'
        });
    });
    $(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")){
                    return;
                }else{
                    $(this).addClass("mui-active");
                    settime("pull-code");
                    getConfig();
                    $.ajax({
                        type: 'get',
                        url: base_path+'/probationOrder/send_code',
                        data: {"phone":$("#ipt-phone").val().trim()},
                        dataType: 'json',
                        timeout: 15000,
                        success: function(dt) {
                            //console.log(dt);
                            if(dt.returnCode==1) {
                                countdown=1;
                                mui.alert("该手机号码已经申请过，请勿重复提交！");
                            }else if(dt.returnCode==2){
                                countdown=1;
                                mui.alert("您使用的手机号码是空号");
                            }else if(dt.returnCode==500){
                                mui.alert(dt.returnMsg.returnMsg);
                            }
                        },
                        error: function(xhr, type, errorThrown) {
                            //异常处理；
                            console.log(xhr);
                            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() {
        $(".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-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;
            }
        });
        if(check) {
            if(address==''){
                alert_msg="请选择送货信息";
                check=false;
                return false;
            }else{
                check=true;
            }
            if($("#btn-tongyi").hasClass("mui-active")){
                alert_msg="请勾选同意试用协议";
                check=false;
                return false;
            }else{
                check=true;
            }
        }

		/* 	if(check) {
		 console.log("通过")
		 } else {
		 console.log(alert_msg);
		 } */
    }

    var address='',nickname='',ads_tel='';
    // 获取微信共享地址
    mui('body').on('tap', '#open-wechat-addres-a', function() {
        editAddrV1(
            function(res) {
                if(res.provinceName!="山西省"){
                    address='';
                    $(".ul-addres").empty();
                    mui.alert("本活动仅限山西省用户");
                }else{
                    // 用户成功拉出地址
                    address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
                    wechatAddr.status = true;
                    wechatAddr.detailInfo = address;
                    wechatAddr.postalCode = res.postalCode;
                    wechatAddr.userName = res.userName;
                    wechatAddr.userTel = res.telNumber;
                    wechatAddr.nationalCode = res.nationalCode;
                    nickname=res.userName;
                    ads_tel=res.telNumber;
                    $(".ul-addres").empty().append("<li>收货人：" + wechatAddr.userName + "</li><li>手 机 号：" + wechatAddr.userTel + "</li>" +"<li>详细地址：" + address + "</li>");
                }
            },
            function() {
                if(address != '') {
                    wechatAddr.status = true;
                } else {
                    wechatAddr.status = false;
                    // 用户取消拉出地址
                    mui.alert("您没有选择收货地址!");
                }
            }
        );

    });
</script>
</body>
</html>
