| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492 | <!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="css/mui.min.css">	<link rel="stylesheet" type="text/css" href="css/iconfont.css" />	<link rel="stylesheet" type="text/css" href="css/style.css" />	<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(images/cp-1.jpg) center center /auto 85% no-repeat;}		.radio2{background: url(images/cp-2.jpg) center center /auto 85% no-repeat;}		.radio3{background: url(images/cp-3.jpg) center center /auto 85% no-repeat;}		.radio4{background: url(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>		  加载中...	</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>  <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="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="js/mui.min.js"></script><script src="js/jquery-2.1.1.min.js"></script><script src="js/main.js"></script><script src="js/page/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-\u9fa5]{1,12}$/; //中文英文    var code = /^[0-9]{4}$/; //数字    mui.ready(function(){        $.ajax({            type: 'post',            url: base_path+'/probation/getUserInfo',            data: {},            dataType: 'json',            timeout: 15000,            xhrFields: {				withCredentials: true			},			crossDomain: true,            success: function(dt) {                //console.log(dt);                if(dt==2){                    $.ajax({                        type: 'post',                        url: base_path+'/probation/getProductList',                        data: {},                        dataType: 'json',                        timeout: 15000,                        xhrFields: {                        	withCredentials: true                        },                        crossDomain: true,                        success: function(dt) {                        	if (dt.isRedirect) {                        		location.href = dt.redirectURL;                        	} else {                            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:'/index.html'});                    });                }else{                    mui.alert("您暂时还不能参与本次活动,详情请咨询watero微信商城客服", '', function() {                        mui.openWindow({url:'/index.html'});                    });                }            },            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,                            xhrFields: {                            	withCredentials: true                            },                            crossDomain: true,                            success: function(dt) {                            	if (dt.isRedirect) {                            		location.href = dt.redirectURL;                            	} else {                                //console.log(dt);                                if(dt.status) {                                    mui.alert("本批watero试用机为新机,请您在试用过程中足够爱惜,切勿刮划机身及损坏包装,感谢您的配合!", '', function() {                                        mui.openWindow({url:'vip_center.html'})                                    });                                } 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,                        xhrFields: {                        	withCredentials: true                        },                        crossDomain: true,                        success: function(dt) {                        	if (dt.isRedirect) {                        		location.href = dt.redirectURL;                        	} else {                            //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>
 |