Authored by zzzzzzz

各种样式bug

@@ -3,7 +3,8 @@ var $ = require('yoho-jquery'), @@ -3,7 +3,8 @@ var $ = require('yoho-jquery'),
3 lazyLoad = require('yoho-jquery-lazyload'), 3 lazyLoad = require('yoho-jquery-lazyload'),
4 fastclick = require('yoho-fastclick'), 4 fastclick = require('yoho-fastclick'),
5 tip = require('../plugin/tip'), 5 tip = require('../plugin/tip'),
6 - dialog = require('../plugin/dialog'); 6 + dialog = require('../plugin/dialog'),
  7 + Hammer = require('yoho-hammer');
7 8
8 var _weChatInterface = '//m.yohobuy.com/life/getSignPackage', 9 var _weChatInterface = '//m.yohobuy.com/life/getSignPackage',
9 wx = window.wx, 10 wx = window.wx,
@@ -413,37 +414,68 @@ $('.s-renzhen').click(function() { @@ -413,37 +414,68 @@ $('.s-renzhen').click(function() {
413 $('.dialog-wrapper').addClass('s-dialog-wrapper'); 414 $('.dialog-wrapper').addClass('s-dialog-wrapper');
414 $('.s-dialog').on('click', function() { 415 $('.s-dialog').on('click', function() {
415 var text = [{ 416 var text = [{
416 - hasHeader: '权益1: 新品立享9折',  
417 - dialogText: '1、学生购买原价新品时,可立即享受9折优惠,与VIP折扣不可同时享受', 417 + dialogText: '<h2>权益1: 新品立享9折</h2><p>1、学生购买原价新品时,可立即享受9折优惠,与VIP折扣不可同时享受</p>',
418 }, { 418 }, {
419 - hasHeader: '权益2: 每1元返1个有货币',  
420 - dialogText: '1、学生购买商品时,以商品的实际成交金额计算,每1元返1个有货币;</br></br>' +  
421 - '2、返有货币时间:确认收货7日后,系统将自动将对应数量的有货币返至购买账户;</br></br>' +  
422 - '3、有货币有效期:获得当日至次年12月31日,逾期自动作废;</br></br>' +  
423 - '4、查看有货币:登录后,点击“个人中心”在“我的有货币”中可以查看有货币余额及明细。', 419 + dialogText: '<h2>权益2: 每1元返1个有货币</h2><p>1、学生购买商品时,以商品的实际成交金额计算,每1元返1个有货币;</p>' +
  420 + '<p>2、返有货币时间:确认收货7日后,系统将自动将对应数量的有货币返至购买账户;</p>' +
  421 + '<p>3、有货币有效期:获得当日至次年12月31日,逾期自动作废;</p>' +
  422 + '<p>4、查看有货币:登录后,点击“个人中心”在“我的有货币”中可以查看有货币余额及明细。</p>',
424 }, { 423 }, {
425 - hasHeader: '权益3: 免单抽奖',  
426 - dialogText: '1、每月将在累计购物金额最高的学校中,抽取3名幸运学生用户,获得免单资格;</br></br>' +  
427 - '2、免单用户名单将在每月第1个工作日公布在有货微信公众号上,可关注【有货YOHOBUY】;</br></br>' +  
428 - '3、免单用户将在中奖次日获得与实付金额等额的现金券,使用时间:中奖当月。', 424 + dialogText: '<h2>权益3: 免单抽奖</h2><p>1、每月将在累计购物金额最高的学校中,抽取3名幸运学生用户,获得免单资格;</p>' +
  425 + '<p>2、免单用户名单将在每月第1个工作日公布在有货微信公众号上,可关注【有货YOHOBUY】;</p>' +
  426 + '<p>3、免单用户将在中奖次日获得与实付金额等额的现金券,使用时间:中奖当月。</p>',
429 }, { 427 }, {
430 - hasHeader: '权益4: 学生专享活动',  
431 - dialogText: '1、每月不定期的开展学生专享活动,可打开有货APP推送,及时查收学生专享活动通知。', 428 + dialogText: '<h2>权益4: 学生专享活动</h2><p>1、每月不定期的开展学生专享活动,可打开有货APP推送,及时查收学生专享活动通知。</p>',
432 }]; 429 }];
  430 + var dialogBoxHammer, dialogRightBtn;
433 431
434 dialog.showDialog({ 432 dialog.showDialog({
435 - hasHeader: text[$(this).index()].hasHeader, 433 + student: true,
436 dialogText: text[$(this).index()].dialogText, 434 dialogText: text[$(this).index()].dialogText,
437 hasFooter: { 435 hasFooter: {
438 rightBtnText: '我知道了' 436 rightBtnText: '我知道了'
439 } 437 }
440 }, function() { 438 }, function() {
  439 + $('body').css({
  440 + overflow: '',
  441 + position: '',
  442 + });
441 dialog.hideDialog(); 443 dialog.hideDialog();
442 }, undefined, true); 444 }, undefined, true);
443 445
444 $('.dialog-content').css({ 446 $('.dialog-content').css({
445 - 'padding-top': '0',  
446 - 'padding-bottom': '1rem', 447 + padding: '0 1.5rem 1rem 1.5rem',
  448 + });
  449 +
  450 + $('.dialog-box').css({
  451 + 'border-radius': '0.25rem',
  452 + background: '#fff',
  453 + });
  454 +
  455 + $('.dialog-right-btn').css({
  456 + color: '#d0021b',
  457 + });
  458 +
  459 + $('body').css({
  460 + overflow: 'hidden',
  461 + position: 'fixed',
  462 + });
  463 +
  464 + dialogBoxHammer = new Hammer(document.getElementsByClassName('dialog-box')[0]);
  465 + dialogRightBtn = new Hammer(document.getElementsByClassName('dialog-right-btn')[0]);
  466 +
  467 + dialogBoxHammer.on('tap', function(event) {
  468 + event.srcEvent.stopPropagation();
  469 + });
  470 +
  471 + dialogRightBtn.on('tap', function(event) {
  472 + $('body').css({
  473 + overflow: '',
  474 + position: '',
  475 + });
  476 + dialog.hideDialog();
  477 + event.preventDefault();
  478 + event.srcEvent.stopPropagation();
447 }); 479 });
448 480
449 $('.dialog-content').addClass('s-dialog-content'); 481 $('.dialog-content').addClass('s-dialog-content');
@@ -95,7 +95,7 @@ exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) { @@ -95,7 +95,7 @@ exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
95 } 95 }
96 96
97 // 禁止在dialog上可以上下滚动 97 // 禁止在dialog上可以上下滚动
98 - if (!data.hasHeader) { 98 + if (!data.student) {
99 $dialogWrapper.on('touchmove', function() { 99 $dialogWrapper.on('touchmove', function() {
100 return false; 100 return false;
101 }); 101 });
@@ -112,6 +112,10 @@ exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) { @@ -112,6 +112,10 @@ exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
112 return callback(); 112 return callback();
113 } else { 113 } else {
114 $('.dialog-wrapper').remove(); 114 $('.dialog-wrapper').remove();
  115 + $('body').css({
  116 + overflow: '',
  117 + position: '',
  118 + });
115 } 119 }
116 120
117 // 防止出现点透问题 121 // 防止出现点透问题
@@ -620,10 +620,26 @@ @@ -620,10 +620,26 @@
620 } 620 }
621 621
622 .s-dialog-content { 622 .s-dialog-content {
623 - max-height: 350px; 623 + max-height: 460px;
  624 + max-width: 540px;
624 overflow: scroll; 625 overflow: scroll;
625 text-align: left; 626 text-align: left;
626 color: #444; 627 color: #444;
  628 + font-family: 'PingFangSC-Regular';
  629 + -webkit-overflow-scrolling: touch;
  630 +
  631 + h2 {
  632 + padding: 50px 0 40px 20px;
  633 + text-align: center;
  634 + font-weight: bold;
  635 + font-size: 34px;
  636 + color: #000;
  637 + }
  638 +
  639 + p {
  640 + font-size: 28px;
  641 + padding-bottom: 30px;
  642 + }
627 } 643 }
628 644
629 .s-yohocoin { 645 .s-yohocoin {
@@ -305,7 +305,7 @@ @@ -305,7 +305,7 @@
305 305
306 &:nth-last-of-type(1) { 306 &:nth-last-of-type(1) {
307 border-left: 1px solid #ccc; 307 border-left: 1px solid #ccc;
308 - border-radius: 20px; 308 + border-radius: 0 0 10px 10px;
309 color: #e01; 309 color: #e01;
310 } 310 }
311 } 311 }