微信番茄时钟（vue+node+短信验证登录）

微信番茄时钟

本次设计的为小程序番茄时钟，在登录页面可以选五种不同的计时模式
需要源码+ code8896

 drawActive: function() {
       var _this = this;
       var timer = setInterval(function (){
           var angle = 1.5 + 2*(_this.data.time*60*1000 - _this.data.mTime)/(_this.data.time*60*1000);
           var currentTime = _this.data.mTime - 100
           _this.setData({
               mTime:currentTime
           });
           if(angle < 3.5){
               if(currentTime % 1000 == 0){
                   var timeStr1 = currentTime / 1000;//s
                   var timeStr2 = parseInt(timeStr1 / 60); //m
                   var timeStr3 = (timeStr1 - timeStr2 * 60) >= 10 ? (timeStr1 - timeStr2 * 60) :"0" +  (timeStr1 - timeStr2 * 60);
                   var timeStr2 = timeStr2 >= 10 ? timeStr2:"0" + timeStr2;
                   _this.setData({
                    timeStr:timeStr2 + ":" + timeStr3
                   })
                 };
                const lineWidth = 6 / _this.data.rate;//px
                const query = wx.createSelectorQuery()
                query.select('#progress_active')
                .fields({ node:true, size: true})
                .exec((res) => {
                    const canvas = res[0].node
                    const ctx = canvas.getContext('2d')

                    const dpr = wx.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr
                    ctx.scale(dpr, dpr)
                    ctx.lineCap='round'
                    ctx.lineWidth="lineWidth"
                    ctx.beginPath()
                    ctx.arc(400/ _this.data.rate/2,400/_this.data.rate/2,400/_this.data.rate/2-2*lineWidth,1.5*Math.PI,angle*Math.PI,false)
                    ctx.strokeStyle ="#ffffff"
                    ctx.stroke()
                    
               })
           } else {
           
               _this.setData({
                timeStr:"00:00",
                pauseShow: false,
                continueCancleShow: false,
                okShow: true,
             });
             let data={
               date: formatTime(new Date),
               cate: _this.data.cateActive,
               time: _this.data.time,
               username:wx.getStorageSync('userInfo')[0].username,
               phone:wx.getStorageSync('userInfo')[0].phone,
               }
                 //发起网络存储数据
               addrecord(data).then(res=>{
                 wx.showToast({
                   title: '有完成了一项任务哦',
                   icon:'none'
                 })
               })
               clearInterval(timer); 
               wx.getBackgroundAudioManager().stop(); //停掉音乐
           }  
       },100);
       _this.setData({
           timer :timer
       })
    },

<!--logs.wxml-->
<view wx:if="{{status}}">
  <view class="sum">
  <view class="sum_item" wx:for="{{sum}}" wx:key="sum">
    <view class="sum_item_title">{{item.title}}</view>
    <view class="sum_item_val">{{item.val}}</view>
  </view>
</view>

<view class="detail">
  <view class="detail_title">
    <view class="detail_title_text">分类统计</view>
    <view class="detail_title_type">
      <text class="{{activeIndex == 0 ? 'active':''}}" data-index="0" bindtap="changeType">今日</text>
      <text class="{{activeIndex == 1 ? 'active':''}}" data-index="1" bindtap="changeType">历史</text>
    </view>
  </view>

  <view class="detail_list" wx:if="{{list.length > 0}}">
    <view class="list_item" wx:for="{{list}}" wx:key="cate" >
      <view class="list_item_name">{{item.username}}</view>
      <view class="list_item_date">{{item.date}}</view>
      <view class="list_item_text">{{cateArr[item.cate].text}}</view>
      <view class="list_item_time">{{item.time}}分钟</view>
    </view>
  </view>

  <!-- <view class="detail_list" wx:if="{{list.length == 0}}">
    暂无数据
  </view> -->

</view>
</view>
<view wx:else>
  <view class="nologin">请先登录</view>
</view>

<view class="container">
	<view class="section-panel">
	  <text class="section_title">工作时长(分钟)</text>
	  <view class="section_body">
	    <slider 
	    	bindchange="changeWorkTime" 
	    	show-value="true" 
	    	min="1"
	    	max="90"
	    	value="{{workTime}}"
	    	left-icon="cancel" 
	    	right-icon="success_no_circle"/>
	  </view>
	</view>

	<view class="section-panel">
	  <text class="section_title">休息时长(分钟)</text>
	  <view class="section_body">
	    <slider 
	    	bindchange="changeRestTime" 
	    	show-value="true" 
	    	min="5"
	    	max="30"
	    	value="{{restTime}}"
	    	left-icon="cancel" 
	    	right-icon="success_no_circle"/>
	  </view>
	</view>

	<view class="section-panel">
	  <view class="section_title">
	  	<text>主页背景</text>
	  </view>
	  <view class="section_body"  bindtap="chooseImage">
	  	<text  class="section_tip">选择背景 > </text>
	  </view>
	</view>

	<view class="section-panel">
	  <view class="section_title">
	  	<text>选择背景音乐</text>
	  </view>
	  <view class="section_body">
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
	  </view>
	</view>

</view>

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
 
 <!-- v2父容器  子view使用绝对布局 -->
   <view class="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登录</view>
  
     <!-- 手机号 -->
     <view class="phoneCs">
       <!-- <image src="/images/zhang.png" class="ph"></image> -->
       <input placeholder="请输入账号" type="number" bindinput="phone" />
     </view>
     <!-- 密码 -->
     <view class=passwordCs">
       <!-- <image src="/images/mi.png" class="ps"></image> -->
       <input placeholder="请输入密码" type="password" bindinput="password" />
     </view>
     <!-- 登录按钮 -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
       <view class="button">
            <view class="register" bindtap="register">
             去注册
            </view>
            <view class="register" bindtap="Password">
             忘记密码
            </view>
       </view>
     </view>
   </view>
 </view>
  

//index.js
//获取应用实例
const app = getApp()
const {login} =require('../../api/login')
Page({
  data: {
    phone: '',
    password: '',
    clientHeight:''
  },
  onLoad(){
    var that=this
    wx.getSystemInfo({ 
      success: function (res) { 
        console.log(res.windowHeight)
          that.setData({ 
              clientHeight:res.windowHeight
        }); 
      } 
    }) 
  },
  //获取输入款内容
  phone(e){
   this.setData({
     phone:e.detail.value
   })
  },
  password(e){
    this.setData({
      password:e.detail.value
    })
  },
  //登录事件
  goadmin(){
    let flag = false  //表示账户是否存在,false为初始值
    if(this.data.phone=='')
    {
      wx.showToast({
        icon:'none',
        title: '账号不能为空',
      })
    }else if(this.data.password==''){
      wx.showToast({
        icon:'none',
        title: '密码不能为空',
      })
    }else{
      let data={
        phone:this.data.phone,
        password:this.data.password
      }
     login(data).then(res=>{
       console.log(res)
       if(res.data){
        wx.setStorageSync('userInfo', res.data)
        wx.setStorageSync('status', true)
        wx.switchTab({
          url: '../my/my',
        })
       }else{
         wx.showToast({
           title: res.msg,
           icon:'none'
         })
       }
     })
    }
  },
  register(){
    wx.navigateTo({
      url: '../register/register?text='+'注册',
    })
  },
  Password(){
    wx.navigateTo({
      url: '../register/register?text='+'找回密码',
    })
  }
})