applet/edition1.0.0/pages/liveDetail/index.js

// pages/liveDetail/index.js
import * as echarts from '../../components/ec-canvas/echarts';

var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    hasAuno: false,
    hasAunoTotal: false,
    is_big_fan: true,
    checkType: 1,
    live_stream_id: '',
    user_id: '',
    infoObj: {},
    noneReward: false,
    nonePro: false,
    tab: 1,
    rewardList: [],
    productList: [],
    giftObj: {},
    targetTop: '',
    isFix: false,
    page: 1,
    pages: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    that.setData({
      'live_stream_id':options.id,
      'user_id':options.userid
    })
    wx.getSystemInfo({
			success(res) {
				that.setData({
					scrollHeight: res.windowHeight - 10
				});
			}
    });
    that.getInfo();
    var query = wx.createSelectorQuery();
    //选择id
    query.select('#tabItem').boundingClientRect()
    query.exec((res) => {
      //res就是 所有标签为mjltest的元素的信息 的数组
      that.setData({
        targetTop: res[0].top
      })
    })
  },

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

  },

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

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

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("卸载")
    // const ctx = wx.createCanvasContext('gift')
    // ctx.draw() 
    // this.data.oCanvas.clear();
  },
  //在线人数
  onlineCanvas: function (data) {
    this.echartsComponnet = this.selectComponent('#online')
    this.echartsComponnet.init((canvas, width, height,dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
              var result = params[0].name + "\n";
              params.forEach((item,index)=>{
                result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
              })
              return result;
          }
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "8%",
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.keyes,
            axisLine: {
            show: false
            },
            axisTick: {
            show: false
            },
            axisLabel: {
                show: true,
                color:'#434140',
                fontSize:10,
                // interval:0,
                // rotate:30,
                textStyle: {
                    color: '#929292' 
                }
            },
            splitLine: {
            show: false
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
            lineStyle: {
                color: "#eee",
                type: "dashed"
            }
            },
            nameTextStyle: {
                padding: [0, 35, 0, 0]
            },
            axisLabel: {
                show: true,
                formatter: function(params) {
                    var result = params;
                    return app.func.NumberHandle(result);
                }
            },
        },
        series: [{
            name: "在线人数",
            itemStyle: {
              normal: {
                color: "#FF5A7B",
                borderColor: "#FF5A7B" //拐点边框颜色
              }
            },
            areaStyle: {
              color: "#E5F2FE"
            },
            data: data.value,
            type: 'line'
        }]
      }
      Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  //商品销量
  saleCanvas: function (data) {
    this.echartsComponnet = this.selectComponent('#sale')
    this.echartsComponnet.init((canvas, width, height,dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
              var result = params[0].name + "\n";
              params.forEach((item,index)=>{
                result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
              })
              return result;
          }
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "8%",
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.keyes,
            axisLine: {
            show: false
            },
            axisTick: {
            show: false
            },
            axisLabel: {
                show: true,
                color:'#434140',
                fontSize:10,
                // interval:0,
                // rotate:30,
                textStyle: {
                    color: '#929292' 
                }
            },
            splitLine: {
            show: false
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
            lineStyle: {
                color: "#eee",
                type: "dashed"
            }
            },
            nameTextStyle: {
                padding: [0, 35, 0, 0]
            },
            axisLabel: {
                show: true,
                formatter: function(params) {
                    var result = params;
                    return app.func.NumberHandle(result);
                }
            },
        },
        series: [{
            name: "商品销量",
            itemStyle: {
              normal: {
                color: "#FF5A7B",
                borderColor: "#FF5A7B" //拐点边框颜色
              }
            },
            areaStyle: {
              color: "#E5F2FE"
            },
            data: data.value,
            type: 'line'
        }]
      }
      Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  //点赞数
  likeCanvas: function (data) {
    this.echartsComponnet = this.selectComponent('#like')
    this.echartsComponnet.init((canvas, width, height,dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
              var result = params[0].name + "\n";
              params.forEach((item,index)=>{
                result += item.seriesName + '：' + app.func.NumberHandle(item.value,2)
              })
              return result;
          }
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "8%",
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.keyes,
            axisLine: {
            show: false
            },
            axisTick: {
            show: false
            },
            axisLabel: {
                show: true,
                color:'#434140',
                fontSize:10,
                // interval:0,
                // rotate:30,
                textStyle: {
                    color: '#929292' 
                }
            },
            splitLine: {
            show: false
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
            lineStyle: {
                color: "#eee",
                type: "dashed"
            }
            },
            nameTextStyle: {
                padding: [0, 35, 0, 0]
            },
            axisLabel: {
                show: true,
                formatter: function(params) {
                    var result = params;
                    return app.func.NumberHandle(result);
                }
            },
        },
        series: [{
            name: "点赞数",
            itemStyle: {
              normal: {
                color: "#FF5A7B",
                borderColor: "#FF5A7B" //拐点边框颜色
              }
            },
            areaStyle: {
              color: "#E5F2FE"
            },
            data: data.value,
            type: 'line'
        }]
      }
      Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  //礼物收入趋势
  giftCanvas: function (data) {
    this.echartsComponnet = this.selectComponent('#gift')
    this.echartsComponnet.init((canvas, width, height,dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      // 指定图表的配置项和数据
      var option = {
        legend: {
          data: ['打赏人数', '打赏金额'],
          bottom: 0
        },
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
              var result = params[0].name + "\n";
              params.forEach((item,index)=>{
                result += item.seriesName + '：' + app.func.NumberHandle(item.value,1)+(index==0?"\n":"")
              })
              return result;
          }
        },
        grid: {
          left: "8%",
          right: "8%",
          top: "8%",
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
            type: 'category',
            data: this.data.giftObj.timeArr,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
                show: true,
                color:'#434140',
                fontSize:10,
                // interval:0,
                // rotate:30,
                textStyle: {
                    color: '#929292' 
                }
            },
            splitLine: {
              show: false
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
            lineStyle: {
                color: "#eee",
                type: "dashed"
            }
            },
            nameTextStyle: {
                padding: [0, 35, 0, 0]
            },
            axisLabel: {
                show: true,
                formatter: function(params) {
                    var result = params;
                    return app.func.NumberHandle(result,1);
                }
            },
        },
        series: [
          {
            name: "打赏人数",
            type: "line",
            itemStyle: {
              normal: {
                color: "#FF5A7B",
                borderColor: "#FF5A7B" //拐点边框颜色
              }
            },
            areaStyle: {
              color: "#E5F2FE"
            },
            data: this.data.checkType==1?this.data.giftObj.incrCount:this.data.giftObj.countArr
          },
          {
              // name: this.data.giftObj==1?"打赏金额增量":"打赏金额总量",
              name: "打赏金额",
              type: "line",
              itemStyle: {
                normal: {
                  color: "#6BD7D8",
                  borderColor: "#6BD7D8" //拐点边框颜色
                }
              },
              areaStyle: {
                color: "#E5F2FE"
              },
              data: this.data.checkType==1?this.data.giftObj.incrSum:this.data.giftObj.sumArr
          }
        ]
      }
      Chart.setOption(option);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  checkBtn:function(e) {
    this.setData({
      checkType: e.currentTarget.dataset.id
    })
    this.giftCanvas();
  },
  // 直播趋势
  getTrend:function() {
    var that = this;
    app.func.req('/api/kwai/todayShowDetail','post',{
      'liveStreamId':that.data.live_stream_id,
      'user_id':that.data.user_id
    },
    function(res) {
      wx.hideLoading({
        title: '加载中',
      })
      that.setData({
        hasAuno: res.auno==4403||res.errno==4003
      })
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        var watching_count_record = data?data.watching_count_record : {}; //在线人数曲线
        var watching_count_record_arr = { keyes: [], value: [] };
        for (let item in watching_count_record) {
          watching_count_record_arr.keyes.push(item.split(" ")[1]);
          watching_count_record_arr.value.push(watching_count_record[item]);
        }
        var live_commodity_sum_record = data?data.live_commodity_sum_record : {}; //商品销量
        var saleArr_arr = { keyes: [], value: [] };
        for (let item in live_commodity_sum_record) {
          saleArr_arr.keyes.push(item.split(" ")[1]);
          saleArr_arr.value.push(
            live_commodity_sum_record[item]
          );
        }
        var like_count_record = data?data.like_count_record : {}; //点赞数
        var like_count_record_arr = { keyes: [], value: [] };
        for (let item in like_count_record) {
          like_count_record_arr.keyes.push(item.split(" ")[1]);
          like_count_record_arr.value.push(like_count_record[item]);
        }
        if(that.data.tab==1) {
          that.onlineCanvas(watching_count_record_arr);//在线人数
          that.saleCanvas(saleArr_arr)//商品销量
          that.likeCanvas(like_count_record_arr)//点赞数
        }
      }
    },function(err){
      console.log(err)
    })
  },
  // 礼物趋势
  getGift:function() {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    app.func.req('/v2/api/show/showtopinfo','get',{
      'show_id':that.data.live_stream_id,
      'user_id':that.data.user_id
    },
    function(res) {
      wx.hideLoading({
        title: '加载中',
      })
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        var timeArr = [], incrCount = [], incrSum = [], countArr = [], sumArr = [];
        data.forEach((item) => {
            timeArr.push(item.count_at.split(" ")[1]);
            incrCount.push(item.new_reward_count);
            incrSum.push(item.new_reward_sum);
            countArr.push(item.reward_count);
            sumArr.push(item.reward_sum);
        })
        // timeArr = timeArr.slice(timeArr.length-10)
        // incrCount = incrCount.slice(incrCount.length-10)
        // incrSum = incrSum.slice(incrSum.length-10)
        // countArr = countArr.slice(countArr.length-10)
        // sumArr = sumArr.slice(sumArr.length-10)
        that.setData({
          giftObj: {
            'timeArr': timeArr,
            'incrCount': incrCount,
            'incrSum': incrSum,
            'countArr': countArr,
            'sumArr': sumArr
          }
        })
        if(that.data.tab==1) {
          that.giftCanvas()
        }
      }
    },function(err){
      console.log(err)
    })
  },
  // 直播详情
  getInfo:function() {
    var that = this;
    app.func.req('/v2/api/show/showDetailInfo','get',{
      'live_stream_id':that.data.live_stream_id,
      'user_id': that.data.user_id
    },
    function(res) {
      that.setData({
        hasAunoTotal: res.auno==4403||res.errno==4003
      })
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        // 粉丝在100w以上显示趋势
        that.setData({
          infoObj: data,
          is_big_fan: data.is_big_fan==1
        })
        if(data.is_big_fan==1) {
          that.getTrend();
          that.getGift();
        }else {
          that.setData({
            hasAunoTotal: res.auno==4403||res.errno==4003
          })
          wx.hideLoading({
            title: '加载中',
          })
        }
      }
    },function(err){
      console.log(err)
    })
  },
  // 礼物收入
  getReward:function() {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    app.func.req('/v2/api/show/showtopuserinfo','get',{
      'show_id':that.data.live_stream_id,
      'user_id':that.data.user_id
    },
    function(res) {
      wx.hideLoading({
        title: '加载中',
      })
      that.setData({
        hasAuno: res.auno==4403||res.errno==4003
      })
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        that.setData({
          rewardList: data
        })
        if(that.data.rewardList.length==0) {
          that.setData({
            noneReward: true
          })
        }
      }
    },function(err){
      if(that.data.rewardList.length==0) {
        that.setData({
          noneReward: true
        })
      }
    })
  },
  // 滚动
  scroll(e) {
    let page = this,
    scrollTop = e.detail.scrollTop;
    if(scrollTop>=this.data.targetTop) {
      this.setData({
        isFix: true
      })
    }else {
      this.setData({
        isFix: false
      })
    }
  },
  // 带货商品
  getProduct:function() {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    app.func.req('/api/kwai/showGoods','post',{
      'live_stream_id':that.data.live_stream_id,
      'user_id':that.data.user_id,
      'sort':0,
      'page':that.data.page
    },
    function(res) {
      wx.hideLoading({
        title: '加载中',
      })
      that.setData({
        hasAuno: res.auno==4403||res.errno==4003
      })
      if(res && res.errno == 0){
        //成功
        var data = res.rst;
        that.setData({
          productList: that.data.productList.concat(data.data),
          pages: data.pageInfo.pages
        })
        if(that.data.productList.length==0) {
          that.setData({
            nonePro: true
          })
        }
      }
    },function(err){
      if(that.data.productList.length==0) {
        that.setData({
          nonePro: true
        })
      }
    })
  },
  check(e) {
    this.setData({
      tab: e.target.dataset.id,
      hasAuno: false
    })
    if(this.data.tab==1){
      this.getTrend()
      this.getGift()
    }else if(this.data.tab==2) {
      this.setData({
        rewardList: []
      })
      this.getReward()
    }else if(this.data.tab==3) {
      this.setData({
        productList: []
      })
      this.getProduct()
    }
  },
  goHrDetail(e){
    wx.navigateTo({
      url: '/pages/hrDetail/hrDetail?user_id=' + e.currentTarget.dataset.userid ,
    })
  },
  bindDownLoad() {
    if(this.data.page<this.data.pages&&!this.data.hasAuno&&this.data.tab==3) {
      this.setData({
        page: ++this.data.page
      })
      this.getProduct();
    }
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

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

  },

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

  }
})