shares/pages/index/index.js

//index.js
//获取应用实例
import * as echarts from '../../ec-canvas/echarts';
var imageUtil = require('../../utils/window.js'); 
const apiServer = require('../../api/request');
const app = getApp()
Page({
  data: {
    url:'../../images/timg.jpg',
    motto: '',
    currentTab: 0,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    currPage:1,//当前页
    pages:0,//每页条数
    total:0,//总条数
    aa:[],//列表

    imagewidth: 0,//缩放后的宽 
    imageheight: 0,//缩放后的高 
    chartData:{
      // actual:[552,586,3555,4454,552,556,4455],
      // prediction:[552,546,3585,4424,542,546,35,44,524,56,355,444,2224,421],
      // timeData : [
      //   '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7', '2020/6/8', '2020/6/9', '2020/6/10','2020/6/11',
      //   '2020/6/12','2020/6/13','2020/6/14',
      // ]
    },
      chartDatas:{
        // actual:[572,556,3555,4744,552,576,3555],
        // prediction:[352,246,385,2424,542,546,255],
        // timeData : [
        //   '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7'
        // ]
      },
      ec: {
        onInit: true,
        // lazyLoad: true // 延迟加载
      },
    // ec: {
    //   onInit: function (canvas, width, height) {
    //     chart = echarts.init(canvas, null, {
    //       width: width,
    //       height: height
    //     });
    //     canvas.setChart(chart);
    //     return chart;
    //   },
    //   lazyLoad: true // 延迟加载
    // },
    aa:[
      // {
      //   id:'0',
      //   from:"Investing.com 中文",
      //   nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
      //   reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
      //   time:"6天前"
      // },
      // { 
      //   id:'1',
      //   from:"chinese.aljazeera.net",
      //   nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
      //   reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
      //   time:"6天前"
      // },
      // {
      //   id:'2',
      //   from:"Investing.com 中文",
      //   nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
      //   reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
      //   time:"5天前"
      // },
      // {
      //   id:'3',
      //   from:"Investing.com 中文",
      //   nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
      //   reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
      //   time:"6天前"
      // },
      // { 
      //   id:'4',
      //   from:"chinese.aljazeera.net",
      //   nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
      //   reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
      //   time:"6天前"
      // },
      // {
      //   id:'5',
      //   from:"Investing.com 中文",
      //   nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
      //   reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
      //   time:"5天前"
      // },
      // {
      //   id:'6',
      //   from:"Investing.com 中文",
      //   nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
      //   reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
      //   time:"6天前"
      // },
      // { 
      //   id:'7',
      //   from:"chinese.aljazeera.net",
      //   nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
      //   reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
      //   time:"6天前"
      // },
      // {
      //   id:'8',
      //   from:"Investing.com 中文",
      //   nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
      //   reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
      //   time:"5天前"
      // },
      // {
      //   id:'9',
      //   from:"Investing.com 中文",
      //   nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
      //   reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
      //   time:"6天前"
      // },
      // { 
      //   id:'10',
      //   from:"chinese.aljazeera.net",
      //   nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
      //   reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
      //   time:"6天前"
      // },
      // {
      //   id:'11',
      //   from:"Investing.com 中文",
      //   nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
      //   reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
      //   time:"5天前"
      // },
      // {
      //   id:'12',
      //   from:"Investing.com 中文",
      //   nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
      //   reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
      //   time:"6天前"
      // },
      // { 
      //   id:'13',
      //   from:"chinese.aljazeera.net",
      //   nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
      //   reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
      //   time:"6天前"
      // },
      // {
      //   id:'14',
      //   from:"Investing.com 中文",
      //   nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
      //   reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
      //   time:"5天前"
      // },
    ],
  },
 
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //上证
  getHz:function(){
    apiServer.getHz().then((res) =>{
      if(res.statusCode == 200){

        this.onComponent.init((canvas, width, height,dpr) => {
          // 初始化图表
          const Chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          Chart.setOption(this.getOption(this.recursion(res.data.data)));
          return Chart;
        });
      }
    })
  },
  //深证
  getSz:function(){
    apiServer.getSz().then((res) =>{
      if(res.statusCode == 200){
        console.log(res);
        this.deppComponnet.init((canvas, width, height,dpr) => {
          // 初始化图表
          const Chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          Chart.setOption(this.getOption(this.recursion(res.data.data)));
          return Chart;
        });
      }
    })
  },
  recursion:function(row,a=[],b=[],c=[],d){
    for(let i in row.actuals){
    a.unshift(row.actuals[i].industryDate)
    b.unshift(row.actuals[i].close)
    c.unshift(row.actuals[i].pred)
    }
    if(row.tag){
      d="#D81E06"
    }else{
      d="#07c160"
    }
  return {"timeData":a,"actual":b,"prediction":c,"color":d}
  },
  getOption:function(data){
    return {
      title: {//标题
        text: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
      renderAsImage: true, //支持渲染为图片模式
  
      color: [data.color, "#80CDF8"],//图例图标颜色
  
      legend: {
  
        show: true,
  
        itemGap: 25,//每个图例间的间隔
  
        // top: 30,
  
        x: 30,//水平安放位置,离容器左侧的距离  'left'
  
        z: 100,
  
        textStyle: {
  
          color: '#383838'
        },
  
      },
  
      grid: {//网格
       top:"8%",
        left: "2%",
        right:"2%",
        containLabel: true,//grid 区域是否包含坐标轴的刻度标签
      },
  
      xAxis: {//横坐标
  
        type: 'category',
  
        // nameTextStyle: {//在name值存在下，设置name的样式
  
        //   color: 'white',
  
        //   fontStyle: 'normal'
  
        // },
        // splitNumber: 7,//坐标轴的分割段数
        nameLocation:'end',//坐标轴名称显示位置。
        
  
        splitLine: {//坐标轴在 grid 区域中的分隔线。
  
          show: true,
  
          lineStyle: {
  
            type: 'dashed',
            color: ['#2B2B2B']
          }
  
        },
  
        boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
  
        data: data.timeData,
        axisLine: {onZero: true},
        axisLabel: {
  
          textStyle: {
  
            fontSize: 13,
  
            color: '#5D5D5D'
  
          }
  
        }
  
      },
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'empty',
          startValue: data.prediction? data.prediction.length -4:0,
          endValue: data.prediction?data.prediction.length:3 ,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
          }
      },
      {
        type: 'inside',
        realtime: true
    }
  
    ],
      yAxis: {//纵坐标
  
        type: 'value',
  
        position:'right',
  
        // nameTextStyle:{//在name值存在下，设置name的样式
  
        //   color:'red',
  
        //   fontStyle:'normal'
  
        // },
  
        splitNumber: 5,//坐标轴的分割段数
        scale:true,
        splitLine: {//坐标轴在 grid 区域中的分隔线。
  
          show: true,
  
          lineStyle: {
  
            type: 'dashed',
            color: ['#2B2B2B']
  
          }
  
        },
  
        axisLabel: {//坐标轴刻度标签
  
          // formatter: function (value) {
  
          //   var xLable = [];
  
          //   if (value == 20) {
  
          //     xLable.push('25,883');
  
          //   }
  
          //   if (value == 40) {
  
          //     xLable.push('26,035');
  
          //   }
  
          //   if (value == 60) {
  
          //     xLable.push('26,187');
  
          //   }
  
          //   if (value == 80) {
  
          //     xLable.push('26,339');
  
          //   }
          //   return xLable
  
          // },
  
          textStyle: {
  
            fontSize: 13,
  
            color: '#5D5D5D',
  
          }
  
        },
  
        // min: 0,
  
        // max: 100,
  
      },
  
      series: [{
  
        name: '实际',
  
        type: 'line',
      
        // smooth:true,
  
        data:data.actual,
  
        symbol: 'none',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: data.color
        }, {
            offset: 1,
            color: '#1C1C1C'
        }])
  
        },
        itemStyle: {
  
          normal: {
  
            lineStyle: {
  
              color: data.color
  
            }
  
          }
  
        }
  
      }, {
  
        name: '预测',
  
        type: 'line',
  
        data: data.prediction,
  
        symbol: 'none',
  
        itemStyle: {
  
          normal: {
  
            lineStyle: {
  
              color: '#80CDF8'
  
            }
  
          }
  
        }
  
      }],
    };
  },
  onReady: function (e) {
    this.computeScrollViewHeight();
    // var query = wx.createSelectorQuery()
    // query.select('#test').boundingClientRect(function (res) {
    //    console.log(res.top);
    // }).exec();
 },
  onLoad: function (options) {
    this.onComponent = this.selectComponent('#mychart-dom-line-on');
    this.deppComponnet = this.selectComponent('#mychart-dom-line-depp');
    this.getHz();
    this.getSz();
    getNewsList(this);
    let sysinfo = wx.getSystemInfoSync(),
    windowHeight = sysinfo.windowHeight,
    statusHeight = sysinfo.statusBarHeight, 
    isiOS = sysinfo.system.indexOf('iOS') > -1, 
    navHeight;
    if (!isiOS) {
        navHeight = 48;
    } else {
        navHeight = 44;
    }
    let height = windowHeight-statusHeight-navHeight;
    this.setData({
      height:height
    })
    // this.echartsComponnet = this.selectComponent('#mychart');
    // console.log(this.echartsComponnet);
    // //如果是第一次绘制
    // if (!Chart) {
    //   this.init_echarts(); //初始化图表
    // } else {
    //   this.setOption(Chart); //更新数据
    // }

    // this.computeScrollViewHeight();
    // if (app.globalData.userInfo) {
    //   this.setData({
    //     userInfo: app.globalData.userInfo,
    //     hasUserInfo: true
    //   })
    // } else if (this.data.canIUse){
    //   // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
    //   // 所以此处加入 callback 以防止这种情况
    //   app.userInfoReadyCallback = res => {
    //     this.setData({
    //       userInfo: res.userInfo,
    //       hasUserInfo: true
    //     })
    //   }
    // } else {
    //   // 在没有 open-type=getUserInfo 版本的兼容处理
    //   wx.getUserInfo({
    //     success: res => {
    //       app.globalData.userInfo = res.userInfo
    //       this.setData({
    //         userInfo: res.userInfo,
    //         hasUserInfo: true
    //       })
    //     }
    //   })
    // }
  },
   /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
      //下拉刷新,重新初始化,isMerge = false
      getNewsList(this);
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("触发")
      setPage(this);
  },
  scrolltolower:function() { 
    console.log("dgff");
    // var that = this;
    // var tempCurrentPage = that.data.currentPage;
    // tempCurrentPage = tempCurrentPage + 1;
    // if(that.data.currentPage==that.data.totalpages){
    //   wx.showLoading({title: '已经到底啦'})
    //   setTimeout(function(){
    //     wx.hideLoading()
    //   },600);
    //   return
    // }
    // that.setData({
    //   currentPage: tempCurrentPage,
    // })
    // getNewsList(this);
    setPage(this);

},
  computeScrollViewHeight() {
    var that = this
    let query = wx.createSelectorQuery().in(that)
    query.select('.swiper-tab').boundingClientRect()
    query.select('.chart').boundingClientRect()
    query.select('.news').boundingClientRect()
    query.exec(res => {
      let topHeight = res[0].height
      let searchHeight = res[1].height
      let titleHeight = res[2].height
      let windowHeight = wx.getSystemInfoSync().windowHeight
      let windowWidth = wx.getSystemInfoSync().windowWidth
      let height = windowHeight - topHeight - searchHeight - titleHeight
      let ratio = 750 / windowWidth
      let scrollHeight = height * ratio
      that.setData({ scrollHeight: scrollHeight})
    })
  },
  imageLoad: function (e) { 
    var imageSize = imageUtil.imageUtil(e) 
    this.setData({ 
     imagewidth: imageSize.imageWidth, 
     imageheight: imageSize.imageHeight 
    }) 
    this.computeScrollViewHeight();
   },
   
  onFold:function(e){
    wx.navigateTo({
      url:'../news/news?newsId='+e.currentTarget.dataset.id
      });
  },
  choose:function(e){
    wx.navigateTo({
      url:"../filter/filter"
      })
  },
  swichNav: function(e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
    // 滑动切换tab 
    bindChange: function(e) {
      var that = this;
      that.setData({
        currentTab: e.detail.current
      });
    },
    catchTouchMove:function(res){
      return false
    },


  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
   
  }

})
  /**
 * method:分页加载控制函数
 * 
 */
