wanzb_xcxv3/pages/homepage/homepage.js

// pages/today/today.js
const app = getApp()
import * as echarts from '../../ec-canvas/echarts';
const $api = require('../../utils/api.js').API;
var id, record_id, records = [], today_stock=[];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    datas:{},
    mydata:{},
    date:'2021-11',
    days:[],
    match:[],
    index:0,
    id:'',
    user_id:'',
    ec: {
      onInit: null
    },
    ec1: {
      onInit: null
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    id = options.id?options.id:null, record_id = options.record_id?options.record_id:null
    this.setData({
      type:options.type?options.type:'',
      id: id,
      record_id: record_id,
      player_id: options.player_id ? options.player_id:'',
      user_id: options.user_id ? options.user_id:'',
      cur_user_id:options.cur_user_id
    })
    if(options.type){
        wx.setNavigationBarTitle({
          title: '我的主页',
        })
    }
    $api.getAuthinfo().then(res=>{
      this.setData({
        user_id:res.data.data.id
      })
    })
    $api.getMatchList().then(res=>{
      let l = res.data.data.length - 1;
      
      this.setData({
        match:res.data.data,
        index: l,
        id: res.data.data[l].id
      })
      this.getData();
    })
    
  },
  getDays(){
    // match_id   player_id  month: "2021-12"
    $api.getCalendar({
      player_id: this.data.player_id,
      user_id:this.data.cur_user_id,
      match_id:this.data.id,
      month: this.data.date
    }).then(res=>{
      var days = [], w = new Date(this.data.date + '-01').getDay();
      for (let i = 0; i < w; i++) {
        days.push({
          day: '',
          income: ''
        })
      }
      for (let i = 0; i < res.data.data.length; i++) {
        days.push({
          day: i+1,
          income: res.data.data[i].today_income
        })
      }
      this.setData({
        days: days
      })
    })
  },
  bindChange(e) {
    let match=this.data.match;
    this.setData({
      index: e.detail.value,
      id: match[e.detail.value].id
    })
    this.getData()
  },
  getData(){
    wx.showNavigationBarLoading();
    var data = {}
    if (this.data.id) {
      data.id = this.data.id
    }
    if (this.data.player_id) {
      data.player_id = this.data.player_id
    }
    if (this.data.cur_user_id) {
      data.user_id = this.data.cur_user_id
    }
    if (this.data.record_id) {
      // data.record_id = this.data.record_id
    }
    $api.getPlayerMatch(data).then(res=>{
      let stock_date=res.data.data.today_record.stock_date.split('-')
      this.setData({
        datas: res.data.data,
        date: stock_date[0] + '-' + stock_date[1],
        is_follow: res.data.data.is_follow,
        player_id: res.data.data.today_record.player_id,
        followers:res.data.data.followers,
        fans:res.data.data.fans,
        // id: res.data.data.match.id,
        ec: {
          onInit: initChart
        },
        ec1: {
          onInit: initChart1
        }
      })
      records = res.data.data.records
      today_stock = res.data.data.today_record.today_stock
      this.getDays()
      wx.hideNavigationBarLoading()
    })
    .catch(err=>{
      wx.hideNavigationBarLoading()
    })
    
    //每日持股
    var parm={
      id: this.data.id, player_id: this.data.player_id?data.player_id:o,user_id: this.data.cur_user_id?this.data.cur_user_id:null
    }
    $api.getRecordList(parm).then(res=>{
        this.setData({
          stockList:res.data.data.list
        })
    })
  },
  bindDateChange(e){
    this.setData({
      date: e.detail.value
    })
    this.getDays()
  },
  prev(){
    var date=this.data.date.split('-'),y=date[0],m=date[1];
    if(m>1){
      m--
    }else{
      m=12
      y--
    }
    m=(m>9)?m:'0'+m
    this.setData({
      date: y+'-'+m
    })
    this.getDays()
  },
  logout() {
    wx.removeStorage({
      key: 'userInfo'
    })
    wx.switchTab({
      url: '../user/user',
    })
  },
  next() {
    var date = this.data.date.split('-'), y = date[0], m = date[1];
    if (m < 12) {
      m++
    } else {
      m = 1
      y++
    }
    m = (m > 9) ? m : '0' + m
    this.setData({
      date: y + '-' + m
    })
    this.getDays()
  },
  //预览
  preview(e) {
    wx.previewImage({
      urls: e.target.dataset.urls,
      current: e.target.dataset.src
    })
  },
  followPlayer(e){
    let action = e.target.dataset.action;
    $api.follow({ follow_id: this.data.player_id, action:action}).then(res=>{
      wx.showToast({
        title: action?'取消成功':'已关注',
      })
      this.setData({
        is_follow: !this.data.is_follow
      })
      app.globalData.follow=1

    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if(this.data.player_id){
      this.getData();
    }
  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})


/**折线图 */
function initChart(canvas, width, height, dpr) {
    var xdata = [], ydata = [];
    for (let i = 0; i < records.length; i++) {
      let date = records[i].stock_date.split('-');
      xdata.push(date[1] + '/' + date[2])
      let y = records[i].total_income.replace('%', '')
      ydata.push(Number(y))
    }
    xdata = xdata.reverse()
    ydata = ydata.reverse()
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
      legend: {
        show: false
      },
      grid: {
        x: 50,
        y: 40,
        x2: 10,
        y2: 35
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{b0}: {c0}%'
      },
      xAxis: {
        type: 'category',
        data: xdata,
        axisLabel: {
          interval: 0,
          rotate: 40,
          color: '#999999',
          interval: 2
        }
      },
      yAxis: {
        axisLine: {
          show: true
        },
        type: 'value',
        name: '收益曲线',
        axisLabel: {
          formatter: function (value, index) {//隐藏 0
            let texts = [];
            texts.push(value + '%')
            return texts;
          },
          show: true
        },
      },
      series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          color: '#FF2D68'
          // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          //   offset: 0,
          //   color: '#FF2D68'
          // }, {
          //   offset: 1,
          //   color: '#4C4BFF'
          // }]),
        },
        itemStyle: {
          borderWidth: 5,
          borderColor: '#FFAD52',
          color: '#FFAD52'
        },
        data: ydata
      }]
    };

    chart.setOption(option);
    return chart;
}




function initChart1(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  today_stock.forEach(item=>{
    item.value = item.fund
  })
  var radius = today_stock.length<9?'65%':'50%';
  var option = {
    backgroundColor: "#ffffff",
    legend: {
      show: true,
      orient: 'vertical',
      right: '1%',
      formatter: function (name){
        var index = 0;
        today_stock.forEach(function (value, i) {
          if (value.name == name) {
            index = i;
          }
        });
        return name + "  " + today_stock[index].value;
      }
    },
    series: [{
      label: {
        
        normal: {
          show: true,
          fontSize: 12,
          formatter: function (a) {
            return Math.round(a.percent)+'%'
          }
        }
      },
      type: 'pie',
      center: ['37%', '40%'],
      radius: ['0%', radius],
      data: today_stock
      
    }]
  };

  chart.setOption(option);
  return chart;
}