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>
|