function setPage(that) {
  const {
    currPage,
      pages,
      total
  } = that.data;
  // const totalPages = getTotalPages(total,pages);

  if (currPage >= pages || that.isLoading) {
      //控制触底是否加载需要两个条件,满足一下两个条件,都不能调用请求函数
      // 1.当前页是最后一页,
      // 2. 正在加载中
      return
  }
  //分页加载需要传递isMerge=true参数,表示需要合并到原来的数组上
  getNewsList(that,true)
}
/**
 * method:得到总页数
 * @param {Number,String} total 列表总数
 * @param {Number,String} pages 每一页的条数
 * @return {Number} totalPages 总页数 
 */
function getTotalPages(total,pages){
  //总数除以每一页条数 如果余数!=0,结果需要+1
  const remainder = Number(total) % Number(pages);
  const value = Math.floor(total / pages);
  const totalPages = remainder == 0 ? value : Number(value) + 1;
  return totalPages
}
 //获取新闻列表
 function getNewsList(that,isMerge){
//    that.isLoading = true
//    wx.showLoading({
//     title: '加载中',
// })
const data = {};
data.currPage = Number(that.data.currPage) + 1;
if(!isMerge){
    //不合并,页码需要重新设置为1
    data.currPage = 1;
}
  apiServer.getNewsList(data).then((res)=>{
    if(res.statusCode == 200){
      let aa = that.data.aa;
      if(!isMerge){
          aa = [];
      }
      aa = aa.concat(res.data.data.incInfos)
      that.setData({
        aa,
        currPage:res.data.data.current,
        pages: res.data.data.pages,
        total: res.data.data.total
      })    
    }
    // that.isLoading = false
    wx.stopPullDownRefresh();
    // setTimeout(function(){
    //     wx.hideLoading()
    // },500)
  })
}