xcx

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);
+      }
+    }
   }
 })

public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxml

-<view class="data-list">
-  <scroll-view scroll-x>
-    <view class="item">
-      <view class='inner'>1</view>
+<view class="limitedtimediscount">
+  <view class="spacing-nav-title">
+    <text class="text-wrapper">限时秒杀</text>
+    <view class="countdown">
+      <block wx:if="{{is_show_time}}">
+        <view class="timer-hours seconds">{{seconds}}</view>
+        <view class="ds">:</view>
+        <view class="timer-hours minutes">{{minutes}}</view>
+        <view class="ds">:</view>
+        <view class="timer-hours hours">{{hours}}</view>
+      </block>
+      <view class="timer-title">{{timer_title}}</view>
     </view>
-    <view class="item">
-      <view class='inner'>2</view>
-    </view>
-    <view class="item">
-      <view class='inner'>3</view>
-    </view>
-    <view class="item">
-      <view class='inner'>4</view>
-    </view>
-  </scroll-view>
+  </view>
+  <view class="data-list">
+    <scroll-view scroll-x>
+      <view class="item">
+        <view class='inner'>1</view>
+      </view>
+      <view class="item">
+        <view class='inner'>2</view>
+      </view>
+      <view class="item">
+        <view class='inner'>3</view>
+      </view>
+      <view class="item">
+        <view class='inner'>4</view>
+      </view>
+    </scroll-view>
+  </view>
 </view>
\ No newline at end of file

public/appmini/old/weixin/components/limitedtimediscount/limitedtimediscount.wxss

-.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;
 }
 
 /*设置行内块*/