列表倒计时添加

 {
 {
   "component": true, 
   "component": true, 
-  "usingComponents": {} 
+  "usingComponents": {
+    "time-countdown": "./timeCountDown/time-countdown"
+  } 
 }
 }

   
   
   <wxs src="./helper.wxs" module="helper" />
   <wxs src="./helper.wxs" module="helper" />
-
+  <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown>
   <image class="product_image" src="{{product.cover_img}}"></image>
   <image class="product_image" src="{{product.cover_img}}"></image>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_price" >{{product.price}}</view>
   <view class="product_price" >{{product.price}}</view>
-  <view class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
+  <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
+  <view class="product_margin"></view>

@@ -26,7 +26,6 @@
   color: #B0B0B0;
   color: #B0B0B0;
   font-size: 24rpx;
   font-size: 24rpx;
   margin-top: 16rpx;
   margin-top: 16rpx;
-  margin-bottom: 40rpx;
 }
 }
 
 
 .product_time:before {
 .product_time:before {
@@ -47,4 +46,15 @@
   background-color: #D8D8D8;
   background-color: #D8D8D8;
   margin-left: 20rpx;
   margin-left: 20rpx;
   vertical-align: 6rpx
   vertical-align: 6rpx
+}
+
+.product_margin {
+    margin-bottom: 40rpx;
+}
+
+.product_countdown {
+  display: block;
+  height: 92rpx;
+  margin-top: 40rpx;
+  margin-bottom: 40rpx;
 }
 }

@@ -4,7 +4,12 @@ Component({
    * 组件的属性列表
    * 组件的属性列表
    */
    */
   properties: {
   properties: {
-
+    endTime: {//结束时间
+      type: Number
+    },
+    formatTime: {
+      type: Array
+    }
   },
   },
 
 
   /**
   /**
@@ -14,10 +19,53 @@ Component({
 
 
   },
   },
 
 
+  ready: function() {
+    this.formatTime()
+  },
   /**
   /**
    * 组件的方法列表
    * 组件的方法列表
    */
    */
   methods: {
   methods: {
+      formatTime:function() {
+        let self = this
+        setInterval(function() {
+          self.setData({
+            formatTime: self.formatCountDown(self.properties.endTime)
+          })
+        },1000)
+      },
+      formatCountDown:function formatCountDown(end) {
+        if (end === 0) {
+          return '00000000'
+        }
+        var timeInSecond = (end * 1000 - Date.now()) / 1000
+
+        var day = 24 * 60 * 60
+        var numberOfDay = Math.floor(timeInSecond / day)
+        timeInSecond = timeInSecond - numberOfDay * day
+        numberOfDay = Math.min(numberOfDay, 99)
+
+        var hour = 60 * 60
+        var numberOfHour = Math.floor(timeInSecond / hour)
+        timeInSecond = timeInSecond - numberOfHour * hour
+
+        var minute = 60
+        var numberOfMinute = Math.floor(timeInSecond / minute)
+        timeInSecond = timeInSecond - numberOfMinute * minute
+
+        var numberOfSecond = parseInt(timeInSecond)
+
+        var list = [numberOfDay, numberOfHour, numberOfMinute, numberOfSecond]
 
 
+        for (var i = 0; i < list.length; i++) {
+          var item = list[i]
+          if (item < 10) {
+            list[i] = '0' + item
+          } else {
+            list[i] = '' + item
+          }
+        }
+        return list
+      }
   }
   }
 })
 })

 <!--pages/zeroSell/components/timeCountDown/time-countdown.wxml-->
 <!--pages/zeroSell/components/timeCountDown/time-countdown.wxml-->
-<text>pages/zeroSell/components/timeCountDown/time-countdown.wxml</text>
+<block wx:for="{{formatTime}}" wx:key="">
+      <view class="num-wrapper">
+        <text>{{item}}</text>
+        <view class="mask"></view>
+      </view>
+      <view class="number-seprator" wx:if="{{index !== 3}}">
+        :
+      </view>
+    </block>

-/* pages/zeroSell/components/timeCountDown/time-countdown.wxss */
+.num-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 72rpx;
+  height: 72rpx;
+  font-size: 56rpx;
+  line-height: 72rpx;
+  background: black;
+  color: white;
+  font-weight: bolder;
+}
+
+.num-wrapper + .num-wrapper {
+  margin-left: 10rpx;
+}
+
+.mask {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  top: 0;
+  left: 0;
+  opacity: 0.4;
+  background-color: black;
+}
+
+.number-seprator {
+  font-size: 56rpx;
+  line-height: 72rpx;
+  color: black;
+  display: inline;
+}