Repository: seymoe/mp-jishengji
Branch: master
Commit: f3d70636ef57
Files: 34
Total size: 60.4 KB

Directory structure:
gitextract_7vk5hfap/

├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .wepycache
├── .wepyignore
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── app.wpy
│   ├── components/
│   │   ├── bill/
│   │   │   ├── cateslide.wpy
│   │   │   ├── listitem.wpy
│   │   │   └── listsection.wpy
│   │   ├── counter.wpy
│   │   ├── group.wpy
│   │   ├── groupitem.wpy
│   │   ├── index/
│   │   │   └── listitem.wpy
│   │   ├── list.wpy
│   │   ├── panel.wpy
│   │   ├── plan/
│   │   │   └── listitem.wpy
│   │   └── wepy-list.wpy
│   ├── index.template.html
│   ├── mixins/
│   │   └── test.js
│   ├── pages/
│   │   ├── bill/
│   │   │   └── addone.wpy
│   │   ├── bill.wpy
│   │   ├── index.wpy
│   │   ├── me.wpy
│   │   ├── plan/
│   │   │   └── clock.wpy
│   │   ├── plan.wpy
│   │   └── ranking.wpy
│   └── utils/
│       ├── config.js
│       └── util.js
└── wepy.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true


================================================
FILE: .eslintignore
================================================
dist/*


================================================
FILE: .eslintrc.js
================================================
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.wpy files
  plugins: [
    'html'
  ],
  settings: {
    'html/html-extensions': ['.html', '.wpy']
  },
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'space-before-function-paren': 0
  }
}


================================================
FILE: .gitignore
================================================
node_modules
dist
.DB_store


================================================
FILE: .prettierrc
================================================
{
  "singleQuote": true
}


================================================
FILE: .wepycache
================================================
{"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/wepy.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy-async-function/index.js":1517302333000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy-com-toast/toast.wpy":1488432898000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/app.js":1517904282000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/page.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/component.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/event.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/base.js":1517904282000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/util.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/mixin.js":1517904283000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy-async-function/global.js":1517302333000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/promise-polyfill/promise.js":1511627065000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/regenerator-runtime/runtime.js":1493390741000,"/Users/molang/Documents/Front-end/xiaochengxu/mp-jishengji/node_modules/wepy/lib/native.js":1517904283000}

================================================
FILE: .wepyignore
================================================
node_modules
dist
.DB_store
*.wpy___jb_tmp___


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 Molang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# 记生计 [小程序]

一款日常生活记录类的工具小程序，通过wepyjs构建,包含计划、账本、圈子、榜单和个人中心等模块。

状态：未完成

## 玩耍：

1. Fork 或 `git clone https://github.com/seymoe/mp-jishengji.git` 或 download
2. `cd mp-jishengji && npm install`
3. `wepy build --watch` (如果未安装wepy-cli,请先安装,见[WePY](https://tencent.github.io/wepy/index.html))
4. 微信开发者工具目录选择dist

---

+ 计划

<img style="display:block;margin-bottom: 15px" width="375" src="https://github.com/ximolang/mp-jishengji/raw/master/readme_img/plan.png"/>

+ 账本

<img style="display:block;margin-bottom: 15px" width="375" src="https://github.com/ximolang/mp-jishengji/raw/master/readme_img/bill.png"/>

+ 我的

<img width="375" src="https://github.com/ximolang/mp-jishengji/raw/master/readme_img/me.png"/>

## 想法：

本项目本来是作为私有仓库开发，但感觉独乐乐不如众乐乐，本小程序经过本人调研两天时间，结合个人开发者类目许可要求以及目前上线的众小程序来看，综合而来的想法，我相信做出这个小程序，无论如何都能获得一部分用户，或多或少。个人开发者完全可以尝试，特别是想利用wepy构建小程序练手的前端er来说。顺便求fork、star。

## 计划：

+ 完善圈子、榜单等相关页面开发
+ 构建后端API，实现发圈、完成计划，记账等功能的数据存储支持
+ 增加数据统计与图标分析
+ 完善功能，优化细节

## License
MIT


================================================
FILE: package.json
================================================
{
  "name": "jishengji-miniapp",
  "version": "0.0.1",
  "description": "A WePY project",
  "main": "dist/app.js",
  "scripts": {
    "dev": "wepy build --watch",
    "build": "cross-env NODE_ENV=production wepy build --no-cache",
    "dev:web": "wepy build --output web",
    "clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "wepy": {
    "module-a": false,
    "./src/components/list": "./src/components/wepy-list.wpy"
  },
  "author": "ximolang",
  "license": "MIT",
  "dependencies": {
    "wepy": "^1.6.0",
    "wepy-async-function": "^1.4.4",
    "wepy-com-toast": "^1.0.2"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.3",
    "eslint": "^3.18.0",
    "eslint-config-standard": "^7.1.0",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-plugin-html": "^2.0.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^2.0.1",
    "wepy-eslint": "^1.5.3",
    "wepy-compiler-babel": "^1.5.1",
    "wepy-compiler-less": "^1.3.10"
  }
}


================================================
FILE: src/app.wpy
================================================
<style lang="less">
page{
  height: 100%;
  background-color: #f9fbff;
}
@font-face {
  font-family: 'iconfont';  /* project id 573053 */
  src: url('//at.alicdn.com/t/font_573053_6w688di648xxyldi.eot');
  src: url('//at.alicdn.com/t/font_573053_6w688di648xxyldi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_573053_6w688di648xxyldi.woff') format('woff'),
  url('//at.alicdn.com/t/font_573053_6w688di648xxyldi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_573053_6w688di648xxyldi.svg#iconfont') format('svg');
}
</style>

<script>
import wepy from 'wepy'
import 'wepy-async-function'

export default class extends wepy.app {
  config = {
    pages: [
      'pages/index',
      'pages/ranking',
      'pages/bill/addone',
      'pages/plan',
      'pages/plan/clock',
      'pages/bill',
      'pages/me'
      // 子页面
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#138cff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'white',
      backgroundColor: '#138cff'
    },
    tabBar: {
      color: '#757982',
      selectedColor: '#138cff',
      borderStyle: 'white',
      backgroundColor: '#fff',
      list: [
        {
          pagePath: 'pages/plan',
          text: '计划',
          iconPath: 'images/tabbar/plan.png',
          selectedIconPath: 'images/tabbar/plan-on.png'
        },
        {
          pagePath: 'pages/bill',
          text: '账本',
          iconPath: 'images/tabbar/bill.png',
          selectedIconPath: 'images/tabbar/bill-on.png'
        },
        {
          pagePath: 'pages/index',
          text: '圈子',
          iconPath: 'images/tabbar/index.png',
          selectedIconPath: 'images/tabbar/index-on.png'
        },
        {
          pagePath: 'pages/ranking',
          text: '榜单',
          iconPath: 'images/tabbar/ranking.png',
          selectedIconPath: 'images/tabbar/ranking-on.png'
        },
        {
          pagePath: 'pages/me',
          text: '我的',
          iconPath: 'images/tabbar/me.png',
          selectedIconPath: 'images/tabbar/me-on.png'
        }
      ]
    }
  }

  globalData = {
    userInfo: null
  }

  constructor () {
    super()
    this.use('requestfix')
  }

  onLaunch() {
    this.testAsync()
  }

