|
@@ -1,529 +0,0 @@
|
|
-<template>
|
|
|
|
- <view>
|
|
|
|
- <u-navbar title="充电中" :is-back="false">
|
|
|
|
- <view class="slot-wrap">
|
|
|
|
- <view class="navbar-left"></view>
|
|
|
|
- <view class="navbar-right" @click="f5(true)" style=" color: #1d7cff;">
|
|
|
|
- <u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>刷新
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </u-navbar>
|
|
|
|
- <view class="chargeInfoNull" v-if="list.length==0">
|
|
|
|
- <img height="80" width="80" src="@/assets/img/ddc.png" alt="">
|
|
|
|
- <p>暂无充电车辆</p>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <swiper class="swiper" :current="current" @change="changeswiper" style=" height: 700px;"
|
|
|
|
- v-if="list.length!=0">
|
|
|
|
- <swiper-item v-for="(item,i) in list" :key="i">
|
|
|
|
- <view class="chargeInfo">
|
|
|
|
- <view class="chargeInfo-text">
|
|
|
|
- <p>桩名:{{item.deviceName}}</p>
|
|
|
|
- <p>桩号:{{item.deviceNo}}</p>
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeInfo-btn">
|
|
|
|
- 通道:{{item.channelNo}}
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeImg">
|
|
|
|
- <img v-if="item.status==0" src="@/assets/img/charge-0.png" alt="">
|
|
|
|
- <img v-if="item.status==1" src="@/assets/img/charge-1.png" alt="">
|
|
|
|
- <img v-if="item.status==2" src="@/assets/img/charge-2.png" alt="">
|
|
|
|
- <img v-if="item.status==3" src="@/assets/img/charge-3.png" alt="">
|
|
|
|
- <div class="JPTIME JPTIME1" v-if="item.status==0||item.status==3" v-text="showtime[i]"></div>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeTime" v-if="item.status==3">
|
|
|
|
- <h1>关闭中...</h1>
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeTime" v-if="item.status==0">
|
|
|
|
- <h1>启动中...</h1>
|
|
|
|
- 请在2分钟内接入电源!
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeTime" v-if="item.status==2">
|
|
|
|
- <h1>充电结束</h1>
|
|
|
|
- {{item.updateTime}}{{item.remark?':'+item.remark:''}}
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeTime" v-if="item.status==1">
|
|
|
|
- <p>剩余时长<span>(时分)</span></p>
|
|
|
|
- <u-line-progress active-color="#ececec" height="48" :percent="getPercent(item).percent">
|
|
|
|
- <div style="
|
|
|
|
- border-radius: 100px;
|
|
|
|
- min-width: 70px; width: 100%;background-color: rgba(51, 136, 255, 100);height: 8px;">
|
|
|
|
-
|
|
|
|
- <div class="" style="float: right;
|
|
|
|
-
|
|
|
|
- padding: 0 8px;
|
|
|
|
- border-radius: 100px;
|
|
|
|
- background-color: rgba(51, 136, 255, 100);
|
|
|
|
- color: rgb(255, 255, 255);
|
|
|
|
- font-size: 12px;
|
|
|
|
- text-align: center;
|
|
|
|
- font-family: -apple-system;
|
|
|
|
- top: -5px;
|
|
|
|
- position: relative;
|
|
|
|
- ">{{getPercent(item).value}}</div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </u-line-progress>
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeData">
|
|
|
|
- <view class="chargeData-item">
|
|
|
|
- <u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
|
|
|
|
- <h2>{{item.actualFee?item.actualFee:(item.estimateFee?item.estimateFee:0)}}元</h2>
|
|
|
|
- <p>消费金额</p>
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeData-item">
|
|
|
|
- <u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
|
|
|
|
- <h2>{{item.chargingPower?item.chargingPower:0}}W</h2>
|
|
|
|
- <p>充电功率</p>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeBtn">
|
|
|
|
- <view class="chargeBtn-item" v-if="item.status==1||item.status==0" @click="returnMoney(item)">终止并退款
|
|
|
|
- </view>
|
|
|
|
- <view class="chargeBtn-item" v-if="item.status==2" @click="f5(true)">刷新</view>
|
|
|
|
- <view class="chargeBtn-item" @click="showTips(item)">费用说明</view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="chargeNext">{{i+1}}/{{list.length}}</view>
|
|
|
|
- </swiper-item>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </swiper>
|
|
|
|
- <u-modal v-model="showmodel" title="费用说明">
|
|
|
|
- <p v-if="showitem.length==0">当前为免费充电桩</p>
|
|
|
|
- <p v-for="(item,i) in showitem" class="showmodel" :key="i">{{item.minPower}}W-{{item.maxPower}}W
|
|
|
|
- <span>{{item.price}}元每小时</span></p>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <p style=" padding: 15px;" v-if="roundingMinute!=null&&roundingMinute!=-1">超过{{roundingMinute}}分钟,按1小时记,不足{{roundingMinute}}分钟,不计费</p>
|
|
|
|
- <p style=" padding: 15px;" v-if="showitem.length==0">无费用说明或为免费充电模式</p>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </u-modal>
|
|
|
|
- <Tabbar :current="0" ref="tabbarMain" :id="id"></Tabbar>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- import Tabbar from '@/components/Tabbar.vue'
|
|
|
|
- import * as API from '@/apis/index.js'
|
|
|
|
- import {
|
|
|
|
- secondsDistance,
|
|
|
|
- hourDistanceArr
|
|
|
|
- } from '@/utils'
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- k: 0,
|
|
|
|
- id: "",
|
|
|
|
- current: "0",
|
|
|
|
- showmodel: false,
|
|
|
|
- showitem: [],
|
|
|
|
- percent: 0,
|
|
|
|
- list: [],
|
|
|
|
- showtime: {},
|
|
|
|
- isReady: false,
|
|
|
|
- isCharge: false,
|
|
|
|
- roundingMinute:-1,
|
|
|
|
- detail: {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- detailIng: {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- setTimeoutId: ""
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad(op) {
|
|
|
|
- if (op.k) {
|
|
|
|
- this.k = op.k;
|
|
|
|
- //如果是扫码 ,或者登陆进来的, 并且没有充电,就跳转到充电页面 k= null
|
|
|
|
- //如果是在系统内部访问的, k=1 不跳转;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if (op.id) {
|
|
|
|
- this.id = op.id;
|
|
|
|
- this.carhelp.set("qr-default-id",op.id);
|
|
|
|
- }else{
|
|
|
|
- //用于支付后返回系统 -- 点金计划
|
|
|
|
- this.id =this.carhelp.get("qr-default-id");
|
|
|
|
- }
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: "加载中",
|
|
|
|
- mask: true,
|
|
|
|
- })
|
|
|
|
- this.init(op.phone)
|
|
|
|
- setInterval(this.formatDate, 500);
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- beforeDestroy() {
|
|
|
|
- if (this.formatDate) {
|
|
|
|
- clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
-
|
|
|
|
- changeswiper(e) {
|
|
|
|
- this.current = e.detail.current;
|
|
|
|
- },
|
|
|
|
- formatDate() {
|
|
|
|
- for (var i in this.list) {
|
|
|
|
- var obj = this.list[i];
|
|
|
|
- var second = 0;
|
|
|
|
-
|
|
|
|
- if (obj.status == 0) {
|
|
|
|
- second = secondsDistance(obj.createTime);
|
|
|
|
- }
|
|
|
|
- if (obj.status == 3) {
|
|
|
|
- second = secondsDistance(obj.updateTime);
|
|
|
|
- }
|
|
|
|
- //obj.showtime=this.getShowTime(obj);
|
|
|
|
- var ms = 60 * 2 - second;
|
|
|
|
- if (ms > 0) {
|
|
|
|
- var Hour = parseInt(Math.floor(ms / (60)));
|
|
|
|
- var Fen = parseInt(Math.floor(ms % 60));
|
|
|
|
- this.showtime[i] = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen
|
|
|
|
-
|
|
|
|
- } else {
|
|
|
|
- this.showtime[i] = "00:00";
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.$forceUpdate()
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- getPercent(item) {
|
|
|
|
- var obj = {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- if (item.status == 1) {
|
|
|
|
-
|
|
|
|
- var second = secondsDistance(item.startTime);
|
|
|
|
- if (second > 0) {
|
|
|
|
-
|
|
|
|
- obj.percent = (second / 60) / item.estimateMinute * 100;
|
|
|
|
- var ms = item.estimateMinute * 60 - second
|
|
|
|
- if (ms > 0) {
|
|
|
|
- var Hour = parseInt(Math.floor(ms / (60 * 60)));
|
|
|
|
- var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
|
|
|
|
-
|
|
|
|
- obj.value = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- if (item.status == 0) {
|
|
|
|
- obj.value = "启动中"
|
|
|
|
- obj.percent = "50";
|
|
|
|
- }
|
|
|
|
- if (item.status == 2) {
|
|
|
|
- obj.value = "关闭中"
|
|
|
|
- obj.percent = "50";
|
|
|
|
- }
|
|
|
|
- //特殊情况默认值
|
|
|
|
- if (!obj.value) {
|
|
|
|
- obj.value = "00:00"
|
|
|
|
- }
|
|
|
|
- if (!obj.percent) {
|
|
|
|
- obj.percent = "100";
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return obj;
|
|
|
|
- },
|
|
|
|
- showTips(item) {
|
|
|
|
- this.showmodel = true;
|
|
|
|
- this.roundingMinute=item.roundingMinute;
|
|
|
|
- if(this.roundingMinute==null){
|
|
|
|
- this.roundingMinute=5;
|
|
|
|
- }
|
|
|
|
- this.showitem = item.chargingPriceList;
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- returnMoney(item) {
|
|
|
|
-
|
|
|
|
- uni.showModal({
|
|
|
|
- title: '停止充电确认',
|
|
|
|
- showCancel: true,
|
|
|
|
- content: '您确定要停止充电吗?停止后将不再充电并退款到余额',
|
|
|
|
- success: res => {
|
|
|
|
- if (res.confirm) {
|
|
|
|
- this.stopCharging(item)
|
|
|
|
-
|
|
|
|
- } else if (res.cancel) {
|
|
|
|
- console.log('用户点击取消');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- stopCharging(item) {
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: "加载中",
|
|
|
|
- mask: true,
|
|
|
|
- })
|
|
|
|
- var data = {
|
|
|
|
- chargingRecordId: item.id,
|
|
|
|
- channelNo: item.channelNo,
|
|
|
|
- deviceNo: item.deviceNo,
|
|
|
|
- };
|
|
|
|
- API.stopCharging(data).then((res) => {
|
|
|
|
- this.f5(true)
|
|
|
|
- }).catch(error => {
|
|
|
|
-
|
|
|
|
- uni.showToast({
|
|
|
|
- title: error
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- init(phone) {
|
|
|
|
- if (!phone) {
|
|
|
|
- phone = ""
|
|
|
|
- }
|
|
|
|
- // uni.showLoading({
|
|
|
|
- // title: "加载中",
|
|
|
|
- // mask: true,
|
|
|
|
- // })
|
|
|
|
- var data = {
|
|
|
|
- phone: phone
|
|
|
|
- };
|
|
|
|
- API.findChargeData(data).then((res) => {
|
|
|
|
-
|
|
|
|
- if (res.data.chargingRecordList.length != this.list.length) {
|
|
|
|
- this.current = 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- this.list = res.data.chargingRecordList;
|
|
|
|
- this.isCharge = res.data.isCharge;
|
|
|
|
- this.isReady = true;
|
|
|
|
-
|
|
|
|
- if (!this.isCharge && this.k != 1) {
|
|
|
|
- if( this.id){
|
|
|
|
- this.gotoUrl("pages/charge/index?id=" + this.id)
|
|
|
|
- }else{
|
|
|
|
- uni.hideLoading()
|
|
|
|
- }
|
|
|
|
- return
|
|
|
|
- } else {
|
|
|
|
- uni.hideLoading()
|
|
|
|
- }
|
|
|
|
- if (this.list.length > 0) {
|
|
|
|
- //防止定时器重复调用
|
|
|
|
- if (this.setTimeoutId == "") {
|
|
|
|
- for (var i in this.list) {
|
|
|
|
- var item = this.list[i];
|
|
|
|
-
|
|
|
|
- if (item.status == 0 || item.status == 3) {
|
|
|
|
- this.setTimeoutId = setTimeout(() => {
|
|
|
|
- this.setTimeoutId = "";
|
|
|
|
- this.f5()
|
|
|
|
- }, 5 * 1000)
|
|
|
|
- } else if (item.status == 1 && item.startTime) {
|
|
|
|
- var second = secondsDistance(item.startTime);
|
|
|
|
- var ms = item.estimateMinute * 60 - second
|
|
|
|
- if (ms < 60 * 10) {
|
|
|
|
- this.setTimeoutId = setTimeout(() => {
|
|
|
|
- this.setTimeoutId = "";
|
|
|
|
- this.f5()
|
|
|
|
- }, 5 * 1000)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- this.setTimeoutId = ""
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }).catch(error => {
|
|
|
|
- uni.showToast({
|
|
|
|
- title: error
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- f5(bl) {
|
|
|
|
-
|
|
|
|
- if (bl) {
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: "加载中",
|
|
|
|
- mask: true,
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- this.k = 1;
|
|
|
|
- this.init()
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- components: {
|
|
|
|
- Tabbar
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- onShow() {
|
|
|
|
- if (this.isReady) {
|
|
|
|
- this.f5(true)
|
|
|
|
- }
|
|
|
|
- if(this.$refs.tabbarMain){
|
|
|
|
- this.$refs.tabbarMain.setcount(0);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- @import '@/assets/font/jptime.css';
|
|
|
|
-
|
|
|
|
- .JPTIME1 {
|
|
|
|
- position: relative;
|
|
|
|
- bottom: 170px;
|
|
|
|
- font-size: 40px;
|
|
|
|
- text-align: center;
|
|
|
|
- color: #eee;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .showmodel {
|
|
|
|
- margin-left: 20px;
|
|
|
|
- margin-right: 20px;
|
|
|
|
-
|
|
|
|
- span {
|
|
|
|
- float: right;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .slot-wrap {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeNext {
|
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
|
- color: #fff;
|
|
|
|
- float: right;
|
|
|
|
- padding: 5px 15px;
|
|
|
|
- border-radius: 15px;
|
|
|
|
- font-size: 12px;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
- margin-right: 10px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .navbar-right {
|
|
|
|
- display: flex;
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
- align-items: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeInfoNull {
|
|
|
|
- text-align: center;
|
|
|
|
- padding: 100px 0 50px;
|
|
|
|
-
|
|
|
|
- p {
|
|
|
|
- color: #999;
|
|
|
|
- font-size: 20px;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeInfo {
|
|
|
|
- padding: 10px;
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- .chargeInfo-text {
|
|
|
|
- p {
|
|
|
|
- color: #777;
|
|
|
|
- margin-bottom: 5px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeInfo-btn {
|
|
|
|
- background-color: #E0EDFF;
|
|
|
|
- width: 72px;
|
|
|
|
- height: 32px;
|
|
|
|
- border-radius: 16px 0 0 16px;
|
|
|
|
- line-height: 32px;
|
|
|
|
- text-align: center;
|
|
|
|
- position: absolute;
|
|
|
|
- right: 0;
|
|
|
|
- top: 16px;
|
|
|
|
- color: #1677FF;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeImg {
|
|
|
|
- height: 300px;
|
|
|
|
- width: 300px;
|
|
|
|
- margin: 10px auto 0;
|
|
|
|
-
|
|
|
|
- img {
|
|
|
|
- height: 100%;
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeTime {
|
|
|
|
- padding: 20px 30px;
|
|
|
|
- text-align: center;
|
|
|
|
-
|
|
|
|
- p {
|
|
|
|
- color: #999;
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeBtn {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-around;
|
|
|
|
- padding: 20px 50px;
|
|
|
|
-
|
|
|
|
- .chargeBtn-item {
|
|
|
|
- width: 80px;
|
|
|
|
- height: 32px;
|
|
|
|
- background-color: #1677FF;
|
|
|
|
- line-height: 32px;
|
|
|
|
- color: #fff;
|
|
|
|
- text-align: center;
|
|
|
|
- border-radius: 16px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeData {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-around;
|
|
|
|
-
|
|
|
|
- .chargeData-item {
|
|
|
|
- text-align: center;
|
|
|
|
-
|
|
|
|
- h2 {
|
|
|
|
- font-size: 24px;
|
|
|
|
- font-weight: normal;
|
|
|
|
- color: #1677FF;
|
|
|
|
- margin: 10px 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .chargeData-power {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- display: flex;
|
|
|
|
- width: 120px;
|
|
|
|
- text-align: center;
|
|
|
|
- height: 31px;
|
|
|
|
- margin: 10px 0;
|
|
|
|
-
|
|
|
|
- span {
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #1677FF;
|
|
|
|
- margin: 0 5px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- p {
|
|
|
|
- color: #999;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|