index.js 4.96 KB
// dist/pages/myassets/index.js
import MyAssetsService from './myassetsService.js'
import { formatTimeByDefined } from '../../utils/index.js'
import Yas from '../../utils/yas';

let yas;
let {screenWidth} = wx.getSystemInfoSync();
let radio = (screenWidth / 750).toFixed(2);

Page({

  /**
   * 页面的初始数据
   */
  data: {
    api: Object,
    data: [],
    summary: {},
    currentPage:1,
    page:0,
    pagetotal:0,
    total:0,
    isLast:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    yas = new Yas(this);
    yas.pageOpenReport();
    let api = new MyAssetsService();
    this.setData({ api: api });
    this.fetchIncomeList();

    // this.setData({api: new MyAssetsService()});
  },
  /**
  * 画progress底部背景
  */
  drawProgressbg: function (summary) {
    var ctx = wx.createCanvasContext('canvasProgressbg')
    // 设置圆环的宽度
    ctx.setLineWidth(28 * radio);
    // 设置圆环的颜色
    let strokeColor = '#E0E0E0'
    if (summary && summary.totalIncome > 0) {
      strokeColor = '#65AB85';
    }
    ctx.setStrokeStyle(strokeColor);
    // 设置圆环端点的形状
    ctx.setLineCap('round')
    //开始一个新的路径
    ctx.beginPath();
    //设置一个原点(110,110),半径为100的圆的路径到当前路径
    console.log("起始点:" + Math.PI)
    ctx.arc(120 * radio, 120 * radio, 100 * radio, 0, 2 * Math.PI, false);
    //对当前路径进行描边
    ctx.stroke();
    //开始绘制
    ctx.draw();
  },

  /**
   * 画progress进度
   */
  drawCircle: function (step) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('canvasProgress');
    // 设置圆环的宽度
    context.setLineWidth(28 * radio);
    // 设置圆环的颜色
    let strokeColor = '#002B47'
    // if (this.data.summary.totalIncome <= 0){
    //   strokeColor = '#E0E0E0';
    // }
    context.setStrokeStyle(strokeColor);
    // 设置圆环端点的形状
    context.setLineCap('round')
    //开始一个新的路径
    context.beginPath();
    //参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
    context.arc(120 * radio, 120 * radio, 100 * radio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    //对当前路径进行描边
    context.stroke();
    //开始绘制
    context.draw()
  },

  /**
   * 开始progress
   */
  startProgress: function (summary) {

    // 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
    if (summary && summary.totalIncome > 0) {
      // this.countTimer = setInterval(() => {

        // if (this.data.count <= 60) {
          /* 绘制彩色圆环进度条
          注意此处 传参 step 取值范围是0到2,
          所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
          */
          this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
          // if()
          // this.data.count++;
        // }
        // else {
        //   clearInterval(this.countTimer);
        //   this.startProgress();
        // }
      // }, 100)
    }
  },

  fetchIncomeList: function () {
    let that = this;
    let params = {
      page: that.data.currentPage,
      limit: 20,
      // debug: 'XYZ'
    }
    that.data.api.getAssetsList(params, () => {
      wx.hideLoading();
    }).then(data => {
      if(data){
        let detail = data.data;
        let constSummary = {
          totalIncome: '0.00',
          goodsIncome: '0.00',
          compensateIncome: '0.00',
        }
        let summary = data.summary ? data.summary : constSummary;
        if(detail){
          detail = that.data.data.concat(detail);
        } else {
          detail = that.data.data
        }

        if (detail.length > 0) {
          detail.filter((item) => {
            item.createTime = formatTimeByDefined(item.createTime, 'Y-M-D h:m:s');
            return item;
          })
        }
        console.log(summary);

        let cPage = data.page;
        if (cPage == 1){
          //绘制背景
          that.drawProgressbg(summary);
          //开始progress
          that.startProgress(summary);
        }

        let isLast = false;
        // that.setData(data);
        if (that.data.currentPage <= data.pagetotal) {
          cPage = data.page + 1;
        } else {
          isLast = true;
        }
        that.setData({
          data: detail,
          currentPage: cPage,
          isLast: isLast,
          summary: summary
        });
      }

      // console.log(data);
    })
  },

  /**
   * 加载更多
   */
  loadMore: function (event) {
    let item = this.data.data;
    console.log(item)
    if (!item.isLast) {
      this.fetchIncomeList();
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  }
});