|
@@ -18,7 +18,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
<view @click="exiting.visible = false" class="mask"></view>
|
|
<view @click="exiting.visible = false" class="mask"></view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view v-if="!deviceInfo" class="timer">
|
|
|
|
|
|
|
+ <view v-if="deviceInfo.status == '0'" class="timer">
|
|
|
<view class="value" style="font-size: 22px;">充电正在启动中......</view>
|
|
<view class="value" style="font-size: 22px;">充电正在启动中......</view>
|
|
|
<view v-if="isShowBtn" class="name" style="color: red;font-size: 14px;">长时间无法启动可点击“长按结束充电”按钮结束订单。</view>
|
|
<view v-if="isShowBtn" class="name" style="color: red;font-size: 14px;">长时间无法启动可点击“长按结束充电”按钮结束订单。</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -31,14 +31,14 @@
|
|
|
<!-- 主参数 -->
|
|
<!-- 主参数 -->
|
|
|
<view class="parameter-info-box">
|
|
<view class="parameter-info-box">
|
|
|
<!-- 充电动画 -->
|
|
<!-- 充电动画 -->
|
|
|
- <view class="charge-loading-box" v-if="deviceInfo.orderStatus == 2">
|
|
|
|
|
|
|
+ <view class="charge-loading-box" v-if="deviceInfo.status == '1'">
|
|
|
<view class="charge-loading">
|
|
<view class="charge-loading">
|
|
|
<image class="charge-icon" src="../../static/img/charge_loading.svg" mode=""></image>
|
|
<image class="charge-icon" src="../../static/img/charge_loading.svg" mode=""></image>
|
|
|
<view class="c-loading"></view>
|
|
<view class="c-loading"></view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 计时器 -->
|
|
<!-- 计时器 -->
|
|
|
- <view class="timer" v-if="deviceInfo.orderStatus == 2">
|
|
|
|
|
|
|
+ <view class="timer" v-if="deviceInfo.status == '1'">
|
|
|
<view class="value">{{ timer.text }}</view>
|
|
<view class="value">{{ timer.text }}</view>
|
|
|
<view class="name">充电时间</view>
|
|
<view class="name">充电时间</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -103,15 +103,18 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+// 终态状态码:2-结算中, 3-已完成, 5-未成功充电
|
|
|
|
|
+const TERMINAL_STATUS = ['2', '3', '5'];
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
onLoad(opts) {
|
|
onLoad(opts) {
|
|
|
console.log("启动充值页面的参数:", opts)
|
|
console.log("启动充值页面的参数:", opts)
|
|
|
this.orderInfo.id = opts.orderId;
|
|
this.orderInfo.id = opts.orderId;
|
|
|
this.deviceInfo.id = opts.deviceId;
|
|
this.deviceInfo.id = opts.deviceId;
|
|
|
this.chargeOrderNo = opts.chargeOrderNo || '';
|
|
this.chargeOrderNo = opts.chargeOrderNo || '';
|
|
|
|
|
+ this.getDeviceInfo(true, opts.chargeOrderNo);
|
|
|
},
|
|
},
|
|
|
onShow() {
|
|
onShow() {
|
|
|
- this.getDeviceInfo();
|
|
|
|
|
// this.getOrderInfo();
|
|
// this.getOrderInfo();
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
@@ -132,55 +135,102 @@ export default {
|
|
|
id: 1
|
|
id: 1
|
|
|
}, //订单信息
|
|
}, //订单信息
|
|
|
chargeOrderNo: '',
|
|
chargeOrderNo: '',
|
|
|
- isShowBtn: true, //是否显示长按结束按钮
|
|
|
|
|
|
|
+ isShowBtn: true, //是否显示长按结束按钮
|
|
|
|
|
+ isStoppingCharge: false, //是否正在停止充电(用户主动停止)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
destroyed() {
|
|
destroyed() {
|
|
|
- console.log("关闭页面了。。。。。。")
|
|
|
|
|
- //关闭页面了,要清除定时器
|
|
|
|
|
- this.stopPolling();
|
|
|
|
|
- clearInterval(this.timer.id);
|
|
|
|
|
|
|
+ console.log("关闭页面了......")
|
|
|
|
|
+ // 页面销毁时清除所有定时器
|
|
|
|
|
+ this.clearAllTimers();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- //获取设备的详情信息(含轮询)
|
|
|
|
|
- getDeviceInfo(showLoading = true) {
|
|
|
|
|
- this.$api.base("get", "/applet/v1/station/charging-cost", {}, {
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 清除所有定时器(轮询+计时器)
|
|
|
|
|
+ */
|
|
|
|
|
+ clearAllTimers() {
|
|
|
|
|
+ this.stopPolling();
|
|
|
|
|
+ if (this.timer.id) {
|
|
|
|
|
+ clearInterval(this.timer.id);
|
|
|
|
|
+ this.timer.id = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 检查是否为终态状态(需要跳转的状态)
|
|
|
|
|
+ * @param {string} status 状态码
|
|
|
|
|
+ * @returns {boolean}
|
|
|
|
|
+ */
|
|
|
|
|
+ isTerminalStatus(status) {
|
|
|
|
|
+ return TERMINAL_STATUS.includes(String(status));
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 处理终态跳转(统一跳转和清理逻辑)
|
|
|
|
|
+ */
|
|
|
|
|
+ handleTerminalRedirect() {
|
|
|
|
|
+ uni.hideLoading();
|
|
|
|
|
+ this.clearAllTimers();
|
|
|
|
|
+ this.isStoppingCharge = false;
|
|
|
|
|
+ this.$app.url.goto('/subPackages/order/order/order');
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 获取设备的详情信息(含轮询)
|
|
|
|
|
+ * @param {boolean} showLoading 是否显示loading
|
|
|
|
|
+ * @param {string} orderNo 订单号
|
|
|
|
|
+ */
|
|
|
|
|
+ getDeviceInfo(showLoading = true, orderNo) {
|
|
|
|
|
+ this.$api.base("get", "/applet/v1/station/charging-cost", {
|
|
|
|
|
+ orderNo: orderNo || this.chargeOrderNo
|
|
|
|
|
+ }, {
|
|
|
loading: showLoading
|
|
loading: showLoading
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
this.deviceInfo = res.data;
|
|
this.deviceInfo = res.data;
|
|
|
- // 检查订单状态,已完成或已结束则跳转订单详情
|
|
|
|
|
- if (!res.data) {
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- this.stopPolling();
|
|
|
|
|
- clearInterval(this.timer.id);
|
|
|
|
|
- this.$app.url.goto('/subPackages/order/order/order');
|
|
|
|
|
|
|
+ // 检查订单状态,终态则跳转订单列表
|
|
|
|
|
+ // 状态:0-待启动, 1-充电中, 2-结算中, 3-已完成, 5-未成功充电
|
|
|
|
|
+ if (this.isTerminalStatus(res.data.status)) {
|
|
|
|
|
+ this.handleTerminalRedirect();
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- this.startPolling();
|
|
|
|
|
// 充电中状态,启动计时器
|
|
// 充电中状态,启动计时器
|
|
|
|
|
+ // 订单状态:1-启动中, 2-充电中, 3-停止中, 4-已结束, 5-未知
|
|
|
if (res.data.orderStatus == 2 && !this.timer.isSatrt) {
|
|
if (res.data.orderStatus == 2 && !this.timer.isSatrt) {
|
|
|
this.startup();
|
|
this.startup();
|
|
|
}
|
|
}
|
|
|
// 检查是否显示结束按钮
|
|
// 检查是否显示结束按钮
|
|
|
this.checkShowEndBtn(res.data.startTime);
|
|
this.checkShowEndBtn(res.data.startTime);
|
|
|
- // 启动轮询
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ // 启动轮询(无论是否正在停止充电,都继续轮询等待状态变化)
|
|
|
|
|
+ this.startPolling();
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ console.error('获取充电信息失败:', err);
|
|
|
|
|
+ // 请求失败时也要确保轮询继续
|
|
|
|
|
+ this.startPolling();
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
- //启动轮询定时器,每5秒查询一次
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 启动轮询定时器,每5秒查询一次
|
|
|
|
|
+ */
|
|
|
startPolling() {
|
|
startPolling() {
|
|
|
if (this.pollingTimer) return; // 已启动则不重复
|
|
if (this.pollingTimer) return; // 已启动则不重复
|
|
|
this.pollingTimer = setInterval(() => {
|
|
this.pollingTimer = setInterval(() => {
|
|
|
this.getDeviceInfo(false);
|
|
this.getDeviceInfo(false);
|
|
|
}, 5000);
|
|
}, 5000);
|
|
|
},
|
|
},
|
|
|
- //停止轮询
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 停止轮询
|
|
|
|
|
+ */
|
|
|
stopPolling() {
|
|
stopPolling() {
|
|
|
if (this.pollingTimer) {
|
|
if (this.pollingTimer) {
|
|
|
clearInterval(this.pollingTimer);
|
|
clearInterval(this.pollingTimer);
|
|
|
this.pollingTimer = null;
|
|
this.pollingTimer = null;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- //检查是否显示长按结束按钮
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 检查是否显示长按结束按钮
|
|
|
|
|
+ * @param {string} orderTime 订单开始时间
|
|
|
|
|
+ */
|
|
|
checkShowEndBtn(orderTime) {
|
|
checkShowEndBtn(orderTime) {
|
|
|
if (!orderTime) return;
|
|
if (!orderTime) return;
|
|
|
const t1 = new Date(orderTime.replace(/-/g, '/')).getTime();
|
|
const t1 = new Date(orderTime.replace(/-/g, '/')).getTime();
|
|
@@ -191,9 +241,11 @@ export default {
|
|
|
this.isShowBtn = true;
|
|
this.isShowBtn = true;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- // 启动定时器
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 启动充电计时器
|
|
|
|
|
+ */
|
|
|
startup() {
|
|
startup() {
|
|
|
- // 使用 this.deviceInfo.startTime 替代 this.timer.start
|
|
|
|
|
const start = new Date(this.deviceInfo.startTime);
|
|
const start = new Date(this.deviceInfo.startTime);
|
|
|
const obj = {
|
|
const obj = {
|
|
|
hour: 0,
|
|
hour: 0,
|
|
@@ -208,32 +260,43 @@ export default {
|
|
|
obj.second = Math.floor(diff / 1000 % 60);
|
|
obj.second = Math.floor(diff / 1000 % 60);
|
|
|
this.timer.text =
|
|
this.timer.text =
|
|
|
`${String(obj.hour).padStart(2, '0')}:${String(obj.minute).padStart(2, '0')}:${String(obj.second).padStart(2, '0')}`;
|
|
`${String(obj.hour).padStart(2, '0')}:${String(obj.minute).padStart(2, '0')}:${String(obj.second).padStart(2, '0')}`;
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
clearInterval(this.timer.id);
|
|
clearInterval(this.timer.id);
|
|
|
this.timer.id = setInterval(handle, 1000);
|
|
this.timer.id = setInterval(handle, 1000);
|
|
|
handle();
|
|
handle();
|
|
|
},
|
|
},
|
|
|
- // 退出充电
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 退出充电(调用停止充电接口)
|
|
|
|
|
+ */
|
|
|
exit() {
|
|
exit() {
|
|
|
|
|
+ this.isStoppingCharge = true;
|
|
|
this.$api.base("post", "/applet/v1/charge/stopCharge", {
|
|
this.$api.base("post", "/applet/v1/charge/stopCharge", {
|
|
|
- "chargeOrderNo": this.deviceInfo ? this.deviceInfo.chargeOrderNo : this.chargeOrderNo
|
|
|
|
|
|
|
+ "chargeOrderNo": this.deviceInfo?.chargeOrderNo || this.chargeOrderNo
|
|
|
}, {}).then(res => {
|
|
}, {}).then(res => {
|
|
|
- // 显示结算中loading
|
|
|
|
|
- this.$app.popup.loading(true, {
|
|
|
|
|
- title: "结算中,请稍候",
|
|
|
|
|
- timeout: 120 * 1000
|
|
|
|
|
- });
|
|
|
|
|
if (res.code == '00000') {
|
|
if (res.code == '00000') {
|
|
|
|
|
+ // 显示结算中loading
|
|
|
|
|
+ this.$app.popup.loading(true, {
|
|
|
|
|
+ title: "结算中,请稍候",
|
|
|
|
|
+ timeout: 120 * 1000
|
|
|
|
|
+ });
|
|
|
|
|
+ this.exiting.lock = false;
|
|
|
|
|
+ // 不停止轮询,继续轮询等待状态变为终态(2、3、5)再跳转
|
|
|
|
|
+ // 轮询会在 getDeviceInfo 中检测到终态后自动跳转并清理
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 停止充电失败,重置状态
|
|
|
|
|
+ this.isStoppingCharge = false;
|
|
|
this.exiting.lock = false;
|
|
this.exiting.lock = false;
|
|
|
- this.stopPolling();
|
|
|
|
|
- // this.$app.url.goto('/subPackages/order/order-detail/order-detail?orderId=' + res.data.chargeOrderNo, false);
|
|
|
|
|
- // this.$app.url.goto('/subPackages/order/order/order');
|
|
|
|
|
}
|
|
}
|
|
|
}).catch(() => {
|
|
}).catch(() => {
|
|
|
|
|
+ this.isStoppingCharge = false;
|
|
|
this.exiting.lock = false;
|
|
this.exiting.lock = false;
|
|
|
- })
|
|
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
- // 长按动画结束
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 长按动画结束,提交停止充电
|
|
|
|
|
+ */
|
|
|
submitExit() {
|
|
submitExit() {
|
|
|
this.exiting.lock = false;
|
|
this.exiting.lock = false;
|
|
|
this.exiting.visible = false;
|
|
this.exiting.visible = false;
|