CINXE.COM
广州定制家居展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广州定制家居展</title> <meta name="keywords" content="中国广州定制家居展_整家整装展_全屋定制展览会"> <meta name="description" content="广州定制家居展作为国内规模最大的专业定制家居展,是定制家居企业展示精品、招商加盟首选平台,也是经销商寻找品牌、上下游产业链需求合作机遇的桥梁与纽带。"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="/static/css/swiper.min.css"> <link rel="stylesheet" href="/static/css/normalize.css"> <link rel="stylesheet" href="/css/common.css"> <link rel="stylesheet" href="/css/viewer.css"> <script type="text/javascript"> window._agl = window._agl || []; (function () { _agl.push( ['production', '_f7L2XwGXjyszb4d1e2oxPybgD'] ); (function () { var agl = document.createElement('script'); agl.type = 'text/javascript'; agl.async = true; agl.src = 'https://fxgate.baidu.com/angelia/fcagl.js?production=_f7L2XwGXjyszb4d1e2oxPybgD'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(agl, s); })(); })(); </script> <style> [v-cloak] { display: none; } </style> </head> <body> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ff552bbb4d28c3d17144da718c3523e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!--360分析--> <script> (function(b,a,e,h,f,c,g,s){b[h]=b[h]||function(){(b[h].c=b[h].c||[]).push(arguments)}; b[h].s=!!c;g=a.getElementsByTagName(e)[0];s=a.createElement(e); s.src="//s.union.360.cn/"+f+".js";s.defer=!0;s.async=!0;g.parentNode.insertBefore(s,g) })(window,document,"script","_qha",429324,false); </script> <!--CNZZ统计--> <div style="display:none;"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261303252'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1261303252%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script></div> <div id="app"> <div id="header" class="header" v-cloak> <div class="fixW"> <a href="/index.html" class="logo"><img src="/static/images/logo.png" alt=""></a> <div class="count-down-wrapper"> <div v-cloak class="count-down"></div> </div> </div> </div> <div class="container" v-cloak> <div class="fixW jia9"> <div class="jia9-main" id="formViewer"> <div class="jia9-main-item"> <p class="jia9-mian-title">验证手机号</p> <div class="jia9-type-wrapper"> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">手机号</p>: </div> <div class="col jia9-type1-cont"><input class="jia9-type1-input" type="text" placeholder="请输入您手机号" id="formPhone" v-model="formData.phone" required vtype="mobile" vpname="手机号输入错误"></div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p>验证码:</p> </div> <div class="col jia9-type1-cont jia9-code" style="line-height: 0.7rem;"> <input class="col jia9-type1-input" type="text" placeholder="验证码" v-model="formData.imgCode" required vpname="验证码输入错误"> <div class="col jia9-type1-code" style="margin-right: 0;height: auto;"><img :src="'https://gzapi.chfgz.com/client/reguser/kaptcha?s=' + imgGetTime" @click="getKaptcha"></div> <!-- <a class="col code-change"><img src="/images/anew.png" alt="重新获取验证码" @click="getKaptcha"></a> --> </div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">手机验证码</p>: </div> <div class="col jia9-type1-cont jia9-code"> <input class="col jia9-type1-input" type="text" placeholder="输入短信验证码" v-model="formData.smsCode" required vpname="短信验证码输入错误"> <a class="col jia9-btn getMessCode" @click="getPhoneCode">{{codeName}}</a> </div> </div> </div> </div> <div class="jia9-main-item"> <p class="jia9-mian-title">填写您的基本资料</p> <div class="jia9-type-wrapper"> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">姓名</p>: </div> <div class="col jia9-type1-cont"><input class="jia9-type1-input" type="text" placeholder="请输入您姓名" v-model="formData.name" required vpname="姓名输入错误"></div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">身份证号码</p>: </div> <div class="col jia9-type1-cont"><input class="jia9-type1-input" type="text" placeholder="请输入身份证号码" v-model.trim="formData.idcard" required vpname="身份证号码不能为空"></div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col">邮箱</p>: </div> <div class="col jia9-type1-cont"><input class="jia9-type1-input" type="text" placeholder="请输入邮箱" v-model="formData.email"></div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">公司名称</p>: </div> <div class="col jia9-type1-cont"><input class="jia9-type1-input" type="text" placeholder="请输入公司名称" v-model="formData.companyName" required vpname="请填写公司全称" minLength="8"></div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">部门</p>: </div> <div class="col jia9-type1-cont"> <input :class="['jia9-type1-input', formData.departMentName ? 'select-opacity0-input':'']" type="text" placeholder="请选择你的部门" v-model="formData.departMentName" required vpname="请选择你的部门"> <select :class="['full-select','select-opacity']" v-model="formData.departMentName"> <option value="请选择你的部门" disabled>请选择你的部门</option> <option value="企业高层管理">企业高层管理</option> <option value="采购/供应链管理">采购/供应链管理</option> <option value="生产制造/工艺">生产制造/工艺</option> <option value="研发/技术/设计">研发/技术/设计</option> <option value="品质/质量管理">品质/质量管理</option> <option value="市场/推广">市场/推广</option> <option value="销售/业务">销售/业务</option> <option value="其他">其他</option> </select> </div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">职位</p>: </div> <div class="col jia9-type1-cont"> <input :class="['jia9-type1-input', formData.position ? 'select-opacity0-input':'']" type="text" placeholder="请选择你的职位" v-model="formData.position" required vpname="请选择你的职位"> <select :class="['full-select','select-opacity']" v-model="formData.position"> <option value="请选择你的职位" disabled>请选择你的职位</option> <option value="董事长/总裁">董事长/总裁</option> <option value="总经理">总经理</option> <option value="厂长">厂长</option> <option value="营销/市场/运营总监">营销/市场/运营总监</option> <option value="生产/技术总监">生产/技术总监</option> <option value="采购总监">采购总监</option> <option value="设计师">设计师</option> <option value="业务/招商经理">业务/招商经理</option> <option value="店长/导购">店长/导购</option> <option value="其他">其他</option> </select> </div> </div> <div class="row jia9-type1"> <div class="col jia9-type1-name"> <p class="col must">联系地址</p>: </div> <div class="col jia9-type1-cont"> <div id="distpicker1"> <div class="col distpicker-input"> <input :class="['jia9-type1-input', formData.province ? 'select-opacity0-input':'']" type="text" placeholder="省" v-model="formData.province" required required vpname="请选择省"> <select :class="['full-select','select-opacity']" v-model="formData.province" @change="changeAddress('province')"></select> </div> <div class="col distpicker-input"> <input :class="['jia9-type1-input', formData.city ? 'select-opacity0-input':'']" type="text" placeholder="市" v-model="formData.city" required required vpname="请选择市"> <select :class="['full-select','select-opacity']" v-model="formData.city" @change="changeAddress('city')"></select> </div> <div class="col distpicker-input"> <input :class="['jia9-type1-input', formData.area ? 'select-opacity0-input':'']" type="text" placeholder="区" v-model="formData.area" required required vpname="请选择区"> <select :class="['full-select','select-opacity']" v-model="formData.area" @change="changeAddress('area')"></select> </div> </div> <input class="jia9-type1-input" type="text" placeholder="请输入详细地址" v-model="formData.address" required vpname="请输入详细地址"> </div> </div> </div> </div> <div class="jia9-main-item"> <p class="jia9-mian-title">填写您的观展信息</p> <div class=""> <div class="jia9-type2" id="choose1"> <div class="clearf"> <p class="fleft jia9-type2-title must">1、您要参观的展会是:[单选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose1')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose1_val"> <li class="col">{{choose1_val}}</li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose1'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">1、您要参观的展会是:[单选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item) in choose1"> <input @change="chooseBlur" class="col" type="radio" :id="'choose1_'+item.id" :value="item.name" v-model="choose1_val"> <label class="col" :for="'choose1_'+item.id">{{item.name}}</label> </div> </div> </div> </div> </div> <div class="jia9-type2" id="choose2"> <div class="clearf"> <p class="fleft jia9-type2-title must">2、您的业务性质是:[单选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose2')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose2_val"> <li class="col">{{choose2_val}}<p class="col" v-if="choose2_child.show">( {{choose2_child.show}} )</p></li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose2'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">2、您的业务性质是:[单选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item,index) in choose2"> <input @change="chooseBlur(item,index)" class="col" type="radio" :id="'choose2_'+item.id" :value="item.name" v-model="choose2_val"> <label class="col" :for="'choose2_'+item.id">{{item.name}}</label> </div> </div> </div> </div> <div class="jia9-type2-fixed" v-show="choose2_child.childs.length > 0" @click.self="chooseBlurChildPopup()"> <div class="jia9-type2-fixed-wrapper"> <a @click="chooseBlurChildPopup()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">请选择下二级栏目:[单选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item,index) in choose2_child.childs"> <input @change="chooseBlurChild(item)" class="col" type="radio" :id="item.id" :value="item.name" v-model="choose2_child.show"> <label class="col" :for="item.id">{{item.name}}</label> </div> </div> </div> </div> </div> <div class="jia9-type2" id="choose3"> <div class="clearf"> <p class="fleft jia9-type2-title must">3、您主要感兴趣的展品是:[多选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose3')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose3_val && choose3_val.length > 0"> <li class="col" v-for="item in choose3_val">{{item}}</li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose3'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">3、您主要感兴趣的展品是:[多选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item) in choose3"> <input @change="chooseBlur" class="col" type="checkbox" :id="'choose3_'+item.id" :value="item.name" v-model="choose3_val"> <label class="col" :for="'choose3_'+item.id">{{item.name}}</label> </div> </div> </div> </div> </div> <div class="jia9-type2" id="choose4"> <div class="clearf"> <p class="fleft jia9-type2-title must">4、您参观的主要目的是:[多选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose4')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose4_val && choose4_val.length > 0"> <li class="col" v-for="item in choose4_val">{{item}}</li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose4'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">4、您参观的主要目的是:[多选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item) in choose4"> <input @change="chooseBlur" class="col" type="checkbox" :id="'choose4_'+item.id" :value="item.name" v-model="choose4_val"> <label class="col" :for="'choose4_'+item.id">{{item.name}}</label> </div> </div> </div> </div> </div> <div class="jia9-type2" id="choose5" style="display: none;"> <div class="clearf"> <p class="fleft jia9-type2-title must">5、您通过什么途径得知这个展会:[多选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose5')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose5_val && choose5_val.length > 0"> <li class="col" v-for="item in choose5_val">{{item}}</li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose5'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">5、您通过什么途径得知这个展会:[多选]</p> <div class="row jia9-type2-main"> <div class="col jia9-type2-item" v-for="(item,index) in choose5"> <input @change="chooseBlur" class="col" type="checkbox" :id="'choose5_'+item.id" :value="item.name" v-model="choose5_val"> <label class="col" :for="'choose5_'+item.id">{{item.name}}</label> <!-- <input v-show="index == (choose5.length-1)" id="choose5_text" type="text" placeholder="请注明"> --> </div> </div> </div> </div> </div> <div class="jia9-type2" id="choose6"> <div class="clearf"> <p class="fleft jia9-type2-title must">5、您预计的参观日期是:[多选]</p> <a class="fright jia9-type2-btn" @click.self="changeChooseId('choose6')">请选择</a> </div> <ul class="row jia9-type2-list" v-show="choose6_val && choose6_val.length > 0"> <li class="col" v-for="item in choose6_val">{{item}}</li> </ul> <div class="jia9-type2-fixed" v-show="chooseId == 'choose6'" @click.self="changeChooseId()"> <div class="jia9-type2-fixed-wrapper"> <a @click="changeChooseId()" class="jia9-type2-close">确定</a> <p class="jia9-type2-title must">5、您预计的参观日期是:[多选]</p> <div class="row jia9-type2-main"> <div class="jia9-type2-item" v-for="(item) in choose6"> <input @change="chooseBlur" class="col" type="checkbox" :id="'choose6_'+item.id" :value="item.name" v-model="choose6_val"> <label class="col" :for="'choose6_'+item.id">{{item.name}}</label> </div> </div> </div> </div> </div> </div> </div> <div style="opacity:0;position:fixed;top:100%;left:100%;"> <input type="text" v-model="formData.joinShow" required vpname="请选择展会"> <input type="text" v-model="formData.business" required vpname="请选择业务性质"> <input type="text" v-model="formData.interested" required vpname="请选择感兴趣的展品"> <input type="text" v-model="formData.purpose" required vpname="请选择主要目的"> <input type="text" v-model="formData.way" vpname="请选择获知途径"> <input type="text" v-model="formData.visitDate" required vpname="请选择参观日期"> </div> <div class="row jia9-btn-wrapper"> <a class="col jia9-btn jia9-btn-submit" @click="submitForm">提交登记</a> </div> </div> </div> </div> <div class="submit-win" v-show="winWrapper" v-cloak> <div class="s-win-wrapper"> <div class="row s-win-img"><img class="col" src="/images/sucess.png" alt=""></div> <div class="s-win-text"> <div v-html="winHtml"></div> </div> <div class="row s-win-btn"><a class="col" @click="winWrapper = false">知道了</a></div> <a class="s-win-hide" @click="winWrapper = false"><img src="/images/win-hide.png" alt=""></a> </div> </div> <div class="submit-win" v-show="phoneWrapper" v-cloak> <div class="s-win-wrapper"> <div class="s-win-text"> <br> <div style="text-align: center;"><strong>该手机号已经注册,请<a href="/mine.html">登录</a></strong></div> <br> </div> <div class="row s-win-btn"><a class="col" href="/mine.html">登录</a></div> <a class="s-win-hide" @click="phoneWrapper = false"><img src="/images/win-hide.png" alt=""></a> </div> </div> <div class="loading" v-show="loading"> <div class="loading-wrapper"> <div class="loading-item"></div> <div class="loading-item"></div> <div class="loading-item"></div> <div class="loading-item"></div> <div class="loading-item"></div> <div class="loading-item"></div> </div> </div> <div id="nav" v-cloak> <nav class="row nav-wrapper"> <a href="/index.html" class="col nav-item"> <img src="/static/images/nav1.png"> <p>首页</p> </a> <a href="/info.html" class="col nav-item"> <img src="/static/images/nav2.png"> <p>展会信息</p> </a> <a href="/stand.html" class="col nav-item"> <img src="/static/images/nav3.png"> <p>展位申请</p> </a> <a href="/viewer.html" class="col nav-item nav-item-run"> <img src="/static/images/nav4run.png"> <p>观众登记</p> </a> <a href="/mine.html" class="col nav-item"> <img src="/static/images/nav5.png"> <p>找回证件</p> </a> </nav> </div> <div id="adImg" v-show="adimg"> <p v-cloak style="position: fixed;right:.2rem;top:.2rem;z-index: 999999999;color:#fff;font-size:.28rem;text-align: center;border-radius: 50%;line-height: .56rem;width:.56rem;border:1px solid #fff;">{{adimgM}}S</p> <img v-cloak @load="imageLoaded" style="position: fixed;left:0;top:0;width:100%;height:100%;z-index: 99999999;" src="https://zhanhuibojun.oss-cn-guangzhou.aliyuncs.com/exhibition/gzzcad.jpg" alt=""> </div> </div> </body> <script src="/static/js/jquery-1.11.0.min.js"></script> <script src="/static/js/swiper.min.js"></script> <script src="/static/js/vue.js"></script> <script src="/static/js/rem.js"></script> <script type="text/javascript" src="/static/js/toTop.js"></script> <script src="/static/js/axios.min.js"></script> <script type="text/javascript" src="/api/include.js"></script> <script type="text/javascript" src="/api/request.js"></script> <script type="text/javascript" src="/api/qs.js"></script> <script src="/distpicker/js/jquery-2.2.4.min.js"></script> <script src="/distpicker/js/distpicker.js"></script> <script src="/distpicker/js/main.js"></script> <script src="/static/js/formValidate.js"></script> <script src="/static/js/jquery.cookie.js"></script> <script src="/static/js/jweixin.js"></script> <script> var signature = { }; // var url = window.location.href; var url = location.href.split('#')[0]; request('/client/weixin/jsapiticket', 'post', undefined, undefined, { 'url': url }).then(res => { if (!res) return; signature = res; wx.config({ debug: false, // 关闭调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: signature.appId, // 必填,公众号的唯一标识 timestamp: signature.timestamp, // 必填,生成签名的时间戳 nonceStr: signature.nonceStr, // 必填,生成签名的随机串 signature: signature.signature,// 必填,签名 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', //1.4 分享到朋友 'updateTimelineShareData', //1.4分享到朋友圈 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // 必填,需要使用的JS接口列表 }); }) var title = document.title; var desc = $('meta[name="description"]')[0].content; var pic = 'https://m.chfcdu.com/static/images/share_ico.png'; wx.ready(function () { //需在用户可能点击分享按钮前就先调用 var shareData = { title: title, // 分享标题 desc: desc, // 分享描述 link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致 imgUrl: pic, // 分享图标 success: function (res) {} } wx.onMenuShareWeibo(shareData); //分享腾讯微博 wx.updateAppMessageShareData(shareData) wx.updateTimelineShareData(shareData) }); wx.error(function (res) { alert(res.errMsg); //错误提示 }); </script> <script> var getDayAll = function(starDay, endDay) { var arr = []; var dates = []; var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] // 设置两个日期UTC时间 starDay = starDay.replace(/\-/g, '/'); endDay = endDay.replace(/\-/g, '/'); var db = new Date(starDay); var de = new Date(endDay); // 获取两个日期GTM时间 var s = db.getTime() - 24 * 60 * 60 * 1000; var d = de.getTime() - 24 * 60 * 60 * 1000; // 获取到两个日期之间的每一天的毫秒数 for (var i = s; i <= d;) { i = i + 24 * 60 * 60 * 1000; arr.push(parseInt(i)) } // 获取每一天的时间 YY-MM-DD for (var j in arr) { var time = new Date(arr[j]); var year = time.getFullYear(time); var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1)); var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate()); var YYMMDD = year + '-' + mouth + '-' + day; var week = weeks[time.getDay()] dates.push(YYMMDD + ' ' + week) } return dates } var idCardCheck = { checkIdCard: function(idCard) { // idCard = trim(idCard.replace(/ /g, "")); //去掉字符串头尾空格 if (idCard.length == 15) { return this.isValidityBrithBy15IdCard(idCard); //进行15位身份证的验证 } else if (idCard.length == 18) { var a_idCard = idCard.split(""); // 得到身份证数组 if (idCardCheck.isValidityBrithBy18IdCard(idCard) && idCardCheck.isTrueValidateCodeBy18IdCard(a_idCard)) { //进行18位身份证的基本验证和第18位的验证 return true; } else { return false; } } else { return false; } }, isTrueValidateCodeBy18IdCard: function(a_idCard) { var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子 var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; var sum = 0; // 声明加权求和变量 if (a_idCard[17].toLowerCase() == 'x') { a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作 } for (var i = 0; i < 17; i++) { sum += Wi[i] * a_idCard[i]; // 加权求和 } var valCodePosition = sum % 11; // 得到验证码所位置 if (a_idCard[17] == ValideCode[valCodePosition]) { return true; } else { return false; } }, isValidityBrithBy18IdCard: function(idCard18) { var year = idCard18.substring(6, 10); var month = idCard18.substring(10, 12); var day = idCard18.substring(12, 14); var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day)); // 这里用getFullYear()获取年份,避免千年虫问题 if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) { return false; } else { return true; } }, isValidityBrithBy15IdCard: function(idCard15) { var year = idCard15.substring(6, 8); var month = idCard15.substring(8, 10); var day = idCard15.substring(10, 12); var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day)); // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法 if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) { return false; } else { return true; } } } const data = { phoneWrapper: false, adimg:false, adimgM:3, codeName: '获取验证码', codeSec: 60, winHtml: '您已成功注册!请使用电子票二维码,并携带本人身份证原件,即可入场参观!参观时需全程佩戴好口罩,注意个人防护,保持安全距离,祝观展快乐!详询:<a href="tel:15521191061">15521191061</a>', showName: '距离展会开始', showTime: '2022-09-25', loading: false, winWrapper: false, showData: {}, formData: { showId:'', phone: '', name: '', idcard: '', email: '', companyName: '', departMentName: '', position: '', province: '', city: '', area: '', address: '', joinShow: '', //参加展会, 多个用逗号隔开 business: '', //业务性质, 多个用逗号隔开 interested: '', // 感兴趣的展品, 多个用逗号隔开 purpose: '', // 主要目的, 多个用逗号隔开 way: '', // 获知途径, 多个用逗号隔开 visitDate: '', // 参观日期, 多个用逗号隔开 wayDes: '', // 获取途径,其他,说明 smsCode: '', fromTag: null }, chooseId: '', choose1: [{ id: 1, name: '' }], choose1_val: '', choose2: [{ id: 1, name: '经销商', childs:[ {id:1, name: '全屋定制'}, {id:2, name: '高端定制'}, {id:3, name: '系统门窗'}, {id:4, name: '陶瓷'}, {id:5, name: '卫浴'}, {id:6, name: '吊顶'}, {id:7, name: '地板'}, {id:8, name: '门墙柜'}, {id:9, name: '成品家具'}, {id:10, name: '软装布艺'}, {id:11, name: '其他'} ] }, { id: 2, name: '生产厂家', childs:[ {id:1, name: '全屋定制'}, {id:2, name: '高端定制'}, {id:3, name: '系统门窗'}, {id:4, name: '陶瓷'}, {id:5, name: '卫浴'}, {id:6, name: '吊顶'}, {id:7, name: '地板'}, {id:8, name: '门墙柜'}, {id:9, name: '成品家具'}, {id:10, name: '软装布艺'}, {id:11, name: '供应链'}, {id:12, name: '其他'} ] }, { id: 3, name: '工程采购商', childs:[ {id:1, name: '房地产'}, {id:2, name: '酒店'}, {id:3, name: '公寓'}, {id:4, name: '民宿'} ] }, { id: 4, name: '家装公司' }, { id: 5, name: '设计工作室' }, { id: 6, name: '行业协会' },{ id: 7, name: '行业媒体' }, { id: 8, name: '设计院校' }, { id: 9, name: '家居建材卖场' }, { id: 10, name: '消费者' }], choose2_val: '', choose3: [{ id: 1, name: '全屋定制' }, { id: 2, name: '高端定制' }, { id: 3, name: '定制整装' }, { id: 4, name: '装配式装修' }, { id: 5, name: '智能家居' }, { id: 6, name: '衣柜' }, { id: 7, name: '衣柜移门' }, { id: 8, name: '橱柜' }, { id: 9, name: '全铝定制' }, { id: 10, name: '木门' }, { id: 11, name: '整木' }, { id: 12, name: '卫浴' }, { id: 13, name: '铝合金门' }, { id: 14, name: '门板' }, { id: 15, name: '护墙板' }, { id: 16, name: '板材' }, { id: 17, name: '岩板' }, { id: 18, name: '五金' }, { id: 19, name: '机械' }, { id: 20, name: '软件' }, { id: 21, name: '装饰材料' }, { id: 22, name: '厨房电器' }, { id: 23, name: '集成吊顶' }, { id: 24, name: '智能晾衣架' }, { id: 25, name: '智能锁' }, { id: 26, name: '软装' }, { id: 27, name: '设计' }, { id: 28, name: '家居物流' }, { id: 29, name: '安装' }, { id: 30, name: '成品家具' }, { id: 31, name: '灯饰' }, { id: 32, name: '瓷砖' }, { id: 33, name: '其他' }], choose3_val: [], choose4: [{ id: 1, name: '加盟品牌' }, { id: 2, name: '评估未来参展可能性' }, { id: 3, name: '联络合作伙伴' }, { id: 4, name: '同行交流' }, { id: 5, name: '考察市场行情' }, { id: 6, name: '了解新产品、新款式' }, { id: 7, name: '参与现场活动' }, { id: 8, name: '找供应商' }, { id: 9, name: '寻求跨界合作' }, { id: 10, name: '了解行业发展趋势' }, { id: 11, name: '其他' }], choose4_val: [], choose5: [{ id: 1, name: '主办方邮件' }, { id: 2, name: '到店/市场派发参观邀请函' }, { id: 3, name: '主办方电话邀请' }, { id: 4, name: '主办方门票邮寄' }, { id: 5, name: '展商邀请/合作伙伴邀请' }, { id: 6, name: '展会官网/官微' }, { id: 7, name: '行业媒体' }, { id: 8, name: '杂志/网络广告/社交平台' }, { id: 9, name: '朋友/同行/同事推荐' }, { id: 10, name: '主办方短信' }, { id: 11, name: '协会/行业联盟组织邀约' }, { id: 12, name: '户外广告' }, { id: 13, name: '其他' }], choose5_val: [], choose6: [], choose6_val: [], imgGetTime:(new Date()).getTime(), choose2_child: { name:'', childs: [], businessLevel2Remark1:'', //经销商 businessLevel2Remark2:'', //生产厂家 businessLevel2Remark3:'', //工程采购商 show:'' } } let RenderHtmlApp = { el: '#app', data() { return data }, created() { var fr = this.getQueryVariable('fr') if (fr && fr !== null) { $.cookie('fr', fr) } this.getShow() this.getIndexSetting() $('#formViewer').validateInit(); $('#formPhone').validateInit(); if ($.cookie('fr') && $.cookie('fr') !== null) { this.formData.fromTag = $.cookie('fr') } }, methods: { imageLoaded: function() { var self = this; self.adimg = true self.adimgM = 3 var int = setInterval(function(){ self.adimgM = self.adimgM - 1; if(self.adimgM <= 0){ self.adimg = false clearInterval(int) } },1000) // setTimeout(function(){ // self.adimg = false // },2000) }, getQueryVariable: function(variable) { var query = decodeURI(window.location.search.substring(1)); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); }, getKaptcha() { this.imgGetTime = new Date().getTime() }, getPhoneCode() { let self = this; if (self.loading) return; if (self.codeSec !== 60) return; var res = $("#formPhone").validate(); if (res && res.valid) { if(!self.formData.imgCode || self.formData.imgCode == ''){ message('输入验证码') return; } self.loading = true request('/client/reguser/sendsmscode', 'post', null, { 'content-type': 'application/json' }, { 'phone': self.formData.phone, 'imgCode': self.formData.imgCode }).then(res => { self.loading = false self.winHtml = '发送成功!验证码已发送,请查看手机信息并填写' self.winWrapper = true let inter = setInterval(() => { self.codeSec--; self.codeName = '倒计时' + self.codeSec + '秒' if (self.codeSec === 0) { clearInterval(inter) self.codeSec = 60 self.codeName = '获取验证码' } }, 1000); }).catch(err => { self.loading = false alert(err) }) return; request('/client/reguser/checkphone', 'get', null, { 'content-type': 'application/json' }, { 'phone': self.formData.phone }).then(function(res) { if (!res) return; self.loading = false // self.winHtml = '<p style="text-align:center">该手机号已经注册,请登录</p>' // self.winWrapper = true // alert('该手机号已经注册,请登录') self.phoneWrapper = true }).catch(function(res) { if(res == '手机号不存在'){ request('/client/reguser/sendsmscode', 'post', null, { 'content-type': 'application/json' }, { 'phone': self.formData.phone, 'imgCode': self.formData.imgCode }).then(res => { self.loading = false self.winHtml = '发送成功!验证码已发送,请查看手机信息并填写' self.winWrapper = true let inter = setInterval(() => { self.codeSec--; self.codeName = '倒计时' + self.codeSec + '秒' if (self.codeSec === 0) { clearInterval(inter) self.codeSec = 60 self.codeName = '获取验证码' } }, 1000); }).catch(err => { self.loading = false alert(err) }) }else{ self.loading = false alert(res) } }) } else { message('手机号验证不成功,请重新检查并输入信息') } }, saveRegUser() { if (this.loading) return; let self = this; this.loading = true this.formData.showId = this.showData.id request('/client/reguser/saveorupdate', 'post', this.formData).then(res => { if (!res) return; this.loading = false this.winHtml = '您已成功注册!请使用电子票二维码,并携带本人身份证原件,即可入场参观!参观时需全程佩戴好口罩,注意个人防护,保持安全距离,祝观展快乐!详询:<a href="tel:15521191061">15521191061</a>' this.winWrapper = true let user = {} user.id = res.id user.phone = res.phone user.name = res.name user.companyName = res.companyName $.cookie('user', JSON.stringify(user), { expires: 15, path: '/' }) self.formData = { showId:'', phone: '', name: '', idcard: '', email: '', companyName: '', departMentName: '', position: '', province: '', city: '', area: '', address: '', joinShow: '', //参加展会, 多个用逗号隔开 business: '', //业务性质, 多个用逗号隔开 interested: '', // 感兴趣的展品, 多个用逗号隔开 purpose: '', // 主要目的, 多个用逗号隔开 way: '', // 获知途径, 多个用逗号隔开 visitDate: '', // 参观日期, 多个用逗号隔开 wayDes: '', // 获取途径,其他,说明 smsCode: '' } self.choose2_val = '' self.choose3_val = [] self.choose4_val = [] self.choose5_val = [] self.choose6_val = [] window._agl && window._agl.push(['track', ['success', {t: 3}]]) setTimeout(function(){ window.location = '/mine.html' },1000) }).catch(err => { this.loading = false }) }, getIndexSetting() { request('/client/indexsetting/detail', 'post', undefined, undefined, { 'type': '广州-手机' }).then(res => { if (!res) return; let self = this; this.showTime = res['showTime'] let jsTimes = document.querySelectorAll('.count-down'); jsTimes.forEach((obj) => { this.teamCountTime(obj); }); }) }, getShow() { this.loading = true let self = this; request('/client/show/detail', 'post', undefined, undefined, { 'city': '广州' }).then(res => { if (!res) return; self.showData = res self.choose1[0]['name'] = res.name self.choose1_val = res.name let choose6 = getDayAll(res.showTime, res.closeTime) if (choose6 && choose6.length !== 0) choose6.forEach((element, index) => { self.choose6[index] = { 'id': index, 'name': element } }); self.loading = false }).catch(() => { this.loading = false }) }, chooseBlur: function(item,index) { let self = this; if(item && item.childs) { console.log(item) let showItem = JSON.parse(JSON.stringify(self.choose2_child)) self.choose2_child = { name: item.name, childs: item.childs, businessLevel2Remark1:'', //经销商 businessLevel2Remark2:'', //生产厂家 businessLevel2Remark3:'', //工程采购商 show: showItem.name == item.name ? showItem.show : '' } this.changeChooseId() }else if(index){ self.choose2_child = { name: '', childs: [], businessLevel2Remark1:'', //经销商 businessLevel2Remark2:'', //生产厂家 businessLevel2Remark3:'', //工程采购商 show: '' } } self.formData.joinShow = typeof(self.choose1_val) === 'string' ? self.choose1_val : self.choose1_val.join(',') self.formData.business = typeof(self.choose2_val) === 'string' ? self.choose2_val : self.choose2_val.join(',') self.formData.interested = self.choose3_val.join(',') self.formData.purpose = self.choose4_val.join(',') self.formData.way = self.choose5_val.join(',') self.formData.visitDate = self.choose6_val.join(',') }, submitForm() { if (this.loading) return; let self = this; let formData = JSON.parse(JSON.stringify(self.formData)); formData.joinShow = typeof(self.choose1_val) === 'string' ? self.choose1_val : self.choose1_val.join(',') formData.business = typeof(self.choose2_val) === 'string' ? self.choose2_val : self.choose2_val.join(',') formData.interested = self.choose3_val.join(',') formData.purpose = self.choose4_val.join(',') formData.way = self.choose5_val.join(',') formData.visitDate = self.choose6_val.join(',') formData.businessLevel2Remark1 = self.choose2_child.businessLevel2Remark1 formData.businessLevel2Remark2 = self.choose2_child.businessLevel2Remark2 formData.businessLevel2Remark3 = self.choose2_child.businessLevel2Remark3 var res = $("#formViewer").validate(); if (res && res.valid) { // 验证身份证 let idcardBoolean = idCardCheck.checkIdCard(formData.idcard) if (!(idcardBoolean || (formData.idcard === '440'))) { message('身份证验证不成功,请重新检查并输入身份证号码') return; } self.saveRegUser() } else { if(res.vpname && res.vpname.length !== 0){ message(res.vpname.join('<br>')) }else{ message('表单信息验证不成功,请重新检查并输入信息') } } }, changeChooseId(chooseId) { if (chooseId) { this.chooseId = chooseId } else { this.chooseId = null } }, chooseBlurChildPopup() { this.choose2_child.childs = [] let showItem = JSON.parse(JSON.stringify(this.choose2_child)) if(showItem.name == '经销商' || showItem.name == '生产厂家' || showItem.name == '工程采购商'){ if(showItem.show == '') this.choose2_val = ''; } }, chooseBlurChild(item) { let self = this; let showItem = JSON.parse(JSON.stringify(self.choose2_child)) if(item) { if(showItem.name == '经销商') { self.choose2_child.businessLevel2Remark1 = showItem.show }else if(showItem.name == '生产厂家') { self.choose2_child.businessLevel2Remark2 = showItem.show }else if(showItem.name == '工程采购商') { self.choose2_child.businessLevel2Remark3 = showItem.show } }else{ self.choose2_child.childs = [] } }, getDay(time) { // 获取每一天的时间 YY-MM-DD var time = new Date(time); var year = time.getFullYear(time); var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1)); var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate()); var YYMMDD = year + '/' + mouth + '/' + day; return YYMMDD }, teamCountTime(obj) { let self = this; //倒计时 var timer = null; let setName = self.showName function fn() { //获取设置的时间 如:2019-3-28 14:00:00 ios系统得加正则.replace(/\-/g, '/'); var setTime = self.showTime.replace(/\-/g, '/'); //获取当前时间 var date = new Date(self.getDay(new Date())), now = date.getTime(), endDate = new Date(self.getDay(new Date(setTime))), end = endDate.getTime(); //时间差 var leftTime = end - now; //d,h,m,s 天时分秒 var d, otime = ''; if (leftTime > 0) { d = Math.floor(leftTime / 1000 / 60 / 60 / 24); otime = d.toString(); let arr = otime.split(''); let numStr = '' arr.forEach(num => { numStr = numStr + '<span class="count-down-num">' + num + '</span>' }); obj.innerHTML = '<strong>' + setName + '</strong>' + numStr + '<span class="count-down-text">天</span>'; timer = setTimeout(fn, 1000); } else { clearTimeout(timer); obj.innerHTML = '<strong>' + setName + '</strong>' + '<span class="count-down-num">' + '0' + '</span>' + '<span class="count-down-num">' + '0' + '</span>' + '<span class="count-down-text">天</span>'; console.log(setName + '已结束') } } fn(); }, changeAddress(itemName) { if (itemName == 'province') { this.formData.city = '' this.formData.area = '' this.formData.address = '' } else if (itemName == 'city') { this.formData.area = '' this.formData.address = '' } else if (itemName === 'area') { this.formData.address = '' } } } }; let app = new Vue(RenderHtmlApp); </script> </html>