倒数计时功能

api/luck-draw.js

@@ -6,7 +6,7 @@ class LuckDraw extends request {
         let params = {
             id
         }
-        return this.postRequest(`${this.BASE_URL}open/luck-draw/detail`, params)
+        return this.postRequest(`${this.BASE_URL}open/luck-draw/detail`, params, true)
     }
 
     static drawPrize(activityId, mobile) {
@@ -14,14 +14,14 @@ class LuckDraw extends request {
             activityId,
             mobile
         }
-        return this.postRequest(`${this.BASE_URL}open/luck-draw/draw-prize`, params)
+        return this.postRequest(`${this.BASE_URL}open/luck-draw/draw-prize`, params, true)
     }
 
     static getHitList(activityId) {
         const params = {
             activityId
         }
-        return this.postRequest(`${this.BASE_URL}open/luck-draw/hit-list`, params)
+        return this.postRequest(`${this.BASE_URL}open/luck-draw/hit-list`, params, true)
     }
 
     static getActivityList(params) {
@@ -51,7 +51,7 @@ class LuckDraw extends request {
             activityId,
             mobile
         }
-        return this.postRequest(`${this.BASE_URL}open/luck-draw/share-activity`, params)
+        return this.postRequest(`${this.BASE_URL}open/luck-draw/share-activity`, params, true)
     }
 
     static getTimes(activityId, mobile) {
@@ -59,7 +59,7 @@ class LuckDraw extends request {
             activityId,
             mobile
         }
-        return this.postRequest(`${this.BASE_URL}open/luck-draw/get-times`, params)
+        return this.postRequest(`${this.BASE_URL}open/luck-draw/get-times`, params, true)
     }
 
 }

pages/luckDraw/detail.js

@@ -1,5 +1,6 @@
 // pages/luckDraw/detail.js
 import LuckDraw from '../../api/luck-draw'
+import Common from './common'
 import {getMobileCache, getPhoneNumber as getPhoneNumberSync} from '../../utils/user'
 const app = getApp();
 
@@ -32,6 +33,12 @@ Page({
         hitRecordList: []
     },
 
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+    },
+
     popMessage(message) {
         app.showToast(message, "none")
     },
