fe / yohobuywap-node · Commits

Go to a project

Authored by 陈峰
Commit 5c27c42f8fb2828ff60daa9286236ba185998bee 1 parent 1e45099b

改造秒杀列表页脚本结构，参考activity/invite

Inline Side-by-side
Showing 6 changed files with 112 additions and 84 deletions
@@ -52,20 +52,20 @@ const _index = (req, res, next) => { @@ -52,20 +52,20 @@ const _index = (req, res, next) => {
52 time: '12:00', 52 time: '12:00',
53 over: true 53 over: true
54 }, { 54 }, {
55 - day: '2016/09/09',  
56 - time: '17:25', 55 + day: '2016/09/12',
  56 + time: '10:40',
57 now: true 57 now: true
58 }, { 58 }, {
59 - day: '2016/09/09',  
60 - time: '17:26', 59 + day: '2016/09/12',
  60 + time: '10:50',
61 wait: true 61 wait: true
62 }, { 62 }, {
63 - day: '2016/09/09',  
64 - time: '17:27', 63 + day: '2016/09/12',
  64 + time: '11:00',
65 wait: true 65 wait: true
66 }, { 66 }, {
67 - day: '2016/09/09',  
68 - time: '17:28', 67 + day: '2016/09/12',
  68 + time: '11:10',
69 last: true, 69 last: true,
70 wait: true 70 wait: true
71 }] 71 }]
1 <div class="seckill-list"> 1 <div class="seckill-list">
2 {{> seckill/nav}} 2 {{> seckill/nav}}
3 - <div class="tips">您只有在详情页使用立即购买，才能享受秒杀价</div> 3 + <section class="tips">您只有在详情页使用立即购买，才能享受秒杀价</section>
4 <div class="product-list"> 4 <div class="product-list">
5 {{# products}} 5 {{# products}}
6 {{> seckill/product}} 6 {{> seckill/product}}
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 14
15 <div class="item-foot"> 15 <div class="item-foot">
16 {{# if wait}} 16 {{# if wait}}
17 - <div class="item-time"><span><i class="iconfont">&#xe603;</i>8月31日 19:00开始</span></div> 17 + <div class="item-time"><span><i class="iconfont">&#xe603;</i><time>8月31日 19:00</time>开始</span></div>
18 {{else}} 18 {{else}}
19 <div class="item-price"> 19 <div class="item-price">
20 <ins>¥99</ins><del>¥234</del> 20 <ins>¥99</ins><del>¥234</del>
@@ -3,36 +3,66 @@ @@ -3,36 +3,66 @@
3 * author: 陈峰<feng.chen@yoho.cn> 3 * author: 陈峰<feng.chen@yoho.cn>
4 * date: 2016/09/08 4 * date: 2016/09/08
5 */ 5 */
  6 +var $ = require('yoho-jquery'),
  7 + IScroll = require('yoho-iscroll'),
  8 + seckillObj = {};
6 9
7 -(function(){  
8 - var $ = require('yoho-jquery'),  
9 - IScroll = require('yoho-iscroll'); 10 +seckillObj = {
  11 + el: {
  12 + //doms
  13 + $navUl: $('.nav-ul'),
  14 + $navList: $('.nav-list'),
10 15
11 - var times = $('.nav-ul>li').length,  
12 - startX = 0,  
13 - timeWidth = 0,  
14 - focusTimeWidth = 0,  
15 - iScroll; 16 + //变量
  17 + times: $('.nav-ul>li').length,
  18 + startX: 0,
  19 + timeWidth: 0,
  20 + focusTimeWidth: 0,
  21 + iScroll: null,
  22 + currentTick: null
  23 + },
  24 + /**
  25 + * [初始化界面]
  26 + */
  27 + init: function() {
  28 + var $el = this.el, that = this;
  29 +
  30 + $el.$navUl.find('>li').click(function () {
  31 + that.selectTime(this);
  32 + });
  33 +
  34 + $(window).resize(function() {
  35 + that.initNav();
  36 + })
  37 +
  38 + that.initNav();
16 39
  40 + var focus = $el.$navUl.find('>li.focus');
  41 + if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {
  42 + that.initTick($('.nav-ul>li.focus'));
  43 + }
  44 + },
17 /** 45 /**
18 * [初始化时间段] 46 * [初始化时间段]
19 */ 47 */
20 - function initNav() {  
21 - timeWidth = ($('.nav-ul>li:not(.focus)').width() + 1);  
22 - focusTimeWidth = ($('.nav-ul>li.focus').width() + 1); 48 + initNav: function() {
  49 + var $el = this.el, that = this;
23 50
24 - $('.nav-ul').width((times - 1) * timeWidth + focusTimeWidth).removeClass('hide'); 51 + timeWidth = ($el.$navUl.find('>li:not(.focus)').width() + 1);
  52 + focusTimeWidth = ($el.$navUl.find('>li.focus').width() + 1);
  53 +
  54 + $el.$navUl.width(($el.times - 1) * timeWidth + focusTimeWidth).removeClass('hide');
25 //只有时间段大于3个才需要定位 55 //只有时间段大于3个才需要定位
26 - if ($('.nav-ul>li').length > 3 && $('.nav-ul>li.focus').length) {  
27 - startX = (0 - ($('.nav-ul>li.focus').index()-1)*timeWidth); 56 + if ($el.$navUl.find('>li').length > 3 && $el.$navUl.find('>li.focus').length) {
  57 + $el.startX = (0 - ($el.$navUl.find('>li.focus').index()-1)*timeWidth);
28 } 58 }
29 - if (iScroll) {  
30 - iScroll.destroy(); 59 + if ($el.iScroll) {
  60 + $el.iScroll.destroy();
31 } 61 }
32 - iScroll = new IScroll($('.nav-list')[0], { 62 + $el.iScroll = new IScroll($el.$navList[0], {
33 scrollX: true, 63 scrollX: true,
34 scrollY: false, 64 scrollY: false,
35 - startX: startX, 65 + startX: $el.startX,
36 tap: true, 66 tap: true,
37 eventPassthrough: true, 67 eventPassthrough: true,
38 preventDefault: true, 68 preventDefault: true,
@@ -41,67 +71,66 @@ @@ -41,67 +71,66 @@
41 style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)' 71 style: 'cubic-bezier(0.333333, 0.666667, 0.666667, 1)'
42 } 72 }
43 }); 73 });
44 - registerScrollEvents(iScroll);  
45 - } 74 + that.registerScrollEvents($el.iScroll);
  75 + },
46 /** 76 /**
47 * [注册iscroll事件，滑动停止时判断位置自动选中居中时间段] 77 * [注册iscroll事件，滑动停止时判断位置自动选中居中时间段]
48 */ 78 */
49 - function registerScrollEvents(iScroll) { 79 + registerScrollEvents: function(iScroll) {
  80 + var $el = this.el, that = this;
  81 +
50 iScroll.on('scrollStart', function () { 82 iScroll.on('scrollStart', function () {
51 - $('.nav-list').addClass('srolling'); 83 + $el.$navList.addClass('srolling');
52 }); 84 });
53 iScroll.on('scrollEnd', function () { 85 iScroll.on('scrollEnd', function () {
54 //避免死循环 86 //避免死循环
55 - if ($('.nav-list').hasClass('srolling')) {  
56 - $('.nav-list').removeClass('srolling'); 87 + if ($el.$navList.hasClass('srolling')) {
  88 + $el.$navList.removeClass('srolling');
57 var offsetLeft = this.x - $(window).width()/2; 89 var offsetLeft = this.x - $(window).width()/2;
58 - for (var i = 0; i < $('.nav-ul>li').length; i++) {  
59 - offsetLeft += $('.nav-ul>li').eq(i).width(); 90 + for (var i = 0; i < $el.$navUl.find('>li').length; i++) {
  91 + offsetLeft += $el.$navUl.find('>li').eq(i).width();
60 if (offsetLeft >= 0) { //判断选中时间段 92 if (offsetLeft >= 0) { //判断选中时间段
61 - selectTime($('.nav-ul>li').eq(i)); 93 + that.selectTime($el.$navUl.find('>li').eq(i));
62 break; 94 break;
63 } 95 }
64 } 96 }
65 } 97 }
66 }); 98 });
67 - } 99 + },
68 /** 100 /**
69 * [选中时间段] 101 * [选中时间段]
70 */ 102 */
71 - function selectTime(el) {  
72 - $('.nav-ul>li').removeClass('focus');  
73 - var index = $(el).index(); 103 + selectTime: function(elem) {
  104 + var $el = this.el, that = this;
74 105
75 - $(el).addClass('focus'); 106 + $el.$navUl.find('>li').removeClass('focus');
  107 + var index = $(elem).index();
  108 +
  109 + $(elem).addClass('focus');
76 //点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中 110 //点击切换时遇到首尾特殊处理选中时间段位置,大于3个才需要滑动选中
77 - if ($('.nav-ul>li').length > 3) { 111 + if ($el.$navUl.find('>li').length > 3) {
78 if (index === 0) { 112 if (index === 0) {
79 - iScroll.scrollTo(0, 0, 400);  
80 - } else if (index === $('.nav-ul>li').length - 1) {  
81 - iScroll.scrollTo(0 - $('.nav-ul').width() + timeWidth * 2 + focusTimeWidth, 0, 400); 113 + $el.iScroll.scrollTo(0, 0, 400);
  114 + } else if (index === $el.$navUl.find('>li').length - 1) {
  115 + $el.iScroll.scrollTo(0 - $el.$navUl.width() + timeWidth * 2 + focusTimeWidth, 0, 400);
82 } else { 116 } else {
83 - iScroll.scrollTo((0 - (index-1)*timeWidth), 0, 400); 117 + $el.iScroll.scrollTo((0 - (index-1)*timeWidth), 0, 400);
84 } 118 }
85 } 119 }
86 120
87 - if ($(el).hasClass('now') || $(el).hasClass('wait')) { 121 + if ($(elem).hasClass('now') || $(elem).hasClass('wait')) {
88 //初始化倒计时并开始计时 122 //初始化倒计时并开始计时
89 - initTick(el);  
90 - } 123 + that.initTick(elem);
91 } 124 }
92 - $('.nav-ul>li').click(function () {  
93 - selectTime(this);  
94 - });  
95 -  
96 - 125 + },
97 /** 126 /**
98 * [刷新状态] 127 * [刷新状态]
99 - * @param {[type]} el [description]  
100 - * @return {[type]} [description]  
101 */ 128 */
102 - function refreshList(el) { 129 + refreshList: function(el) {
  130 + var $el = this.el, that = this;
  131 +
103 //刷新时间段状态 132 //刷新时间段状态
104 - $('.nav-ul>li').each(function () { 133 + $el.$navUl.find('>li').each(function () {
105 $(this).removeClass('now over wait'); 134 $(this).removeClass('now over wait');
106 var time = new Date($(this).find('input.date').val()); 135 var time = new Date($(this).find('input.date').val());
107 var nowTime = new Date(); 136 var nowTime = new Date();
@@ -122,31 +151,34 @@ @@ -122,31 +151,34 @@
122 }) 151 })
123 //刷新列表状态 152 //刷新列表状态
124 console.log('刷新啊') 153 console.log('刷新啊')
125 - } 154 + },
126 /** 155 /**
127 * [初始化倒计时] 156 * [初始化倒计时]
128 */ 157 */
129 - var currentTick;  
130 - function initTick(el) {  
131 - if (currentTick) {  
132 - clearTimeout(currentTick); 158 + initTick: function(elem) {
  159 + var $el = this.el, that = this;
  160 +
  161 + if ($el.currentTick) {
  162 + clearTimeout($el.currentTick);
133 } 163 }
134 var time; 164 var time;
135 165
136 var nowTime = Date.parse(new Date()) / 1000; 166 var nowTime = Date.parse(new Date()) / 1000;
137 var offsetTime; 167 var offsetTime;
138 - if ($(el).hasClass('now')) {  
139 - time = Date.parse(new Date($(el).next().find('input.date').val())) / 1000; 168 + if ($(elem).hasClass('now')) {
  169 + time = Date.parse(new Date($(elem).next().find('input.date').val())) / 1000;
140 } else { 170 } else {
141 - time = Date.parse(new Date($(el).find('input.date').val())) / 1000; 171 + time = Date.parse(new Date($(elem).find('input.date').val())) / 1000;
142 } 172 }
143 offsetTime = time - nowTime; 173 offsetTime = time - nowTime;
144 - startTick(el, offsetTime);  
145 - } 174 + that.startTick(elem, offsetTime);
  175 + },
146 /** 176 /**
147 * [开始倒计时] 177 * [开始倒计时]
148 */ 178 */
149 - function startTick(el, offsetTime) { 179 + startTick: function(el, offsetTime) {
  180 + var $el = this.el, that = this;
  181 +
150 var hour = parseInt(offsetTime / (60 * 60), 10); 182 var hour = parseInt(offsetTime / (60 * 60), 10);
151 var minute = parseInt(offsetTime % (60 * 60) / 60, 10); 183 var minute = parseInt(offsetTime % (60 * 60) / 60, 10);
152 var second = offsetTime % 60; 184 var second = offsetTime % 60;
@@ -154,23 +186,13 @@ @@ -154,23 +186,13 @@
154 $(el).find('.tick.minute').text(minute < 0 ? '00': (minute<10?('0'+minute):minute)); 186 $(el).find('.tick.minute').text(minute < 0 ? '00': (minute<10?('0'+minute):minute));
155 $(el).find('.tick.second').text(second < 0 ? '00': (second<10?('0'+second):second)); 187 $(el).find('.tick.second').text(second < 0 ? '00': (second<10?('0'+second):second));
156 if (offsetTime <= 0) { //结束倒计时刷新状态 188 if (offsetTime <= 0) { //结束倒计时刷新状态
157 - refreshList(el); 189 + that.refreshList(el);
158 } else { 190 } else {
159 setTimeout(function() { 191 setTimeout(function() {
160 - startTick(el, --offsetTime); 192 + that.startTick(el, --offsetTime);
161 }, 1000); 193 }, 1000);
162 } 194 }
163 } 195 }
  196 +}
164 197
165 - $(window).resize(function() {  
166 - initNav();  
167 - })  
168 -  
169 - initNav();  
170 -  
171 - var focus = $('.nav-ul>li.focus');  
172 - if (focus.length && (focus.hasClass('now') || focus.hasClass('wait'))) {  
173 - initTick($('.nav-ul>li.focus'));  
174 - }  
175 -  
176 -}())  
  198 +seckillObj.init();
@@ -6,6 +6,7 @@ @@ -6,6 +6,7 @@
6 border-top: solid 1PX #e1e1e1; 6 border-top: solid 1PX #e1e1e1;
7 border-bottom: solid 1PX #e1e1e1; 7 border-bottom: solid 1PX #e1e1e1;
8 height: 119px; 8 height: 119px;
  9 + overflow: hidden;
9 ul { 10 ul {
10 width: auto; 11 width: auto;
11 overflow: hidden; 12 overflow: hidden;
@@ -87,6 +87,11 @@ @@ -87,6 +87,11 @@
87 } 87 }
88 } 88 }
89 .old-price { 89 .old-price {
  90 + display: block;
  91 + width: 100%;
  92 + position: absolute;
  93 + top: -35px;
  94 + right: 0px;
90 font-size: 20px; 95 font-size: 20px;
91 color: #d0021b; 96 color: #d0021b;
92 line-height: 30px; 97 line-height: 30px;