  sleep (s) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('promise resolved')
      }, s * 1000)
    })
  }

  async testAsync () {
    const data = await this.sleep(3)
    console.log(data)
  }

  getUserInfo(cb) {
    const that = this
    if (this.globalData.userInfo) {
      return this.globalData.userInfo
    }
    wepy.getUserInfo({
      success (res) {
        that.globalData.userInfo = res.userInfo
        cb && cb(res.userInfo)
      }
    })
  }
}
</script>


================================================
FILE: src/components/bill/cateslide.wpy
================================================
<template>
  <scroll-view class="scrollbox" scroll-y>
    <view class="box">
      <repeat for="{{ list }}" key="index" index="index" item="item">
        <view class="item {{ cateType == item.type && cateId == item.cateId ? 'active' : '' }}"
          @tap="selectCate({{item.type}}, {{item.cateId}})">
          <view class="icon icon-{{ item.type }}-{{ item.cateId }}"></view>
          <text>{{ item.cateName }}</text>
        </view>
      </repeat>
    </view>
  </scroll-view>
</template>

<script>
  import wepy from 'wepy'
  export default class CateSlide extends wepy.component {
    props = {
      list: {
        type: Array,
        default: []
      }
    }

    data = {
      cateType: '',
      cateId: ''
    }

    methods = {
      selectCate(type, id) {
        if (!type || !id) {
          console.error('未能获取到类别信息')
          return
        }
        this.cateType = type
        this.cateId = id
        this.$emit('selectCate', type, id)
      }
    }
  }
</script>

<style lang="less">
  .scrollbox{
    height: 640rpx;
  }
  .box{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 30rpx;
    .item{
      height: 130rpx;
      padding-bottom: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 16.66%;
      text-align: center;
      box-sizing: border-box;
      text{
        font-size: 24rpx;
        color: #333;
      }
    }
    .active{
      .icon{
        background-color: #138cff;
      }
      .icon::after{
        color: #fff;
      }
      text{
        color: #138cff;
      }
    }
  }
  .icon{
    margin: 0 auto 8rpx auto;
    width: 70rpx;
    height: 70rpx;
    border-radius: 100%;
    background-color: #f8f8f8;
  }
  .icon::after{
    font-family: "iconfont" !important;
    font-size: 38rpx;
    line-height:70rpx;
    color: #333;
  }
  
  .icon-pay-1::after{
    content: '\e600';
  }
</style>


================================================
FILE: src/components/bill/listitem.wpy
================================================
<template>
  <view class="listitem" data-id="{{ obj.id }}">
    <image src="{{ obj.image }}"></image>
    <text class="title">{{ obj.title }}</text>
    <text class="mount">{{ obj.mount }}</text>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class ListItem extends wepy.component {
    props = {
      obj: {
        type: Object,
        default: {}
      }
    }

    methods = {}
  }
</script>

<style lang="less">
  .listitem{
    display: flex;
    justify-content: space-between;
    padding: 16rpx 30rpx 16rpx 0rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    image{
      margin-right: 20rpx;
      display: block;
      width: 60rpx;
      height: 60rpx;
      border-radius: 100%;
    }
    text{
      display: block;
      line-height: 60rpx;
      font-size: 28rpx;
    }
    .title{
      flex: 1;
    }
  }
</style>


================================================
FILE: src/components/bill/listsection.wpy
================================================
<template>
  <view class="listsection">
    <view class="header">
      <view class="left">
        <text>{{ item.info.date }}</text>
        <text>{{ item.info.day }}</text>
      </view>
      <view class="right">
        <text>收入：{{ item.info.totalIncome }}</text>
        <text>支出：{{ item.info.totalPay }}</text>
      </view>
    </view>
    <view class="body">
      <repeat for="{{ item.list }}" key="index" index="index" item="obj">
        <listitem :obj="obj"></listitem>
      </repeat>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import ListItem from './listitem'
  export default class ListSection extends wepy.component {
    props = {
      item: {
        type: Object,
        default: {}
      }
    }

    components = {
      listitem: ListItem
    }
  }
</script>

<style lang="less">
  .listsection{
    .header{
      height: 60rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #f0f0f0;
      >view{
        display: flex;
        justify-content: space-between;
        text{
          line-height: 60rpx;
          color: #666;
          font-size: 26rpx;
        }
      }
      .left > text:first-child, .right > text:first-child {
        margin-right: 20rpx;
      }
    }
    .body{

    }
  }
</style>


================================================
FILE: src/components/counter.wpy
================================================
<style lang="less">
  .counter {
    text-align: left;
    font-size: 12px;
  }
  .count {
    font-size: 18px;
    font-weight: bold;
    &.red {
      color: red;
    }
    &.green {
      color: green;
    }
  }
</style>
<template>
  <view class="counter {{style}}">
    <button @tap="plus" size="mini">  +  </button>
    <button @tap="minus" size="mini">  -  </button>
    <text class="count" :class="{red: num > 55, green: num < 45}"> {{num}} </text>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class Counter extends wepy.component {
    props = {
      num: {
        type: [Number, String],
        coerce: function (v) {
          return +v
        },
        default: 50
      }
    }

    data = {
    }
    events = {
      'index-broadcast': (...args) => {
        let $event = args[args.length - 1]
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      }
    }

    watch = {
      num (curVal, oldVal) {
        console.log(`旧值：${oldVal}，新值：${curVal}`)
      }
    }

    methods = {
      plus () {
        this.num = this.num + 1
        console.log(this.$name + ' plus tap')

        this.$emit('index-emit', 1, 2, 3)
      },
      minus () {
        this.num = this.num - 1
        console.log(this.$name + ' minus tap')
      }
    }
  }
</script>


================================================
FILE: src/components/group.wpy
================================================
<style type="less">
  .group {}
</style>
<template>
  <view class="group">
    <text class="id">{{grouplist.id}}. </text>
    <text class="name" @tap="tap">{{grouplist.name}}</text>
    <view>
      <repeat for="{{grouplist.list}}" item="item">
        <groupitem :gitem="item"></groupitem>
      </repeat>
    </view>
  </view>
</template>
<script>
  import wepy from 'wepy'
  import GroupItem from './groupitem'

  export default class Group extends wepy.component {
    props = {
      grouplist: {},
      index: {}
    }

    components = {
      groupitem: GroupItem
    }
    methods = {
      tap () {
        this.grouplist.name = `Parent Random(${Math.random()})`
        console.log(`Clicked Group ${this.$index}, ID is ${this.grouplist.id}`)
      }
    }
  }
</script>


================================================
FILE: src/components/groupitem.wpy
================================================
<style type="less">
.groupitem {
}
</style>
<template>
  <view class="groupitem">
    --<text class="id">{{gitem.childid}}.</text>
    <text class="name" @tap="tap"> {{gitem.childname}}</text>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class GroupItem extends wepy.component {
    props = {
      gitem: {}
    }
    data = {
    }
    methods = {
      tap () {
        this.gitem.childname = `Child Random(${Math.random()})`
        console.log(`Clicked Group ${this.$parent.$index}. Item ${this.$index}, ID is ${this.gitem.childid}`)
      }
    }
  }
</script>


================================================
FILE: src/components/index/listitem.wpy
================================================
<template>
  <view class="list-item">
    <view class="header">
      <view class="left">
        <image src="{{ avatar }}"></image>
        <text>{{ username }}</text>
      </view>
    </view>
    <view class="main">
      <text class="">{{ content }}</text>
      <image wx:if="{{ image }}" src="{{ image }}"></image>
    </view>
    <view class="footer">
      <view class="like">{{ likes }} 赞</view>
      <view class="right">
        <text>{{ createtime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class ListItem extends wepy.component {
    props = {
      id: {
        type: Number,
        default: 0
      },
      image: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      username: {
        type: String,
        default: ''
      },
      createtime: {
        type: String,
        default: ''
      },
      likes: {
        type: Number,
        default: 0
      },
      avatar: {
        type: String,
        default: ''
      }
    }

    methods = {
      bindDoPlan(id, title) {
        if (!id || !title) return

        // 跳转至计时器界面
        this.$parent.$navigate('./plan/clock', { planId: id, planTitle: title })
      }
    }
  }
</script>

<style lang="less">
  .list-item{
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    .header{
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #666;
      border-bottom: 1rpx solid #f3f3f3;
      .left{
        display: flex;
        image, text{
          display: block;
          height: 60rpx;
          line-height: 60rpx;
        }
        image{
          margin: 10rpx 20rpx 10rpx 0;
          height: 40rpx;
          width: 40rpx;
          border-radius: 100%;
        }
      }
    }
    .main{
      text{
        font-weight: bold;
        font-size: 28rpx;
        color: #000;
      }
      image{
        display: block;
        width: 100%;
      }
    }
    .footer{
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #666;
      .like{
        height: 50rpx;
        line-height: 50rpx;
      }
    }
  }
</style>


================================================
FILE: src/components/list.wpy
================================================
<style lang="less">
  .mylist:odd {
    color: red;
  }
  .mylist:even {
    color: green;
  }
</style>
<template>
  <view class="list">
  <view>
    <button @tap="add" size="mini">添加列表</button>
  </view>
    <block wx:for-items="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
      <view @tap="tap" class="mylist">
        <text>{{item.id}}</text>: {{item.title}}
      </view>
    </block>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class List extends wepy.component {
    data = {
      list: [
        {
          id: '0',
          title: 'loading'
        }
      ]
    }

    events = {
      'index-broadcast': (...args) => {
        let $event = args[args.length - 1]
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.name}`)
      }
    }

    methods = {
      tap () {
        // this.num = this.num + 1
        console.log(this.$name + ' tap')
      },
      add () {
        let len = this.list.length
        this.list.push({id: len + 1, title: 'title_' + len})
      }
    }

    onLoad () {
    }
  }
</script>


================================================
FILE: src/components/panel.wpy
================================================
<style lang="less">
  .panel {
    width: 100%;
    margin-top: 20rpx;
    text-align: left;
    font-size: 12px;
    padding-top: 20rpx;
    padding-left: 50rpx;
    padding-bottom: 20rpx;
    border: 1px solid #ccc;

    .title {
      padding-bottom: 20rpx;
      font-size: 14px;
      font-weight: bold;
    }
    .info {
      padding: 15rpx;
    }
    .testcounter {
      margin-top: 15rpx;
      position: absolute;
    }
    .counterview {
      margin-left: 120rpx;
    }
  }
</style>
<template>
  <view class="panel">
    <slot name="title">
      Title
    </slot>
    <slot>
    </slot>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class Panel extends wepy.component {
  }
</script>


================================================
FILE: src/components/plan/listitem.wpy
================================================
<template>
  <view class="listitem">
    <view class="image">
      <image src="{{ image }}"></image>
    </view>
    <text class="title">{{ title }}</text>
    <text class="remark">{{ remark }}</text>
    <text class="hours">执行 {{ times }} 次,共 {{ hours }} 小时</text>
    <text class="time">该计划于 {{ createtime }} 创建</text>

    <view class="btn-do" @tap="bindDoPlan({{ id }}, {{ title }})">
      <text wx:if="{{ times <= 0 }}">开始执行</text>
      <text wx:else>继续执行</text>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class ListItem extends wepy.component {
    props = {
      id: {
        type: Number,
        default: 0
      },
      image: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      remark: {
        type: String,
        default: ''
      },
      createtime: {
        type: String,
        default: ''
      },
      times: {
        type: Number,
        default: 0
      },
      hours: {
        type: Number,
        default: 0
      }
    }

    methods = {
      bindDoPlan(id, title) {
        if (!id || !title) return

        // 跳转至计时器界面
        this.$parent.$navigate('./plan/clock', { planId: id, planTitle: title })
      }
    }
  }
</script>

<style lang="less">
  .listitem {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 0 12px 2px rgba(0,0,0,.08);
    .image{
      margin-top: 60rpx;
      display: block;
      width: 200rpx;
      height: 200rpx;
      image {
        display: block;
        width: 200rpx;
        height: 200rpx;
      }
    }
    .title{
      font-weight: bold;
      font-size: 36rpx;
      margin-top: 30rpx;
    }
    .remark{
      font-size: 28rpx;
      padding: 30rpx;
      text-align:justify;
    }
    .time,.hours{
      display: block;
      font-size: 26rpx;
      color: #666;
    }
    .time{
      position: absolute;
      bottom: 60rpx;
    }
    .hours{
      position: absolute;
      bottom: 100rpx;
      font-weight: bold;
    }
    .btn-do{
      position: absolute;
      bottom: 180rpx;
      width: 35%;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background-color: #138cff;
      color: #fff;
      font-size: 28rpx;
      transition: background-color 0.3s;
    }
    .btn-do:active{
      background-color: #0f7ce3;
    }
  }
</style>


================================================
FILE: src/components/wepy-list.wpy
================================================
<style lang="less">
    .mylist:odd {
        color: red;
    }
    .mylist:even {
        color: green;
    }
</style>
<template>
    <view class="wepy-list">
        <view>
            <button @tap="add" size="mini">添加列表another</button>
        </view>
        <block wx:for-items="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
            <view @tap="tap" class="mylist">
                <text>{{item.id}}</text>: {{item.title}}
            </view>
        </block>
    </view>
</template>
<script>
  import wepy from 'wepy'

  export default class ListAnother extends wepy.component {
    data = {
      list: [
        {
          id: '0',
          title: 'loading'
        }
      ]
    }

    events = {
      'index-broadcast': (...args) => {
        let $event = args[args.length - 1]
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.name}`)
      }
    }

    methods = {
      tap () {
        // this.num = this.num + 1
        console.log(this.$name + ' tap')
      },
      add () {
        let len = this.list.length
        this.list.push({id: len + 1, title: 'title_' + len})
      }
    }

    onLoad () {
    }
  }
</script>


================================================
FILE: src/index.template.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta content="telephone=no" name="format-detection">

  <title>转 WEB DEMO</title>
  <style>
      html, body, #app {height: 100%;}
  </style>
</head>
<body>
  <div id="app">
    <router-view></router-view>
    <script src="./index.js"></script>
  </div>
</body>
</html>


================================================
FILE: src/mixins/test.js
================================================
import wepy from 'wepy'

export default class testMixin extends wepy.mixin {
  data = {
    mixin: 'This is mixin data.'
  }
  methods = {
    tap () {
      this.mixin = 'mixin data was changed'
      console.log('mixin method tap')
    }
  }

  onShow() {
    console.log('mixin onShow')
  }

  onLoad() {
    console.log('mixin onLoad')
  }
}


================================================
FILE: src/pages/bill/addone.wpy
================================================
<template>
  <view class="wrap">
    <view class="typewrap">
      <view class="typebar">
        <view class="{{ bill.typeId === '1' ? 'active' : '' }}" @tap="toggleType(1)">
          <text>支出</text>
        </view>
        <view class="{{ bill.typeId === '2' ? 'active' : '' }}" @tap="toggleType(2)">
          <text>收入</text>
        </view>
      </view>
    </view>

    <!-- 输入框区域 -->
    <view class="input-area">
      <view class="money">
        <input type="digit" placeholder="￥" confirm-type="done" @input="bindInputMoney" @blur="bindBlurMoney"/>
      </view>
      <view class="remark">
        <input type="text" placeholder="备注信息:" />
      </view>
      <view class="btns-wrap">
        <view class="btn-confirm" @tap="confirmAdd">
          <text>确定</text>
        </view>
        <view class="btn-cancel" @tap="bindToBillpage">
          <text>取消</text>
        </view>
      </view>
    </view>

    <!-- 类别图标列表 -->
    <view class="catewrap">
      <cateslide
        :list.sync="cateList"
        @selectCate.user="chooseCate"></cateslide>
    </view>

  </view>

</template>

<script>
  import wepy from 'wepy'
  import CateSlide from '@/components/bill/cateslide'
  import { log } from '@/utils/util'
  import { payCateList, incomeCateList } from '@/utils/config'

  export default class AddOne extends wepy.page {
    config = {
      navigationBarTitleText: '记账'
    }

    data = {
      cateList: payCateList,
      bill: {
        typeId: '1'
      },
      form: {
        cateType: '',
        cateId: '',
        money: 0,
        remark: ''
      }
    }

    components = {
      cateslide: CateSlide
    }

    methods = {
      // 切换记账方式
      toggleType(t) {
        if (t === '1' && this.bill.typeId === '2') {
          this.bill.typeId = t
          this.cateList = payCateList
          this.form.cateType = ''
          this.form.cateId = ''
        } else if (t === '2' && this.bill.typeId === '1') {
          this.bill.typeId = t
          this.cateList = incomeCateList
          this.form.cateType = ''
          this.form.cateId = ''
        }
      },

      // 选择收入或支出类别
      chooseCate(type, id) {
        log('type', type)
        log('id', id)
        this.form.cateType = type
        this.form.cateId = id
      },

      // 输入金额变化得到值
      bindInputMoney(e) {
        let val = e.detail.value
        if (val.indexOf('￥') === 0) {
          return '￥' + val.slice(1)
        } else if (val === '') {
          return ''
        }
        return '￥' + val
      },

      bindBlurMoney(e) {
        let val = e.detail.value
        if (val.indexOf('￥') === 0) {
          val = parseFloat(val.slice(1))
        } else {
          val = 0
        }
        this.form.money = val
      },

      bindBlurRemark(e) {
        let val = e.detail.value.trim()
        if (val !== '') {
          val = val.replace(/<\/?[^>]*>/g, '')
        }
        this.form.remark = val
      },

      // 确认记账
      confirmAdd() {
        let { money } = this.form
        if (money <= 0) {
          // 提示金额不能为0
          wx.showToast({
            title: this.bill.typeId === '1' ? '没花钱不能记哦' : '没收钱不能记哦',
            icon: 'success',
            duration: 2000
          })
          return false
        }

        // 发送Post请求记录
      },

      // 取消 返回账本页
      bindToBillpage() {
        this.$switch('../bill')
      }
    }

    onLoad() {
      // log('账单页面加载成功')
      // 设置当前月份
      // const _cdate = formatTime(new Date()).slice(0, 2)
      // this.calenderArr = _cdate
      // this.$apply()
    }
  }
</script>

<style lang="less">
  .wrap{
    position: relative;
    height: 100%;
    background-color: #fff;
  }
  .typewrap{
    padding: 30rpx 0;
  }
  .typebar{
    display: flex;
    width: 50%;
    margin: 0 auto;
    height: 60rpx;
    view{
      width: 50%;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #fff;
      transition: background-color .3s;
      box-sizing: border-box;
      border: 2rpx solid #138cff;
      text{
        color: #138cff;
      }
    }
    view:first-child{
      border-top-left-radius: 6rpx;
      border-bottom-left-radius: 6rpx;
    }
    view:last-child{
      border-top-right-radius: 6rpx;
      border-bottom-right-radius: 6rpx;
    }
    .active{
      background-color: #138cff;
      text{
        color: #fff;
      }
    }
  }
  .input-area{
    padding: 0 50rpx;
    margin-bottom: 30rpx;
    border-bottom: 6rpx solid #138cff;
  }
  .money{
    padding-bottom: 6rpx;
    border-bottom: 1rpx solid #f3f3f3;
    input{
      height: 120rpx;
      line-height: 120rpx;
      font-size: 70rpx;
    }
  }
  .remark{
    padding-bottom: 6rpx;
    border-bottom: 1rpx solid #f3f3f3;
    input{
      height: 70rpx;
      line-height: 70rpx;
      font-size: 30rpx;
    }
  }

  .btns-wrap{
    display: flex;
  }

  .btn-confirm, .btn-cancel{
    margin: 30rpx 0;
    width: 150rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 4rpx;
    text{
      font-size: 26rpx;
    }
  }
  .btn-confirm{
    margin-right: 30rpx;
    background-color: #138cff;
    color: #fff;
  }
  .btn-cancel{
    background-color: #f8f8f8;
  }
</style>


================================================
FILE: src/pages/bill.wpy
================================================
<template>
  <view class="wrap">
    <!-- 顶部统计信息 -->
    <view class="topinfo" id="topInfo">
      <view class="calender">
        <text>{{ calenderArr[0] }}年</text>
        <picker mode="date" value="{{date}}" fields="month" start="2018-01-01" end="2020-01-01" @change="bindDateChange">
          <view class="picker">
            <text class="bold">{{ calenderArr[1] }}</text>
            <view class="iconfont icon-pulldown"></view>
          </view>
        </picker>
      </view>
      <view class="income">
        <text>收入</text>
        <text class="bold">{{ moneyStat.income }}</text>
      </view>
      <view class="pay">
        <text>支出</text>
        <text class="bold">{{ moneyStat.pay }}</text>
      </view>
    </view>

    <!-- 滚动区域 -->
    <scroll-view class="scroll-view" scroll-y style="height:{{ scrollHeight }}px">
      <view class="list-wrap">
        <repeat for="{{ detailList }}" key="index" index="index" item="item">
          <listsection :item="item"></listsection>
        </repeat>
      </view>
    </scroll-view>

    <!-- 记一笔 -->
    <view class="btn-addbill" @tap="bindToAddpage">
      <text>记</text>
    </view>
  </view>

</template>

<script>
  import wepy from 'wepy'
  import ListSection from '@/components/bill/listsection'
  import { log, getSystem, formatTime } from '@/utils/util'

  export default class Bill extends wepy.page {
    config = {
      navigationBarTitleText: '账本'
    }

    data = {
      calenderArr: ['2018', '02'],   // 当前年月
      moneyStat: {
        income: '2000.00',   // 收入
        pay: '890.00'       // 支出
      },
      detailList: [
        {
          info: {
            date: '02月25日',
            day: '星期日',
            totalIncome: 0,
            totalPay: 0
          },
          list: [
            {
              id: 1,
              image: '/images/reading.png',
              title: '餐饮',
              remark: '',
              mount: -12
            },
            {
              id: 2,
              image: '/images/reading.png',
              title: '兼职',
              remark: '',
              mount: 20
            },
            {
              id: 1,
              image: '/images/reading.png',
              title: '餐饮',
              remark: '',
              mount: -12
            },
            {
              id: 2,
              image: '/images/reading.png',
              title: '兼职',
              remark: '',
              mount: 20
            }
          ]
        },
        {
          info: {
            date: '02月25日',
            day: '星期日',
            totalIncome: 0,
            totalPay: 0
          },
          list: [
            {
              id: 1,
              image: '/images/reading.png',
              title: '餐饮',
              remark: '',
              mount: -12
            },
            {
              id: 2,
              image: '/images/reading.png',
              title: '兼职',
              remark: '',
              mount: 20
            }
          ]
        },
        {
          info: {
            date: '02月25日',
            day: '星期日',
            totalIncome: 0,
            totalPay: 0
          },
          list: [
            {
              id: 1,
              image: '/images/reading.png',
              title: '餐饮',
              remark: '',
              mount: -12
            },
            {
              id: 2,
              image: '/images/reading.png',
              title: '兼职',
              remark: '',
              mount: 20
            }
          ]
        },
        {
          info: {
            date: '02月25日',
            day: '星期日',
            totalIncome: 0,
            totalPay: 0
          },
          list: [
            {
              id: 1,
              image: '/images/reading.png',
              title: '餐饮',
              remark: '',
              mount: -12
            },
            {
              id: 2,
              image: '/images/reading.png',
              title: '兼职',
              remark: '',
              mount: 20
            }
          ]
        }
      ],
      // 滚动区域信息
      scrollHeight: 0
    }

    components = {
      listsection: ListSection
    }

    methods = {
      // 选择日期
      bindDateChange(e) {
        let dateStr = e.detail.value
        this.calenderArr = dateStr.split('-')
        this.$apply()

        // 发送接口请求当前月份的数据
      },

      // 跳转到记账页面
      bindToAddpage() {
        this.$navigate('./bill/addone')
      }
    }

    onLoad() {
      log('账单页面加载成功')
      const sys = getSystem()
      wx.createSelectorQuery().select('#topInfo').boundingClientRect((rect) => {
        let h = rect.height
        h = h > 0 ? h : 70
        this.scrollHeight = sys.wh - h
        this.$apply()
      }).exec()

      // 设置当前月份
      const _cdate = formatTime(new Date()).slice(0, 2)
      this.calenderArr = _cdate
      this.$apply()
    }
  }
</script>

<style lang="less">
  .wrap{
    position: relative;
    height: 100%;
  }
  .topinfo{
    display: flex;
    justify-content: space-around;
    height: 140rpx;
    padding: 18rpx 0;
    background-color: #138cff;
    box-sizing: border-box;
    z-index: 10;
    text{
      text-align: center;
      display: block;
      color: #fff;
    }
    > view > text:first-child{
      margin-bottom: 10rpx;
      font-size: 28rpx;
    }
    .bold{
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  .picker{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-pulldown::after{
      font-family: "iconfont" !important;
      font-size: 32rpx;
      color: #fff;
      content: '\e629';
    }
  }

  .scroll-view{
    width: 100%;
    box-sizing: border-box;
  }
  .list-wrap{
    padding-bottom: 130rpx;
  }

  .btn-addbill{
    position: fixed;
    right: 30rpx;
    bottom: 15rpx;
    height: 100rpx;
    width: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: rgba(19, 140, 255, .9);
    border-radius: 100%;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.15);
    text{
      font-size: 26rpx;
      color: #fff;
    }
  }
</style>


================================================
FILE: src/pages/index.wpy
================================================
<template>
  <!-- <view class="container">
    <view class="userinfo" @tap="handleViewTap">
      <image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"/>
      <view class="userinfo-nickname">{{ userInfo.nickName }}</view>
    </view>

    <panel>
      <view class="title" slot="title">测试数据绑定</view>

      <text class="info">{{normalTitle}}</text>
      <text class="info">{{setTimeoutTitle}}</text>
      <text class="info">{{mixin}}</text>
      <text class="info">{{mynum}}</text>
      <text class="info">{{now}}</text>
      <button @tap="plus('a')" size="mini">  +  </button>
    </panel>

    <panel>
      <view class="title" slot="title">其它测试</view>
      <button @tap="toast" size="mini">第三方组件</button>
      <button @tap="communicate" size="mini">组件通信</button>
      <button @tap="tap" size="mini">混合TAP事件</button>
    </panel>

    <panel>
      <view class="title" slot="title">测试并发网络请求</view>
      <view>返回结果: <text>{{netrst}}</text></view>
      <button @tap="request" size="mini"> 点我发起10个请求 </button>
    </panel>

    <panel>
      <view class="title" slot="title">测试组件</view>

      <text class="testcounter">计数组件1: </text>
      <view class="counterview">
        <counter1 @index-emit.user="counterEmit" />
      </view>

      <text class="testcounter">计数组件2: </text>

      <view class="counterview">
        <counter2 :num.sync="mynum"></counter2>
      </view>
    </panel>

    <panel>
      <view class="title" slot="title">测试组件Repeat</view>
      <repeat for="" index="index" item="item" key="key">
        <group :grouplist="item" :indexa="index"></group>
      </repeat>
    </panel>

    <panel>
      <view class="title" slot="title">测试列表</view>
      <list></list>
    </panel>

    <toast />
  </view> -->
  <view class="wrap">
    <repeat for="{{ dynamicList }}" key="index" index="index" item="item">
      <listitem
        :id="item.id"
        :image="item.image"
        :content="item.content"
        :avatar="item.avatar"
        :createtime="item.create_time"
        :username="item.username"
        :likes="item.likes">
      </listitem>
    </repeat>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import Panel from '@/components/panel' // alias example
  import Counter from 'counter' // alias example
  import List from '../components/list' // aliasFields example
  import moduleA from 'module-a' // aliasFields ignore module example
  import Group from '../components/group'
  import Toast from 'wepy-com-toast'
  import testMixin from '../mixins/test'

  import ListItem from '@/components/index/listitem'

  console.log('moduleA ignored: ', moduleA) // => moduleA ignored: {}

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '圈子'
    }
    components = {
      panel: Panel,
      counter1: Counter,
      counter2: Counter,
      list: List,
      group: Group,
      toast: Toast,
      listitem: ListItem
    }

    mixins = [testMixin]

    data = {
      dynamicList: [
        {
          id: 1,
          username: '曦莫琅',
          avatar: '/images/reading.png',
          content: '这是动态',
          image: '',
          create_time: '2018-02-23 17:31',
          likes: 12
        },
        {
          id: 2,
          username: '曦莫琅',
          avatar: '/images/reading.png',
          content: '这是动态',
          image: '',
          create_time: '2018-02-23 17:31',
          likes: 12
        },
        {
          id: 3,
          username: '曦莫琅',
          avatar: '/images/reading.png',
          content: '这是动态',
          image: '/images/reading.png',
          create_time: '2018-02-23 17:31',
          likes: 123
        },
        {
          id: 4,
          username: '曦莫琅',
          avatar: '/images/reading.png',
          content: '这是动态',
          image: '',
          create_time: '2018-02-23 17:31',
          likes: 12
        }
      ],

      mynum: 20,
      userInfo: {
        nickName: '加载中...'
      },
      normalTitle: '原始标题',
      setTimeoutTitle: '标题三秒后会被修改',
      count: 0,
      netrst: '',
      groupList: [
        {
          id: 1,
          name: '点击改变',
          list: [
            {
              childid: '1.1',
              childname: '子项，点我改变'
            }, {
              childid: '1.2',
              childname: '子项，点我改变'
            }, {
              childid: '1.3',
              childname: '子项，点我改变'
            }
          ]
        },
        {
          id: 2,
          name: '点击改变',
          list: [
            {
              childid: '2.1',
              childname: '子项，点我改变'
            }, {
              childid: '2.2',
              childname: '子项，点我改变'
            }, {
              childid: '2.3',
              childname: '子项，点我改变'
            }
          ]
        },
        {
          id: 3,
          name: '点击改变',
          list: [
            {
              childid: '3.1',
              childname: '子项，点我改变'
            }
          ]
        }
      ]
    }

    computed = {
      now () {
        return +new Date()
      }
    }

    methods = {
      plus () {
        this.mynum++
      },
      toast () {
        let promise = this.$invoke('toast', 'show', {
          title: '自定义标题',
          img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png'
        })

        promise.then((d) => {
          console.log('toast done')
        })
      },
      tap () {
        console.log('do noting from ' + this.$name)
      },
      communicate () {
        console.log(this.$name + ' tap')

        this.$invoke('counter2', 'minus', 45, 6)
        this.$invoke('counter1', 'plus', 45, 6)

        this.$broadcast('index-broadcast', 1, 3, 4)
      },
      request () {
        let self = this
        let i = 10
        let map = ['MA==', 'MQo=', 'Mg==', 'Mw==', 'NA==', 'NQ==', 'Ng==', 'Nw==', 'OA==', 'OQ==']
        while (i--) {
          wepy.request({
            url: 'https://www.madcoder.cn/tests/sleep.php?time=1&t=css&c=' + map[i] + '&i=' + i,
            success: function (d) {
              self.netrst += d.data + '.'
              self.$apply()
            }
          })
        }
      },
      counterEmit (...args) {
        let $event = args[args.length - 1]
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      }
    }

    events = {
      'index-emit': (...args) => {
        let $event = args[args.length - 1]
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
      }
    }

    onLoad() {
      let self = this
      this.$parent.getUserInfo(function (userInfo) {
        if (userInfo) {
          self.userInfo = userInfo
        }
        self.normalTitle = '标题已被修改'

        self.setTimeoutTitle = '标题三秒后会被修改'
        setTimeout(() => {
          self.setTimeoutTitle = '到三秒了'
          self.$apply()
        }, 3000)

        self.$apply()
      })
    }
  }
</script>

<style lang="less">
  .wrap{
    background-color: #f8f8f8;
  }
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }
</style>


================================================
FILE: src/pages/me.wpy
================================================
<template>
  <view class="wrap">
    <view class="toparea">
      <view class="left">
        <text>资产</text>
        <text>{{ assets }} 币</text>
      </view>
      <view class="center">
        <image src="{{ userInfo.avatarUrl }}"></image>
        <text>{{ userInfo.nickName }}</text>
        <text>{{ userInfo.country }}</text>
      </view>
      <view class="right">
        <text>计划</text>
        <text>{{ hours }} h</text>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menulist">
      <view class="menuitem">
        <view class="icon iconfont icon-plan"></view>
        <text>计划统计</text>
      </view>
      <view class="menuitem">
        <view class="icon iconfont icon-bill"></view>
        <text>账本统计</text>
      </view>
      <view class="menuitem">
        <view class="icon iconfont icon-setting"></view>
        <text>设置</text>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menulist">
      <view class="menuitem">
        <view class="icon iconfont icon-menual"></view>
        <text>使用手册</text>
      </view>
      <view class="menuitem">
        <view class="icon iconfont icon-feed"></view>
        <text>意见反馈</text>
      </view>
      <view class="menuitem">
        <view class="icon iconfont icon-log"></view>
        <text>更新日志</text>
      </view>
      <view class="menuitem">
        <view class="icon iconfont icon-author"></view>
        <text>关于</text>
      </view>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class Me extends wepy.page {
    config = {
      navigationBarTitleText: '我的'
    }

    data = {
      userInfo: {},
      assets: 12330,
      hours: 120
    }

    onLoad() {
      let self = this
      this.$parent.getUserInfo(function (userInfo) {
        if (userInfo) {
          self.userInfo = userInfo
        }
        self.$apply()
      })
    }
  }
</script>

<style lang="less">
  .toparea{
    display: flex;
    align-items: baseline;
    text-align: center;
    padding: 50rpx 0;
    margin-bottom: 20rpx;
    background-color: #138cff;
    text{
      display: block;
      font-size: 26rpx;
      color: #fff;
    }
  }
  .left, .right{
    width: 25%;
    text:last-child{
      margin-top: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #fff;
    }
  }
  .center{
    flex: 1;
    image{
      display: block;
      width: 100rpx;
      height: 100rpx;
      margin: 0 auto 30rpx auto;
      border-radius: 100%;
      border: 1rpx solid #f8f8f8;
    }
    text:last-child{
      margin-top: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .menulist{
    margin-bottom: 20rpx;
    background-color: #fff;
    .menuitem{
      display: flex;
      padding: 30rpx;
      transition: background-color 0.3s;
      .icon{
        margin-right: 20rpx;
        width: 50rpx;
        height: 50rpx;
        text-align: center;
      }
      .icon::after{
        font-family: "iconfont" !important;
        font-size: 34rpx;
        line-height: 50rpx;
      }
      text{
        flex: 1;
        display: block;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 26rpx;
        color: #666;
      }
    }
    .menuitem:active{
      background-color: #f8f8f8;
    }

    .icon-plan::after{
      content: "\e601";
      color: #138cff;
    }
    .icon-bill::after{
      content: "\e61c";
      color: #138cff;
    }
    .icon-setting::after{
      content: "\e62c";
      color: #138cff;
    }
    .icon-menual::after{
      content: "\e647";
      color: #138cff;
    }
    .icon-feed::after{
      content: "\e62f";
      color: #138cff;
    }
    .icon-log::after{
      content: "\e696";
      color: #138cff;
    }
    .icon-author::after{
      content: "\e614";
      color: #138cff;
    }
  }
</style>


================================================
FILE: src/pages/plan/clock.wpy
================================================
<template>
  <view class="wrap">
    <view class="plan-head">
      <text>计划 {{ planTitle }} {{ totalTime }} 分钟</text>
    </view>

    <!-- 时钟 -->
    <view class="clock" wx:if="{{ isStart }}">
      <text>计时中</text>
      <text>{{ clock[0] }} : {{ clock[1] }} : {{ clock[2] }}</text>
    </view>
    <picker wx:else @change="bindPickerChange" value="{{ index }}" range="{{ minutesArray }}">
      <view class="clock">
        <text wx:if="{{ !hadSet }}">点击设置时长 (分钟)</text>
        <text wx:else>暂停中</text>
        <text>{{ clock[0] }} : {{ clock[1] }} : {{ clock[2] }}</text>
      </view>
    </picker>

    <!-- 底部控制按钮 -->
    <view class="control-area">
      <view class="btn-pause" @tap="bindStartOrPause">
        <text>{{ btnText }}</text>
      </view>
      <view class="btn-giveup">
        <text>放弃</text>
      </view>
      <view class="tips">
        <text>坚持就是胜利</text>
        <text>放弃意味着放弃本次计划的执行</text>
        <text>同样也意味着在计划执行过程中的一次“小失败”</text>
      </view>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import { getTimeArr, isZero } from '@/utils/util'
  
  let timer = null

  export default class Clock extends wepy.page {
    config = {
      navigationBarTitleText: '计时器'
    }

    data = {
      planId: '',     // 计划ID
      planTitle: '',  // 计划标题
      totalTime: 0,    // 计划执行时间（秒）
      restTime: 0,    // 计划执行剩余的事件（秒）
      isStart: false, // 本次计划是否开始
      hadSet: false,  // 记录是否设置过事件
      btnText: '开始',  // 按钮的文字
      clock: ['00', '00', '00'],   // 秒表
      minutesArray: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120]
    }

    computed = {}

    methods = {
      // 点击设置时间
      bindPickerChange(e) {
        let minutes = this.minutesArray[parseInt(e.detail.value)]
        let _clock = getTimeArr(new Date().getTime() + minutes * 60 * 1000)
        this.totalTime = minutes
        this.restTime = minutes * 60    // 秒
        this.clock = _clock
        this.hadSet = true
        this.$apply()
      },
      // 点击开始或暂停
      bindStartOrPause() {
        let _isStart = this.isStart
        if (_isStart && !isZero(this.clock)) {
          this.isStart = false
          this.btnText = '继续'
          // 停止倒计时
          clearInterval(timer)
        } else if (!_isStart && !isZero(this.clock)) {
          this.isStart = true
          this.btnText = '暂停'
          // 开始\继续倒计时
          this.loop(this.restTime, (array) => {
            let _rest = this.restTime
            this.restTime = _rest - 1
            this.clock = array
            this.$apply()
          })

          timer = setInterval(() => {
            this.loop(this.restTime, (array) => {
              let _rest = this.restTime
              this.restTime = _rest - 1
              this.clock = array
              this.$apply()
            })
          }, 1000)
        } else {
          this.isStart = false
          this.btnText = '开始'
          console.log('请先设置时长')
        }
        this.$apply()
      }
    }

    // 自定义辅助函数
    loop(time, cb) {
      let arr = getTimeArr(new Date().getTime() + time * 1000)
      cb && cb(arr)
      if (isZero(arr)) {
        // 倒计时完成，清除定时器
        clearInterval(timer)
        // 重置状态
        this.isStart = false
        this.hadSet = false
        this.btnText = '开始'
        this.$apply()
        // 发送post请求发送数据
      }
    }

    onLoad(params) {
      // 没有传递计划ID，页面报错
      if (!params.planId || !params.planTitle) return
      this.planId = params.planId
      this.planTitle = params.planTitle
      this.$apply()
    }

    onUnload() {
      console.log('页面隐藏，清除定时器')
      // clearInterval(timer)
    }
  }
</script>

<style lang="less">
  .wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
  }
  .plan-head text{
    font-size: 34rpx;
  }
  .clock{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 400rpx;
    height: 400rpx;
    border-radius: 100%;
    border: 1rpx solid rgba(19,140,255,.5);
    text:first-child{
      font-size: 26rpx;
      color: #666;
    }
    text:last-child{
      font-size: 50rpx;
      color: #138cff;
    }
  }
  .control-area{
    text-align: center;
    .btn-pause, .btn-giveup{
      margin: 20rpx auto;
      width: 140rpx;
      height: 56rpx;
      line-height: 56rpx;
      color: #fff;
      font-size: 28rpx;
      border-radius: 4rpx;
    }
    .btn-pause{
      background-color: #138cff;
    }
    .btn-giveup{
      color: #757982;
    }
    .tips{
      margin-top: 40rpx;
    }
    .tips text{
      display: block;
      font-size: 24rpx;
      color: #ccc;
    }
  }
</style>


================================================
FILE: src/pages/plan.wpy
================================================
<template>
  <view class="wrap">
    <swiper class="swiper">
      <repeat for="{{ planList }}" key="index" index="index" item="item">
        <swiper-item>
          <listitem 
            :id="item.id"
            :image="item.image"
            :title="item.title"
            :remark="item.remark"
            :createtime="item.create_time"
            :hours="item.hours"
            :times="item.times">
          </listitem>
        </swiper-item>
      </repeat>
    </swiper>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import ListItem from '@/components/plan/listitem'

  export default class Plan extends wepy.page {
    config = {
      navigationBarTitleText: '计划'
    }

    data = {
      planList: [
        {
          id: 1,
          image: '/images/reading.png',
          title: '阅读',
          remark: '书籍并不是没有生命的东西，它包藏着一种生命的潜力，与作者同样地活跃。不仅如此，它还像一个宝瓶，把作者生机勃勃的智慧中最纯净的精华保存起来。',
          create_time: '2018年2月24日',
          times: 0,
          hours: '5.22'
        },
        {
          id: 2,
          image: '/images/reading.png',
          title: '运动',
          remark: '一定要每天运动三十分钟',
          create_time: '2018年2月24日',
          times: 2,
          hours: '2.22'
        }
      ]
    }

    components = {
      listitem: ListItem
    }
  }
</script>

<style lang="less">
  .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    .swiper {
      width: 100%;
      height: 100%;
      text-align: center;
      swiper-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60rpx;
        box-sizing: border-box;
      }
    }
  }
</style>


================================================
FILE: src/pages/ranking.wpy
================================================
<template>
  <view class="wrap">
    <view class="typewrap">
      <view class="typebar">
        <view class="{{ rank.typeId === '1' ? 'active' : '' }}" @tap="toggleType(1)">
          <text>资产排行</text>
        </view>
        <view class="{{ rank.typeId === '2' ? 'active' : '' }}" @tap="toggleType(2)">
          <text>目标排行</text>
        </view>
      </view>
    </view>

    <!-- 排行榜滚动区域 -->
    <view class="rankbox">
      <scroll-view>
        <repeat for="{{ rankList }}" key="index" index="index" item="item">
          <view class="item" data-id="{{ item.id }}">
            <view class="number">{{ index + 1 }}</view>
            <image src="{{ item.image }}"></image>
            <text class="name">{{ item.name }}</text>
            <text class="val">{{ item.val }}</text>
          </view>
        </repeat>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  export default class Ranking extends wepy.page {
    config = {
      navigationBarTitleText: '榜单'
    }

    data = {
      rankList: [
        {
          id: 1,
          image: '/images/reading.png',
          name: '曦莫琅',
          val: '100币'
        },
        {
          id: 2,
          image: '/images/reading.png',
          name: '曦莫琅',
          val: '100币'
        },
        {
          id: 3,
          image: '/images/reading.png',
          name: '曦莫琅',
          val: '100币'
        },
        {
          id: 4,
          image: '/images/reading.png',
          name: '曦莫琅',
          val: '100币'
        }
      ],
      rank: {
        typeId: '1'
      }
    }

    methods = {
      toggleType(t) {
        if (t === '1' && this.rank.typeId === '2') {
          this.rank.typeId = t
        } else if (t === '2' && this.rank.typeId === '1') {
          this.rank.typeId = t
        }
      }
    }
  }
</script>

