一、 pages文件中Chargeing页面
1、chargeing.js
/*
结束充电流程
1、页面加载(加载数据,加载余额,加载充电站名称)loadReal,getBalance,getStation;
2、充电过程(加载数据,检查订单)loadReal,checkOrder
3、结束充电(向服务写停止命令/检查充电桩返回停止充电,服务器SQL执查询充电订单,查询余额,更新充电余额,更新订单状态)stopCommand,checkCommand
*/
var interval_real, interval_check, interval_order, station_id, charge_id, order_id, charge_cost, deposit_balance, interval;
var app = getApp();
Page({
/**********************************************************************************
* 页面的初始数据
**********************************************************************************/
data: {
scrollheight: null,
},
/**********************************************************************************
//重复点击计时
**********************************************************************************/
Reclick: function() {
var dangqiantime = (Date.parse(new Date()) / 1000);
var daojishitime = wx.getStorageSync('m_over')
var times = dangqiantime - daojishitime
if (times > 0) {
console.log('超过5秒')
wx.setStorageSync('m_over', dangqiantime + 5) //把5秒数放到缓存
return true
} else {
//当发生了5秒以内多次点击等事件,弹窗提示
return false
}
},
/**********************************************************************************
//加载充电实时数据
**********************************************************************************/
loadReal(options) {
var that = this;
wx.request({
url: 'https://api域名/Api/Default/GetChargeRealById',
data: {
charge_id: charge_id,
},
method: 'get',
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 //持续的时间
})
} else {
console.log('--------------------------------------------->加载充电数据正常');
that.setData({
id: json[0].id,
charge_id: json[0].charge_id,
charge_quantity: json[0].charge_quantity.toFixed(2),
charge_duration: json[0].charge_duration,
charge_cost: json[0].charge_cost.toFixed(2),
charge_voltage: json[0].charge_voltage,
charge_current: json[0].charge_current.toFixed(1),
charge_power: json[0].charge_power.toFixed(2),
charge_soc: json[0].charge_soc,
});
}
},
fail: function(e) {
console.log('--------------------------------------------->加载充电数据失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function() {
}
})
},
/**********************************************************************************
//充电余额查询,在充电页面上显示余额信息
**********************************************************************************/
getBalance() {
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.showToast({
title: '加载数据错误,请稍后重试',
icon: 'none',
duration: 2000 //持续的时间
})
} else {
console.log('--------------------------------------------->加载余额数据正常');
deposit_balance = json[0].deposit_balance;
var msg = "";
if (deposit_balance < 10) {
msg = '您的账户余额不足,系统即将停止充电';
} else if (deposit_balance > 200) {
msg = '您的账户余额充足,请放心充电';
} else {
msg = '您的账户余额不多了';
}
that.setData({
deposit_balance: json[0].deposit_balance,
alarm_message: msg
});
}
},
fail: function(e) {
console.log('--------------------------------------------->加载余额数据失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function() {},
})
},
/**********************************************************************************
//加载充电站信息,在充电页面显示充电站名称
**********************************************************************************/
getStation(options) {
var that = this;
wx.request({
url: 'https://api域名/Api/Default/GetChargeStationById',
data: {
station_id: station_id
},
method: 'get',
async: false,
header: {
'content-type': 'application/json',
},
// 设置请求的 header
success: function(jsons) {
console.log('--------------------------------------------->加载电站数据成功');
var json = jsons.data;
that.setData({
station_name: json[0].station_name,
});
},
fail: function(e) {
console.log('--------------------------------------------->加载电站数据失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function() {
},
})
},
/**********************************************************************************
//停止充电,向服务写停止命令
**********************************************************************************/
stopCommand(options) {
var that = this;
wx.request({
url: 'https://api域名/Api/Default/ModifyChargeCommandById',
data: {
order_id: order_id
},
method: 'get',
async: false,
header: {
'content-type': 'application/json',
},
// 设置请求的 header
success: function(jsons) {
console.log('--------------------------------------------->写入充电命令成功');
console.log(order_id);
console.log(jsons);
var json = jsons.data;
if (json.length == 0) {
console.log('--------------------------------------------->写入充电命令JSON字符为空');
wx.showToast({
title: '加载数据错误,请稍后重试',
icon: 'none',
duration: 2000 //持续的时间
})
} else {
console.log('--------------------------------------------->写入充电命令正常');
if (json[0].result == 'success') {
console.log('--------------------------------------------->写入充电命令返回成功');
that.checkCommand();
} else {
console.log('--------------------------------------------->写入充电命令返回失败');
wx.hideLoading();
wx.showToast({
title: '停止充电失败,请稍后重试',
icon: 'none',
duration: 2000 //持续的时间
})
}
}
},
fail: function(e) {
console.log('--------------------------------------------->写入充电命令失败');
wx.hideLoading();
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function() {},
})
},
/**********************************************************************************
//检查充电桩是否返回停止充电
**********************************************************************************/
checkCommand(options) {
var that = this;
wx.request({
url: 'https://api域名/Api/Default/GetChargeCommandById',
data: {
order_id: order_id,
},
method: 'get',
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 //持续的时间
})
} else {
console.log('--------------------------------------------->检查充电反馈正常');
if (json[0].result == 'success') {
console.log('--------------------------------------------->检查充电反馈返回成功');
//订单充电状态为2,(0:未开始,1:服务器命令,2:充电桩应答)
if (json[0].over_command == 2) {
clearInterval(interval_real);
clearInterval(interval_check);
wx.hideLoading();
wx.reLaunch({
url: '/pages/overdetail/overdetail?order_id=' + order_id
})
//查询充电订单并结算
} else {
console.log('--------------------------------------------->检查充电反馈状态未更新');
}
} else {
console.log('--------------------------------------------->检查充电反馈返回失败');
wx.showToast({
title: '加载数据错误,请稍后重试',
icon: 'none',
duration: 2000 //持续的时间
})
}
}
},
fail: function(e) {
console.log('--------------------------------------------->检查充电反馈失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function() {
}
})
},
gooverdetail: function(e) {
var that = this;
//防止重复点击支付
if (!this.Reclick()) {
wx.showModal({
title: '提示',
content: '请勿重复点击结束充电',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('请勿重复点击结束充电')
}
}
})
return false
}
wx.showLoading({
title: '正在结束充电',
})
this.stopCommand();
},
gorequest: function(e) {
var that = this;
wx.reLaunch({
url: '/pages/request/request?station_id=' + station_id + '&charge_id=' + charge_id + '&order_id=' + order_id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log('--------------------------------------------->页面加载');
wx.setNavigationBarTitle({
title: '正在充电' //修改title
})
station_id = options.station_id;
charge_id = options.charge_id;
order_id = options.order_id;
console.log(station_id + ' ' + charge_id + ' '+order_id);
//station_id = '10001041';
//charge_id = '100010410001';
//order_id = '202001251010100001';
this.loadReal(); //第一次加载数据
this.getBalance();
this.getStation();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function(options) {
console.log('--------------------------------------------->页面显示');
interval_real = setInterval(this.loadReal, 3000); //加载数据
interval_check = setInterval(this.checkCommand, 3000); //加载数据
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
console.log('--------------------------------------------->页面隐藏');
clearInterval(interval_real);
clearInterval(interval_check);
//clearInterval(interval_order);
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
clearInterval(interval_real);
clearInterval(interval_check);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
2、chargeing.json
{
"usingComponents": {}
}
3、chargeing.wxml
<!--pages/chargeing/chargeing.wxml-->
<view class="container_station">
<view class="tb_station">{{station_name}}</view>
<view class="tb_station">电桩编号:{{charge_id}}</view>
<image src="../images/process.png" class="icon_image" mode="widthFix"></image>
<view class="tb_soc">{{charge_soc}}%</view>
<view class="tb_note">正在充电</view>
<view class="container_space"></view>
<view class="container_space"></view>
<view class="container_space"></view>
<button class="login_class" bindtap="gorequest">更多信息</button>
</view>
<view class="container_space"></view>
<view class="table">
<view class="container_button3">
<view class="tb_content">
<view class="tb_content_left">
充电度数
</view>
</view>
<view class="tb_content">
<view class="tb_content_left">
充电时间
</view>
</view>
<view class="tb_content">
<view class="tb_content_left">
充电费用
</view>
</view>
</view>
<view class="container_button3">
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_quantity}}
</view>
<view class="tb_content_unit_left">
度
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_duration}}
</view>
<view class="tb_content_unit_left">
分钟
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_cost}}
</view>
<view class="tb_content_unit_left">
元
</view>
</view>
</view>
<view class="container_button3">
<view class="tb_content">
<view class="tb_content_left">
电压
</view>
</view>
<view class="tb_content">
<view class="tb_content_left">
电流
</view>
</view>
<view class="tb_content">
<view class="tb_content_left">
功率
</view>
</view>
</view>
<view class="container_button3">
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_voltage}}
</view>
<view class="tb_content_unit_left">
V
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_current}}
</view>
<view class="tb_content_unit_left">
A
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{charge_power}}
</view>
<view class="tb_content_unit_left">
kw
</view>
</view>
</view>
</view>
<view class="container_space"></view>
<view class="tb_tip">
<view class="tb_head">
<view class="tb_head_left">当前账户余额</view>
<view class="tb_head_data_left">{{deposit_balance}}元</view>
</view>
<view class="tb_body">
<view class="tb_body_left">提示:</view>
<view class="tb_body_data_left">{{alarm_message}}</view>
</view>
</view>
<view class="container_space"></view>
<view class="container_button">
<button class="close_class" bindtap="gooverdetail">结束充电</button>
</view>
4、chargeing.wxss
/* pages/chargeing/chargeing.wxss */
page {
background-color: #f4f4f4;
font-size: 13px;
color: #333333;
}
.container_row {
background-color: #fff;
height: 45px;
display: flex;
align-items: center;
width: 100%;
}
.icon_image {
position: absolute;
height: 150px;
width: 150px;
margin-top:50px;
z-index: 0;
}
.login_class {
font-size: 14px;
color: white;
height: 45px;
border-color: #14bf6d;
background-color: #14bf6d;
padding-top: 5px;
margin-top: 30px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 30px;
z-index: 1000
}
.icon_font {
text-align: center;
font-size: 14px;
}
.container_line {
width: 100%;
border-top: 1px #e1e2e6 solid;
}
.container_space {
height: 10px;
}
.container_station {
display: flex;
flex-direction: column;
padding-left: 0px;
width: 100%;
height: auto;
background-color: #14bf6d;
align-items: center;
padding-bottom: 10px;
}
.tb_station {
text-align: center;
position: relative;
font-size: 13px;
padding-top: 0px;
color:#ffffff;
z-index: 100
}
.tb_soc {
text-align: center;
position: relative;
font-size: 24px;
padding-top: 70px;
color:#ffffff;
z-index: 100
}
.tb_note
{
text-align: center;
position: relative;
font-size: 13px;
padding-top: 0px;
color:#ffffff;
z-index: 100
}
.container_button3 {
justify-content: space-between;
display: flex;
padding-right: 10px;
}
.block_class {
width: 100%;
}
.title {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 13px;
font-weight: bold;
color: #999999;
}
.container_button {
display: flex;
align-items: center;
}
.tb_balance {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
display: flex;
font-size: 13px;
}
.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;
justify-content: center;
padding-bottom: 10px;
}
.tb_tip {
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;
justify-content: center;
padding-bottom: 10px;
}
.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;
font-size: 13px;
}
.tb_content_data_left {
display: flex;
color: #ff8a00;
font-weight: bold;
font-size: 14px;
justify-content: center
}
.tb_content_unit_left{
margin-top:1px;
margin-left: 5px;
display: flex;
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;
}
.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;
}
.tb_singer {
display: flex;
margin-right: 10px;
}
.tb_body_left {
display: flex;
color: #999999;
}
.tb_body_data_left {
padding-left: 10px;
padding-bottom: 5px;
color: #14bf6d;
}
.tb_body_right {
font-size: 13px;
margin-right: 10px;
color: #999;
}
.tb_body_data_right {
font-size: 13px;
padding-top: 0px;
margin-right: 10px;
}
.tb_status_data_right {
font-size: 13px;
padding-top: 0px;
margin-right: 10px;
color: #ff8a00;
}
.row_space {
height: 20px;
background: #f4f4f4;
}