Skip to content

A
allCampaign
Commit 90aa1cad by Sweet Zhang
Options

宝宝出生日期限制

parent fecfa5b1
Showing with 82 additions and 24 deletions
yd-children-overall/css/LCalendar.css 0 → 100644
.gearDate{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:10px;background-color:rgba(0,0,0,.2);display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9900;overflow:hidden;-webkit-animation-fill-mode:both;animation-fill-mode:both}.date_ctrl{vertical-align:middle;background-color:#d5d8df;color:#000;margin:0;height:auto;width:100%;position:absolute;left:0;bottom:0;z-index:9901;overflow:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slideInUp{-webkit-animation:slideInUp .3s;animation:slideInUp .3s}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.ym_roll,.date_roll,.datetime_roll,.time_roll{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:auto;overflow:hidden;background-color:transparent;-webkit-mask:-webkit-gradient(linear,0% 50%,0% 100%,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(top,#debb47 50%,rgba(36,142,36,0))}.ym_roll>div,.date_roll>div,.datetime_roll>div,.time_roll>div{font-size:2.3em;height:10em;float:left;background-color:transparent;position:relative;overflow:hidden;-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.ym_roll>div .gear,.date_roll>div .gear,.datetime_roll>div .gear,.time_roll>div .gear{width:100%;float:left;position:absolute;z-index:9902;margin-top:-4em}.date_roll_mask{-webkit-mask:-webkit-gradient(linear,0% 40%,0% 0%,from(#debb47),to(rgba(36,142,36,0)));-webkit-mask:-webkit-linear-gradient(bottom,#debb47 50%,rgba(36,142,36,0));padding:0}.date_roll>div:nth-child(2){-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.date_roll>div:nth-child(1),.datetime_roll>div:nth-child(1){-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.datetime_roll>div:first-child{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.datetime_roll>div:last-child{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.date_grid{position:relative;top:4em;width:100%;height:2em;margin:0;box-sizing:border-box;z-index:0;border-top:1px solid #abaeb5;border-bottom:1px solid #abaeb5}.date_grid>div{color:#000;position:absolute;right:0;top:0;font-size:.8em;line-height:2.5em}.date_roll>div:nth-child(3) .date_grid>div{left:42%}.datetime_roll>div .date_grid>div{right:0}.datetime_roll>div:first-child .date_grid>div{left:auto;right:0%}.datetime_roll>div:last-child .date_grid>div{left:50%}.time_roll>div:nth-child(1) .date_grid>div{right:1em}.ym_roll>div:nth-child(1) .date_grid>div{right:.1em}.ym_roll>div .date_grid>div,.time_roll>div .date_grid>div{right:5em}.date_btn{color:#0575f2;font-size:1.6em;line-height:1em;text-align:center;padding:.8em 1em}.date_btn_box:before,.date_btn_box:after{content:'';position:absolute;height:1px;width:100%;display:block;background-color:#96979b;z-index:15;-webkit-transform:scaleY(.33);transform:scaleY(.33)}.date_btn_box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:#f1f2f4;position:relative}.date_btn_box:before{left:0;top:0;-webkit-transform-origin:50% 20%;transform-origin:50% 20%}.date_btn_box:after{left:0;bottom:0;-webkit-transform-origin:50% 70%;transform-origin:50% 70%}.date_roll>div:nth-child(1) .gear{text-indent:20%}.date_roll>div:nth-child(2) .gear{text-indent:-20%}.date_roll>div:nth-child(3) .gear{text-indent:-55%}.datetime_roll>div .gear{width:100%;text-indent:-25%}.datetime_roll>div:first-child .gear{text-indent:-10%}.datetime_roll>div:last-child .gear{text-indent:-50%}.ym_roll>div .gear,.time_roll>div .gear{width:100%;text-indent:-70%}.ym_roll>div:nth-child(1) .gear,.time_roll>div:nth-child(1) .gear{width:100%;text-indent:10%}.tooth{height:2em;line-height:2em;text-align:center}
\ No newline at end of file
yd-children-overall/css/style.css
...@@ -32,12 +32,17 @@ html, body { ...@@ -32,12 +32,17 @@ html, body {
} }
.formInfo input { .formInfo input {
display: block;
width: 100%; width: 100%;
height: 30px;
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
padding-left: 15px;
border-radius: 3px; border-radius: 3px;
box-sizing: content-box; box-sizing: border-box;
box-shadow: none;
padding: 8px 15px;
height: 35px;
background: transparent;
-webkit-appearance: none;
line-height: 1.42857143;
} }
.formInfo > h5 { .formInfo > h5 {
...@@ -117,12 +122,18 @@ html, body { ...@@ -117,12 +122,18 @@ html, body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 46%; top: 65%;
left: 0; left: 0;
right: 0; right: 0;
} }
.dialog .closeBtn { .dialog .eqrcode,.dialog .icon {
display: flex;
justify-content: center;
margin: 8px 0;
}
#closeBtn {
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
......
yd-children-overall/index.html
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif"/> <link rel="shortcut icon" href="https://www.ydinsurance.cn/wp-content/uploads/2018/04/favicon.gif"/>
<link rel="stylesheet" type="text/css" href="./css/LCalendar.css" />
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
...@@ -36,16 +37,18 @@ ...@@ -36,16 +37,18 @@
<li> <li>
<div>出生日期</div> <div>出生日期</div>
<div> <div>
<input type="date" id="babyBirth"> <input type="text" name="babyBirth" id="babyBirth" placeholder="宝宝的出生日期" readonly="readonly" />
</div> </div>
</li> </li>
<li> <li>
<div>宝宝性别</div> <div>宝宝性别</div>
<div style="display: flex;align-items: center"> <div style="display: flex;align-items: center">
<div style="width:72px;height:30px;line-height: 30px;text-align: center;border-radius: 3px;border:1px solid #dbdbdb;color:#999;margin-right:10px;" class="babyGender" data-attr="男"> <div style="width:72px;height:30px;line-height: 30px;text-align: center;border-radius: 3px;border:1px solid #dbdbdb;color:#999;margin-right:10px;"
class="babyGender" data-attr="男">
男 男
</div> </div>
<div style="width:72px;height:30px;line-height: 30px;text-align: center;border-radius: 3px;border:1px solid #dbdbdb;color:#999" class="babyGender" data-attr="女"> <div style="width:72px;height:30px;line-height: 30px;text-align: center;border-radius: 3px;border:1px solid #dbdbdb;color:#999"
class="babyGender" data-attr="女">
女 女
</div> </div>
</div> </div>
...@@ -59,14 +62,16 @@ ...@@ -59,14 +62,16 @@
<li> <li>
<div>手机号码</div> <div>手机号码</div>
<div> <div>
<input type="text" placeholder="用于接收保费预测结果" id="phone"> <input type="tel" placeholder="用于接收保费预测结果" id="phone">
</div> </div>
</li> </li>
<li> <li>
<div style="visibility: hidden">输验证码</div> <div style="visibility: hidden">输验证码</div>
<div style="position: relative;margin-top:-15px;"> <div style="position: relative;margin-top:-15px;">
<input type="tel" placeholder="输入验证码" style="margin-right: 10px;width: calc(100% - 90px);" id="code"> <input type="tel" placeholder="输入验证码" style="margin-right: 10px;width: calc(100% - 90px);"
<button style="width:67px;font-size:12px;border-radius:3px;background:rgb(255,97,37);color:#fff;padding:0 5px;height:30px;line-height: 30px;box-sizing: content-box;border: none;" id="codeBtn"> id="code">
<button style="width:67px;font-size:12px;border-radius:3px;background:rgb(255,97,37);color:#fff;padding:0 5px;height:30px;line-height: 30px;box-sizing: content-box;border: none;"
id="codeBtn">
获取验证码 获取验证码
</button> </button>
</div> </div>
...@@ -83,18 +88,22 @@ ...@@ -83,18 +88,22 @@
<!--弹窗START--> <!--弹窗START-->
<div class="dialog"> <div class="dialog">
<div class="content"> <div class="content">
<div class="icon"></div> <div style="letter-spacing: 1px">专业儿童保险规划师将在1个工作日内为您致电服务和微信联系，请您留意接听电话机微信添加好友信息。</div>
<div>专业儿童保险规划师将在1个工作日内为您致电服务和微信联系，请您留意接听电话机微信添加好友信息。</div> <div class="eqrcode">
<div class="eqrcode"></div> <div style="width: 50%;">
<div>关注“银盾保险在线”公众号，更多热销产品抢先了解。</div> <img src="./images/mengge.jpg" alt="" class="img-responsive">
</div>
</div>
<div style="font-size: 12px;text-align: center;">关注“银盾保险在线”公众号，更多热销产品抢先了解。</div>
</div> </div>
<div class="closeContainer"><span class="closeBtn">X</span></div> <div class="closeContainer"><span id="closeBtn">X</span></div>
</div> </div>
<!--弹窗END--> <!--弹窗END-->
</div> </div>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./js/layer.js"></script> <script src="./js/layer.js"></script>
<script src="./js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/base.js"></script> <script src="./js/base.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
yd-children-overall/js/base.js
...@@ -10,7 +10,14 @@ $(function () { ...@@ -10,7 +10,14 @@ $(function () {
name: '', name: '',
babyGender: '', babyGender: '',
babyBirth: '' babyBirth: ''
} };
var calendar = new LCalendar();
calendar.init({
'trigger': '#babyBirth', //标签id
'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
'minDate': (new Date().getFullYear() - 19) + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() + 1), //最小日期
'maxDate': (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
});
const REG_CODE = /^(1)\d{10}$/; const REG_CODE = /^(1)\d{10}$/;
const REG_NAME = /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,48}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,48}[a-zA-Z]{1}$)/; const REG_NAME = /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,48}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,48}[a-zA-Z]{1}$)/;
// $("#phone,#name,#code").blur(function () { // $("#phone,#name,#code").blur(function () {
...@@ -206,14 +213,38 @@ $(function () { ...@@ -206,14 +213,38 @@ $(function () {
babyGender(); babyGender();
function babyGender() { function babyGender() {
$('.babyGender').click(function (event) { $('.babyGender').click(function (event) {
// console.log(event) param.babyGender = event.currentTarget.dataset.attr;
// param.babyGender = event.currentTarget.dataset.attr; $(this).addClass("actived").siblings().removeClass("actived");
// event.currentTarget
$('.babyGender').addClass()
}) })
} }
// 设定宝宝出生日期的最大日期
setMaxDate();
function setMaxDate() {
//得到当前时间
var date_now = new Date();
//得到当前年份
var year = date_now.getFullYear();
//得到当前月份
//注：
// 1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
// 2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
var month = date_now.getMonth() + 1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
//得到当前日子（多少号）
var date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
//设置input标签的max属性
$("#babyBirth").attr("max", year + "-" + month + "-" + date);
}
// 关闭弹窗
closeDialog();
function closeDialog() {
$('#closeBtn').click(function () {
$('.dialog').hide();
})
}
goMeasurement(); goMeasurement();
function goMeasurement() { function goMeasurement() {
...@@ -293,10 +324,14 @@ $(function () { ...@@ -293,10 +324,14 @@ $(function () {
"X-Authorization": token "X-Authorization": token
}, },
success: function (res) { success: function (res) {
if (res['commonResult']) { if (res['success']) {
$('.dialog').show();
} else { } else {
console.log('错误') layer.open({
content: res.message,
skin: 'msg',
time: 3
})
} }
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment