ssj_book/parents/pages/growth_track/growth_track.js

// parents//pages/growth_track/growth_track.js
import F2 from '../../../utils/f2-canvas/lib/f2';
const wxCharts = require("../../../utils/wxcharts-min.js");
let chart;
import { routers, viewImage, sharePage, isFn, getGlobalVal } from '../../../utils/util.js'
import { UserReadInfo, ThemeBorrowedList, ScanningBooksTwo, InitBorrowCar } from '../../../utils/api.js'
const { navigateTo, redirectTo, navigateBack } = routers()
const { globalData, hasLibraryService, hasVipService } = getApp()
const { baseImgUrl, qrcodeInvalidToastText, isIphoneX } = globalData
/**
 * 进度条颜色RGB 
 */
const colorRGB = '255,215,108'
const colorRGB1 = '255,128,168'
const colorRGB2 = '0,183,255'
const colorRGB3 = '255,97,97'
const colorRGB4 = '121,189,232'
const colorRGB5 = '250,202,106'
const colorRGB6 = '143,232,121'
const colorRGB7 = '117,227,243'
const colorRGB8 = '255,145,128'
const colorRGB9 = '119,143,242'
const blueRGB = '65,65, 76'
const blackRGB = '108,108,128'


Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseImgUrl,
    isIphoneX,
    isLoaded: 1,
    opts: {
      lazyLoad: true // 延迟加载组件
      // onInit: initChart
    },
    pageNo: 1,
    pageSize: 5,
    isAll: 0,
    themeSelect:false,
    rankList:[
      // {
      //   ranking:'一',
      //   rankTimes:3,
      //   rankMonth:6,
      //   rankName: '../../../assets/no_one.png',
      //   rankBg: '../../../assets/no_one_bg.png'
      // },
      // {
      //   ranking: '二',
      //   rankTimes: 5,
      //   rankMonth: 6,
      //   rankName: '../../../assets/no_two.png',
      //   rankBg: '../../../assets/no_two_bg.png'
      // },
      // {
      //   ranking: '三',
      //   rankTimes: 3,
      //   rankMonth: 6,
      //   rankName: '../../../assets/no_three.png',
      //   rankBg: '../../../assets/no_three_bg.png'
      // },
    ],
    themeInfoList:[
      // { percentage: "0.22", themeCode: "child1", themeName: "名著经典1" },
      // { percentage: "0.42", themeCode: "child2", themeName: "名著经典2" },
      // { percentage: "0.36", themeCode: "child3", themeName: "名著3" },
      // { percentage: "0.06", themeCode: "child4", themeName: "名著经典3" },
      // { percentage: "0.26", themeCode: "child5", themeName: "经典3" },
      // { percentage: "0.16", themeCode: "child6", themeName: "名著经典4" },
      // { percentage: "0.44", themeCode: "child7", themeName: "名著经典5" },
      // { percentage: "0.46", themeCode: "child8", themeName: "名著经典8" },
      // { percentage: "0.1", themeCode: "child9", themeName: "名著经典33" },
      // { percentage: "0.28", themeCode: "child10", themeName: "名著经典22" },
    ], 
    monthList:[],
    yearList:[],
    footerData: {
      isIphoneX,
      actIndex:1,
      list: [
        {
          text: '找好书',
          icon: '../../../assets/book_gray.png',
          actIcon: '../../../assets/book_blue.png',
          url: 'parents/pages/main/main',
          zindex: 3,
        },
        {
          text: '成长轨迹',
          icon: '../../../assets/wish_gray.png',
          actIcon: '../../../assets/wish_blue.png',
          url: 'parents/pages/growth_track/growth_track',
          zindex: 3,
        },
        {
          text: '我的',
          icon: '../../../assets/me_gray.png',
          actIcon: '../../../assets/me_blue.png',
          url: 'parents/pages/me/me',
          zindex: 3,
        }
      ]
    },
    nodataArray: {
      text: "暂无阅读计划",
      margin: '140rpx auto'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    options.vipId = getGlobalVal('vipId', `vipId_${getGlobalVal('userId')}`)
    // options.vipId = '306330bd-5c8c-41aa-8a00-0f0c296ebb29',
    options.library = getGlobalVal('library')
    options.libId = getGlobalVal('library').id || ''
    this.setData({ options })
    // this.getData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const obj = { navigateTo, redirectTo, navigateBack, viewImage }
    for (const i in obj) {
      this[i] = obj[i]
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getData()
    const { options, isFirst } = this.data
    options.library = getGlobalVal('library')
    const userId = getGlobalVal('userId')
    options.vipId = getGlobalVal('vipId', `vipId_${userId}`) || ''
    options.libId = getGlobalVal('library').id || ''
    const bookList = getGlobalVal(`borrowBook_${userId}_${options.libId}_${options.vipId}`) || []
    this.setData({ options, bookList })
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // this.setData(() => {
    //   wx.stopPullDownRefresh()
    // })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    if (isFn(sharePage)) return sharePage()
  },
  /**
   * 查看排名
   */
  setRanking:function(){
    if (!hasVipService()) return
    navigateTo({ url: 'parents/pages/ranking/ranking', zindex: 3 })
  },
  /**
   * 获取好书推荐
   */
  getData: function (cb) {
    const continuousFn = { fn: this.getData, param: { ...arguments } }
    const { libId = '', vipId = '' } = this.data.options
    if (!hasVipService()) return
    UserReadInfo({ data: { libId, vipId }, continuousFn }).then(res => {
      const { rankList, monthList, themeInfoList, themeTopList, yearList} = res.data
      console.log(rankList, monthList, themeInfoList, themeTopList, yearList)
      this.setData({ rankList, themeInfoList, monthList, themeTopList, yearList, isLoaded: true })
      this.goodBooksPicture()
      this.nearTwentyEight()
      this.everyReading()
      if (isFn(cb)) cb()
    }).catch(res => {
      this.setData({ isLoaded: true})
      if (isFn(cb)) cb()
    })
  },
  /**
   * 好书推荐图表
   */
  goodBooksPicture: function () {
    const { themeInfoList = [] } = this.data
    // console.log(themeInfoList)
    var that=this
    if (themeInfoList.length === 0) return
    this.selectComponent('#pieSelect').init(function (canvas, width, height) {
      // 数据
      const data = (list => {
        const arr = []
        for (const v of list) {
          const { themeName = '', percentage = 0, themeCode=''} = v
          arr.push({
            const: 'const',
            type: themeName,
            code: themeCode,
            percent: ~~(+percentage)
          })
        }
        return arr
      })(themeInfoList)
      
      // 生成画布
      const chart = new F2.Chart({
        el: canvas,
        width,
        height
      })
      chart.source(data)
      chart.coord('polar', {
        transposed: true,
        radius: 0.9,
        innerRadius: 0.5
      })
      chart.axis(false)
      chart.legend(false)
      chart.tooltip(false)
      chart.interval().position('const*percent').adjust('stack').color('type', [
        `rgba(${colorRGB}, 1)`,
        `rgba(${colorRGB1}, 1)`,
        `rgba(${colorRGB2}, 1)`,
        `rgba(${colorRGB3}, 1)`,
        `rgba(${colorRGB4}, 1)`,
        `rgba(${colorRGB5}, 1)`,
        `rgba(${colorRGB6}, 1)`,
        `rgba(${colorRGB7}, 1)`,
        `rgba(${colorRGB8}, 1)`,
        `rgba(${colorRGB9}, 1)`,
        ])
      chart.interaction('pie-select', {
        cancelable: false,
        animate: {
          duration: 300,
          easing: 'backOut'
        },
        onEnd: res => {
          // console.log(res)
          const { data } = res
          if(data){
            const { type, code } = data
            that.setData({
              pageNo: 1,
              message: type,
              code
            })
            that.getThemeData()
          }
        }
      });
      chart.pieLabel({
        sidePadding: 30,
        activeShape: true,
        label1: function label1(data) {
          return {
            text: data.percent + '%',
            fill: `rgba(${blueRGB}, 1)`,
            fontWeight: 'bold'
          };
        },
        label2: function label2(data) {
          return {
            text: data.type.length > 5 ? data.type.substring(0, 5) + '...' : data.type,
            fill: `rgba(${blackRGB}, 1)`,
            fontWeight: 'bold'
          };
        },
        onClick: res=> {
          console.log(res)
          const { data } = res
          if (data) {
            const { type, code } = data
            that.setData({
              pageNo: 1,
              message: type,
              code
            })
            that.getThemeData()
          }
          
        }
      });
      
      chart.render()
      return chart
    })
  },
  /**
   * 获取数据
   */
  getThemeData: function (cb) {
    const continuousFn = { fn: this.getData, param: { ...arguments } }
    const { pageNo, pageSize, options, list, code} = this.data
    const { vipId } = options
    wx.showLoading({
      title: '加载中',
    })
    ThemeBorrowedList({ data: { pageNo, pageSize, vipId, code}, continuousFn }).then(res => {
      wx.hideLoading()
      const { pages } = res.data
      const newList = res.data.list
      const listTemp = (res => {
        for (let i in res) {
          if (res[i].summary.length > 30) {
            res[i].summary = res[i].summary.slice(0, 30) + '...'
          } else {
            res[i].summary = res[i].summary
          }
        }
        return res
      })(newList)
      let arr = []
      if (pageNo == 1) {
        arr = [...listTemp]
      } else {
        arr = [...list, ...listTemp]
      }
      this.setData({ themeSelect: true, list: arr, pages,isAll: newList.length < pageSize, pageNo: newList.length == pageSize ? pageNo + 1 : pageNo, isLoaded: true })
      cb && cb()
    }).catch(res => {
      this.setData({ isLoaded: true })
      cb && cb()
    })
  },
  /**
   * 近28天阅读量对比
   */
  nearTwentyEight(canvas, width, height) {
    const { monthList } = this.data
    var max = monthList[0].borrowNum;
      for (var i = 1; i < monthList.length; i++) {
        var cur = monthList[i].borrowNum;
        cur > max ? max = cur : null
      }
    this.selectComponent('#twentyEightCanvas').init(function (canvas, width, height) {
      // 数据
      const data = (list => {
        const arr = []
        for (const v of list) {
          const { endTime = '', borrowNum = 0, startTime = '' } = v
          arr.push({
            year: startTime.slice(5, 10) + '-' + endTime.slice(5, 10),
            sales: borrowNum
          })
        }
        return arr
      })(monthList)
      chart = new F2.Chart({
        el: canvas,
        width:wx.getSystemInfoSync().windowWidth - 30,
        height
      });

      chart.source(data, {
        sales: {
          tickCount: 10,
          max: max+10,
          min:0
        }
      });
      chart.axis('sales', {
        line: {
          lineWidth: 1,
          stroke: '#E6E6EC',
          top: false, // 展示在最上层
        }, 
        tickLine: {
          lineWidth: 1,
          stroke: '#A1A1B3',
          length: 2, // 刻度线长度
          top:false
        },
        grid:null,
        label: (text, index, total) => {
          const cfg = {
            textAlign: 'center',
            color: '#A1A1B3',
            fontSize:10
          }
          cfg.text = Math.floor(text)
          return cfg;
        },
      })
      chart.axis('year', {
        line: {
          lineWidth: 1,
          stroke: '#E6E6EC',
          top: true, // 展示在最上层
        },
        grid: null,
        label: (text, index, total) => {
          const cfg = {
            textAlign: 'center',
            color: '#41414C',
            fontSize: 12
          }
          return cfg;
        },
      })
      chart.animate(true)
      chart.tooltip(false);
      chart.interval()
        .position('year*sales')
        .color('#FFD76C');
      chart.render();

      // 绘制柱状图文本
      const offset = -5;
      const chartCanvas = chart.get('canvas');
      const group = chartCanvas.addGroup();
      const shapes = {};
      data.map(obj => {
        const point = chart.getPosition(obj);
        const text = group.addShape('text', {
          attrs: {
            x: point.x,
            y: point.y + offset,
            fontSize: 11,
            text: obj.sales == 0 ?'暂\n无\n数\n据':obj.sales+'本',
            textAlign: 'center',
            textBaseline: 'bottom',
            fill: '#A1A1B3'
          }
        });

        shapes[obj.year] = text; // 缓存该 shape, 便于后续查找
      });
      
      return chart;
    });
  },
  /**
   * 每月阅读量对比
   */
  everyReading(canvas, width, height) {
    const { yearList } = this.data
    var max = yearList[0].borrowNum;
    for (var i = 1; i < yearList.length; i++) {
      var cur = yearList[i].borrowNum;
      cur > max ? max = cur : null
    }
    this.selectComponent('#readCanvas').init(function (canvas, width, height) {
      // 数据
      const data = (list => {
        const arr = []
        for (const v of list) {
          const { months = '', borrowNum = 0 } = v
          arr.push({
            year: months.slice(5, 7) + '月',
            sales: borrowNum
          })
        }
        return arr
      })(yearList)
      chart = new F2.Chart({
        el: canvas,
        width: wx.getSystemInfoSync().windowWidth - 30,
        height
      });

      chart.source(data, {
        sales: {
          tickCount: 10,
          max: max + 10,
          min: 0
        }
      });
      chart.axis('sales', {
        line: {
          lineWidth: 1,
          stroke: '#E6E6EC',
          top: false, // 展示在最上层
        },
        tickLine: {
          lineWidth: 1,
          stroke: '#A1A1B3',
          length: 2, // 刻度线长度
          top: false
        },
        grid: null,
        label: (text, index, total) => {
          const cfg = {
            textAlign: 'center',
            color: '#A1A1B3',
            fontSize: 10
          }
          cfg.text = Math.floor(text)
          return cfg;
        },
      })
      chart.axis('year', {
        line: {
          lineWidth: 1,
          stroke: '#E6E6EC',
          top: true, // 展示在最上层
        },
        grid: null,
        label: (text, index, total) => {
          const cfg = {
            textAlign: 'center',
            color: '#41414C',
            fontSize: 12
          }
          return cfg;
        },
      })
      chart.animate(true)
      chart.tooltip(false);
      chart.interval()
        .position('year*sales')
        .color('#FF6464');
      chart.render();

      // 绘制柱状图文本
      const offset = -5;
      const chartCanvas = chart.get('canvas');
      const group = chartCanvas.addGroup();
      const shapes = {};
      data.map(obj => {
        const point = chart.getPosition(obj);
        const text = group.addShape('text', {
          attrs: {
            x: point.x,
            y: point.y + offset,
            fontSize: 11,
            text: obj.sales == 0 ? '暂\n无\n数\n据' : obj.sales + '本',
            textAlign: 'center',
            textBaseline: 'bottom',
            fill: '#A1A1B3'
          }
        });

        shapes[obj.year] = text; // 缓存该 shape, 便于后续查找
      });

      return chart;
    });
  },
  /**
   * 调用微信扫一扫之前判断可借书多少本
   */
  scanCtl: function () {
    const continuousFn = { fn: this.scanCtl, param: { ...arguments } }
    const { library, vipId, userId } = this.data.options
    console.log(library)
    const libId = library.id || ''
    if (!hasVipService()) return
    InitBorrowCar({ data: { vipId, libId }, continuousFn }).then(res => {
      const { canBorrowNum, borrowNumTotal } = res.data
      wx.showToast({
        title: `您还可以借${canBorrowNum}本书`,
        icon: 'none'
      })

      if (this.data.bookList.length > 0) {
        navigateTo({ url: 'parents/pages/borrow_car/borrow_car', paras: { canBorrowNum } })
        return
      }
      if (canBorrowNum - this.data.bookList.length > 0) {
        this.scanFn()
      }
      this.setData({ ...res.data })
    })
  },

  /**
   * 调用微信扫一扫
   */
  scanFn: function () {
    wx.scanCode({
      success: res => {
        const url = res.result
        const detailsId = url.split('_')[1].split('.')[0]
        if (!detailsId) {
          wx.showToast({
            title: qrcodeInvalidToastText,
            icon: 'none'
          })
          return
        }
        this.scanningBooksFn(detailsId)
      }
    })
  },

  /**
   * 扫一扫借书
   */
  scanningBooksFn: function (detailsId) {
    const continuousFn = { fn: this.scanningBooksFn, param: { ...arguments } }
    const { vipId } = this.data.options
    const { canBorrowNum, bookList } = this.data
    ScanningBooksTwo({ data: { detailsId, vipId }, continuousFn }).then(res => {
      const { detailsId } = res.data;
      for (var i in bookList) {
        if (detailsId == bookList[i].detailsId) {
          wx.showToast({
            title: '此二维码已经扫过',
            icon: 'none'
          })
        }
      }
      if (detailsId) {
        navigateTo({ url: 'parents/pages/borrow_car/borrow_car', paras: { ...res.data, canBorrowNum } })
      }
    }).catch(res => {
      wx.showToast({
        title: res.msg,
        icon: 'none'
      })
    })
  }
})