@@ -40,6 +47,7 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        Object.assign(this, Common)
         if (!options.id) {
             this.popMessage ('入参错误');
             wx.navigateTo({
@@ -61,13 +69,10 @@ Page({
             if (resp.code == 200 && resp.data != null) {
                 this.mapDataToView(resp.data)
             }
-       }).catch(_ => {
-           console.log(_)
-           this.popMessage('活动不存在');
-           wx.navigateTo({
-             url: './index',
+       }).catch(err => {
+           this.setData({
+             errMessage: err.data.msg
            })
-           return
        })
     },
 
@@ -123,8 +128,31 @@ Page({
             opptyMaxVal: activity.opptyMaxVal || 0,
             status: activity.status
         })
-    },
 
+        if (activity.status == 1 || activity.status ==4 || activity.status == 5) {
+
+            this.tmpTimeObject = {
+                beginTime: activity.beginTime,
+                endTime: activity.endTime,
+                timeType: activity.timeType,
+                dayBeginTime: activity.dayBeginTime,
+                dayEndTime: activity.dayEndTime
+            }
+            this.countDownTimer = setInterval(this.calcCountDownTime, 1000)
+            this.calcCountDownTime()
+        }
+    },
+    calcCountDownTime() {
+        this.setActivityCountdownTime(new Date(), this.tmpTimeObject)
+        this.setData({
+            countDownTime: this.tmpTimeObject.countDownTime,
+            status: this.tmpTimeObject.status
+        })
+        // 删除定时器
+        if (this.tmpTimeObject.status == 2 || this.tmpTimeObject.status == 3 && this.countDownTimer != null) {
+            clearInterval(this.countDownTimer)
+        }
+    },
     /**
      * 开始转动奖品，抽奖
      */
@@ -354,13 +382,6 @@ Page({
     },
 
     /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady: function () {
-
-    },
-
-    /**
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
@@ -424,8 +445,16 @@ Page({
         })
     },
 
-    toExchangePlatform: function() {
+    toLuckDrawPage: function() {
+        wx.navigateTo({
+          url: '/pages/luckDraw/index',
+        })
+    },
 
+    turnActivityListPage() {
+        wx.redirectTo({
+          url: '/pages/luckDraw/index',
+        })
     }
     
 })

pages/luckDraw/detail.wxml

@@ -13,7 +13,7 @@
                 <image class="_ci" src="/images/luck-draw/ci.png" />
                 <image class="_cjjh" src="/images/luck-draw/cjjh.png" />
             </view>
-            <view class="luck-draw-record-btn">抽奖记录</view>
+            <view class="luck-draw-record-btn" catchtap="toLuckDrawPage">抽奖记录</view>
 
             <!-- 奖品转盘 -->
             <view class="luck-draw-gifts">
@@ -148,3 +148,18 @@
     </view>
     <view class="_layer" catchtap="closeDlg" />
 </view>
+
+<!-- 状态 -->
+<view wx:if="{{status != 2}}" class="status_tip_layer" catchtap="turnActivityListPage">
+    <view class="_text" wx:if="{{errMessage}}">
+        <view>{{errMessage}}</view>
+    </view>
+    <view wx:elif="{{status == 3}}" class="_text">
+         <view>此活动已结束</view>
+         <view>敬请关注其他活动...</view>
+    </view>
+    <view class="_text" wx:else>
+        <view>距活动开启还剩</view>
+        <view>{{countDownTime}}</view>
+    </view>
+</view>

pages/luckDraw/detail.wxss

@@ -402,4 +402,28 @@ button.phone-button {
     top: 0;
     opacity: 0;
     z-index: 2;
+}
+
+.status_tip_layer {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    z-index: 2000;
+    background:rgba(0,0,0, 0.9);
+    left: 0;
+    top: 0;
+}
+
+.status_tip_layer ._text {
+    color: #fff;
+    width: 100vw;
+    height: 200rpx;
+    position: absolute;
+    left: 0;
+    top: calc(100vh / 2 - 200rpx / 2);
+    text-align: center;
+    color: #FB766F;
+    font-weight: 800;
+    font-size: 60rpx;
+    font-style: italic;
 }

pages/luckDraw/index.js

@@ -1,6 +1,7 @@
 // pages/luckDraw/index.js
 import LuckDraw from '../../api/luck-draw'
 import { parseTime } from '../../utils/util';
+import Common from './common'
 Page({
 
     /**
@@ -19,14 +20,15 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        Object.assign(this, Common)
         this.getActivityList();
+        this.startCountdownTimer()
     },
 
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady: function () {
-
     },
 
     /**
@@ -101,14 +103,14 @@ Page({
             if (v.timeType == 1 || endTime == null) {
                 endTime = "2031.11.01"
             }
-            v.beginTime = parseTime(beginTime, "{y}.{m}.{d}")
-            v.endTime = parseTime(endTime, "{y}.{m}.{d}")
+            v._beginTime = parseTime(beginTime, "{y}.{m}.{d}")
+            v._endTime = parseTime(endTime, "{y}.{m}.{d}")
         })
-
         this.data.activityList = this.data.activityList.concat(...data)
         this.setData({
             activityList: this.data.activityList
         })
+        this.calcActivityCountdown()
     },
 
     /**
@@ -128,6 +130,25 @@ Page({
         wx.redirectTo({
             url
         })
-    }
+    },
 
+    startCountdownTimer() {
+        setInterval(this.calcActivityCountdown, 1000)
+    },
+
+    calcActivityCountdown() {
+        // 当前时间毫秒数
+        if (this.data.activityList == null || this.data.activityList.length == 0) {
+            return
+        }
+        const now = new Date();
+        this.data.activityList.forEach(v => {
+            if (v.status == 1 || v.status == 4 || v.status == 5) {
+                this.setActivityCountdownTime(now, v)
+            }
+        })
+        this.setData({
+            activityList: this.data.activityList
+        })
+    }
 })

pages/luckDraw/index.wxml

@@ -11,10 +11,14 @@
                 <view class="_base_info">
                     <view class="_title">{{item.activityTitle}}</view>
                     <view class="_subtitle">{{item.activitySubtitle}}</view>
-                    <view class="_time">{{item.beginTime}}-{{item.endTime}}</view>
+                    <view class="_time">{{item._beginTime}}-{{item._endTime}}</view>
                 </view>
                 <view class="_status">
-                    <view class="_status_btn _status{{item.status}}">{{item.statusText}}</view>
+                    <view wx:if="{{item.status==1||item.status==4||item.status==5}}" class="_status_btn _status{{item.status}}">
+                        <view class="_dtext">即将开始</view>
+                        <view class="_dtime">{{item.countDownTime}}</view>
+                    </view>
+                    <view class="_status_btn _status{{item.status}}" wx:else>{{item.statusText}}</view>
                 </view>
             </view>
        </view>

pages/luckDraw/index.wxss

@@ -76,9 +76,15 @@ page {
 }
 
 ._status1, ._status4, ._status5 {
+    width: 226rpx;
+    height: 78rpx;
+    line-height: normal;
     border: 1rpx solid #EE7C00;
     background: #FFE6CB;
     color: #EE7C00;
+    font-size: 26rpx;
+    position: relative;
+    left: -50rpx;
 }
 
 ._status3 {

project.private.config.json

@@ -39,7 +39,7 @@
                 {
                     "name": "pages/luckDraw/detail",
                     "pathName": "pages/luckDraw/detail",
-                    "query": "id=5",
+                    "query": "id=8",
                     "scene": null
                 },
                 {

utils/request.js

@@ -38,9 +38,9 @@ class request {
   /**
    * POST类型的网络请求
    */
-  static postRequest(url, data) {
+  static postRequest(url, data, notUseLoading) {
       let  headerSign = this.getSignHead();
-      return this.requestAll(url, data, headerSign, 'POST')
+      return this.requestAll(url, data, headerSign, 'POST', notUseLoading)
   }
 
   static upload(url, name, path, ortherData, header = this.HEAD){
@@ -94,12 +94,15 @@ class request {
     }
     return signHeadInfo;
   }
+
+
   /**
    * 网络请求
    */
-  static requestAll(url, data, header, method) {
-     
-      wx.showLoading()
+  static requestAll(url, data, header, method, notUseLoading) {
+      if (!notUseLoading) {
+        wx.showLoading()
+      }
       return new Promise((resolve, reject) => {
           wx.request({
               url: url,