ae-task-panel

任务面板

备忘录

完成

• 优化弹出效果，新增背景过渡效果
• 使用rax规范：rpx，组件等
• 解耦组件
• 抽离出弹出层
• 思考并设计业务可能需要的API
• 高定制化，开放众多可用API
• playground页面展示API及demo
• 嵌套滚动禁止
• icon -> img
• 实现全局配置icon，并且支持单独任务自定义配置icon。丰富动态自定义配置

待办：

• 问题：task的执行按钮根据状态切换是我们封装还是使用者提供？如果使用者提供，需要在执行后的返回值里同样给到按钮的icon 这期的任务都需要跳到其他页面再回来，因此这里面需要增加一个事件监听：document.addEventListener("visibilitychange", this.pageVisible);

• 需求中要求：跳转回来保持改任务界面，但是数据刷新，比如任务完成数量增加 每次页面重新visible，都需要重新拉去所有的数据 状态切换每次都非常硬核的重新刷新 icon是img url

• 问题：任务完成时，是否变灰以及禁止点击 这块可能需要开个配置出来了，，，任务完成后是否禁止点击 加配置项

• 数据的fetch及真实数据的操作

• 任务的执行动作（跳转，分享等）及成功后对数据的更新

API及演示Demo查看方式

• 查看API测试环境以及Demo的示例

  - npm install
  - npm start

打开

http://localhost:3333/index

• API测试用代码在/demo中

Demo示例页

// 当前页面渲染demo示例
import demo from 'ae-task-panel/demo' 

使用方式

import TaskPanel from 'ae-task-panel';

TaskPanel.show({
  config: {
    // 关于界面的定制化API：尺寸，背景，宽高度等等
    // UI有关配置
    // layout config
    height: '60%',
    overlayBackground: 'rgba(0, 0, 0, 0.6)', 
    transitionDuration: 300,
    layoutBackground: '#fff',
    layoutBorderRadius: '10rpx 10rpx 0 0',
    closeButtonEnable: true,
    closeButtonColor: '#000',
    closeButtonBackground: 'transparent',
    closeButtonMarginRight: '10rpx',
    closeButtonWidth: '44rpx',
    closeButtonHeight: '44rpx',
    eventThroughTopImage: true,

    // header config
    headerHeight: '70rpx',
    headerFontSize: '44rpx',
    headerFontColor: '#000',
    headerBackground: '',
    headerMiddleDiffWidth: '80rpx',
    headerMiddleHeight: '200rpx',
    headerMiddleImage: '',
    headerInfoEnable: true,
    headerInfoHeight: '60rpx',
    headerInfoBackground: '',
    headerInfoFontSize: '30rpx',
    headerInfoFontColor: '#000',
    scrollViewBackground: '',

    // task config
    taskItemHeight: '180rpx',
    taskItemMargin: '20rpx',
    taskItemBorderRadius: '10rpx',
    taskItemBoxShadow: '',
    taskItemFilter: '',
    taskItemBackground: '#fedf46',
    taskItemLeftWidth: '180rpx',
    taskItemLeftHeight: '100%',
    taskItemLeftPadding: '20rpx',
    taskItemLeftBackground: '',
    taskItemLeftFontColor: '#000',
    taskItemMiddlePadding: '15rpx 10rpx',
    taskItemMiddleBackground: '',
    taskItemMiddleTitleFontColor: '#000',
    taskItemMiddleDescFontColor: '#807024',
    taskItemMiddlePointFontColor: '#000',
    taskItemRightWidth: '140rpx',
    taskItemRightHeight: '100%',
    taskItemRightPadding: '20rpx',
    taskItemRightBackground: '',
    taskItemRightFontColor: '#757575',
  },

  // 数据有关配置
  options: {
    title: 'Task List',
    info: 'Complete mission and win more within 24hrs',

    // 全局默认Icon
    doingIcon: '//ae01.alicdn.com/kf/H53110de130c946c5a64bcc0cc1798266v.png',
    doneIcon: '//ae01.alicdn.com/kf/H4276c5213bb64ec58eda0695b399741dL.png',
    pointIcon: '//ae01.alicdn.com/kf/Ha6041fca017e46d697c105417241aa62X.png',
  }
})

• 其中，Icon的配置可以被单独的任务覆盖修改，实现不同任务匹配不同Icon的定制需求