lcb/pages/score/index.js

// pages/score/index.js
import _ from '../../commons/js/commons'
import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
const app = getApp()
let lineChartData = {};

function lineChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  console.log('chart,', chart)
  canvas.setChart(chart);
  let option = lineChartData
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data_bg_img: _.config.licheImgUrl + 'score/index-panel-bg.png',
    icon_trend_up: _.config.licheImgUrl + 'score/score-trend-up.png',
    icon_trend_down: _.config.licheImgUrl + 'score/score-trend-down.png',
    icon_score_top_1: _.config.licheImgUrl + 'score/score-top-1.png',
    icon_score_top_2: _.config.licheImgUrl + 'score/score-top-2.png',
    icon_score_top_3: _.config.licheImgUrl + 'score/score-top-3.png',
    score_index_bg_up: _.config.licheImgUrl + 'score/score-bg-up.jpg',
    score_index_bg_down: _.config.licheImgUrl + 'score/score-bg-down.jpg',
    score_detail_bg_up: _.config.licheImgUrl + 'score/score-detail-up.png',
    score_detail_bg_down: _.config.licheImgUrl + 'score/score-detail-up.jpg',
    score_up_color: '#31cbad',
    score_down_color: '#ff895b',
    score_trend: 1, //用这个参数控制样式：1 上升 、2 下降
    tab_date: [{
      id: 1,
      name: '昨日'
    }, {
      id: 3,
      name: '本月'
    }, {
      id: 2,
      name: '上月'
    }],
    tab_date_cur: 0,

    score_detail_data: [{
      name: '98',
      tip: '运营分'
    }],

    tab_rank: [{
      id: 1,
      name: '店内排名'
    }, {
      id: 2,
      name: '门店排名'
    }],
    tab_rank_cur: 0,
    rank_data: [],
    content: '',
    setid: '',
    is_biz: 0, //是否选择门店跳转过来
    scoreData: [],
    showLineChart: false, //是否显示Line图表
    unloadingLineChart: false,// 是否加载图标
    ecLine: {
      onInit: lineChart
    },
    chartOrangeStyle: {
      // 255 137 91
      areaStyle: {
        normal: {
          color: 'rgba(255,137,91,0.2)' // 半透明蓝色
        }
      },
      lineStyle: {
        color: 'rgba(255,137,91,0.8)', // 这里设置线的颜色为红色
        width: 2 // 线的宽度
      },
      itemStyle: {
        color: 'rgba(255,137,91,1)'
      }
    },
    chartGreenStyle: {
      // 255 137 91
      areaStyle: {
        normal: {
          color: 'rgba(49,203,173,0.2)' // 半透明蓝色
        }
      },
      lineStyle: {
        color: 'rgba(49,203,173,0.8)', // 这里设置线的颜色为红色
        width: 2 // 线的宽度
      },
      itemStyle: {
        color: 'rgba(49,203,173,1)'
      },
      score_role_cur: 0
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    for (let key in options) {
      this.setData({
        [key]: options[key]
      })
    }
    let _title = '个人运营分'
    if (options['is_biz'] === '1') {
      _title = '门店运营分'
    }
    wx.setNavigationBarTitle({
      'title': _title
    })
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getUserInfo()
    this.getScore()
    if (this.data.is_biz === '1') {
      this.getChartsData()
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  getChartsData() {
    
    let params = {}
    params['day_type'] = this.data.tab_date_cur
    this.setData({
      unloadingLineChart: false
    })
    _.apiQuery.appRadar(params).then(res => {
      lineChartData = {
        backgroundColor: "#ffffff",
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        radar: {
          // shape: 'circle',
          splitArea: {
            areaStyle: {
              color: ['#f6f6f6', '#ffffff']
            }
          },
          indicator: res.data.indicator
        },
        series: [{
          name: '标题',
          type: 'radar',
          data: [{
            value: res.data.series_value,
            name: '预算',
            ...this.data.chartOrangeStyle //...this.data.chartGreenStyle
          }]
        }]
      };
      // lineChartData.radar.indicator = res.data.indicator
      // lineChartData.series[0].data[0].value = res.data.series_value
      this.setData({
        showLineChart: true,
        unloadingLineChart: true,
        ['ecLine.onInit']: lineChart,
      })
    })
  },

  scrollToRule() {
    this.setData({
      setid: 'richhtml'
    })
  },
  //推送链接
  pushLink(e) {
    if (e.currentTarget.dataset.url) {
      _.$router.openUrlScheme(e.currentTarget.dataset.url)
    }
  },
  //时间切换
  changeDateTab(e) {
    this.setData({
      tab_date_cur: parseInt(e.currentTarget.dataset.index)
    })
    if (this.data.userInfo.group_id === 1 || this.data.userInfo.group_id === 2) {
      this.setData({
        tab_rank_cur: 1
      })
    }
    this.getScore()
    this.getScoreLists()
    this.getChartsData()
  },
  //切换排行类型
  changeRankTab(e) {
    this.setData({
      tab_rank_cur: parseInt(e.currentTarget.dataset.index)
    })
    this.getScoreLists()
  },
  //首页积分信息
  getScore() {
    let params = {};
    params['day_type'] = this.data.tab_date_cur
    if (this.data.is_biz == 1) {
      params['type'] = 1
    }
    _.apiQuery.getAppScore(params).then(res => {
      this.setData({
        scoreData: res.data,
        score_trend: res.data.score_trend,
      })
    })
  },
  //获取排行列表
  getScoreLists() {
    let params = {};
    params['day_type'] = this.data.tab_date_cur
    params['type'] = this.data.tab_rank_cur
    _.apiQuery.appScoreLists(params).then(res => {
      this.setData({
        rank_data: res.data.lists,
      })
    })
  },
  //获取用户信息
  getUserInfo() {
    _.apiQuery.getUserInfo().then(res => {
      this.setData({
        userInfo: res
      })
      if (res.group_id > 2 || this.data.is_biz === '1') {
        this.setData({
          score_role_cur: 1,
          tab_rank_cur: 1
        })
      }
      this.getScoreLists()
    });
  },
})