微信番茄时钟（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;//svar timeStr2 = parseInt(timeStr1 / 60); //mvar 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;//pxconst query = wx.createSelectorQuery()query.select('#progress_active').fields({ node:true, size: true}).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.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=thiswx.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='+'找回密码',})}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！