<style lang="less">
  .typewrap{
    padding: 30rpx 0;
  }
  .typebar{
    display: flex;
    width: 50%;
    margin: 0 auto;
    height: 60rpx;
    view{
      width: 50%;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #fff;
      transition: background-color .3s;
      box-sizing: border-box;
      border: 2rpx solid #138cff;
      text{
        color: #138cff;
      }
    }
    view:first-child{
      border-top-left-radius: 6rpx;
      border-bottom-left-radius: 6rpx;
    }
    view:last-child{
      border-top-right-radius: 6rpx;
      border-bottom-right-radius: 6rpx;
    }
    .active{
      background-color: #138cff;
      text{
        color: #fff;
      }
    }
  }

  .rankbox{
    padding: 0 30rpx;
  }

  .rankbox .item{
    display: flex;
    padding: 10rpx;
    height: 60rpx;
    border-bottom: 1rpx solid #f3f3f3;
    text{
      font-size: 28rpx;
      line-height: 60rpx;
    }
    .number{
      width: 100rpx;
      text-align: center;
    }
    image{
      display: block;
      margin-right: 30rpx;
      width: 60rpx;
      height: 60rpx;
    }
    .name{
      flex: 1;
    }
    .val{
      padding: 0 20rpx;
    }
  }
</style>


================================================
FILE: src/utils/config.js
================================================
// 账本支出类目
export const payCateList = [
  {
    type: 'pay',
    cateId: 1,
    cateName: '餐饮'
  },
  {
    type: 'pay',
    cateId: 2,
    cateName: '购物'
  },
  {
    type: 'pay',
    cateId: 3,
    cateName: '日用'
  },
  {
    type: 'pay',
    cateId: 4,
    cateName: '交通'
  },
  {
    type: 'pay',
    cateId: 5,
    cateName: '蔬菜'
  },
  {
    type: 'pay',
    cateId: 6,
    cateName: '水果'
  },
  {
    type: 'pay',
    cateId: 7,
    cateName: '零食'
  },
  {
    type: 'pay',
    cateId: 8,
    cateName: '运动'
  },
  {
    type: 'pay',
    cateId: 9,
    cateName: '娱乐'
  },
  {
    type: 'pay',
    cateId: 10,
    cateName: '通讯'
  },
  {
    type: 'pay',
    cateId: 11,
    cateName: '服饰'
  },
  {
    type: 'pay',
    cateId: 12,
    cateName: '美容'
  },
  {
    type: 'pay',
    cateId: 13,
    cateName: '住房'
  },
  {
    type: 'pay',
    cateId: 14,
    cateName: '居家'
  },
  {
    type: 'pay',
    cateId: 15,
    cateName: '孩子'
  },
  {
    type: 'pay',
    cateId: 16,
    cateName: '长辈'
  },
  {
    type: 'pay',
    cateId: 17,
    cateName: '社交'
  },
  {
    type: 'pay',
    cateId: 18,
    cateName: '旅行'
  },
  {
    type: 'pay',
    cateId: 19,
    cateName: '烟酒'
  },
  {
    type: 'pay',
    cateId: 20,
    cateName: '数码'
  },
  {
    type: 'pay',
    cateId: 21,
    cateName: '汽车'
  },
  {
    type: 'pay',
    cateId: 22,
    cateName: '医疗'
  },
  {
    type: 'pay',
    cateId: 23,
    cateName: '书籍'
  },
  {
    type: 'pay',
    cateId: 24,
    cateName: '学习'
  },
  {
    type: 'pay',
    cateId: 25,
    cateName: '宠物'
  },
  {
    type: 'pay',
    cateId: 26,
    cateName: '礼金'
  },
  {
    type: 'pay',
    cateId: 27,
    cateName: '礼物'
  },
  {
    type: 'pay',
    cateId: 28,
    cateName: '办公'
  },
  {
    type: 'pay',
    cateId: 29,
    cateName: '维修'
  },
  {
    type: 'pay',
    cateId: 30,
    cateName: '捐赠'
  },
  {
    type: 'pay',
    cateId: 31,
    cateName: '彩票'
  },
  {
    type: 'pay',
    cateId: 32,
    cateName: '亲友'
  },
  {
    type: 'pay',
    cateId: 33,
    cateName: '快递'
  },
  {
    type: 'pay',
    cateId: 34,
    cateName: '其他'
  }
]

// 账本收入类目
export const incomeCateList = [
  {
    type: 'income',
    cateId: 1,
    cateName: '工资'
  },
  {
    type: 'income',
    cateId: 2,
    cateName: '兼职'
  },
  {
    type: 'income',
    cateId: 3,
    cateName: '理财'
  },
  {
    type: 'income',
    cateId: 4,
    cateName: '礼金'
  },
  {
    type: 'income',
    cateId: 5,
    cateName: '红包'
  },
  {
    type: 'income',
    cateId: 6,
    cateName: '其他'
  }
]

================================================
FILE: src/utils/util.js
================================================
// 辅助函数，log
export const log = console.log.bind(console)

// 倒计时函数
// 传入秒数，返回剩余的时，分，秒
// endtime [Number]

export const getTimeArr = (endtime) => {
  let now = new Date().getTime()
  let resttime = (endtime - now) / 1000
  let h, m, s
  if (resttime > 0) {
    h = Math.floor(resttime / 60 / 60 % 24)
    m = Math.floor(resttime / 60 % 60)
    s = Math.floor(resttime % 60)

    h = h < 10 ? ('0' + h) : h
    m = m < 10 ? ('0' + m) : m
    s = s < 10 ? ('0' + s) : s
  } else {
    h = '00'
    m = '00'
    s = '00'
  }

  return [h, m, s]
}

// 判断三元素的数组是否都为‘00’
export const isZero = (arr) => {
  if (arr.length !== 3) {
    return 'error'
  } else if (arr[0] === '00' && arr[1] === '00' && arr[2] === '00') {
    return true
  } else {
    return false
  }
}

// 获取设备系统信息
export const getSystem = () => {
  let sys = {}
  wx.getSystemInfo({
    success: function (res) {
      sys.pixelRatio = res.pixelRatio
      sys.ww = res.windowWidth
      sys.wh = res.windowHeight
      sys.barh = res.statusBarHeight
    }
  })
  return sys
}

// 本地存储相关
export const SetItem = (key, value) => {
  wx.setStorageSync(key, value)
}

export const GetItem = (key) => {
  return wx.getStorageSync(key)
}

// 格式化日期
export const formatTime = (date) => {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  return [year, month, day].map(formatNumber).concat([hour, minute, second].map(formatNumber))
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

================================================
FILE: wepy.config.js
================================================
const path = require('path');
var prod = process.env.NODE_ENV === 'production';

module.exports = {
  wpyExt: '.wpy',
  eslint: true,
  cliLogs: !prod,
  build: {
    web: {
      htmlTemplate: path.join('src', 'index.template.html'),
      htmlOutput: path.join('web', 'index.html'),
      jsOutput: path.join('web', 'index.js')
    }
  },
  resolve: {
    alias: {
      counter: path.join(__dirname, 'src/components/counter'),
      '@': path.join(__dirname, 'src')
    },
    aliasFields: ['wepy'],
    modules: ['node_modules']
  },
  compilers: {
    less: {
      compress: prod
    },
    /*sass: {
      outputStyle: 'compressed'
    },*/
    babel: {
      sourceMap: !prod,
      presets: [
        'env'
      ],
      plugins: [
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread',
        'transform-export-extensions',
      ]
    }
  },
  plugins: {
  },
  appConfig: {
    noPromiseAPI: ['createSelectorQuery']
  }
}

if (prod) {

  // 压缩sass
  // module.exports.compilers['sass'] = {outputStyle: 'compressed'}

  // 压缩js
  module.exports.plugins = {
    uglifyjs: {
      filter: /\.js$/,
      config: {
      }
    },
    imagemin: {
      filter: /\.(jpg|png|jpeg)$/,
      config: {
        jpg: {
          quality: 80
        },
        png: {
          quality: 80
        }
      }
    }
  }
}