Authored by lea guo

yohood抽奖定时器实现

@@ -50,12 +50,12 @@ Component({ @@ -50,12 +50,12 @@ Component({
50 value: 0, 50 value: 0,
51 }, 51 },
52 // time in seconds 52 // time in seconds
53 - startTime: {  
54 - type: Number,  
55 - value: 0,  
56 - observer: function(startTime) { 53 + formatTimeList: {
  54 + type: Array,
  55 + value: [],
  56 + observer(value) {
57 this.setData({ 57 this.setData({
58 - remainingTime: fomartCountdownTime({ startTime }).join(':'), 58 + remainingTime: value.join(':'),
59 }); 59 });
60 }, 60 },
61 }, 61 },
@@ -77,26 +77,12 @@ Component({ @@ -77,26 +77,12 @@ Component({
77 code: '', 77 code: '',
78 error: false, 78 error: false,
79 fellow: false, 79 fellow: false,
80 - isStart: false,  
81 remainingTime: '', 80 remainingTime: '',
82 }, 81 },
83 82
84 ready() { 83 ready() {
85 this.service = new ZeroSellService(); 84 this.service = new ZeroSellService();
86 this.commonService = new CommonService(); 85 this.commonService = new CommonService();
87 - const timeId = setInterval(() => {  
88 - if (this.data.isStart) {  
89 - this.triggerEvent('changeStatus');  
90 - clearInterval(timeId);  
91 - }  
92 - const fomartTimes = fomartCountdownTime({  
93 - startTime: this.properties.startTime,  
94 - });  
95 - this.setData({  
96 - remainingTime: fomartTimes.join(':') || '00:00:00',  
97 - isStart: fomartTimes.join('') === "000000" && this.properties.status === 1,  
98 - });  
99 - }, 1000);  
100 }, 86 },
101 87
102 /** 88 /**
@@ -42,7 +42,9 @@ @@ -42,7 +42,9 @@
42 <view class="code">{{code}}</view> 42 <view class="code">{{code}}</view>
43 </view> 43 </view>
44 <form bindsubmit='submitFormId' report-submit='true'> 44 <form bindsubmit='submitFormId' report-submit='true'>
45 - <button open-type="share" class="share" form-type="submit" bindtap="hadJoinToShare">分享一下,中奖概率立马double</button> 45 + <button open-type="share" class="share" form-type="submit" bindtap="hadJoinToShare">
  46 + 分享一下,中奖概率立马double
  47 + </button>
46 </form> 48 </form>
47 <view class="share-desc">1个好友参加=1个抽奖码=中奖几率UP!</view> 49 <view class="share-desc">1个好友参加=1个抽奖码=中奖几率UP!</view>
48 </view> 50 </view>
1 // page/subPackage/pages/zeroSell/components/product-detail-header.js 1 // page/subPackage/pages/zeroSell/components/product-detail-header.js
2 2
3 -import { fomartCountdownTime,formatTimeByDefined } from '../../../../utils/util'; 3 +import { formatTimeByDefined } from '../../../../utils/util';
4 Component({ 4 Component({
5 properties: { 5 properties: {
6 product: { 6 product: {
7 type: Object, 7 type: Object,
8 observer(product) { 8 observer(product) {
9 - const {end_time: endTime, start_time: startTime, status} = product  
10 - let nextActivityTime = ''  
11 - if(status === 1 && endTime) {  
12 - nextActivityTime = `${formatTimeByDefined(startTime, 'Y-M-D h:m')}-${formatTimeByDefined(endTime, 'h:m')}` 9 + const { end_time: endTime, start_time: startTime, status } = product;
  10 + let nextActivityTime = '';
  11 + if (status === 1 && endTime) {
  12 + nextActivityTime = `${formatTimeByDefined(
  13 + startTime,
  14 + 'Y-M-D h:m',
  15 + )}-${formatTimeByDefined(endTime, 'h:m')}`;
13 } 16 }
14 this.setData({ 17 this.setData({
15 - formatTimeList: this.formatCountDown(),  
16 - nextActivityTime 18 + nextActivityTime,
17 }); 19 });
18 }, 20 },
19 }, 21 },
@@ -27,31 +29,16 @@ Component({ @@ -27,31 +29,16 @@ Component({
27 this.setData({ show: value }); 29 this.setData({ show: value });
28 }, 30 },
29 }, 31 },
  32 + formatTimeList: {
  33 + type: Array,
  34 + value: [],
  35 + },
30 }, 36 },
31 data: { 37 data: {
32 show: false, 38 show: false,
33 isEnd: false, 39 isEnd: false,
34 - formatTimeList: [],  
35 - nextActivityTime: ''  
36 - },  
37 - ready: function() {  
38 - const timeId = setInterval(() => {  
39 - if (this.data.isEnd) {  
40 - this.triggerEvent('changeStatus');  
41 - clearInterval(timeId);  
42 - }  
43 - const formatTimeList = this.formatCountDown();  
44 - this.setData({  
45 - formatTimeList: formatTimeList,  
46 - isEnd: formatTimeList.join('') === "000000" && this.properties.product.status === 2,  
47 - });  
48 - }, 1000);  
49 - },  
50 - methods: {  
51 - formatCountDown() {  
52 - // 时间单位为S  
53 - let { end_time: endTime = 0 } = this.properties.product || {};  
54 - return fomartCountdownTime({ endTime });  
55 - }, 40 + nextActivityTime: '',
56 }, 41 },
  42 + ready() {},
  43 + methods: {},
57 }); 44 });
@@ -7,17 +7,11 @@ import { @@ -7,17 +7,11 @@ import {
7 openAuthorizeSettings, 7 openAuthorizeSettings,
8 } from '../../utils/login'; 8 } from '../../utils/login';
9 import { getQRCodeSource } from '../../libs/miniQRCodeRoute'; 9 import { getQRCodeSource } from '../../libs/miniQRCodeRoute';
10 -import { Toast } from '../../vendors/zanui/index'; 10 +import { Toast } from '../../vendors/zanui/index';
11 import router from './router/router'; 11 import router from './router/router';
12 -import { wrapperName } from './helper';  
13 -import { formatImageUrl } from '../../utils/util'; 12 +import { formatImageUrl, fomartCountdownTime } from '../../utils/util';
14 import { jumpByUrl } from '../../libs/urlRoute'; 13 import { jumpByUrl } from '../../libs/urlRoute';
15 -import {  
16 - yasReport,  
17 - YB_PAGE_OPEN_L,  
18 - YB_LUCK_DT_GDS_C,  
19 - YB_LUCK_DT_JOIN_C,  
20 -} from '../../libs/yas'; 14 +import { yasReport, YB_PAGE_OPEN_L, YB_LUCK_DT_JOIN_C } from '../../libs/yas';
21 15
22 const ACTIVITY = { 16 const ACTIVITY = {
23 UNKNOWN: 0, 17 UNKNOWN: 0,
@@ -77,7 +71,9 @@ Page( @@ -77,7 +71,9 @@ Page(
77 shareFlag: false, 71 shareFlag: false,
78 notice: {}, 72 notice: {},
79 lottery: {}, 73 lottery: {},
80 - remainingTime: '', 74 + formatTimeList: [],
  75 + isCountdownEnd: false,
  76 + timeId: null,
81 }, 77 },
82 78
83 /** 79 /**
@@ -299,20 +295,17 @@ Page( @@ -299,20 +295,17 @@ Page(
299 actPrizeId: this.data.actPrizeId, 295 actPrizeId: this.data.actPrizeId,
300 }; 296 };
301 297
302 - return this.service.getYohoodDetail(params)  
303 - .then((r1) => { 298 + return this.service
  299 + .getYohoodDetail(params)
  300 + .then(r1 => {
304 wx.hideLoading(); 301 wx.hideLoading();
305 if (r1.code === 200 && r1.data) { 302 if (r1.code === 200 && r1.data) {
306 let product = r1.data; 303 let product = r1.data;
307 -  
308 -  
309 - let qrcode = this.service.getQrCode({  
310 - shareUid: app.getUid(),  
311 - actPrizeId: this.data.actPrizeId || product.id || '',  
312 - });  
313 304
314 this._getMineCode(product.id); 305 this._getMineCode(product.id);
315 306
  307 + this._formatCountdownTime(product.remaining);
  308 +
316 this.setData({ 309 this.setData({
317 product: product, 310 product: product,
318 actPrizeId: this.data.actPrizeId || product.id || '', 311 actPrizeId: this.data.actPrizeId || product.id || '',
@@ -332,6 +325,30 @@ Page( @@ -332,6 +325,30 @@ Page(
332 }); 325 });
333 }, 326 },
334 327
  328 + _formatCountdownTime(remaining) {
  329 + if (this.data.timeId || !remaining) {
  330 + return;
  331 + }
  332 + // 初始化倒计时时间
  333 + const formatTimeList = fomartCountdownTime(remaining);
  334 + this.setData({
  335 + formatTimeList,
  336 + });
  337 + const timeId = setInterval(() => {
  338 + if (this.data.isCountdownEnd) {
  339 + this.changeActionStatus();
  340 + clearInterval(timeId);
  341 + }
  342 + remaining--;
  343 + const formatTimeList = fomartCountdownTime(remaining);
  344 + this.setData({
  345 + formatTimeList,
  346 + timeId,
  347 + isCountdownEnd: formatTimeList.join('') === '000000',
  348 + });
  349 + }, 1000);
  350 + },
  351 +
335 _fetchParams(code) { 352 _fetchParams(code) {
336 return getQRCodeSource(code).then(result => { 353 return getQRCodeSource(code).then(result => {
337 this.setData({ 354 this.setData({
@@ -387,7 +404,7 @@ Page( @@ -387,7 +404,7 @@ Page(
387 return this.data.myPrizeCount > 0; 404 return this.data.myPrizeCount > 0;
388 }, 405 },
389 406
390 - changeActionStatus(isStart) { 407 + changeActionStatus() {
391 wx.showLoading({ 408 wx.showLoading({
392 mask: true, 409 mask: true,
393 }); 410 });
@@ -454,7 +471,9 @@ Page( @@ -454,7 +471,9 @@ Page(
454 }, 471 },
455 onShareAppMessage(res) { 472 onShareAppMessage(res) {
456 let params = { 473 let params = {
457 - TITLE: `有货UFOYohood现场搞事情,点一下可原价购买${this.data.product.name}`, 474 + TITLE: `有货UFOYohood现场搞事情,点一下可原价购买${
  475 + this.data.product.name
  476 + }`,
458 DESC: '我在YOHOOD发现一个不错的商品赶快来看看吧!', 477 DESC: '我在YOHOOD发现一个不错的商品赶快来看看吧!',
459 }; 478 };
460 this.setData({ 479 this.setData({
@@ -471,7 +490,9 @@ Page( @@ -471,7 +490,9 @@ Page(
471 return { 490 return {
472 title: params.TITLE, // 分享标题 491 title: params.TITLE, // 分享标题
473 desc: params.DESC, // 分享描述 492 desc: params.DESC, // 分享描述
474 - path: `/pages/zeroSell/originalPriceSell?actPrizeId=${this.data.product.id}`, 493 + path: `/pages/zeroSell/originalPriceSell?actPrizeId=${
  494 + this.data.product.id
  495 + }`,
475 }; 496 };
476 } else if (res.from === 'button') { 497 } else if (res.from === 'button') {
477 // 用户点击分享按钮 498 // 用户点击分享按钮
1 <view class="header {{shareFlag || (notice.content || product.status >= 3 ? 'mt-header': '') }}"> 1 <view class="header {{shareFlag || (notice.content || product.status >= 3 ? 'mt-header': '') }}">
2 - <product-header product="{{product}}" shareFlag="{{shareFlag}}" bindchangeStatus="changeActionStatus" avatars="{{avatars}}"></product-header> 2 + <product-header product="{{product}}" shareFlag="{{shareFlag}}" format-timeList="{{formatTimeList}}" bindchangeStatus="changeActionStatus" avatars="{{avatars}}"></product-header>
3 </view> 3 </view>
4 <view class="lottery-info"> 4 <view class="lottery-info">
5 <view class="flow-tile-wrap"> 5 <view class="flow-tile-wrap">
@@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
40 </block> 40 </block>
41 </view> 41 </view>
42 <view class="action-bar"> 42 <view class="action-bar">
43 - <action-bar activity-status="{{product.status}}" start-time="{{product.start_time}}" is-login="{{isLogin}}" status="{{actionStatus}}" num="{{myPrizeCount}}" share-uid="{{shareUid}}" act-id="{{actPrizeId}}" bindchangeStatus="changeActionStatus" bindshare="share" copyText="{{lottery.miniappCopy}}" text="{{lottery.miniappTip}}" bindgaincodesuccess="reportSuccess" type="{{lottery.miniappType}}"></action-bar> 43 + <action-bar activity-status="{{product.status}}" format-timeList="{{formatTimeList}}" is-login="{{isLogin}}" status="{{actionStatus}}" num="{{myPrizeCount}}" share-uid="{{shareUid}}" act-id="{{actPrizeId}}" bindchangeStatus="changeActionStatus" bindshare="share" copyText="{{lottery.miniappCopy}}" text="{{lottery.miniappTip}}" bindgaincodesuccess="reportSuccess" type="{{lottery.miniappType}}"></action-bar>
44 </view> 44 </view>
45 <view class="foot"></view> 45 <view class="foot"></view>
46 <import src="../../vendors/zanui/toast/index.wxml" /> 46 <import src="../../vendors/zanui/toast/index.wxml" />
@@ -402,21 +402,13 @@ function removeStorageSync(key, fromPage) { @@ -402,21 +402,13 @@ function removeStorageSync(key, fromPage) {
402 * 格式化倒计时时间 402 * 格式化倒计时时间
403 * time in seconds 403 * time in seconds
404 */ 404 */
405 -function fomartCountdownTime({ startTime, endTime }) {  
406 - let remainingTime = 0;  
407 -  
408 - if (endTime) {  
409 - remainingTime = endTime - Date.now() / 1000;  
410 - } else if (startTime) {  
411 - remainingTime = startTime - Date.now() / 1000;  
412 - }  
413 -  
414 - if (remainingTime <= 0) { 405 +function fomartCountdownTime(remainingTimeInSeconds = 0) {
  406 + if (remainingTimeInSeconds < 0) {
415 return []; 407 return [];
416 } 408 }
417 409
418 - const timeInHour = Math.floor(remainingTime / 3600);  
419 - remainingTime = remainingTime - timeInHour * 3600; 410 + const timeInHour = Math.floor(remainingTimeInSeconds / 3600);
  411 + let remainingTime = remainingTimeInSeconds - timeInHour * 3600;
420 412
421 const timeInMinute = Math.floor(remainingTime / 60); 413 const timeInMinute = Math.floor(remainingTime / 60);
422 remainingTime = parseInt(remainingTime - timeInMinute * 60); 414 remainingTime = parseInt(remainingTime - timeInMinute * 60);