微信小程序-电动汽车启动充电（4）

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

哆啦睡不着

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

阅读量115

点赞数 1

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

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

版权

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

12 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

充电桩程序

12 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了微信小程序在Start页面中实现电动汽车启动充电的详细步骤，涵盖了start.js、start.json、start.wxml和start.wxss四个关键部分的代码和逻辑。

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

一、 pages文件中Start页面

1、start.js

// pages/start/start.js
var util = require('../utils/dateformat.js')
var jsondata = {}, json_obj = [];
var order_id, interval, percent_value, charge_id, station_id;
var app = getApp();

Page({

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

  /**********************************************************************************
   * 启动充电，在充电命令写入启动命令
  **********************************************************************************/
  startCommand(options) {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/AddChargeCommand',
      data: {
        user_id: wx.getStorageSync('user_id'),
        charge_id: options.charge_id,
        order_id: order_id
      },
      method: 'get',
      async: false,
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function(jsons) {
        console.log('--------------------------------------------->写入启动充电成功');
        var json = jsons.data;

        if (json.length == 0) {
          console.log('--------------------------------------------->写入启动充电JSON字符为空');
          wx.showToast({
            title: '加载数据错误，请稍后重试',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          wx.switchTab({
            url: '/pages/scan/scan'
          })
          return;
        } else {
          console.log('--------------------------------------------->写入启动充电正常');
        }
      },

      fail: function(e) {
        console.log('--------------------------------------------->写入启动充电失败');
        wx.showToast({
          title: '通信网络异常，请检查连接',
          icon: 'none',
          duration: 2000 //持续的时间
        })
        wx.switchTab({
          url: '/pages/scan/scan'
        })
      },

      complete: function() {

      },
    })

  },

  /**********************************************************************************
   * 生成充电订单数据
  **********************************************************************************/
  generateOrder(options) {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/AddChargeOrder',
      data: {
        user_id: wx.getStorageSync('user_id'),
        station_id: options.station_id,
        charge_id: options.charge_id,
        order_id: order_id
      },
      method: 'get',
      async: false,
      header: {
        'content-type': 'application/json',
      },
      // 设置请求的 header
      success: function(jsons) {
        console.log('--------------------------------------------->生成充电订单成功');
        var json = jsons.data;

        if (json[0].result == 'success') {
          console.log('--------------------------------------------->生成充电订单返回成功');
          wx.showToast({
            title: '充电订单生成成功',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          //that.loadOrder();
        } else {
          console.log('--------------------------------------------->生成充电订单返回失败');
          wx.showToast({
            title: '加载数据错误，请稍后重试',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          wx.switchTab({
            url: '/pages/scan/scan'
          })
          
        }
      },

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

      complete: function() {

      },
    })


  },

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

        if (json.length == 0) {
          console.log('--------------------------------------------->加载充电订单JSON字符为空');
          wx.showToast({
            title: '加载数据错误，请稍后重试',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          wx.switchTab({
            url: '/pages/scan/scan'
          })
        } else {
          console.log('--------------------------------------------->加载充电订单返回成功');
          if (json[0].charge_status == 1) {
            percent_value = 100;
            clearInterval(interval);
            //设置进度条
            that.setData({
              percent_value: percent_value
            })
            wx.redirectTo({
              url: '/pages/chargeing/chargeing?station_id=' + station_id + '&charge_id=' + charge_id + '&order_id=' + order_id
            })
          } else {
            //设置进度条
            percent_value = percent_value + 3;
            if (percent_value > 100) {
              percent_value = 100;
            }
            that.setData({
              percent_value: percent_value
            })
          }
        }
      },

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

      complete: function() {

      },
    })
  },

  /**********************************************************************************
   * 生命周期函数--监听页面加载
  **********************************************************************************/
  onLoad: function(options) {
    console.log('--------------------------------------------->页面加载');
    wx.setNavigationBarTitle({
      title: '启动充电' //修改title
    })
    percent_value = 0;
    charge_id = options.charge_id;
    station_id = options.station_id;

    var date = new Date();
    var timestamp = date.getTime() % 1000;
    var datetime = util.formatMicroTime(date);
    order_id = datetime * 10000 + timestamp * 10 + Math.floor(Math.random() * 10);
    order_id = 'S' + order_id;
    console.log('--------------------------------------------->order_id='+order_id);

    this.startCommand(options);
    this.generateOrder(options);
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function (options) {
    console.log('--------------------------------------------->页面显示');
    interval = setInterval(this.loadOrder, 3000); //第一次加载据
  },

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

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

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

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

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

  },

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

  }
})

2、start.json

{
  "usingComponents": {}
}

3、start.wxml

<!--pages/start/start.wxml-->
<view class="container_space"></view>

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

<view class="tb_content">正在启动充电，请稍候...</view>

<progress class="progress" percent="{{percent_value}}" show-info active active-mode="forwards" />

4、start.wxss

/* pages/start/start.wxss */

page {
  background-color: #f4f4f4;
  font-size: 13px;
  color: #333;
}

.progress {
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
}

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

.icon_font {
  text-align: center;
}

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

.container_space {
  height: 10px;
}

.tb_content {
  color: #14bf6d;
  font-weight: bold;
  margin-top: 100px;
  text-align: center;
}