微信小程序-电动汽车充电结束订单（7）

最新推荐文章于 2024-09-30 12:58:13 发布

哆啦睡不着

最新推荐文章于 2024-09-30 12:58:13 发布

阅读量142

点赞数

分类专栏：微信小程序充电桩程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_43622193/article/details/131650000

版权

微信小程序同时被 2 个专栏收录

12 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

充电桩程序

12 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何在微信小程序中创建并管理电动汽车充电结束后的订单处理。通过分析pages文件夹中的overdetail页面，包括overdetail.js、overdetail.json、overdetail.wxml和overdetail.wxss四个关键组件，深入探讨了实现这一功能的具体步骤和代码结构。

摘要由CSDN通过智能技术生成

一、 pages文件中overdetail页面

1、overdetail.js

// pages/overdetail/overdetail.js
var util = require('../utils/utils.js')
var jsondata = {},
  json_obj = [],order_id;
var app = getApp();

Page({

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


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

        if (jsondata.length == 0) {
          console.log('--------------------------------------------->加载充电订单JSON字符为空');
          wx.showToast({
            title: '加载数据错误，请稍后重试',
            icon: 'none',
            duration: 2000 //持续的时间
          })
        } else {
          console.log('--------------------------------------------->加载充电订单正常');
          var order_status_value = "";
          var order_style_value = "";
          switch (json[0].order_status) {
            case 0:
              order_status_value = "未支付";
              order_style_value = "color:#ff8a00";
              break;
            case 1:
              order_status_value = "已支付";
              order_style_value = "color:#14bf6d";
              break;
          }

          var charge_over_value = "";
          switch (json[0].charge_over) {
            case 1:
              charge_over_value = "APP手动结束充电";
              break;
            case 2:
              charge_over_value = "系统自动结束充电";
              break;
          }

          var charge_begintime_value = new Date(parseInt(json[0].charge_begintime.replace("/Date(", "").replace(")/", ""), 10));
          var charge_endtime_value = new Date(parseInt(json[0].charge_endtime.replace("/Date(", "").replace(")/", ""), 10));

          that.setData({
            station_name: json[0].station_name,
            order_id: json[0].order_id,
            order_status: order_status_value,
            order_style: order_style_value,
            charge_id: json[0].charge_id,
            charge_begintime: util.formatTime(charge_begintime_value),
            charge_endtime: util.formatTime(charge_endtime_value),
            charge_quantity: json[0].charge_quantity.toFixed(2),
            charge_duration: json[0].charge_duration,
            charge_over: charge_over_value,
            charge_electricity: json[0].charge_electricity.toFixed(2),
            charge_service: json[0].charge_service.toFixed(2),
            charge_favourable: json[0].charge_favourable.toFixed(2),
            charge_cost: json[0].charge_cost.toFixed(2),
          });
        }
      },

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

      complete: function() {

      }
    })
  },

  /**********************************************************************************
  // 
  **********************************************************************************/
  goindex: function (e) {
    wx.switchTab({
      url: '/pages/scan/scan'
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log('--------------------------------------------->页面加载');
    wx.setNavigationBarTitle({
      title: '充电结算' //修改title
    })
    this.loadOrder(options); //第一次加载数据
  },

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

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

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

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    console.log('--------------------------------------------->下拉刷新');
    this.loadOrder();
    wx.showNavigationBarLoading(); //在标题栏中显示加载

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

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

  },

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

  }
})

2、overdetail.json

{
  "usingComponents": {}
}

3、overdetail.wxml

<!--pages/overdetail/overdetail.wxml-->
<view class="container_space"></view>
<view class="table">
  <view class="tb_head">{{station_name}}</view>

  <view class="tb_content">
    <view class="tb_content_left">
      订单编号：
    </view>
    <view class="tb_content_data_left">
      {{order_id}}
    </view>
  </view>

  <view class="tb_content">
    <view class="tb_content_left">
      订单状态：
    </view>
    <view class="tb_content_data_left">
      <text style="{{order_style}}">{{order_status}}</text>
    </view>
  </view>
  <view class="container_line"></view>

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

    <view class="tb_content">
      <view class="tb_content_left">
        开始充电时间：
      </view>
      <view class="tb_content_data_left">
        {{charge_begintime}}
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        结束充电时间：
      </view>
      <view class="tb_content_data_left">
        {{charge_endtime}}
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        本次充电：
      </view>
      <view class="tb_content_data_left">
        {{charge_quantity}}度
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        充电时长：
      </view>
      <view class="tb_content_data_left">
        {{charge_duration}}分钟
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        结束原因：
      </view>
      <view class="tb_content_data_left">
        {{charge_over}}
      </view>
    </view>

    <view class="container_line"></view>
    <view class="tb_content">
      <view class="tb_content_left">
        充电金额：
      </view>
      <view class="tb_content_data_left">
        {{charge_electricity}}元
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        服务费：
      </view>
      <view class="tb_content_data_left">
        {{charge_service}}元
      </view>
    </view>

    <view class="tb_content">
      <view class="tb_content_left">
        优惠券低扣：
      </view>
      <view class="tb_content_data_left">
        {{charge_favourable}}元
      </view>
    </view>

    <view class="tb_cost">
      <view class="tb_cost_left">
        充电消费:
      </view>
      <view class="tb_cost_data_left">
        {{charge_cost}}元
      </view>
    </view>
  </view>
</view>

<view class="container_space"></view>

<view class="container_button">
  <button bindtap="goindex" class="close_class">返回充电</button>
</view>

4、overdetail.wxss

/* pages/overdetail/overdetail.wxss */

page {
  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;
}

.container_space {
  height: 10px;
}

.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: auto;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px 5px 5px 5px;
  padding-bottom: 10px;
}


.tb_left {
  font-size: 13px;
}

.tb_right {
  font-size: 13px;
}

.tb_head{
  width: 100%;
  padding-top: 8px;
  padding-bottom: 3px;
  padding-left: 10px;
  display: flex;
  font-size: 14px;
  font-weight: bold;
}

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

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

.tb_content_data_left {
  margin-right: 20px;
  padding-left: 10px;
  padding-bottom: 3px;
  
}

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

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

.tb_cost_data_left {
  margin-right: 20px;
  padding-left: 10px;
  padding-bottom: 3px;
  font-weight: bold;
  color: #ff8a00;
}

.container_button {
  display: flex;
  align-items: center;
}

.close_class {
  font-size: 13px;
  width: 80%;
  color: #ffffff;
  height: 45px;
  border-color: #14bf6d;
  background-color: #14bf6d;
  border:none;
  margin-top: 5px;
  margin-bottom: 10px;
  padding-top:3px;
  border-radius: 25px 25px 25px 25px;
}

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