一、 pages文件中Request页面
1、request.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,
demand_voltage: json[0].demand_voltage.toFixed(2),
demand_current: json[0].demand_current.toFixed(2),
demand_quantity: json[0].demand_quantity.toFixed(2),
voltage_max: json[0].voltage_max.toFixed(3),
voltage_min: json[0].voltage_min.toFixed(3),
temperature_max: json[0].temperature_max,
charge_soc: json[0].charge_soc,
});
}
},
fail: function (e) {
console.log('--------------------------------------------->加载实时数据失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function () {
}
})
},
/**********************************************************************************
//充电余额查询,在充电页面上显示余额信息
**********************************************************************************/
getBalance(options) {
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 () {
},
})
},
/**********************************************************************************
//检查充电桩是否返回停止充电
**********************************************************************************/
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('--------------------------------------------->检查充电反馈状态未更新');
//that.checkCommand();
}
} else {
console.log('--------------------------------------------->检查充电反馈返回失败');
wx.showToast({
title: '加载数据错误,请稍后重试',
icon: 'none',
duration: 2000 //持续的时间
})
}
}
},
fail: function (e) {
console.log('--------------------------------------------->检查充电反馈失败');
wx.showToast({
title: '通信网络异常,请检查连接',
icon: 'none',
duration: 2000 //持续的时间
})
},
complete: function () {
}
})
},
goback: function (e) {
var that = this;
wx.reLaunch({
url: '/pages/chargeing/chargeing?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 () {
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、request.json
{
"usingComponents": {}
}
3、request.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>
<view class="container_space"></view>
<view class="container_space"></view>
</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">
{{demand_voltage}}
</view>
<view class="tb_content_unit_left">
V
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{demand_current}}
</view>
<view class="tb_content_unit_left">
A
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{demand_quantity}}
</view>
<view class="tb_content_unit_left">
KWH
</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">
{{voltage_max}}
</view>
<view class="tb_content_unit_left">
V
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{voltage_min}}
</view>
<view class="tb_content_unit_left">
V
</view>
</view>
<view class="tb_content">
<view class="tb_content_data_left">
{{temperature_max}}
</view>
<view class="tb_content_unit_left">
℃
</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="goback">返回</button>
</view>
4、request.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;
}
.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;
}