From 115ab284d3a02780648bceb1fd0c826bc1f94894 Mon Sep 17 00:00:00 2001 From: gongfuxiang <2499232802@qq.com> Date: Fri, 5 Jul 2019 00:37:12 +0800 Subject: [PATCH] xcx --- .../limitedtimediscount.js | 49 ++++++++++++++++++ .../limitedtimediscount.wxml | 43 +++++++++++----- .../limitedtimediscount.wxss | 51 ++++++++++++++++++- 3 files changed, 127 insertions(+), 16 deletions(-) diff --git a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.js b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.js index 7e71e1b4f..244c25f78 100644 --- a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.js +++ b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.js @@ -11,13 +11,62 @@ Component({ * 组件的初始数据 */ data: { + hours: 0, + minutes: 0, + seconds: 30, + timer_title: '距离结束', + is_show_time: true, + }, + ready: function () { + this.countdown(); }, /** * 组件的方法列表 */ methods: { + // 倒计时 + countdown() { + if (this.data.hours > 0 || this.data.minutes > 0 || this.data.seconds > 0) { + var hours = this.data.hours; + var minutes = this.data.minutes; + var seconds = this.data.seconds; + // 秒 + var self = this; + var timer = setInterval(function () { + if (seconds <= 0) { + if (minutes > 0) { + minutes--; + seconds = 59; + } else if (hours > 0) { + hours--; + minutes = 59; + seconds = 59; + } + } else { + seconds--; + } + + self.setData({ + hours: (hours < 10) ? 0 + hours : hours, + minutes: (minutes < 10) ? 0 + minutes : minutes, + seconds: (seconds < 10) ? 0 + seconds : seconds, + }); + + if (hours <= 0 && minutes <= 0 && seconds <= 0) { + // 停止时间 + clearInterval(timer); + + // 活动已结束 + self.setData({ + timer_title: '活动已结束', + is_show_time: false, + }); + } + }, 1000); + } + } } }) diff --git a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml index 210ee33c3..ef2406254 100644 --- a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml +++ b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml @@ -1,16 +1,31 @@ - - - - 1 + + + 限时秒杀 + + + {{seconds}} + : + {{minutes}} + : + {{hours}} + + {{timer_title}} - - 2 - - - 3 - - - 4 - - + + + + + 1 + + + 2 + + + 3 + + + 4 + + + \ No newline at end of file diff --git a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss index 24ff9348c..55a2ae906 100644 --- a/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss +++ b/public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss @@ -1,9 +1,56 @@ -.data-list { +.limitedtimediscount { background: #fff; - padding: 20rpx 10rpx; + padding: 5rpx 10rpx 20rpx 10rpx; + margin-bottom: 20rpx; +} + +/* + 定时器 +*/ +.spacing-nav-title { + overflow: hidden; + padding: 10rpx 0; +} +.text-wrapper { + color: #d2364c; + font-size: 36rpx; + font-weight: bold; +} +.countdown { + line-height: 50rpx; + float: right; +} +.countdown view { + margin-right: 0; + float: right; +} +.countdown .timer-title { + color: #666; + margin-right: 10rpx; +} +.countdown .timer-hours { + padding: 0 12rpx; + -moz-border-radius: 8rpx; + border-radius: 8rpx; + background-color: #3A4145; + color: #fff; + min-width: 35rpx; + text-align: center; +} +.countdown .ds { + color: #4B5459; + padding: 0 8rpx; + font-weight: 700; +} + +/* + 商品 +*/ +.data-list { width: 100%; white-space: nowrap; box-sizing: border-box; + margin-top: 5rpx; } /*设置行内块*/