HarmonyOS Next 办公应用：打卡页面的实现与解析（二）

3. 更新打卡数据

getNewList1Data() {
  if (this.clockArr.length > 0) {
    this.clockArr.forEach((item, index) => {
      if (item.currentHour <= 12) {
        if (index === 0) {
          this.List1Data[0].children[0].isSignIn = true
          this.List1Data[0].children[0].time = item.currentDateTime
          this.List1Data[0].children[0].signInText = '已签到'
        } else {
          this.List1Data[0].children[1].isSignIn = true
          this.List1Data[0].children[1].time = item.currentDateTime
          this.List1Data[0].children[1].signInText = '已签到'
        }
      } else {
        if (index === 0) {
          this.List1Data[1].children[0].isSignIn = true
          this.List1Data[1].children[0].time = item.currentDateTime
          this.List1Data[1].children[0].signInText = '已签到'
        } else {
          this.List1Data[1].children[1].isSignIn = true
          this.List1Data[1].children[1].time = item.currentDateTime
          this.List1Data[1].children[1].signInText = '已签到'
        }
      }
    })
  }
}

• 功能：根据传入的打卡时间数组 clockArr，更新打卡数据的状态，将相应的签到状态标记为已签到，并更新签到时间。
• 代码段：getNewList1Data 方法内的代码。

4. 页面构建与布局

build() {
  NavDestination() {
    Column() {
      this.NavDestinationHeaderBuilder()
      Row() {
        Text('华为云楼')
        Text('选择打卡地点')
      }
      Column() {
        Row({ space: 16 }) {
          Text(this.currentTime)
          Text(this.currentDay)
          Text(this.currentWeek)
        }
      }
      List({ space: 20 }) {
        ForEach(this.List1Data, (item: List2Json) => {
          ListItem() {
            Column() {
              Row() {
                Text(item.day)
                Text(item.signTime)
              }
              ForEach(item.children, (subItem: SignData) => {
                Row() {
                  Row() {
                    Text(subItem.day)
                  }
                  Row() {
                    Text(subItem.signInText)
                    if (!subItem.isSignIn) {
                      Text(subItem.signType)
                      Text(subItem.supplementSignInText)
                    }
                  }
                  Row() {
                    Text(subItem.time)
                  }
                }
              })
            }
          }
        })
      }
      Row() {
        Row({ space: 5 }) {
          Image($r('app.media.weizhi'))
          Divider()
          Text('江苏省南京市雨花台区华为路')
        }
        Row() {
          Text('刷新')
          Text('绑定Wifi')
        }
      }
    }
  }
}

• 功能：构建打卡页面的整体布局，包括导航栏、打卡地点选择、实时时间显示、打卡记录列表以及底部的位置信息和操作按钮。
• 代码段：build 方法内的代码。

总结

通过上述核心代码，我们在 HarmonyOS Next 中成功构建了一个打卡页面。该页面实现了获取当前时间、更新打卡数据以及页面布局的功能。开发者可以根据实际需求，进一步扩展该页面，如添加打卡功能的逻辑、与后端服务器进行数据交互等，以满足更多办公场景的需求。