微信小程序-电动汽车扫码充电（3）

最新推荐文章于 2024-09-06 14:29:07 发布

哆啦睡不着

最新推荐文章于 2024-09-06 14:29:07 发布

阅读量690

点赞数 1

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

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

版权

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

12 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

充电桩程序

12 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了微信小程序在实现电动汽车扫码充电的应用，详细讲解了pages文件中Scan页面的构成，包括scan.js、scan.json、scan.wxml和scan.wxss四个关键部分的代码和功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 pages文件中Scan页面

1、scan.js

var station_id, charge_id, gun_fault,deposit_balance;

Page({

  /**********************************************************************************
   * 页面的初始数据
   **********************************************************************************/
  data: {
    charge_id: '',
  },

  /**********************************************************************************
  //重复点击计时
  **********************************************************************************/
  Reclick: function () {
    var dangqiantime = (Date.parse(new Date()) / 1000);
    var daojishitime = wx.getStorageSync('m_scan')
    var times = dangqiantime - daojishitime
    if (times > 0) {
      console.log('超过5秒')
      wx.setStorageSync('m_scan', dangqiantime + 5) //把5秒数放到缓存
      return true
    } else {
      //当发生了5秒以内多次点击等事件，弹窗提示
      return false
    }
  },

  /**********************************************************************************
  //扫码启动充电，扫码只能扫一次，如果失败可以重描，成功则不能重描，防止生成多个订单
  **********************************************************************************/
  getQRCode: function () {

    //防止重复点击支付
    if (!this.Reclick()) {
      wx.showModal({
        title: '提示',
        content: '请在5秒后重新扫码',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      })
      return false
    }


    var that = this;
    wx.scanCode({ //扫描API
      success: function (res) {
        var jsons = JSON.parse(res.result);
        station_id = jsons.station_id;
        charge_id = jsons.charge_id;

        //判断充电站和充电桩编码是否合法
        if(!(/(^\d{8}$)/.test(station_id)))
        {
          wx.showToast({
            title: '电站编码不合法',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          return false
        }

        if (!(/(^\d{21}$)/.test(charge_id)))
        {
          wx.showToast({
            title: '充电桩编码不合法',
            icon: 'none',
            duration: 2000 //持续的时间
          })
          return false
        }

        //需要对二维码格式进行验证，否则出现错误数据

        wx.showToast({
          title: '扫码成功',
          duration: 2000
        })

        //启动充电3个条件，1、检查充电枪号是否存在，2，检查充电枪插枪状态，2，账户余额不小于3元，3，用户没有未结算订单，4，用户处于登录状态
        if (wx.getStorageSync('user_id') != '') {
          that.checkChargeid();
        }else{
          wx.showToast({
            title: '请先登录应用',
            icon: 'none',
            duration: 2000 //持续的时间
          })
        }
      },

      fail: function (e) {
        wx.showToast({
          title: '扫码失败',
          icon: 'none',
          duration: 2000 //持续的时间
        })
      },

      complete: function () { },
    })
  },

  /**********************************************************************************
  //检查充电枪编号是否存在
  **********************************************************************************/
  checkChargeid() {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetChargeId',
      data: {
        charge_id: charge_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.showModal({
            title: '提示',
            content: '检查状态错误，请联系客服',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {

              }
            }
          })
          return false
        } else {
          console.log('--------------------------------------------->检查充电枪编号正常');
          console.log(json);
          if (json[0].result == "success") {
            console.log('--------------------------------------------->检查充电枪编号成功');
            that.checkGun();
          } else {
            console.log('--------------------------------------------->检查充电枪编号不存在');
            //无返回数据
            wx.showModal({
              title: '提示',
              content: '充电枪编号错误',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {

                }
              }
            })
            return false
          }
        }
      },

      fail: function (e) {
        console.log('--------------------------------------------->检查充电枪编号失败');
        wx.showModal({
          title: '提示',
          content: '通信网络异常，请检查连接',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {

            }
          }
        })
        return false
      },

      complete: function () { },
    })

  },

  /**********************************************************************************
  //检查充电枪插枪状态
  **********************************************************************************/
  checkGun(){
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetLastGunById',
      data: {
        charge_id: charge_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.showModal({
            title: '提示',
            content: '检查状态错误，请联系客服',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                 
              }
            }
          })
          return false
        } else {
          console.log('--------------------------------------------->检查充电枪状态正常');
          gun_fault = json[0].gun_fault;
          if (gun_fault == 1) {
            console.log('--------------------------------------------->检查充电枪状态已插枪');
            that.checkBalance();
          } else {
            console.log('--------------------------------------------->检查充电枪状态未插枪');
            //无返回数据
            wx.showModal({
              title: '提示',
              content: '充电枪连接异常',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  
                }
              }
            })
            return false
          }
        }
      },

      fail: function (e) {
        console.log('--------------------------------------------->检查充电枪状态失败');
        wx.showModal({
          title: '提示',
          content: '通信网络异常，请检查连接',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              
            }
          }
        })
        return false
      },

      complete: function () { },
    })

  },


  /**********************************************************************************
  //查询充电余额数据，充电余额充足才能启动充电
  **********************************************************************************/
  checkBalance() {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetLastDepositByUser',
      data: {
        user_id: wx.getStorageSync('user_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.showModal({
            title: '提示',
            content: '检查余额错误，请联系客服',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('检查余额错误，请联系客服')
              }
            }
          })
          return false

          /*wx.showToast({
            title: '检查余额错误，请联系客服',
            icon: 'none',
            duration: 2000 //持续的时间
          })*/
        } else {
          console.log('--------------------------------------------->加载充电余额正常');
          deposit_balance = json[0].deposit_balance;
          if (deposit_balance > 5) {
            console.log('--------------------------------------------->加载充电余额小于5元');
            that.checkOrder();
          } else {
            console.log('--------------------------------------------->加载充电余额大于5元');
            //无返回数据
            wx.showModal({
              title: '提示',
              content: '余额不足，请及时充值',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('余额不足，请及时充值')
                }
              }
            })
            return false
            /*wx.showToast({
              title: '余额不足，请及时充值',
              icon: 'none',
              //image: '',//自定义图标的本地路径，image 的优先级高于 icon
              duration: 3000 //持续的时间
            })*/

          }
        }
      },

      fail: function (e) {
        console.log('--------------------------------------------->加载充电余额失败');
        wx.showModal({
          title: '提示',
          content: '通信网络异常，请检查连接',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('通信网络异常，请检查连接')
            }
          }
        })
        return false
        /*wx.showToast({
          title: '检查余额错误，请联系客服',
          icon: 'none',
          duration: 2000 //持续的时间
        })*/
      },

      complete: function () { },
    })
  },

  /**********************************************************************************
  //检查充电订单是否存在，一个充电桩只能有一个订单，如果有订单则不启动充电
  **********************************************************************************/
  checkOrder() {
    var that = this;
    wx.request({
      url: 'https://api域名/Api/Default/GetOrderCountById',
      data: {
        user_id: wx.getStorageSync('user_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.showModal({
            title: '提示',
            content: '检查订单失败，请联系客服',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('检查订单失败，请联系客服')
              }
            }
          })
          return false

          /*wx.showToast({
            title: '检查订单失败，请联系客服',
            icon: 'none',
            duration: 2000 //持续的时间
          })*/
        } else {
          console.log('--------------------------------------------->检查充电订单正常');
          //订单结算状态为1,(0:未结算，1：已结算)
          if (json[0].result == 'success') {
            console.log('--------------------------------------------->检查充电订单返回成功');
            if (json[0].count == 0) {
              console.log('--------------------------------------------->检查充电订单已结算');
              wx.navigateTo({
                url: '/pages/start/start?station_id=' + station_id + '&charge_id=' + charge_id
              })
            }
            else {
              console.log('--------------------------------------------->检查充电订单未结算');
              wx.showModal({
                title: '提示',
                content: '您有订单未结算，请结算后再充电',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log('您有订单未结算，请结算后再充电')
                  }
                }
              })
              return false
            }
          } else {
            console.log('--------------------------------------------->检查充电订单返回失败');
            wx.showModal({
              title: '提示',
              content: '检查订单失败，请联系客服',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('检查订单失败，请联系客服')
                }
              }
            })
            return false
          }
        }
      },

      fail: function (e) {
        console.log('--------------------------------------------->检查充电订单失败');
        wx.showModal({
          title: '提示',
          content: '通信网络异常，请检查连接',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('通信网络异常，请检查连接')
            }
          }
        })
        return false

        /*wx.showToast({
          title: '检查订单失败，请联系客服',
          icon: 'none',
          duration: 2000 //持续的时间
        })*/
      },

      complete: function () {

      }
    })
  },

  /**********************************************************************************
    //加载微信登录状态
  **********************************************************************************/
  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 () {

  },

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

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

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  }
})

