sign in

wechat/pages/index/index.js

@@ -1,7 +1,22 @@
 
 var app = getApp()
+
+const SEC = 1000
+const MIN = 60 * SEC
+const HOUR = 60 * MIN
 Page({
-  
+  data: {
+    currentLatitude: 0,     //用户当前纬度
+    currentLongitude: 0,    //用户当前经度
+    is_btn_disabled: true,  //开始按钮状态
+    locationAccuracy: 0,    //gps 误差
+    isLearning: false,      //是否在学习中？
+    startTime: null,        //开始时间
+    clock: '00:00:00',      //计时
+    shareCanvasWidth: 200,
+    shareCanvasHeight: 280,
+
+  },
   onLoad: function () {
     wx.getSystemInfo({
       success: (res) => {
@@ -21,5 +36,107 @@ Page({
     } else {
       app.globalData.ptStudent = pt_student;
     }
+    wx.getLocation({
+      success: (res) => {
+        let validLocation = this.validLocation(res.latitude, res.longitude)
+        this.setData({
+          currentLatitude: res.latitude,
+          currentLongitude: res.longitude,
+          accuracy: res.accuracy,
+          is_btn_disabled: !validLocation
+        })
+
+      }
+    })
+  },
+  validLocation () {
+    // TODO
+    return true;
+  },
+  handleBtnClick() {
+    let isLearning = this.data.isLearning
+    let is_btn_disabled = this.data.is_btn_disabled
+    if (is_btn_disabled) {
+      wx.showToast({
+        title: '请到学校之后再打卡',
+        icon: 'none',
+        duration: 800
+      })
+      return;
+    }
+    if (isLearning) {
+      this.setData({
+        isLearning: !isLearning
+      })
+      this.endClock()
+    } else {
+      this.setData({
+        isLearning: !isLearning,
+        startTime: new Date().getTime()
+      })
+      this.startClock()
+    }
+  },
+  startClock() {
+    let interval = setInterval(() => {
+      let now = new Date().getTime()
+      let startTime = this.data.startTime
+
+      let diff = now - startTime
+      let hours = Math.floor(diff / HOUR)
+      hours = (hours < 10 ? '0' + hours : hours)
+
+      diff = diff % HOUR
+      let mins = Math.floor(diff / MIN)
+      mins = (mins < 10 ? '0' + mins : mins)
+
+      diff = diff % MIN
+      let sec = Math.ceil(diff / SEC)
+      sec = (sec < 10 ? '0' + sec : sec)
+
+      
+      this.setData({
+        clock: "" + hours + ":" + mins + ":" + sec
+      })
+    }, SEC)
+    this.interval = interval
+  },
+  endClock() {
+    clearInterval(this.interval)
+    this.setData({
+      isLearning: false,
+      showPopup: true
+    })
+    const ctx = wx.createCanvasContext('shareCanvas')
+    let width = this.data.shareCanvasWidth
+    let height = this.data.shareCanvasHeight
+    ctx.fillStyle = "#fff"
+    ctx.fillRect(0, 0, width, height)
+    ctx.fillStyle = "#000"
+    ctx.setFontSize(16)
+    ctx.textAlign = 'center'
+    ctx.fillText('我已成功打卡14天', width / 2, height / 2 - 7)
+    ctx.draw()
+    
+  },
+  togglePopup() {
+    this.setData({
+      showPopup: !this.data.showPopup
+    });
+  },
+  handleShare() {
+    wx.canvasToTempFilePath({
+      canvasId: 'shareCanvas',
+      success: (res) => {
+        wx.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            wx.showToast({
+              title: '已保存到相册'
+            })
+          }
+        })
+      }
+      }, this)
   }
 })

wechat/pages/index/index.json

@@ -1,5 +1,8 @@
 {
   "navigationBarBackgroundColor": "#000",
   "navigationBarTextStyle": "white",
-  "navigationBarTitleText": "首页"
+  "navigationBarTitleText": "首页",
+  "usingComponents": {
+    "zan-popup": "../../bower_components/zanui-weapp/dist/popup/index"
+  }
 }

wechat/pages/index/index.wxml

@@ -3,7 +3,13 @@
   <view class="logo">
     <image class="logo-img" src="../../images/img_gqsj_01@2x.png" style="width:208px; height:71px" />
   </view>
-  <swiper style="height: {{bannerHeight}}px">
+  <swiper
+    style="height: {{bannerHeight}}px"
+    autoplay="true"
+    indicator-dots="true"
+    indicator-color="#fff"
+    indicator-active-color="red"
+  >
     <swiper-item class="swiper-item">
      <image src="../../images/img_banner01@2x.png" style="width: 100%; height: {{bannerHeight}}px"/>
      <view class="swiper-item__text">
@@ -30,11 +36,16 @@
     <view class="time-clock">
       <image class="time-bg" src="../../images/img_shijianbg_01@2x.png" />
       <image class="time-icon" src="../../images/img_shijian_01@2x.png" />
-      <text class="time-text">00:00:00</text>
+      <text class="time-text">{{clock}}</text>
     </view>
   </view>
   <view class="start flex-auto flex-horizontal">
     <image class="start-bg" src="../../images/btn_kaishi_01@2x.png" />
-    <button class="start-btn">开始</button>
+    <button class="start-btn" bindtap="handleBtnClick">{{isLearning ? '结束' : '开始' }}</button>
   </view>
+  <zan-popup show="{{ showPopup }}" bindclose="togglePopup">
+    <canvas canvas-id="shareCanvas" style="width: {{shareCanvasWidth}}px; height:{{shareCanvasHeight}}px">
+    </canvas>
+    <button class="share-btn" size="mini" bindtap="handleShare">生成图片发到朋友圈</button>
+  </zan-popup>
 </view>

wechat/pages/index/index.wxss

@@ -124,4 +124,12 @@ swiper {
   color: #fff;
   line-height: 86.88px;
   border: none;
+}
+.share-btn {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 24px;
+  width: 80%;
 }