diff --git a/README.md b/README.md index b655dbb..d0ab67d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ # 微信小程序--番茄时钟 ##### 演示： -![](./image/view.gif) +![](./images/timer/view-index.jpg) +![](./images/timer/view-todo.jpg) +![](./images/timer/view-task.jpg) +![](./images/timer/view-setting.jpg) diff --git a/app.js b/app.js index 3ef820b..8e47d1a 100644 --- a/app.js +++ b/app.js @@ -5,7 +5,12 @@ const defaultTime = { } App({ - onLaunch: function() { + onLaunch: function () { + // 展示本地存储能力 + var logs = wx.getStorageSync('logs') || [] + logs.unshift(Date.now()) + wx.setStorageSync('logs', logs) + let workTime = wx.getStorageSync('workTime') let restTime = wx.getStorageSync('restTime') if (!workTime) { @@ -20,5 +25,35 @@ App({ data: defaultTime.defaultRestTime }) } + + // 登录 + // wx.login({ + // success: res => { + // // 发送 res.code 到后台换取 openId, sessionKey, unionId + // } + // }) + // 获取用户信息 + wx.getSetting({ + success: res => { + if (res.authSetting['scope.userInfo']) { + // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 + wx.getUserInfo({ + success: res => { + // 可以将 res 发送给后台解码出 unionId + this.globalData.userInfo = res.userInfo + + // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 + // 所以此处加入 callback 以防止这种情况 + if (this.userInfoReadyCallback) { + this.userInfoReadyCallback(res) + } + } + }) + } + } + }) + }, + globalData: { + userInfo: null, } -}) +}) \ No newline at end of file diff --git a/app.json b/app.json index 8b04096..56f11fa 100644 --- a/app.json +++ b/app.json @@ -1,7 +1,10 @@ { "pages": [ "pages/index/index", + "pages/todos/todos", + "pages/task/task", "pages/logs/logs", + "pages/timeset/timeset", "pages/setting/setting" ], "window": { @@ -11,25 +14,26 @@ "navigationBarTextStyle": "white" }, "tabBar": { - "color": "#dddddd", - "selectedColor": "#3cc51f", - "borderStyle": "black", - "backgroundColor": "#ffffff", - "list": [{ - "pagePath": "pages/index/index", - "iconPath": "image/wechat.png", - "selectedIconPath": "image/wechatHL.png", - "text": "主页" - }, { - "pagePath": "pages/logs/logs", - "iconPath": "image/wechat.png", - "selectedIconPath": "image/wechatHL.png", - "text": "记录" - }, { - "pagePath": "pages/setting/setting", - "iconPath": "image/wechat.png", - "selectedIconPath": "image/wechatHL.png", - "text": "设置" - }] + "position": "bottom", + "list": [ + { + "iconPath": "images/home_48px.png", + "selectedIconPath": "images/home_48px.png", + "pagePath": "pages/index/index", + "text": "首页" + }, + { + "iconPath": "images/checkout_shoppingcart_48px.png", + "selectedIconPath": "images/checkout_shoppingcart_48px.png", + "pagePath": "pages/todos/todos", + "text": "今日待办" + }, + { + "iconPath": "images/manage_user_48px.png", + "selectedIconPath": "images/manage_user_48px.png", + "pagePath": "pages/timeset/timeset", + "text": "我的" + } + ] } } diff --git a/image/view.gif b/image/view.gif deleted file mode 100644 index e071617..0000000 Binary files a/image/view.gif and /dev/null differ diff --git a/images/bookmark_favorite_full_star_48px.png b/images/bookmark_favorite_full_star_48px.png new file mode 100644 index 0000000..480a06c Binary files /dev/null and b/images/bookmark_favorite_full_star_48px.png differ diff --git a/images/checkout_shoppingcart_48px.png b/images/checkout_shoppingcart_48px.png new file mode 100644 index 0000000..5775fa3 Binary files /dev/null and b/images/checkout_shoppingcart_48px.png differ diff --git a/images/design.gif b/images/design.gif new file mode 100644 index 0000000..cb93115 Binary files /dev/null and b/images/design.gif differ diff --git a/images/empty_star_48px.png b/images/empty_star_48px.png new file mode 100644 index 0000000..ae74286 Binary files /dev/null and b/images/empty_star_48px.png differ diff --git a/images/header.png b/images/header.png new file mode 100644 index 0000000..c00fa1f Binary files /dev/null and b/images/header.png differ diff --git a/images/home_48px.png b/images/home_48px.png new file mode 100644 index 0000000..2252c19 Binary files /dev/null and b/images/home_48px.png differ diff --git a/images/manage_user_48px.png b/images/manage_user_48px.png new file mode 100644 index 0000000..efc1695 Binary files /dev/null and b/images/manage_user_48px.png differ diff --git a/images/mini_program.png b/images/mini_program.png new file mode 100644 index 0000000..cba8e58 Binary files /dev/null and b/images/mini_program.png differ diff --git a/images/mistore.png b/images/mistore.png new file mode 100644 index 0000000..7fd8498 Binary files /dev/null and b/images/mistore.png differ diff --git a/image/complete.png b/images/timer/complete.png similarity index 100% rename from image/complete.png rename to images/timer/complete.png diff --git a/image/nodata.png b/images/timer/nodata.png similarity index 100% rename from image/nodata.png rename to images/timer/nodata.png diff --git a/images/timer/pomodoro.png b/images/timer/pomodoro.png new file mode 100644 index 0000000..82aff45 Binary files /dev/null and b/images/timer/pomodoro.png differ diff --git a/images/timer/view-index.jpg b/images/timer/view-index.jpg new file mode 100644 index 0000000..b4f159f Binary files /dev/null and b/images/timer/view-index.jpg differ diff --git a/images/timer/view-setting.jpg b/images/timer/view-setting.jpg new file mode 100644 index 0000000..162d54f Binary files /dev/null and b/images/timer/view-setting.jpg differ diff --git a/images/timer/view-task.jpg b/images/timer/view-task.jpg new file mode 100644 index 0000000..f41cd3d Binary files /dev/null and b/images/timer/view-task.jpg differ diff --git a/images/timer/view-todo.jpg b/images/timer/view-todo.jpg new file mode 100644 index 0000000..3410a02 Binary files /dev/null and b/images/timer/view-todo.jpg differ diff --git a/image/wechat.png b/images/timer/wechat.png similarity index 100% rename from image/wechat.png rename to images/timer/wechat.png diff --git a/image/wechatHL.png b/images/timer/wechatHL.png similarity index 100% rename from image/wechatHL.png rename to images/timer/wechatHL.png diff --git a/images/ygoclub.png b/images/ygoclub.png new file mode 100644 index 0000000..c39eab9 Binary files /dev/null and b/images/ygoclub.png differ diff --git a/pages/index/index.js b/pages/index/index.js index 8fe1ce9..5415b69 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -1,146 +1,107 @@ -const util = require('../../utils/util.js') -const defaultLogName = { - work: '工作', - rest: '休息' -} -const actionName = { - stop: '停止', - start: '开始' -} - -const initDeg = { - left: 45, - right: -45, -} - +//index.js +//获取应用实例 +var app = getApp() Page({ - data: { - remainTimeText: '', - timerType: 'work', - log: {}, - completed: false, - isRuning: false, - leftDeg: initDeg.left, - rightDeg: initDeg.right + motto: 'MiHome_Store', + userInfo: {}, + hasUserInfo: false, + canIUse: wx.canIUse('button.open-type.getUserInfo'), + indicatorDots: true, + autoplay: true, + interval: 3000, + duration: 100, + "banner_list": [ + { + "banner": [ + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_904608692a4d8415d0de39a0a5897e80.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_0f5e43035a8b8d27a4b6f315d222fd9b.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_4ba3d814639ab27570f174467133619f.png&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_91f29509f14ea243958285aaf5d5b640.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_5c752db8097555831469356f5f389078.jpeg&w=1080&h=600&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + } + ] + }, + { + "banner": [ + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_3237b46c5de819816125d88e9d06b7bf.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_c02bce3048058edb194dc3efb230d06b.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_45b3c9ed56aef44994176b50ae5d8a69.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + }, + { + "pic_url": "http://static.home.mi.com/app/shop/img?id=shop_95583f54ee857e8fa5f4cf1b9f791a74.jpg&crop=a_0_120_1080_480&t=webp&z=1.15&q=78", + + } + ] + } + ], + hotgoods: [ + { + "name": "番茄工作法", + "isTab": true, + "url":"../todos/todos", + "summary": "提升工作效率", + "ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_9d57f6e89d1f560b7bce31e0b85a7285.png&w=420&h=240&crop=a_0_120_1080_480&t=png", + "pic_url": "../../images/timer/pomodoro.png" + }, + ] }, - - onShow: function() { - if (this.data.isRuning) return - let workTime = util.formatTime(wx.getStorageSync('workTime'), 'HH') - let restTime = util.formatTime(wx.getStorageSync('restTime'), 'HH') - this.setData({ - workTime: workTime, - restTime: restTime, - remainTimeText: workTime + ':00' - }) - }, - - startTimer: function(e) { - let startTime = Date.now() - let isRuning = this.data.isRuning - let timerType = e.target.dataset.type - let showTime = this.data[timerType + 'Time'] - let keepTime = showTime * 60 * 1000 - let logName = this.logName || defaultLogName[timerType] - - if (!isRuning) { - this.timer = setInterval((function() { - this.updateTimer() - this.startNameAnimation() - }).bind(this), 1000) + onLoad: function () { + if (app.globalData.userInfo) { + this.setData({ + userInfo: app.globalData.userInfo, + hasUserInfo: true + }) + } else if (this.data.canIUse) { + // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 + // 所以此处加入 callback 以防止这种情况 + app.userInfoReadyCallback = res => { + this.setData({ + userInfo: res.userInfo, + hasUserInfo: true + }) + } } else { - this.stopTimer() - } - - this.setData({ - isRuning: !isRuning, - completed: false, - timerType: timerType, - remainTimeText: showTime + ':00', - taskName: logName - }) - - this.data.log = { - name: logName, - startTime: Date.now(), - keepTime: keepTime, - endTime: keepTime + startTime, - action: actionName[isRuning ? 'stop' : 'start'], - type: timerType + // 在没有 open-type=getUserInfo 版本的兼容处理 + wx.getUserInfo({ + success: res => { + app.globalData.userInfo = res.userInfo + this.setData({ + userInfo: res.userInfo, + hasUserInfo: true + }) + } + }) } - - this.saveLog(this.data.log) }, - startNameAnimation: function() { - let animation = wx.createAnimation({ - duration: 450 - }) - animation.opacity(0.2).step() - animation.opacity(1).step() + getUserInfo: function (e) { + console.log(e) + app.globalData.userInfo = e.detail.userInfo this.setData({ - nameAnimation: animation.export() + userInfo: e.detail.userInfo, + hasUserInfo: true }) }, - stopTimer: function() { - // reset circle progress - this.setData({ - leftDeg: initDeg.left, - rightDeg: initDeg.right + switchTab:function(e){ + var hotgoods = this.data.hotgoods; + wx.switchTab({ + "url": hotgoods[e.currentTarget.id].url, }) - - // clear timer - this.timer && clearInterval(this.timer) }, - - updateTimer: function() { - let log = this.data.log - let now = Date.now() - let remainingTime = Math.round((log.endTime - now) / 1000) - let H = util.formatTime(Math.floor(remainingTime / (60 * 60)) % 24, 'HH') - let M = util.formatTime(Math.floor(remainingTime / (60)) % 60, 'MM') - let S = util.formatTime(Math.floor(remainingTime) % 60, 'SS') - let halfTime - - // update text - if (remainingTime > 0) { - let remainTimeText = (H === "00" ? "" : (H + ":")) + M + ":" + S - this.setData({ - remainTimeText: remainTimeText - }) - } else if (remainingTime == 0) { - this.setData({ - completed: true - }) - this.stopTimer() - return - } - - // update circle progress - halfTime = log.keepTime / 2 - if ((remainingTime * 1000) > halfTime) { - this.setData({ - leftDeg: initDeg.left - (180 * (now - log.startTime) / halfTime) - }) - } else { - this.setData({ - leftDeg: -135 - }) - this.setData({ - rightDeg: initDeg.right - (180 * (now - (log.startTime + halfTime)) / halfTime) - }) - } - }, - - changeLogName: function(e) { - this.logName = e.detail.value - }, - - saveLog: function(log) { - var logs = wx.getStorageSync('logs') || [] - logs.unshift(log) - wx.setStorageSync('logs', logs) - } }) diff --git a/pages/index/index.json b/pages/index/index.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/pages/index/index.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 153a0ca..0e8e4fd 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,41 +1,44 @@ - - - - - - - - - - - {{remainTimeText}} - {{taskName}}{{completed ? '已完成！' : '中'}} - - - - - - - {{isRuning ? '完成': '工作'}} + + + + + + + + + 时间管理工具 + + + + + + + + + + {{good.name}} + + + + + + {{good.name}} + + + - {{isRuning ? '完成': '休息'}} - diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 491e2b5..92834e4 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -1,184 +1,86 @@ -.container { +/**index.wxss**/ +.userinfo { display: flex; - height: 100%; flex-direction: column; - overflow: hidden; - background-color: #fff; -} - -.timer_main { - position: relative; - display: flex; - flex: 2; - justify-content: center; - align-items: center; - text-align: center; - background-color: #3197ed; - transition: all .5s; - z-index: 1; - padding: 10px 0; -} - -.timer_time-wrap { - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 150px; - height: 150px; - text-align: center; - transition: all .3s; -} - -.timer_progress { - position: absolute; - top: 0; - width: 75px; - height: 150px; - overflow: hidden; - transition: all .3s; -} - -.timer_progress_mask { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border: 3px solid #1589eb; - opacity: .5; - border-radius: 50%; -} - -.timer_left { - left: 0; -} - -.timer_right { - right: 0; -} - -.timer_circle { - position: absolute; - top: 0; - width: 150px; - height: 150px; - border: 3px solid transparent; - border-radius: 50%; - transition: all .3s; -} - -.timer_circle--left { - left: 0; - border-left: 3px solid #fff; - border-bottom: 3px solid #fff; - transform: rotate(45deg); -} - -.timer_circle--right { - right: 0; - border-right: 3px solid #fff; - border-bottom: 3px solid #fff; - transform: rotate(-45deg); -} - -.timer_time-right {} - -.timer_time { - font-size: 40px; - color: #fff; - font-weight: lighter; - transition: font-size .3s; -} - -.timer_taskName { - position: absolute; - top: -100px; - font-size: 14px; - letter-spacing: 5px; - color: #fff; -} - -.timer_done { - width: 64px; - height: 64px; -} - -.timer_inputname { - position: absolute; - bottom: -40px; - width: 100%; - text-align: center; - height: 40px; - padding-left: 10px; - border-bottom: 1px solid #f2f2f2; - color: #999; -} - -.timer_footer { - display: flex; - justify-content: center; align-items: center; - flex: 1; - padding-top: 40px; - transition: all .3s; } -.timer .timer_ctrl { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - font-size: 12px; - color: #fff; - width: 80px; - height: 80px; - margin: 0 20px; +.userinfo-avatar { + width: 128rpx; + height: 128rpx; + margin: 20rpx; border-radius: 50%; - transition: all .7s; - background-color: #48c23d; } -.timer .timer_ctrl text {} - - -/*runing style*/ - -.timer--runing .timer_main { - flex: 1; -} - -.timer--runing .timer_time { - font-size: 45px; -} - -.timer--runing .timer_time-wrap { - width: 200px; - height: 200px; -} - -.timer--runing .timer_progress { - width: 100px; - height: 200px; -} - -.timer--runing .timer_circle { - width: 200px; - height: 200px; -} - -.timer--runing .timer_footer { - flex: 0; - position: absolute; - bottom: 0; - width: 100%; - z-index: 10; -} - -.timer--runing .timer_ctrl { - background-color: #208DEA; - height: 30px; - margin-bottom: 30px; - border: 1px dashed #dedede; - border-radius: 20px; -} +.userinfo-nickname { + color: #aaa; +} + +.usermotto { + margin-top: 200px; +} + +.slide-image{ + display: block; + height: 150px; + width:100% +} +.menueview{ + display:flex; + background-color:#FFF; + padding:5px 0 +} +.menue-image{ + flex:1; + height:50px; + height:auto +} +.separator{ + height: 4px; + width:20rem; + background-color: #F3F3F3 +} +.floortitle{ + display:flex; + height:34px; + align-items:center; + justify-content:space-between; + padding:0 13px; + font-size:14px; + color:rgba(0,0,0,0.7); + border-bottom: 1px solid #e2e2e3 +} +.hotgoodcontainer{ + display:flex; + flex-wrap: wrap; + width:100%; +} +.goodcontainer{ + width:33.333333%; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + box-sizing:border-box; + padding-bottom:10px; +} +.gooditem{ + width:100%; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; + font-size:12px; + box-sizing:border-box; + margin: 5px 0 0 10px; + padding-bottom: 10px; + border: 0.5px solid #e2e2e3; +} +.productimg{ + width:80px; + height:80px; +} +.imgview{ + width:80px; + height:80px; +} \ No newline at end of file diff --git a/pages/logs/logs.json b/pages/logs/logs.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/logs/logs.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/setting/setting.json b/pages/setting/setting.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/setting/setting.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/task/task.js b/pages/task/task.js new file mode 100644 index 0000000..4b3cb92 --- /dev/null +++ b/pages/task/task.js @@ -0,0 +1,157 @@ +const util = require('../../utils/util.js') +const defaultLogName = { + work: '工作', + rest: '休息' +} +const actionName = { + stop: '停止', + start: '开始' +} + +const initDeg = { + left: 45, + right: -45, +} + +Page({ + + data: { + taskName:'', + remainTimeText: '', + timerType: 'work', + log: {}, + completed: false, + isRuning: false, + leftDeg: initDeg.left, + rightDeg: initDeg.right + }, + + onLoad: function (e) { + // console.log(e); + wx.setNavigationBarTitle({ + title: '工作任务-' + e.name, + }) + this.setData({ + taskName: e.name + }) + }, + + onShow: function () { + if (this.data.isRuning) return + let workTime = util.formatTime2(wx.getStorageSync('workTime'), 'HH') + let restTime = util.formatTime2(wx.getStorageSync('restTime'), 'HH') + this.setData({ + workTime: workTime, + restTime: restTime, + remainTimeText: workTime + ':00' + }) + }, + + startTimer: function (e) { + let startTime = Date.now() + let isRuning = this.data.isRuning + let timerType = e.target.dataset.type + let showTime = this.data[timerType + 'Time'] + let keepTime = showTime * 60 * 1000 + let logName = this.data.taskName + + if (!isRuning) { + this.timer = setInterval((function () { + this.updateTimer() + // this.startNameAnimation() + }).bind(this), 500) + } else { + this.stopTimer() + } + + this.setData({ + isRuning: !isRuning, + completed: false, + timerType: timerType, + remainTimeText: showTime + ':00', + taskName: logName + }) + + this.data.log = { + name: logName, + startTime: Date.now(), + keepTime: keepTime, + endTime: keepTime + startTime, + action: actionName[isRuning ? 'stop' : 'start'], + type: timerType + } + + this.saveLog(this.data.log) + }, + + startNameAnimation: function () { + let animation = wx.createAnimation({ + duration: 450 + }) + animation.opacity(0.4).step() + animation.opacity(1).step() + this.setData({ + nameAnimation: animation.export() + }) + }, + + stopTimer: function () { + // reset circle progress + this.setData({ + leftDeg: initDeg.left, + rightDeg: initDeg.right + }) + + // clear timer + this.timer && clearInterval(this.timer) + }, + + updateTimer: function () { + let log = this.data.log + let now = Date.now() + let remainingTime = Math.round((log.endTime - now) / 1000) + let H = util.formatTime2(Math.floor(remainingTime / (60 * 60)) % 24, 'HH') + let M = util.formatTime2(Math.floor(remainingTime / (60)) % 60, 'MM') + let S = util.formatTime2(Math.floor(remainingTime) % 60, 'SS') + let halfTime + + // update text + if (remainingTime > 0) { + let remainTimeText = (H === "00" ? "" : (H + ":")) + M + ":" + S + this.setData({ + remainTimeText: remainTimeText + }) + } else if (remainingTime == 0) { + this.setData({ + completed: true + }) + this.stopTimer() + return + } + + // update circle progress + halfTime = log.keepTime / 2 + if ((remainingTime * 1000) > halfTime) { + this.setData({ + leftDeg: initDeg.left - (180 * (now - log.startTime) / halfTime) + }) + } else { + this.setData({ + leftDeg: -135 + }) + this.setData({ + rightDeg: initDeg.right - (180 * (now - (log.startTime + halfTime)) / halfTime) + }) + } + }, + + changeLogName: function (e) { + this.logName = e.detail.value + }, + + saveLog: function (log) { + var logs = wx.getStorageSync('logs') || [] + logs.unshift(log) + wx.setStorageSync('logs', logs) + } +}) diff --git a/pages/task/task.json b/pages/task/task.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/task/task.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/task/task.wxml b/pages/task/task.wxml new file mode 100644 index 0000000..d6448e4 --- /dev/null +++ b/pages/task/task.wxml @@ -0,0 +1,42 @@ + + + + + + + + + + + + + {{remainTimeText}} + {{timerType=='work'?taskName:'休息中'}}{{completed ? '已完成！' : ''}} + + + + + + + {{isRuning ? '完成': '工作'}} + + {{isRuning ? '完成': '休息'}} + + diff --git a/pages/task/task.wxss b/pages/task/task.wxss new file mode 100644 index 0000000..600de39 --- /dev/null +++ b/pages/task/task.wxss @@ -0,0 +1,266 @@ +/* pages/task/task.wxss */ +view, +sroll-view, +swiper, +icon, +text, +progress, +button, +checkbox, +form, +input, +label, +input, +picker, +radio, +slider, +switch, +action-sheet, +modal, +toast, +loading, +navigator, +audio, +image, +video, +map, +canvas { + box-sizing: border-box; +} +page { + height: 100%; +} + +.hide { + display: none!important; +} + +.container, +input, +button { + font: 14px "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; +} + +.container { + height: 100%; + background-color: #f5f5f5; +} + +.panel { + background: #fff; + border-radius: 3px; + padding: 5px 10px; +} +.nodata{ + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.nodata_img{ + display: block; + width: 45px; + height: 45px; +} + +.nodata_text{ + color:#dedede; + font-size: 12px; + padding-left: 10px; +} + +.container-page { + display: flex; + height: 100%; + flex-direction: column; + overflow: hidden; + background-color: #fff; +} + +.timer_main { + position: relative; + display: flex; + flex: 2; + justify-content: center; + align-items: center; + text-align: center; + background-color: #3197ed; + transition: all .5s; + z-index: 1; + padding: 10px 0; +} + +.timer_time-wrap { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 150px; + height: 150px; + text-align: center; + transition: all .3s; +} + +.timer_progress { + position: absolute; + top: 0; + width: 75px; + height: 150px; + overflow: hidden; + transition: all .3s; +} + +.timer_progress_mask { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border: 3px solid #1589eb; + opacity: .5; + border-radius: 50%; +} + +.timer_left { + left: 0; +} + +.timer_right { + right: 0; +} + +.timer_circle { + position: absolute; + top: 0; + width: 150px; + height: 150px; + border: 3px solid transparent; + border-radius: 50%; + transition: all .3s; +} + +.timer_circle--left { + left: 0; + border-left: 3px solid #fff; + border-bottom: 3px solid #fff; + transform: rotate(45deg); +} + +.timer_circle--right { + right: 0; + border-right: 3px solid #fff; + border-bottom: 3px solid #fff; + transform: rotate(-45deg); +} + +.timer_time-right {} + +.timer_time { + font-size: 40px; + color: #fff; + font-weight: lighter; + transition: font-size .3s; +} + +.timer_taskName { + position: absolute; + top: -100px; + font-size: 32px; + letter-spacing: 5px; + color: #fff; + padding: 5rpx 35rpx; + border-bottom: 2px solid #ddd; +} + +.timer_done { + width: 64px; + height: 64px; +} + +.timer_inputname { + position: absolute; + bottom: -40px; + width: 100%; + text-align: center; + height: 40px; + padding-left: 10px; + border-bottom: 1px solid #f2f2f2; + color: #999; +} + +.timer_footer { + display: flex; + justify-content: center; + align-items: center; + flex: 1; + padding-top: 40px; + transition: all .3s; +} + +.timer .timer_ctrl { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + font-size: 12px; + color: #fff; + width: 80px; + height: 80px; + margin: 0 20px; + border-radius: 50%; + transition: all .7s; +} + +.timer .timer_ctrl text {} + +.timer_ctrl_work{ + background-color: red; +} + +.timer_ctrl_rest{ + background-color: #48c23d; +} + +/*runing style*/ + +.timer--runing .timer_main { + flex: 1; +} + +.timer--runing .timer_time { + font-size: 45px; +} + +.timer--runing .timer_time-wrap { + width: 200px; + height: 200px; +} + +.timer--runing .timer_progress { + width: 100px; + height: 200px; +} + +.timer--runing .timer_circle { + width: 200px; + height: 200px; +} + +.timer--runing .timer_footer { + flex: 0; + position: absolute; + bottom: 0; + width: 100%; + z-index: 10; +} + +.timer--runing .timer_ctrl { + background-color: #208DEA; + width: 150px; + height: 50px; + font-size: 20px; + margin-bottom: 30px; + border: 1px dashed #dedede; + border-radius: 20px; +} diff --git a/pages/timeset/timeset.js b/pages/timeset/timeset.js new file mode 100644 index 0000000..7cfdaed --- /dev/null +++ b/pages/timeset/timeset.js @@ -0,0 +1,84 @@ +// pages/timeset/timeset.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + wx.setNavigationBarTitle({ + title: '设置' + }) + this.setData({ + workTime: wx.getStorageSync('workTime'), + restTime: wx.getStorageSync('restTime') + }) + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + }, + changeWorkTime: function (e) { + wx.setStorage({ + key: 'workTime', + data: e.detail.value + }) + }, + changeRestTime: function (e) { + wx.setStorage({ + key: 'restTime', + data: e.detail.value + }) + } +}) \ No newline at end of file diff --git a/pages/timeset/timeset.json b/pages/timeset/timeset.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/timeset/timeset.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/timeset/timeset.wxml b/pages/timeset/timeset.wxml new file mode 100644 index 0000000..7c5cfc1 --- /dev/null +++ b/pages/timeset/timeset.wxml @@ -0,0 +1,51 @@ + + + + 工作时长(分钟) + + + + + + + 休息时长(分钟) + + + + + + + + 主页背景 + + + 选择背景 > + + + + + + + 启用铃声 + + + 选择铃声 > + + + + + diff --git a/pages/timeset/timeset.wxss b/pages/timeset/timeset.wxss new file mode 100644 index 0000000..27e10ee --- /dev/null +++ b/pages/timeset/timeset.wxss @@ -0,0 +1,23 @@ +/* pages/timeset/timeset.wxss */ +.container-page{ + padding:15px 10px; +} +.section{ + margin-bottom: 10px; +} +.section_title{ + font-size: 12px; + color:#999; +} +.section_check{ + margin-right: 5px; +} +.section_tip{ + display: block; + text-align: right; + color: #CEC9C9; + padding-bottom: 10px; +} +.section_body{ + margin-top: 15px; +} \ No newline at end of file diff --git a/pages/todos/todos.js b/pages/todos/todos.js new file mode 100644 index 0000000..cf5b38a --- /dev/null +++ b/pages/todos/todos.js @@ -0,0 +1,165 @@ +// pages/todos/todos.js +const util = require('../../utils/util.js') +Page({ + + /** + * 页面的初始数据 + */ + data: { + todos: [], + activeTodos: [], + editedTodo: {}, + draft: '', + editDraft: null, + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady: function () { + this.setData({ + todos: [...wx.getStorageSync("todos")], + activeTodos: [...wx.getStorageSync("activeTodos")] + }) + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function () { + + }, + + /** + * 生命周期函数--监听页面隐藏 + */ + onHide: function () { + + }, + + /** + * 生命周期函数--监听页面卸载 + */ + onUnload: function () { + + }, + + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh: function () { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function () { + + }, + + /** + * 用户点击右上角分享 + */ + onShareAppMessage: function () { + + }, + setTodos: function (todos) { + console.log(todos) + const activeTodos = todos.filter(todo => !todo.done); + wx.setStorageSync("todos", todos); + wx.setStorageSync("activeTodos", activeTodos); + this.setData({ + todos, + activeTodos, + }); + }, + addTodo: function () { + var value = this.data.draft && this.data.draft.trim() + if (!value) { + return; + } + let newTodo = this.data.todos; + newTodo.push({ + id: util.formatDate(new Date()), + done: false, + content: value + }); + const activeTodos = newTodo.filter(todo => !todo.done); + wx.setStorageSync("todos", newTodo); + wx.setStorageSync("activeTodos", activeTodos); + this.setData({ + todos: newTodo, + activeTodos, + draft: '' + }); + }, + toggleDone: function ({ + target: { + dataset: { + id + } + } + }) { + const { todos } = this.data; + const currentTodo = todos.filter(todo => todo.id === id)[0]; + currentTodo.done = !currentTodo.done; + this.setTodos(todos) + }, + editTodo: function ({ + target: { + dataset: { + id + } + } + }) { + this.setData({ + editDraft: null, + editedTodo: this.data.todos.filter(todo => todo.id === id)[0] || {} + }); + }, + removeDone: function () { + const activeTodos = this.data.todos.filter(todo => !todo.done) + console.log(activeTodos); + this.setTodos(activeTodos) + }, + updateDraft: function ({ + detail: { + value + } + }) { + // Android 真机上会诡异地触发多次时 value 为空的事件 + if (!value) return; + this.setData({ + draft: value + }); + }, + goTodo: function ({ + target: { + dataset: { + id + } + } + }) { + const currentToDo = this.data.todos.filter(todo => todo.id === id)[0] || {}; + console.log(currentToDo) + if (!currentToDo.done){ + wx.navigateTo({ + url: '../task/task?name=' + currentToDo.content, + }); + } + + }, + setting: function () { + wx.navigateTo({ + url: '../timeset/timeset', + }); + }, +}) \ No newline at end of file diff --git a/pages/todos/todos.json b/pages/todos/todos.json new file mode 100644 index 0000000..8835af0 --- /dev/null +++ b/pages/todos/todos.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/todos/todos.wxml b/pages/todos/todos.wxml new file mode 100644 index 0000000..d2e4adf --- /dev/null +++ b/pages/todos/todos.wxml @@ -0,0 +1,46 @@ + + + + 添加 + + + + + + + {{todo.content}} + + + + + + + 设置 + {{activeTodos.length}} / {{todos.length}} + 清除已完成 + diff --git a/pages/todos/todos.wxss b/pages/todos/todos.wxss new file mode 100644 index 0000000..d4ecd66 --- /dev/null +++ b/pages/todos/todos.wxss @@ -0,0 +1,90 @@ +/* pages/todos/todos.wxss */ +.flex-wrap{ + display: flex; + flex-direction: row; +} + +.tappable:hover { + opacity: .6; +} + +.header { + height: 54px; + align-items: center; + background-color: #FFF; +} + +.new-todo { + flex: 1; + font-size: 18px; + box-sizing: border-box; + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; + padding-left: 12px; + line-height: 100%; + height: 100%; +} +.add { + color: #FFF; + background-color: #1aad19; + font-size: 16px; + line-height: 53px; + padding: 0 16px; +} + +.todo-list { + padding: 4px 6px 48px; +} +.done { + text-decoration: line-through; + color: #ccc; +} +.todo { + font-size: 18px; + height: 30px; + padding: 10px 12px; + overflow: hidden; + align-items: center; + background-color: #fff; + margin: 1px 0; + border-radius: 3px; +} +.todo-icon { + margin-right: 12px; +} +.todo-text { + white-space: nowrap; + display: block; + width: 100%; + height: 50px; + line-height: 17px; +} +.todo-input { + font-size: 18px; + width: 100%; +} + +.footer { + position: fixed; + bottom: 0; + height: 44px; + width: 100%; + line-height: 44px; + color: #666; + border-top: 1px solid #eee; + background: #fff; + font-size: 16px; + text-align: center; +} +.remove-done, +.setting { + color: #1aad19; +} +.remove-done { + position: absolute; + right: 12px; +} +.setting { + position: absolute; + left: 12px; +} \ No newline at end of file diff --git a/utils/util.js b/utils/util.js index ad77e6a..3ba641d 100644 --- a/utils/util.js +++ b/utils/util.js @@ -1,9 +1,39 @@ -function formatTime(time, format) { +function formatTime2(time, format) { let temp = '0000000000' + time let len = format.length return temp.substr(-len) } +const formatTime = date => { + const year = date.getFullYear() + const month = date.getMonth() + 1 + const day = date.getDate() + const hour = date.getHours() + const minute = date.getMinutes() + const second = date.getSeconds() + + return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') +} + +const formatDate = date => { + const year = date.getFullYear() + const month = date.getMonth() + 1 + const day = date.getDate() + const hour = date.getHours() + const minute = date.getMinutes() + const second = date.getSeconds() + + return [year, month, day, hour, minute, second].map(formatNumber).join('') +} + + +const formatNumber = n => { + n = n.toString() + return n[1] ? n : '0' + n +} + module.exports = { - formatTime: formatTime -} \ No newline at end of file + formatTime: formatTime, + formatTime2: formatTime2, + formatDate: formatDate +}