|
|
@@ -1,494 +1,26 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="充电">
|
|
|
- <view class="slot-wrap">
|
|
|
- <view class="navbar-left"></view>
|
|
|
-<!-- <view class="navbar-right"><u-icon name="iconfontscan" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon></view>
|
|
|
- --> </view>
|
|
|
- </u-navbar>
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeInfo">
|
|
|
- <view class="chargeInfo-row">
|
|
|
- <view class="u-flex"><p>桩号：</p><h4>{{detail.deviceNo}}</h4></view>
|
|
|
- <view class="u-flex" @click="switchCharge">
|
|
|
- <span>切换充电桩</span>
|
|
|
- <u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="chargeInfo-row">
|
|
|
- <view class="u-flex"><p>桩名：</p><h4>{{detail.name}}</h4></view>
|
|
|
- <view class="u-flex" @click="showTips()">
|
|
|
- <span>费用说明</span>
|
|
|
- <u-icon name="error-circle" color="#1677ff" size="32" ></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="userHead">
|
|
|
|
|
|
- </view>
|
|
|
- <view class="chargeMain">
|
|
|
- <template v-for="(item,i) in list">
|
|
|
-
|
|
|
- <view :key="i" class="chargeMain-item "
|
|
|
- @click="selectItem(item)"
|
|
|
- :class="{
|
|
|
- 'active':item.channelNo==submitForm.channelNo,
|
|
|
- 'occupy':item.status==1,
|
|
|
- 'fault':item.status==2,
|
|
|
- }"
|
|
|
-
|
|
|
- ><p>{{i+1}}</p>
|
|
|
- <p >{{item.statusStr}}</p>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </template>
|
|
|
- <h2 v-if="isReady&&list.length==0">无可用通道<br/>请联系客服人员</h2>
|
|
|
-
|
|
|
- </view>
|
|
|
</view>
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeTime">
|
|
|
-
|
|
|
- <view v-for="(item,i) in timelist"
|
|
|
- class="chargeTime-item " :key="i"
|
|
|
- @click="submitForm.hour=item.id"
|
|
|
- :class="{
|
|
|
- 'chargeTime-active':submitForm.hour==item.id,
|
|
|
-
|
|
|
- 'chargeTime-first':i==0
|
|
|
- }"
|
|
|
- >
|
|
|
- <template v-if="i==0">
|
|
|
- <p>充满</p><p>自停</p>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- {{item.name}}
|
|
|
- </template>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="chargeTime-text">
|
|
|
- <p>充电时长</p>
|
|
|
- <span>{{timelist[submitForm.hour].name}}</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view style="padding-bottom: 100px;">
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeRadio">
|
|
|
- <view class="u-flex">
|
|
|
- <u-icon name="rmb-circle-fill" color="#ff9502" size="90"></u-icon>
|
|
|
- <view class="chargeRadio-text">
|
|
|
- <p>余额支付</p>
|
|
|
- <p>现有余额￥{{user.accountBalance}} </p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-button type="warning" style=" height: 34px;"
|
|
|
- @click='gotoUrl("pages/user/recharge")'
|
|
|
- >我要充值</u-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="foot-btn">
|
|
|
- <u-button type="primary" :custom-style="customStyle"
|
|
|
- @click="submit"
|
|
|
- shape="square">开始充电</u-button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-modal v-model="showPriceList" title="费用说明" >
|
|
|
-
|
|
|
- <p v-for="(item,i) in detail.priceList" class="showPriceList" :key="i">{{item.minPower}}W-{{item.maxPower}}W <span>{{item.price}}元每小时</span></p>
|
|
|
-
|
|
|
- <p style=" padding: 15px;" v-if="detail.roundingMinute!=null&&detail.roundingMinute!=-1">超过{{detail.roundingMinute}}分钟，按1小时记，不足{{detail.roundingMinute}}分钟，不计费</p>
|
|
|
- <p style=" padding: 15px;" v-if="detail.priceList.length==0">无费用说明或为免费充电模式</p>
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- <u-modal v-model="showmodel" @confirm="confirm" :showCancelButton="true" title="订单信息" >
|
|
|
- <div class="showmodel" ><p >桩号</p>{{detail.deviceNo}}</div>
|
|
|
- <div class="showmodel" ><p >充电通道</p>{{submitForm.channelNo}}</div>
|
|
|
- <div class="showmodel" ><p >支付方式</p>余额支付</div>
|
|
|
- <div class="showmodel" ><p >充电时间</p>{{timelist[submitForm.hour].name}}</div>
|
|
|
-
|
|
|
- <p class="showmodel" style="color: red;" v-if="submitForm.hour==0" >充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
|
|
|
-
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<script>
|
|
|
- import * as API from '@/apis/index.js'
|
|
|
-
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- id:"",
|
|
|
- showPriceList:false,
|
|
|
- showmodel:false,
|
|
|
- //充电桩信息
|
|
|
- detail:{
|
|
|
- roundingMinute:-1,
|
|
|
- priceList:[],
|
|
|
- },
|
|
|
- user:{},
|
|
|
- //充电位子list
|
|
|
- list:[
|
|
|
-
|
|
|
- ],
|
|
|
- timelist:[
|
|
|
- {
|
|
|
- id:'0',
|
|
|
- name:'充满自停'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'1',
|
|
|
- name:'1小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'2',
|
|
|
- name:'2小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'3',
|
|
|
- name:'3小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'4',
|
|
|
- name:'4小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'5',
|
|
|
- name:'5小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'6',
|
|
|
- name:'6小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'7',
|
|
|
- name:'7小时'
|
|
|
- },
|
|
|
- {
|
|
|
- id:'8',
|
|
|
- name:'8小时'
|
|
|
- },
|
|
|
- ],
|
|
|
- //提交信息
|
|
|
- submitForm:{
|
|
|
- deviceNo:'',
|
|
|
- channelNo:'',
|
|
|
- hour:'0',
|
|
|
- //paytype:'YE',
|
|
|
- },
|
|
|
-
|
|
|
- isReady:false,
|
|
|
- customStyle: {
|
|
|
- background: '#1677ff'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op) {
|
|
|
-
|
|
|
- if (op.id) {
|
|
|
- this.id = op.id;
|
|
|
- this.carhelp.set("qr-default-id",op.id);
|
|
|
- }else{
|
|
|
- //用于支付后返回系统 -- 点金计划
|
|
|
- this.id =this.carhelp.get("qr-default-id");
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- this.init()
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- switchCharge(){
|
|
|
-
|
|
|
- uni.redirectTo({
|
|
|
- url:'/pages/charge/switchCharge?id='+this.detail.id
|
|
|
- })
|
|
|
- },
|
|
|
- init(){
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- var data = {
|
|
|
-
|
|
|
- };
|
|
|
- if(this.id){
|
|
|
- data.deviceId=this.id
|
|
|
- }
|
|
|
- API.chargingData(data).then((res) => {
|
|
|
-
|
|
|
- this.carhelp.set("qr-default-id",this.id);
|
|
|
- this.detail = res.data.chargingDevice;
|
|
|
- this.user = res.data.userAccount;
|
|
|
- this.list=this.detail.chargeStatusArray
|
|
|
- this.isReady=true;
|
|
|
- uni.hideLoading()
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- this.isReady=true;
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- selectItem(row){
|
|
|
- if(row.status==0){
|
|
|
- this.submitForm.channelNo=row.channelNo
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- title:'当前设备不可选'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- confirm(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
-
|
|
|
- this.submitForm.deviceNo=this.detail.deviceNo;
|
|
|
- API.startCharging(this.submitForm).then((res) => {
|
|
|
-
|
|
|
- this.gotoUrl("pages/index/index");
|
|
|
- // uni.showModal({
|
|
|
- // title: '提示',
|
|
|
- // showCancel:false,
|
|
|
- // content: '启动成功',
|
|
|
- // success: res=> {
|
|
|
- // if (res.confirm) {
|
|
|
- // //付钱 改为组件
|
|
|
- // this.gotoUrl("pages/index/index");
|
|
|
-
|
|
|
- // } else if (res.cancel) {
|
|
|
- // console.log('用户点击取消');
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
- // uni.showToast({
|
|
|
- // title: '启动中..'
|
|
|
- // })
|
|
|
- // setTimeout(()=>{
|
|
|
-
|
|
|
- // },3000)
|
|
|
- // uni.hideLoading()
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- if(error=='用户账户余额不足!'){
|
|
|
- uni.showModal({
|
|
|
- title: '支付',
|
|
|
- content: '用户账户余额不足，是否充值？',
|
|
|
- success: res=> {
|
|
|
- if (res.confirm) {
|
|
|
- //付钱 改为组件
|
|
|
- this.gotoUrl("pages/user/recharge");
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
- console.log('用户点击取消');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }else{
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- submit(){
|
|
|
+
|
|
|
+ methods: {
|
|
|
|
|
|
- if(!this.submitForm.channelNo){
|
|
|
- uni.showToast({
|
|
|
- title:'请先选择充电通道'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- var obj=this.list.find(item=>{
|
|
|
- return item.channelNo==this.submitForm.channelNo
|
|
|
- })
|
|
|
-
|
|
|
- if(!obj||obj.status!=0){
|
|
|
- uni.showToast({
|
|
|
- title:'当前设备不可选'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.submitForm.hour==0&&this.user.accountBalance<5){
|
|
|
- uni.showModal({
|
|
|
- title: '支付',
|
|
|
- content: '余额不足5元无法开启充满自停，是否充值？',
|
|
|
- success: res=> {
|
|
|
- if (res.confirm) {
|
|
|
- //付钱 改为组件
|
|
|
- this.gotoUrl("pages/user/recharge");
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
- console.log('用户点击取消');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }else{
|
|
|
-
|
|
|
- this.showmodel=true;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- showTips(){
|
|
|
- this.showPriceList=true
|
|
|
- }
|
|
|
- },onShow() {
|
|
|
- if(this.isReady){
|
|
|
- if (this.id) {
|
|
|
- this.carhelp.set("qr-default-id",this.id);
|
|
|
- }else{
|
|
|
- //用于支付后返回系统 -- 点金计划
|
|
|
- this.id =this.carhelp.get("qr-default-id");
|
|
|
- }
|
|
|
- this.init()
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style>
|
|
|
- page{
|
|
|
- background-color: #f7f7f7;
|
|
|
- }
|
|
|
-</style>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
- .showmodel{
|
|
|
- margin-left: 20px;
|
|
|
- margin-right: 20px;
|
|
|
- p{
|
|
|
- display: inline-block;
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
- .showPriceList{
|
|
|
- margin-left: 20px;
|
|
|
- margin-right: 20px;
|
|
|
- span{
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .slot-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .navbar-right {
|
|
|
- display: flex;
|
|
|
- margin-right: 20rpx;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .charge{
|
|
|
- padding: 15px;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .chargeRadio{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- .chargeRadio-text{
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .chargeTime{
|
|
|
- display: flex;
|
|
|
- overflow: scroll;
|
|
|
- padding-bottom: 15px;
|
|
|
-
|
|
|
- .chargeTime-item{
|
|
|
- border: 1px solid #1677ff;
|
|
|
- border-radius: 50%;
|
|
|
- min-width: 56px;
|
|
|
- height: 56px;
|
|
|
- text-align: center;
|
|
|
- line-height: 56px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .chargeTime-first{
|
|
|
- line-height: 20px !important;
|
|
|
-
|
|
|
- padding-top: 6px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .chargeTime-active{
|
|
|
- color:#fff;
|
|
|
- background-color: #1677ff;
|
|
|
- }
|
|
|
- }
|
|
|
- .chargeTime-text{
|
|
|
- border-top: 1px solid #f7f7f7;
|
|
|
- padding-top: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span{
|
|
|
- margin-left: 20px;
|
|
|
- color:#1677ff;
|
|
|
- }
|
|
|
- }
|
|
|
- .chargeInfo{
|
|
|
- .chargeInfo-row{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10px;
|
|
|
- p{
|
|
|
- color:#999;
|
|
|
- }
|
|
|
- h4{
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- span{
|
|
|
- color:#1677ff;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .chargeMain{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20px;
|
|
|
- .chargeMain-item{
|
|
|
- width: 18%;
|
|
|
- text-align: center;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #1677ff;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-radius: 10px;
|
|
|
- color:#1677ff;
|
|
|
- }
|
|
|
- .active{
|
|
|
- background-color:#1677ff;
|
|
|
- color:#fff;
|
|
|
- }
|
|
|
- .fault{
|
|
|
- background-color:#e1e1e1;
|
|
|
- color:#666;
|
|
|
- border: 1px solid #ccc;
|
|
|
- }
|
|
|
- .occupy{
|
|
|
- color:#FF4F3F;
|
|
|
- border: 1px solid #FF4F3F;
|
|
|
- }
|
|
|
- }
|
|
|
- .foot-btn{
|
|
|
- padding: 10px;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+
|
|
|
</style>
|
