微信小程序-电动汽车充电订单（8）

一、 pages文件中order页面 

1、order.js

// pages/order/order.js

var jsondata = {},
  json_obj = [];
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    objectArray: [],
    scrollheight: null,

    loadingTip: false, //"上拉加载"的变量，默认false，隐藏 
    loadingComplete: false, //“没有数据”的变量，默认false，隐藏 
    pageindex: 1,
    pagesize: 5
  },

  /**********************************************************************************
  //加载充电订单信息
  **********************************************************************************/
  loadOrder(options) {
    var that = this;
    console.log('--------------------------------------------->pageindex=' + that.data.pageindex + ',pagesize=' + that.data.pagesize);
    wx.request({
      url: 'https://api域名/Api/Default/GetChargeOrderByUser',
      data: {
        user_id: wx.getStorageSync('user_id'),
        pageindex: that.data.pageindex,
        pagesize: that.data.pagesize
      },
      method: 'get',
      async: false,
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function(jsons) {
        console.log('--------------------------------------------->加载充电订单成功');
        var json = jsons.data;

        if (json.length == 0) {
          if (that.data.pageindex == 1) {
            wx.showToast({
              title: '加载数据错误，请稍后重试',
              icon: 'none',
              duration: 2000 //持续的时间
            })
          } else {
            wx.showToast({
              title: '没有更多的数据',
              icon: 'none',
              duration: 2000 //持续的时间
            })
            that.setData({
              loadingComplete: true,
            })
          }
        } else {
          console.log('--------------------------------------------->加载充电订单正常');
          console.log('--------------------------------------------->加载记录数' + json.length);

          //json_obj = [];
          for (var i = 0; i < json.length; i++) {
            var m = {};
            m.id = json[i].id;
            m.station_id = json[i].station_id;
            m.station_name = json[i].station_name;
            m.order_id = json[i].order_id;
            m.charge_id = json[i].charge_id;
            m.charge_status = json[i].charge_status;
            switch (json[i].order_status) {
              case 0:
                m.order_status = "未支付";
                m.order_style_value = "color:#ff8a00";
                break;
              case 1:
                m.order_status = "已支付";
                m.order_style_value = "color:#14bf6d";
                break;
            }
            m.charge_begintime = json[i].charge_begintime;
            m.charge_cost = json[i].charge_cost.toFixed(2);
            json_obj.push(m);
          }

          that.setData({
            objectArray: json_obj
          });
        }
      },

      fail: function(e) {
        console.log('--------------------------------------------->加载充电订单失败');
        wx.showToast({
          title: '通信网络异常，请检查连接',
          icon: 'none',
          duration: 2000 //持续的时间
        })
      },

      complete: function() {
        that.setData({
          loadingTip: false,
        })
        wx.hideLoading();
      },

    })
  },

  /**********************************************************************************
  //滚动到底部触发事件 
  **********************************************************************************/
  onScrollLower(e) {


  },


  /**********************************************************************************
  //点击事件
  **********************************************************************************/
  tablerow(e) {
    if (e.currentTarget.dataset.status == 1) {
      wx.reLaunch({
        url: '/pages/chargeing/chargeing?station_id=' + e.currentTarget.dataset.station + '&charge_id=' + e.currentTarget.dataset.charge + '&order_id=' + e.currentTarget.dataset.id
      })
    } else {
      wx.navigateTo({
        url: '/pages/orderdetail/orderdetail?order_id=' + e.currentTarget.dataset.id
      })
    }
  },


  /**********************************************************************************
    //加载微信登录状态
    **********************************************************************************/
  checkLogin() {
    var that = this;
    wx.checkSession({
      success: function(res) {
        console.log("登录状态");
      },
      fail: function(res) {
        console.log("离线状态");
        wx.redirectTo({
          url: "/pages/login/login"
        });
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log('--------------------------------------------->页面加载');
    //this.checkLogin();
    wx.setNavigationBarTitle({
      title: '我的订单' //修改title
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    // var scrollheight
    // wx.getSystemInfo({
    //   success({
    //     windowHeight
    //   }) 
    //   {
    //     scrollheight = windowHeight - 100;
    //   }
    // });
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    console.log('--------------------------------------------->页面显示');
    //this.checkLogin();
    if (wx.getStorageSync('user_id') != '') {
      json_obj = [];
      this.loadOrder(); //显示重新加载数据
    } else {
      this.setData({
        objectArray: null
      });
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    console.log('--------------------------------------------->页面隐藏');
  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    let that = this;
    console.log('--------------------------------------------->下拉刷新');
    that.setData({
      loadingTip: false,
      loadingComplete: false,
      pageindex: 1, //每次触发上拉事件，把searchPageNum+1 
    })


    if (wx.getStorageSync('user_id') != '') {
      json_obj = [];
      that.loadOrder(); //显示重新加载数据
      wx.showLoading({
        title: '正在加载',
      });
    } else {
      that.setData({
        objectArray: null
      });
    }

    wx.showNavigationBarLoading(); //在标题栏中显示加载

    setTimeout(function() {
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    let that = this;
    console.log('--------------------------------------------->上拉加载更多' + that.data.loadingComplete);
    if (!that.data.loadingComplete) {
      that.setData({
        loadingTip: true,
        pageindex: that.data.pageindex + 1, //每次触发上拉事件，把searchPageNum+1 
      })

      that.loadOrder();

      wx.showLoading({
        title: '正在加载第' + that.data.pageindex + '页',
      });
    }
  },

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

  }
})

2、order.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

3、order.wxml

<!--pages/order/order.wxml-->
<view class="container_space"></view>
<view style="height:100%" scroll-y="true" lower-threshold="0" bindscrolltolower="onReachBottom">
  <view wx:for="{{objectArray}}" wx:key="id">
    <view class="table" bindtap='tablerow' data-id="{{item.order_id}}" data-status="{{item.charge_status}}" data-station="{{item.station_id}}" data-charge="{{item.charge_id}}">
      <view class="tb_head">
        <view class="tb_head_left">
          订单编号：
        </view>
        <view class="tb_head_data_left">
          {{item.order_id}}
        </view>
      </view>
      <view class="container_line"></view>
      <view class="tb_left">
        <view class="tb_title" data-id="{{item.station_name}}">{{item.station_name}}</view>

        <view class="tb_content">
          <view class="tb_content_left">
            电桩编号：
          </view>
          <view class="tb_content_data_left">
            {{item.charge_id}}
          </view>
        </view>

        <view class="tb_body">
          <view class="tb_singer">
            <view class="tb_body_left">
              订单状态：
            </view>
            <view class="tb_body_data_left">
              <text style="{{item.order_style_value}}">{{item.order_status}}</text>
            </view>
          </view>
          <view class="tb_singer">
            <view class="tb_body_right">
              消费金额:
            </view>
            <view class="tb_body_data_right">
              {{item.charge_cost}}元
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="row_space"></view>
  </view>

  <view class="row_space"></view>
  <view class="row_space"></view>
  <view class="loading_line" hidden="{{!loadingTip}}"></view>
  <view class="loading_tip" hidden="{{!loadingTip}}">正在加载更多</view>
  <view class="loading_line" hidden="{{!loadingComplete}}"></view>
  <view class="loading_complete" hidden="{{!loadingComplete}}">我是有底线的</view>
  <view class="row_space"></view>
  <view class="row_space"></view>
  <view class="row_space"></view>
</view>

4、order.wxss

/* pages/order/order.wxss */

/* pages/my/my.wxss */

page {
  height: 100%;
  background-color: #f4f4f4;
  font-size: 13px;
    color: #333333;
}

.icon_image {
  height: 24px;
  width: 24px;
}

.icon_font {
  text-align: center;
}

.container_line {
  width: 100%;
  border-top: 1px #eeeeee solid;
}

.loading_line{
  border-top: 1px #13bf6d solid;
  margin-left: 10px;
  margin-right: 10px;
}

.container_space {
  height: 10px;
}

.loading_tip{
 text-align: center;
 font-size: 13px;
 color: #333333;
}

.loading_complete{
 text-align: center;
 font-size: 13px;
 color: #333333;
}

.button_row {
  margin: 10px;
  display: flex;
}

button::after {
  border-width: 0px;
}

.table {
  border-bottom: #ffffff 1px solid;
  border-top: #ffffff 1px solid;
  background-color: #ffffff;
  height: 115px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px 5px 5px 5px;
}

.tb_left {
  font-size: 13px;
}

.tb_right {
  font-size: 13px;
}

.tb_title {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
  font-weight: bold;
}

.tb_content {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
}

.tb_content_left {
  display: flex;
  color: #999999;
}

.tb_content_data_left {
  padding-left: 10px;
  padding-bottom: 5px;
  
}

.tb_head {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
}

.tb_head_left {
  display: flex;
  color: #999999;
}

.tb_head_data_left {
  padding-left: 10px;
  padding-bottom: 5px;
  
}

.tb_body {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 10px;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.tb_singer {
  display: flex;
  margin-right: 10px;
}

.tb_body_left {
  display: flex;
  color: #999999;
}

.tb_body_data_left {
  padding-left: 10px;
  padding-bottom: 5px;
}

.tb_body_right {
  font-size: 13px;
  margin-right: 10px;
  color: #999999;
}

.tb_body_data_right {
  font-size: 13px;
  padding-top: 0px;
  margin-right: 10px;
  font-weight: bold;
  color: #ff8a00;
}

.row_space {
  height: 10px;
  background: #f4f4f4;
}