2、scan.json

{
  "usingComponents": {}
}

3、scan.wxml

<view class="container_station">
  <view class="container_space"></view>
  <view class="tb_note">扫描充电桩上的二维码即可启动充电</view>
  <view class="tb_content">
    <view class="tb_content_left">
      扫码充电仅支持：
    </view>
    <view class="tb_content_data_left">
      云充电充电桩
    </view>
  </view>
  <view class="container_space"></view>

   <image src="../images/scan.png" class="icon_image" mode="widthFix" bindtap="getQRCode"></image>
   <view>{{ qRCodeMsg }}</view>
</view>

4、scan.wxss

/* pages/charge/charge.wxss */

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

.tb_note
{
  text-align: center;
  position: relative;
  font-size: 16px;
  font-weight: bold;
  padding-top: 50px;
  color:#333333;
  z-index: 100
}


.container_station {
  display: flex;
  flex-direction: column;
  padding-left: 0px;
  width: 100%;
  height: 220px;
  background-color: #f4f4f4;
  align-items: center;
}


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

.tb_content_left {
  display: flex;
  color: #999999;
  justify-content: center
}

.tb_content_data_left {
  display: flex;
  color: #ff8a00;
  font-size: 14px;
   justify-content: center
}


.icon_image {
  position: absolute;
  height: 96px;
  width: 96px;
  z-index: 1;
  padding-top: 300px;
}