超级会员免费看
本文介绍了微信小程序中用于展示电动汽车充电进度的pages文件结构，包括Chargeing页面的js、json、wxml和wxss四个关键组成部分，详细讲解了如何在微信小程序中实现充电状态的动态更新和界面展示。
一、 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;
}
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
