hzuapps#2 hzuapps#15 第二次实验

chasel34 · Nov 3, 2017 · e06936b · e06936b
1 parent 9641f08
commit e06936b
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 67 deletions.
diff --git a/1514080901139/app.json b/1514080901139/app.json
@@ -5,7 +5,7 @@
   ],
   "window":{
     "backgroundTextStyle":"light",
-    "navigationBarBackgroundColor": "#fff",
+    "navigationBarBackgroundColor": "lightblue",
     "navigationBarTitleText": "TODO",
     "navigationBarTextStyle":"black"
   }

diff --git a/1514080901139/app.wxss b/1514080901139/app.wxss
@@ -1,10 +1,2 @@
 /**app.wxss**/
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} 
+@import './weui.wxss'
diff --git a/1514080901139/pages/index/index.js b/1514080901139/pages/index/index.js
@@ -4,51 +4,49 @@ const app = getApp()
 
 Page({
   data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
+    todoList: [{text: '打扫卫生', status: false}, {text: '打扫卫生', status: false}, {text: '打扫卫生', status: false}, {text: '打扫卫生', status: false}], // 待办数组 status表示是否完成 ，未完成为false，完成为true
+    footerInputHidden: true, // 是否隐藏底部input
+    inputValue: '' // TODO input输入之后会修改input的value属性，暂时先每次将它初始化为空，待修改
   },
   //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
+  // 添加待办按钮点击
+  onAddButtonTap: function (e) {
+    console.log(e)
+
+    this.setData({
+      footerInputHidden: false
     })
+
+    console.log(this.data.footerInputHidden)
   },
-  onLoad: function () {
-    if (app.globalData.userInfo) {
+
+  // 完成输入
+  onFooterInputConfirm: function (e) {
+    let todoList = this.data.todoList
+    let text = e.detail.value
+    let param = {text: text, status: false} 
+
+    if (param.text) {  // 如果有输入
+      todoList.push(param)
+
       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 {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
+        todoList: todoList,
+        footerInputHidden: true,
+        inputValue: ''
       })
+
     }
   },
-  getUserInfo: function(e) {
+
+  // 完成圆圈点击
+  onCircleTap: function (e){
     console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
+    let index = e.currentTarget.dataset.index
+
+    let param = {}
+    let string = 'todoList[' + index + '].status'
+    param[string] = !this.data.todoList[index].status
+
+    this.setData(param)
   }
 })
diff --git a/1514080901139/pages/index/index.wxml b/1514080901139/pages/index/index.wxml
@@ -1,13 +1,19 @@
 <!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+<view class="page">
+  <view class="page_hd">To-Do</view>
+  <view class="todo_list">
+    <block wx:for="{{todoList}}" wx:key="todoList">
+      <view class="todo_item">
+        <image class="circle_image" src="../../circle.png" data-index="{{index}}" bindtap="onCircleTap"></image>
+        <text class="todoText {{item.status===true?'todoText_finish':''}}">{{item.text}}</text>
+      </view>
     </block>
   </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
+
+  <text class="add_todo_button" type="primary" size="mini" bindtap="onAddButtonTap">+</text>
+
+  <view class="weui-flex footer_input_content" hidden="{{footerInputHidden}}">
+    <label style="padding-top: 15rpx"><image class="circle_image" src="../../circle.png" ></image></label>
+    <input class="weui-input" placeholder="请输入待办事项" value="{{inputValue}}"    bindconfirm="onFooterInputConfirm" focus="true"></input>
   </view>
-</view>
+</view>
diff --git a/1514080901139/pages/index/index.wxss b/1514080901139/pages/index/index.wxss
@@ -1,21 +1,49 @@
 /**index.wxss**/
-.userinfo {
+.page_hd{
+  padding: 80rpx;
+  padding-bottom: 40rpx;
+  font-size: 40rpx;
+  background-color: lightblue;
+  color: #ffffff;
+}
+
+.todo_item{
   display: flex;
-  flex-direction: column;
   align-items: center;
+  padding: 30rpx;
+  border-bottom: 1px solid #dcdcdc;
 }
 
-.userinfo-avatar {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+.circle_image{
+  width: 50rpx;
+  height: 50rpx;
+  margin-right: 20rpx;
 }
 
-.userinfo-nickname {
-  color: #aaa;
+.todoText_finish{
+  text-decoration: line-through;
+  color: #969696;
 }
 
-.usermotto {
-  margin-top: 200px;
+.add_todo_button{
+  display: inline-block;
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 80rpx;
+  right: 40rpx;
+  width: 70rpx;
+  height: 70rpx;
+  padding-top: 5rpx;
+  text-align: center;
+  border-radius: 50%;
+  background-color: lightblue;
+  color: #ffffff;
+}
+
+.footer_input_content{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 0 30rpx;
+  align-items: center;
 }