微信小程序云开发项目-个人待办事项-04【我的】模块开发

上一篇：

微信小程序云开发项目-个人待办事项-03【主页】模块开发

模块开发步骤

本篇介绍我的模块功能开发和代码展示，仅展示部分源码，详细项目代码请联系我获取。

个人信息展示

界面代码

<view class="user-card">
    <view class="user-card__info">
      <view class="user-card__head">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <view class="user-card__name">
        <open-data type="userNickName"></open-data>
      </view> 
    </view>
    <view class="user-card__links">
      <view class="user-card__linkItem" bindtap="linkToTodos">
        <label class="user-card__linkLabel">进行中</label>
        <text class="user-card__linkValue">{{ todosUncompletedCount }}</text>
      </view>
      <view class="user-card__linkItem" bindtap="linkToTodos">
        <label class="user-card__linkLabel">已完成</label>
        <text class="user-card__linkValue">{{ todosCompletedCount }}</text>
      </view>
    </view>
  </view>

JS代码

// 获取用户信息
this.data.userInfo = Object.assign({
  avatarUrl: '../../images/icon-user.png',
  nickName: '未知用户'
}, app.globalData.userInfo)

任务完成率

界面代码

<view class="charts-card">
    <text class="charts-card__header">任务完成率</text>
    <canvas class="charts-card__body" canvas-id="chartsA"></canvas>
  </view>

JS代码

async syncData () {
    this.setData({
        openid: wx.getStorageSync('openid') || await app.getOpenId()
    })
    // 获取统计数据
    this.data.todosCount = await this.getTodosCount()
    this.data.todosCompletedCount = await this.getTodosCompletedCount()
    this.data.todosUncompletedCount = await this.getTodosUnCompletedCount()

    // update
    this.update()
  },
update(data) {
    data = data || this.data
    this.setData(data)
    this.updateChartsA()
    //this.updateChartsB()
  },

updateChartsA: function () {
  ringChart && ringChart.updateData({
    title: {
      name: [Math.round((this.data.todosCompletedCount / this.data.todosCount) * 100), '%'].join('')
    },
    series: [{
      name: '进行中',
      data: this.data.todosUncompletedCount,
      stroke: false
    }, {
      name: '已完成',
      data: this.data.todosCompletedCount,
      stroke: false
    }]
  })
},