|
|
@@ -1,1461 +0,0 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <view v-if="chargingRecord.status==2" style="background-color: #fff; " >
|
|
|
- <ujp-navbar title="充电结束">
|
|
|
- </ujp-navbar>
|
|
|
- <view class="progress-bar2">
|
|
|
- <u-circle-progress width="300" active-color="green" duration='20' :percent="100" border-width="20">
|
|
|
- <view class="u-progress-content">
|
|
|
-
|
|
|
- <text class='u-progress-info' v-if="chargingGun.gunType==1">
|
|
|
- <p style="text-align: center;">{{chargingRecord.endSoc}}%</p>
|
|
|
- <p class="progress-text">当前电量</p>
|
|
|
- </text>
|
|
|
-
|
|
|
- <text class='u-progress-info' v-if="chargingGun.gunType==2">
|
|
|
- <p style="text-align: center;">{{chargingRecord.electricQuantity/10000}}</p>
|
|
|
- <p class="progress-text">已充电量(度)</p>
|
|
|
- </text>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </u-circle-progress>
|
|
|
- </view>
|
|
|
-<!-- 充电信息 -->
|
|
|
-
|
|
|
- <!-- <view class="charge-infos">
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 充电金额
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- 50.00
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 充电时长
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- 00.00.00
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 优惠金额
|
|
|
- </view>
|
|
|
- <view class="content discounts">
|
|
|
- -6.00元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 会员活动
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- 充电服务费包月卡
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view class="info" >
|
|
|
- <view class="info-name">
|
|
|
- 充电时长
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- {{getPercent2()}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info" >
|
|
|
- <view class="info-name">
|
|
|
- 充电金额
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- {{chargingRecord.actualFee.toFixed(2)}}元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info" v-if="chargingRecord.discountAmount">
|
|
|
- <view class="info-name">
|
|
|
- 优惠金额
|
|
|
- </view>
|
|
|
- <view class="info-text" style="color:red">
|
|
|
- {{chargingRecord.discountAmount.toFixed(2)}}元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="info" v-if="chargingRecord.remark">
|
|
|
- <view class="info-name">
|
|
|
- 结束原因
|
|
|
- </view>
|
|
|
- <view class="info-text" style="color: red;" >
|
|
|
- {{chargingRecord.remark}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!--
|
|
|
- <view
|
|
|
-
|
|
|
- style="
|
|
|
- margin-top: 20px;
|
|
|
- text-align: center;
|
|
|
- padding: 0 45px;
|
|
|
- padding-bottom: 40px;
|
|
|
- color:#9e9e9e;
|
|
|
- ">
|
|
|
- <span style="color: red;">*</span>实际充电金额与所选金额会略有出入，最终结算金额将以实际充入电量为准。
|
|
|
- </view> -->
|
|
|
-
|
|
|
- <view class="bottom">
|
|
|
- <u-button size="default" style="background-color:#53b56b"
|
|
|
- shape="circle" @click="gotoMain(0)" >返回首页</u-button>
|
|
|
- <u-button style="background-color:#53b56b"
|
|
|
- size="default" shape="circle" @click="gotoMain(1)">查看订单详情</u-button>
|
|
|
- </view>
|
|
|
- <u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
|
|
|
- <!-- 反馈 -->
|
|
|
- <view class="feedback">
|
|
|
- <view class="title-1">
|
|
|
- 您对本次充电服务还满意吗？
|
|
|
- </view>
|
|
|
- <view class="title-2">
|
|
|
- 请在下方描述您所遇到的问题，或填写您的反馈意见。我们将对优质内容的反馈者发放奖励！
|
|
|
- </view>
|
|
|
- <textarea value="" v-model="message" placeholder="请填写反馈内容" />
|
|
|
- <u-button class="submit" type="success" @click="submitMessage()">提交</u-button>
|
|
|
- </view>
|
|
|
- <u-line color="#E6E6E6 100%" length="81%" margin="auto"/>
|
|
|
-
|
|
|
- <view class="info" >
|
|
|
- <view class="info-name">
|
|
|
- 优惠券
|
|
|
- </view>
|
|
|
- <view class="info-text" style="color:red">
|
|
|
- {{couponObj&&couponObj.status=='1'?couponObj.text:'未使用'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info" v-if="userCardBool" >
|
|
|
- <view class="info-name">
|
|
|
- 会员活动
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- 充电服务费包月卡
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-divider color="#B6BDC3" style="margin-bottom:20px;" bg-color="#ffffff">已经到底了</u-divider>
|
|
|
-
|
|
|
-
|
|
|
- <view>
|
|
|
- <u-toast ref="uToast" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view style="background-color: #fff; padding-bottom: 0px;"
|
|
|
- class="progress-bar-main" v-else>
|
|
|
- <view>
|
|
|
- <ujp-navbar title="充电中">
|
|
|
- <view class="to-recharge" @click="gotoUrl('pages/user/finance/recharge')">
|
|
|
- 去充值
|
|
|
- </view>
|
|
|
- </ujp-navbar>
|
|
|
- <!-- 充电状态 -->
|
|
|
- <view class="charge-state">
|
|
|
- <view class="progress-bar">
|
|
|
- <u-circle-progress width="440" active-color="#53b56b" :percent="percent?percent:percentValue" border-width="35">
|
|
|
-
|
|
|
-
|
|
|
- <view class="u-progress-content" v-if="chargingRecord.status==4">
|
|
|
- <text class='u-progress-info' v-if="waitNum==1">排队中</text>
|
|
|
- <text class='u-progress-info' v-else >前方等待{{waitNum-1}}位</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="u-progress-content" v-else>
|
|
|
-
|
|
|
- <text class='u-progress-info' >
|
|
|
- <view v-if="chargingGun.gunType==1" style="
|
|
|
- font-size: 40px;
|
|
|
- font-weight: bold;
|
|
|
- color: #009B52 ;
|
|
|
- " >{{percent}}<span style="font-size: 16px;">%</span></view>
|
|
|
- <view v-if="chargingGun.gunType==2"
|
|
|
- style="
|
|
|
- font-size: 30px;
|
|
|
- font-weight: bold;
|
|
|
- color: #009B52 ;
|
|
|
- "
|
|
|
-
|
|
|
- >{{chargingRecord.statusText}}</view>
|
|
|
- <view style="
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- " >已充费用{{chargingRecord.dueFee?chargingRecord.dueFee.toFixed(2):'0.00'}}元</view>
|
|
|
- </text>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bot"></view>
|
|
|
- </u-circle-progress>
|
|
|
- </view>
|
|
|
- <!-- <view class="img">
|
|
|
- <img src="../../../assets/img/Group (2).png" alt="">
|
|
|
- </view>
|
|
|
- <view class="state-infos">
|
|
|
- <view class="state">
|
|
|
- <text><img src="../../../assets/img/if-flash.svg" alt=""></text>充电中...
|
|
|
- </view>
|
|
|
- <view class="electric-quantity">
|
|
|
- <p>当前电量</p>
|
|
|
- <view class="percent">
|
|
|
- 60<text>%</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="charge-time">
|
|
|
- <p>充电时长</p>
|
|
|
- <view class="time">
|
|
|
- 00:24:01
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view> -->
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 充电信息 -->
|
|
|
- <view class="charge-info">
|
|
|
- <view class="info-item">
|
|
|
- <view class="content">
|
|
|
- {{timer}}
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- 充电时长
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info-item">
|
|
|
- <view class="content">
|
|
|
- {{chargingGun.kwh}}
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- 已充电量(度)
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info-item">
|
|
|
- <view class="content">
|
|
|
- {{detail.balance>0&&chargingRecord.dueFee?((detail.balance*1000-chargingRecord.dueFee*1000)/1000).toFixed(2):'0.00'}}
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- 账户余额(元)
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 其他信息 -->
|
|
|
- <view class="else-infos">
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 充电车辆
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- {{chargingRecord.carNumber}}
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- <p class="price">当前价格</p>
|
|
|
- <p class="time">{{price.startTime}}-{{price.endTime}}</p>
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- <p class="electrovalence"><text class="num">{{chargingRecord.userCardId?price.electricityPrice.toFixed(2):price.costPrice.toFixed(2)}}</text> 元/度</p>
|
|
|
- <p class="electrovalence-monthlyCard">电价:{{price.electricityPrice}} | 服务费:{{chargingRecord.userCardId?0+'(包月卡)':price.servicePrice}}</p>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- {{chargingRecord.chargeStrategy==0?'充电模式':''}}
|
|
|
- {{chargingRecord.chargeStrategy==2?'充电金额':''}}
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- {{chargingRecord.chargeStrategy==0?'充满自停':''}}
|
|
|
- {{chargingRecord.chargeStrategy==2?chargingRecord.estimateFee.toFixed(2):'0.00'}}元
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 优惠券
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
-
|
|
|
- {{couponObj&&couponObj.useText?couponObj.useText:'未使用优惠券'}}
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item" v-if="userCardBool" >
|
|
|
- <view class="title">
|
|
|
- 会员活动
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- 充电免服务费包月卡
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="title">
|
|
|
- 站点
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- {{chargingRecord.stationName}}/{{chargingRecord.deviceName}}
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item" v-if="false">
|
|
|
- <view class="title">
|
|
|
- 占位费说明
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- 停止充电后30分钟即开始收取占位费用，1元/分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom">
|
|
|
- <view class="img-box" @click="show = true">
|
|
|
- <img src="../../../assets/img/customer-service-2-line.svg" alt="">
|
|
|
-
|
|
|
- </view>
|
|
|
- <button
|
|
|
- :style="(chargingRecord.status=='0'||chargingRecord.status=='1'||chargingRecord.status=='4')?'':'background-color: #b3abab;'"
|
|
|
- style="width: 80%;"
|
|
|
- @click="submit" >结束充电</button>
|
|
|
-
|
|
|
- <view class="img-box" v-if="false">
|
|
|
- <img src="../../../assets/img/tools-fill.svg" alt="">
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <u-modal v-model="show" @confirm="confirmPhone"
|
|
|
- :confirm-text="confirmText" confirm-color="#606266"
|
|
|
- :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- <u-modal v-model="show2" @confirm="gotoGz"
|
|
|
- cancel-text="暂不关注" @cancel="cancelGz"
|
|
|
- confirm-text="前往关注"
|
|
|
-
|
|
|
- confirm-color="#53b56b"
|
|
|
- :show-cancel-button="true"
|
|
|
- ref="uModal2" :asyncClose="true"
|
|
|
- >
|
|
|
- <view style="padding: 15px;"
|
|
|
-
|
|
|
- >请关注<span style=" color: #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="false">
|
|
|
-
|
|
|
-
|
|
|
- <ujp-navbar title="充电详情">
|
|
|
- </ujp-navbar>
|
|
|
-
|
|
|
- <view class="iconfont tittle-font" @click="show = true">
|
|
|
- 
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view class="progress-bar">
|
|
|
- <u-circle-progress width="440" active-color="green" :percent="percent?percent:percentValue" border-width="50">
|
|
|
-
|
|
|
-
|
|
|
- <view class="u-progress-content" v-if="chargingRecord.status==4">
|
|
|
- <text class='u-progress-info' v-if="waitNum==1">排队中</text>
|
|
|
- <text class='u-progress-info' v-else >前方等待{{waitNum-1}}位</text>
|
|
|
- </view>
|
|
|
- <view class="u-progress-content" v-else-if="chargingGun.gunType==1">
|
|
|
-
|
|
|
- <text class='u-progress-info'>{{percent}}%</text>
|
|
|
- </view>
|
|
|
- <view class="u-progress-content" v-else-if="chargingGun.gunType==2">
|
|
|
-
|
|
|
- <text class='u-progress-info'>{{chargingRecord.statusText}}...</text>
|
|
|
- </view>
|
|
|
- <view class="bot"></view>
|
|
|
- </u-circle-progress>
|
|
|
- </view>
|
|
|
- <view class="starting" v-if="chargingGun.gunType==1">
|
|
|
-
|
|
|
- <span v-if="chargingRecord.status==4">
|
|
|
- 可用功率不足，您可以换桩或继续排队等待...
|
|
|
- </span>
|
|
|
- <span v-else>
|
|
|
- {{chargingRecord.statusText}}...
|
|
|
- </span>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="timer">
|
|
|
- {{timer}}
|
|
|
- </view>
|
|
|
- <view class="charged">
|
|
|
- 已充电{{chargingGun.kwh}}度
|
|
|
- </view>
|
|
|
- <view class="cost">
|
|
|
- <view class="">
|
|
|
- <view class="cost-top">
|
|
|
- {{chargingRecord.dueFee?chargingRecord.dueFee.toFixed(2):'0.00'}}元
|
|
|
- </view>
|
|
|
- <view class="cost-bottom " >
|
|
|
- 实时费用
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="line"></view>
|
|
|
- <view class="">
|
|
|
- <view class="cost-top">
|
|
|
- {{detail.balance>0?detail.balance.toFixed(2):'0.00'}}元
|
|
|
- <view class="iconfont cost-font" @click="gotoUrl('pages/user/finance/recharge')" ></view>
|
|
|
- </view>
|
|
|
- <view class="cost-bottom">
|
|
|
- 账户余额
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="power">
|
|
|
- <view>
|
|
|
- <view class="power-num">
|
|
|
- {{chargingRecord.chargeVoltage?chargingRecord.chargeVoltage:0}}v
|
|
|
- </view>
|
|
|
- <view class="power-text">
|
|
|
- 电压
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="line"></view>
|
|
|
- <view>
|
|
|
- <view class="power-num">
|
|
|
- {{chargingRecord.chargingPower?chargingRecord.chargingPower/1000:0}}kW
|
|
|
- </view>
|
|
|
- <view class="power-text">
|
|
|
- 功率
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="line"></view>
|
|
|
- <view>
|
|
|
- <view class="power-num">
|
|
|
- {{chargingRecord.chargeAmpere?chargingRecord.chargeAmpere:0}}A
|
|
|
- </view>
|
|
|
- <view class="power-text">
|
|
|
- 电流
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info" >
|
|
|
- <view class="info-name">
|
|
|
- {{chargingRecord.chargeStrategy==0?'充电模式':''}}
|
|
|
- {{chargingRecord.chargeStrategy==2?'充电金额':''}}
|
|
|
- </view>
|
|
|
- <view class="info-text" >
|
|
|
- {{chargingRecord.chargeStrategy==0?'充满自停':''}}
|
|
|
- {{chargingRecord.chargeStrategy==2?chargingRecord.estimateFee.toFixed(2):'0.00'}}元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="info" >
|
|
|
- <view class="info-name">
|
|
|
- 优惠券
|
|
|
- </view>
|
|
|
- <view class="info-text" style="color:red">
|
|
|
- {{couponObj&&couponObj.useText?couponObj.useText:'未使用'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info" v-if="chargingRecord.carNumber">
|
|
|
- <view class="info-name">
|
|
|
- 充电车辆
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- {{chargingRecord.carNumber}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="info-name">
|
|
|
- 站点
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- {{chargingRecord.stationName}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info">
|
|
|
- <view class="info-name">
|
|
|
- 充电桩
|
|
|
- </view>
|
|
|
- <view class="info-text">
|
|
|
- {{chargingRecord.deviceName}}枪{{chargingRecord.channelNo}}
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="info" v-if="price" style="line-height: 23px;">
|
|
|
- <view class="info-text" style="text-align: left;" >
|
|
|
- <view style="font-weight: bold;font-size: 20px;">当前价格</view>
|
|
|
- <view class="info-name2" >
|
|
|
- {{price.startTime}}-{{price.endTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="info-text" style="line-height: 23px;">
|
|
|
- <view><span style="color: #FF3D00;font-size: 20px;"><b>{{price.costPrice.toFixed(2)}}</b></span>元/度</view>
|
|
|
-
|
|
|
- <view class="info-name2">
|
|
|
- 电价:{{price.electricityPrice.toFixed(2)}}元 | 服务费:{{price.servicePrice.toFixed(2)}}元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view class="bottom2" >
|
|
|
- <u-button type="primary" @click="submit"
|
|
|
- :style="(chargingRecord.status==0||chargingRecord.status==1||chargingRecord.status==4)?'background-color: #00b962':'background-color: #9be6c2;'"
|
|
|
- shape="circle" >结束充电</u-button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-modal v-model="show" @confirm="confirmPhone"
|
|
|
- :confirm-text="confirmText" confirm-color="#606266"
|
|
|
- :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="consumerPhone">
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- <u-modal v-model="show2" @confirm="gotoGz"
|
|
|
- cancel-text="暂不关注" @cancel="cancelGz"
|
|
|
- confirm-text="前往关注"
|
|
|
-
|
|
|
- confirm-color="#53b56b"
|
|
|
- :show-cancel-button="true"
|
|
|
- ref="uModal2" :asyncClose="true"
|
|
|
- >
|
|
|
- <view style="padding: 15px;"
|
|
|
-
|
|
|
- >请关注<span style=" color: #53b56b;">{{projectName}}</span>公众号，以便第一时间收到充电结束消息提醒</view>
|
|
|
- </u-modal>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
- var formatNum=function(num) {
|
|
|
- let res = Number(num);
|
|
|
- return res < 10 ? '0' + res : res;
|
|
|
- };
|
|
|
- import * as api from "@/apis/site.js"
|
|
|
-
|
|
|
- import * as API from '@/apis/chargeProcess.js'
|
|
|
- import * as API_weixin from '@/apis/weixin.js'
|
|
|
- import * as userAPI from '@/apis/user.js'
|
|
|
-
|
|
|
- import {
|
|
|
- newDate,
|
|
|
- secondsDistance,
|
|
|
- hourDistanceArr
|
|
|
- } from '@/utils'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- message: '',
|
|
|
- elderMode:false,
|
|
|
- timer:'',
|
|
|
- title: '联系客服',
|
|
|
- content: '0716-8123456',
|
|
|
- confirmText: '拨打电话',
|
|
|
- detail:{},
|
|
|
- percent: 0,
|
|
|
- percentValue: 0,
|
|
|
- show3:false,
|
|
|
- consumerPhone: "",
|
|
|
- id: "",
|
|
|
- chargingGun: {},
|
|
|
- chargingRecord: {},
|
|
|
- couponObj:{},
|
|
|
- show: false,
|
|
|
- show2: false,
|
|
|
- isReady:true,
|
|
|
- waitNum:'',
|
|
|
- projectName:"",
|
|
|
- userCard:null,
|
|
|
- price:null,
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op) {
|
|
|
- this.projectName=process.car.ProjectName;
|
|
|
-
|
|
|
- var plus=this.carhelp.getPersonInfoPlus()
|
|
|
- if(plus){
|
|
|
- this.userCard=plus.userCard;
|
|
|
- }
|
|
|
- if (op.id) {
|
|
|
- this.id = op.id;
|
|
|
- this.init()
|
|
|
- this.getInfo()
|
|
|
- }
|
|
|
- var consumerPhone = this.carhelp.getConfig().consumerPhone
|
|
|
- // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
|
|
|
- if (consumerPhone) {
|
|
|
- this.consumerPhone = consumerPhone
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
-
|
|
|
- if(!this.isReady){
|
|
|
- this.isReady=true;
|
|
|
- this.addpercent();
|
|
|
- this.getInfo()
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- onHide() {
|
|
|
- this.isReady=false;
|
|
|
- console.log("onHide")
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- console.log("onUnload")
|
|
|
- this.isReady=false;
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
|
|
|
- if(this.elderMode)
|
|
|
- this.theme('elder')
|
|
|
- else
|
|
|
- this.theme('standard')
|
|
|
-
|
|
|
- this.addpercent()
|
|
|
- },
|
|
|
- computed:{
|
|
|
- userCardBool(){
|
|
|
- if(this.chargingRecord&&this.chargingRecord.userCardId){
|
|
|
-
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getChargingStationPrice(id){
|
|
|
-
|
|
|
- if(!id||id==undefined){
|
|
|
- return
|
|
|
- }
|
|
|
- //id='e012f9fe-90a8-4a47-bb64-26ea139c3c05'
|
|
|
- api.getChargingStationPrice({
|
|
|
- stationId:id
|
|
|
- }).then((res)=>{
|
|
|
- let date = new Date();
|
|
|
- let hours = date.getHours();
|
|
|
- let minutes = date.getMinutes();
|
|
|
- let seconds = date.getSeconds();
|
|
|
- let date_str = formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
|
|
|
- if(res.data.prices&&res.data.prices.length){
|
|
|
-
|
|
|
- for(var i in res.data.prices[0].priceList){
|
|
|
- var item=res.data.prices[0].priceList[i];
|
|
|
- if(date_str>=item.startTime && date_str<= item.endTime)
|
|
|
- {
|
|
|
- this.price= item
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- showToast() {
|
|
|
- this.$refs.uToast.show({
|
|
|
- title: '提交成功',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- },
|
|
|
- submitMessage() {
|
|
|
- if(!this.message) {
|
|
|
- uni.showToast({
|
|
|
- title: "请填写反馈内容",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- userAPI.feedback({content: this.message}).then(response => {
|
|
|
- uni.hideLoading()
|
|
|
- this.message = '';
|
|
|
- this.showToast();
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- theme(type) {
|
|
|
-
|
|
|
- if(type == 'elder')
|
|
|
- {
|
|
|
- document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
|
|
|
-
|
|
|
- }
|
|
|
- else
|
|
|
- {
|
|
|
- document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- cancelGz(){
|
|
|
- this.carhelp.setGzDate()
|
|
|
- },
|
|
|
- gotoGz(){
|
|
|
- this.carhelp.setGzDate()
|
|
|
- var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
|
|
|
- window.location.href=url
|
|
|
-
|
|
|
- },
|
|
|
- gotoMain(i){
|
|
|
- if(i==0){
|
|
|
- uni.reLaunch({
|
|
|
- url:"/pages/index/index"
|
|
|
- })
|
|
|
- }
|
|
|
- if(i==1){
|
|
|
- uni.navigateTo({
|
|
|
-
|
|
|
- url:"/pages/record/details?id="+this.id
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- addpercent(){
|
|
|
- this.timer=this.getPercent()
|
|
|
- if(this.isReady){
|
|
|
- setTimeout(()=>{
|
|
|
- this.percentValue++;
|
|
|
- if(this.percentValue>=100){
|
|
|
- this.percentValue=0;
|
|
|
- }
|
|
|
- this.addpercent()
|
|
|
- },100)
|
|
|
- }
|
|
|
- },
|
|
|
- getPercent2() {
|
|
|
- var ms=this.chargingRecord.chargingMinute*60;
|
|
|
-
|
|
|
- var Hour = parseInt(Math.floor(ms / (60 * 60)));
|
|
|
- var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
|
|
|
- var S = parseInt(Math.floor(ms % (60) ));
|
|
|
-
|
|
|
- var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
|
|
|
-
|
|
|
-
|
|
|
- return obj;
|
|
|
- },
|
|
|
- getPercent() {
|
|
|
- if(!this.chargingRecord.startTime){
|
|
|
- return '00:00:00'
|
|
|
- }
|
|
|
- var Hour=0;
|
|
|
- var Fen=0;
|
|
|
- var S=0;
|
|
|
- if (this.chargingRecord.status == 1) {
|
|
|
- var second = secondsDistance(newDate(this.chargingRecord.startTime));
|
|
|
-
|
|
|
- var ms=second;
|
|
|
-
|
|
|
- Hour = parseInt(Math.floor(ms / (60 * 60)));
|
|
|
- Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
|
|
|
- S = parseInt(Math.floor(ms % (60) ));
|
|
|
-
|
|
|
- }
|
|
|
- var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen+ ":" + (S > 9 ? "" : "0") + S
|
|
|
-
|
|
|
-
|
|
|
- return obj;
|
|
|
- },
|
|
|
- init() {
|
|
|
-
|
|
|
-
|
|
|
- API.personalCenter().then((res) => {
|
|
|
- this.detail = res.data
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- checkSubscribe(){
|
|
|
- API_weixin.checkSubscribe({
|
|
|
- openId: this.carhelp.getOpenId()
|
|
|
- }).then((res) => {
|
|
|
-
|
|
|
- if(res.data=="0"){
|
|
|
-
|
|
|
- this.show2=true;
|
|
|
- }else{
|
|
|
- this.carhelp.setGzDate()
|
|
|
- }
|
|
|
-
|
|
|
- //setGzDate
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- confirmPhone() {
|
|
|
- this.show = false;
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: this.consumerPhone //仅为示例
|
|
|
- });
|
|
|
- },
|
|
|
- getInfo() {
|
|
|
- // uni.showLoading({
|
|
|
- // title: "加载中",
|
|
|
- // mask: true,
|
|
|
- // })
|
|
|
- API.chargingDetail({
|
|
|
- id: this.id
|
|
|
- }).then((res) => {
|
|
|
-
|
|
|
- this.chargingRecord = res.data.chargingRecord
|
|
|
- //(this.chargingRecord)
|
|
|
- this.couponObj= res.data.coupon
|
|
|
- this.chargingGun = res.data.chargingGun
|
|
|
- this.waitNum=res.data.chargingRecord.waitNum;
|
|
|
- this.getChargingStationPrice(this.chargingGun.stationId )
|
|
|
- //this.isReady = true;
|
|
|
- //直流
|
|
|
- if(this.chargingGun.gunType==1){
|
|
|
-
|
|
|
- if (this.chargingRecord.status == 1) {
|
|
|
- this.percent=this.chargingGun.soc
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }else if(this.chargingGun.gunType==2){
|
|
|
- //交流
|
|
|
- }
|
|
|
- if (this.chargingRecord.status == 1) {
|
|
|
- if(this.carhelp.getGzDate()&&!this.show2){
|
|
|
-
|
|
|
- this.checkSubscribe()
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if(this.isReady&&this.chargingRecord.status!=2){
|
|
|
- var time=500;
|
|
|
- if(this.chargingRecord.status==0){
|
|
|
-
|
|
|
- }else{
|
|
|
- time=3000;
|
|
|
- this.init();
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(()=>{
|
|
|
- this.getInfo();
|
|
|
- },time)
|
|
|
- }
|
|
|
- uni.hideLoading()
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- submit() {
|
|
|
- if(this.chargingRecord.status==0||this.chargingRecord.status==1||this.chargingRecord.status==4){
|
|
|
-
|
|
|
- }else{
|
|
|
- return
|
|
|
- }
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '确认结束充电？',
|
|
|
- success: res => {
|
|
|
- if (res.confirm) {
|
|
|
- //付钱 改为组件
|
|
|
- this.confirm()
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
- //('用户点击取消');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- confirm() {
|
|
|
-
|
|
|
- ////(JSON.stringify(this.submitForm))
|
|
|
-
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
-
|
|
|
- //this.submitForm.deviceNo = this.detail.deviceNo;
|
|
|
- API.stopCarCharging({
|
|
|
- chargingRecordId:this.chargingRecord.id
|
|
|
- }).then((res) => {
|
|
|
- this.getInfo()
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style>
|
|
|
- page {
|
|
|
- background: #fff;
|
|
|
- padding-bottom: 50px;
|
|
|
- }
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
- .progress-bar-main{
|
|
|
- .info-name2{
|
|
|
- color: #777777 ;
|
|
|
- font-size:14px;
|
|
|
- }
|
|
|
- .info-name{
|
|
|
- font-weight:bold;
|
|
|
- font-size: 20px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @import "@/_theme.scss";
|
|
|
- .tittle-font {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size7');
|
|
|
- }
|
|
|
-/* font-size: 24px;*/
|
|
|
- position: fixed;
|
|
|
- top: 12px;
|
|
|
- right: 16px;
|
|
|
- z-index: 99999;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bot {
|
|
|
- width:100%;
|
|
|
- height:0;
|
|
|
- padding-top: 100%;
|
|
|
- border: 2px #00b962 dotted;
|
|
|
- border-radius:100%;
|
|
|
- box-sizing: border-box;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- right: 0px;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .progress-bar {
|
|
|
-
|
|
|
- text-align: center;
|
|
|
- margin-top: 20px;
|
|
|
- /deep/.u-circle-progress {
|
|
|
-
|
|
|
- position: relative;
|
|
|
- // min-width:220px;
|
|
|
- // min-height: 220px;
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .u-progress-dot {
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #fb9126;
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-info {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size6');
|
|
|
- }
|
|
|
-/* font-size: 22px;*/
|
|
|
- padding-left: 16rpx;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-progress-dot[data-v-05b104e0] {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-circle-progress[data-v-cab6fc66] {
|
|
|
- margin: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .starting {
|
|
|
-/* height: 22px;*/
|
|
|
- color: rgba(0, 185, 98, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size3');
|
|
|
- height:themed('font-size6');
|
|
|
- }
|
|
|
-/* font-size: 16px;*/
|
|
|
- text-align: center;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .timer {
|
|
|
- height: 43px;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size13');
|
|
|
- }
|
|
|
-/* font-size: 36px;*/
|
|
|
- text-align: center;
|
|
|
- margin-top: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .charged {
|
|
|
-/* height: 20px;*/
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- height:themed('font-size5')
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- text-align: center;
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .cost {
|
|
|
- // width: 50%;
|
|
|
- padding: 0 50px;
|
|
|
- margin-top: 16px;
|
|
|
- margin: auto;
|
|
|
- width: 280px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .cost-top {
|
|
|
- line-height: 33px;
|
|
|
- text-align: center;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size7');
|
|
|
- }
|
|
|
-/* font-size: 24px;*/
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .cost-font {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: -25px;
|
|
|
- color: #ff6200;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size7');
|
|
|
- }
|
|
|
-/* font-size: 24px*/
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cost-bottom {
|
|
|
- @include themeify{
|
|
|
- line-height: themed('font-size5');
|
|
|
- }
|
|
|
-/* line-height: 20px;*/
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 0;
|
|
|
- height: 36px;
|
|
|
- border: 1px solid rgba(237, 237, 237, 100);
|
|
|
- margin-top: 10px;
|
|
|
- background-color: #ededed;
|
|
|
- }
|
|
|
-
|
|
|
- .power {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 0 55px;
|
|
|
- margin-top: 40px;
|
|
|
-
|
|
|
- .power-num {
|
|
|
-/* height: 27px;*/
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size5');
|
|
|
- height: themed('font-size9');
|
|
|
- }
|
|
|
-/* font-size: 20px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .power-text {
|
|
|
-/* height: 20px;*/
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- height: themed('font-size5');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 0 40px;
|
|
|
- // height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- background-color: rgba(255, 255, 255, 100);
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- border-bottom: 1px solid #ededed;
|
|
|
-
|
|
|
- .info-text {
|
|
|
- @include themeify{
|
|
|
- line-height: themed('font-size7');
|
|
|
- }
|
|
|
-/* line-height: 23px;*/
|
|
|
- padding: 13px 0 12px;
|
|
|
- //width: 200px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .charge-infos{
|
|
|
- padding: 20px 36px;
|
|
|
- margin: 0 auto;
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 12px;
|
|
|
- .discounts{
|
|
|
- color:red
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom2 {
|
|
|
-
|
|
|
- padding: 12px 20px;
|
|
|
- background-color: #fff;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .progress-bar2 {
|
|
|
- text-align: center;
|
|
|
- margin-top: 20px;
|
|
|
-
|
|
|
- /deep/.u-circle-progress {
|
|
|
- // margin-left: 23.3% !important;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .u-progress-dot {
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #fb9126;
|
|
|
- }
|
|
|
-
|
|
|
- .u-progress-info {
|
|
|
- display: block;
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size11');
|
|
|
- }
|
|
|
-/* font-size: 32px;*/
|
|
|
- padding-left: 16rpx;
|
|
|
- letter-spacing: 2rpx;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
-
|
|
|
- .progress-text {
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- text-align: center;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-progress-dot[data-v-05b104e0] {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-circle-progress[data-v-cab6fc66] {
|
|
|
- margin: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .time-price {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 65px;
|
|
|
-
|
|
|
- .item-num {
|
|
|
-/* height: 33px;*/
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size7');
|
|
|
- height:themed('font-size12')
|
|
|
- }
|
|
|
-/* font-size: 24px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .item-text {
|
|
|
- eight: 20px;
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- @include themeify{
|
|
|
- font-size: themed('font-size2');
|
|
|
- }
|
|
|
-/* font-size: 14px;*/
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .bottom {
|
|
|
- // background-color: #fff;
|
|
|
- // display: flex;
|
|
|
- // width: 91.4%;
|
|
|
- // padding: 0 16px;
|
|
|
- // margin:0 auto 40px;
|
|
|
-
|
|
|
- // .u-size-default {
|
|
|
- // border: 1px solid rgba(0, 185, 98, 100);
|
|
|
- // color: #00b962;
|
|
|
- // width: 44%;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
-// 反馈
|
|
|
-.feedback{
|
|
|
- padding: 20px 36px ;
|
|
|
- .title-1{
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .title-2{
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- textarea{
|
|
|
- margin-top: 16px;
|
|
|
- width: 93.5%;
|
|
|
- height: 100px;
|
|
|
- background-color: rgba(228, 228, 228, 100);
|
|
|
- color: rgba(153, 153, 153, 100);
|
|
|
- font-size: 16px;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 12px;
|
|
|
- line-height: 23px;
|
|
|
-
|
|
|
- }
|
|
|
- .submit{
|
|
|
- height: 44px;
|
|
|
- line-height: 26px;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(0, 185, 98, 100);
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 18px;
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- background-color: #f6f8f8;
|
|
|
- padding-bottom: 60px;
|
|
|
- }
|
|
|
-.to-recharge{
|
|
|
- position: absolute;
|
|
|
- right: 22px;
|
|
|
- color: #333333
|
|
|
-}
|
|
|
- // 充电状态
|
|
|
- .charge-state {
|
|
|
-
|
|
|
- width: 100%;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // 充电信息
|
|
|
- .charge-info {
|
|
|
- background-color: #ffffff;
|
|
|
- width: 88.2%;
|
|
|
- padding: 20px 10px 4px 7px;
|
|
|
- margin: 24px auto 0;
|
|
|
- box-shadow: 0px 2px 8px 0px #1A095A34;
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .info-item {
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 14px;
|
|
|
-
|
|
|
- .content {
|
|
|
- line-height: 33px;
|
|
|
- color: rgba(51, 51, 51, 100);
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 550;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- line-height: 22px;
|
|
|
- color: rgba(119, 119, 119, 100);
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //其他信息
|
|
|
- .else-infos {
|
|
|
- padding: 0 12px;
|
|
|
- background-color: #ffffff;
|
|
|
- width: 88.2%;
|
|
|
- margin: 16px auto 0;
|
|
|
- border-radius: 12px;
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- line-height: 23px;
|
|
|
- padding: 10px 0 10px 0;
|
|
|
- border-bottom: 1px solid #E9EBEE;
|
|
|
- .title{
|
|
|
- // width: 100px;
|
|
|
- width: 26.6vw;
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 550;
|
|
|
- .time{
|
|
|
- font-size: 13px;
|
|
|
- color: #666666 100%;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- .detail{
|
|
|
- // width: 197px;
|
|
|
- width: 52.5vw;
|
|
|
- color: rgba(16, 16, 16, 100);
|
|
|
- font-size: 16px;
|
|
|
- text-align: right;
|
|
|
- .electrovalence{
|
|
|
- .num{
|
|
|
- color: rgba(255, 61, 0, 100);
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .electrovalence-monthlyCard{
|
|
|
- font-size: 14px;
|
|
|
- color: #959595;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- // 底部按钮
|
|
|
- .bottom{
|
|
|
- background:white ;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- padding: 12px 24px;
|
|
|
- padding-bottom: 12px;
|
|
|
- z-index: 999;
|
|
|
- .img-box{
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- padding: 12px 0;
|
|
|
- background-color: rgba(210, 215, 213, 100);
|
|
|
- text-align: center;
|
|
|
- border-radius: 999px;
|
|
|
-
|
|
|
- img{
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- button{
|
|
|
- width: 60.8%;
|
|
|
- background-color: black;
|
|
|
- color: #fff;
|
|
|
- height: 48px;
|
|
|
- border-radius: 50px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
zhengkaixin
