|
|
@@ -1,517 +1,846 @@
|
|
|
-<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>
|
|
|
+<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" style="padding-bottom: 0px;">
|
|
|
+ <view class="chargeInfo">
|
|
|
+ <view class="chargeInfo-row">
|
|
|
+ <view class="u-flex">
|
|
|
+ <p>站点：</p>
|
|
|
+ <h4>{{detail.stationName}}</h4>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <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>
|
|
|
+ <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="chargeInfo">
|
|
|
- <view class="chargeInfo-row">
|
|
|
- <view class="u-flex"><p>站点：</p><h4>{{detail.stationName}}</h4></view>
|
|
|
- </view>
|
|
|
- <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="chargeInfo" style="margin-bottom: 10px;">
|
|
|
+ <p><span style="color:red">*</span>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
|
|
|
</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>
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-subsection :list="listType" mode="subsection" active-color="#3786f4" :current="0"
|
|
|
+ @change="changeListType"></u-subsection>
|
|
|
+
|
|
|
+ <view class="chargeMain" v-show="listTypeIndex==0">
|
|
|
+ <template v-for="(item,i) in timelist">
|
|
|
+
|
|
|
+ <view :key="i" class="chargeMain-item " style="width: 30%;padding: 5px;"
|
|
|
+ @click="submitForm.hour=item.id" :class="{
|
|
|
+ 'active':submitForm.hour==item.id,
|
|
|
+
|
|
|
+ }">
|
|
|
+ <p>{{item.name}}</p>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="chargeMain" v-show="listTypeIndex==1">
|
|
|
+ <template v-for="(item,i) in moneylist">
|
|
|
+
|
|
|
+ <view :key="i" class="chargeMain-item " style="width: 30%;padding: 5px;"
|
|
|
+ @click="submitForm.amount=item.id" :class="{
|
|
|
+ 'active':submitForm.amount==item.id,
|
|
|
+
|
|
|
+ }">
|
|
|
+ <p>{{item.name}}</p>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeTime">
|
|
|
+ <view class="chargeInfo" style="margin-bottom: 10px;">
|
|
|
+ <p v-show="listTypeIndex==0"><span style="color:red">*</span>按时间付费：需要先充值，从余额中扣费，适用会员用户。</p>
|
|
|
+ <p v-show="listTypeIndex==1"><span style="color:red">*</span>按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
|
|
|
|
|
|
- <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.availableBalance}} </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>
|
|
|
-</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小时'
|
|
|
- },
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="charge" v-if="false">
|
|
|
+ <view class="chargeTime">
|
|
|
+
|
|
|
+ <view v-for="(item,i) in timelist" class="chargeTime-item " style="width: 32%;" :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">
|
|
|
+
|
|
|
+ </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.availableBalance}} </p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-button type="warning" style=" height: 34px;z-index: 0;"
|
|
|
+ @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>{{listTypeIndex==0?'余额支付':'微信支付'}}
|
|
|
+ </div>
|
|
|
+ <div class="showmodel">
|
|
|
+ <p>充电{{listTypeIndex==0?'时长':'金额'}}</p>{{getListName()}}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="showmodel" style="color: red;" v-if="listTypeIndex==0&&submitForm.hour==0">充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
|
|
|
+ <p class="showmodel" style="color: red;" v-if="listTypeIndex==1">按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+ <u-modal v-model="showmodal2" :show-cancel-button="true" title="余额不足" confirm-text="前往充值"
|
|
|
+ content="账户余额不足，充值成功后开始充电" @confirm="wxpay"></u-modal>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/index.js'
|
|
|
+ import * as Pay from '@/apis/weixin.js'
|
|
|
+ import {
|
|
|
+ wxPayJs
|
|
|
+ } from '@/utils/wxpay'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showmodal: false,
|
|
|
+ show: false,
|
|
|
+ otherNum_f: '',
|
|
|
+ moneyList_f: [],
|
|
|
+ showmodal2: false,
|
|
|
+ moneyActiveClass_f: "-1",
|
|
|
+ fee:"",
|
|
|
+ id: "",
|
|
|
+ showPriceList: false,
|
|
|
+ showmodel: false,
|
|
|
+ //充电桩信息
|
|
|
+ detail: {
|
|
|
+ roundingMinute: -1,
|
|
|
+ priceList: [],
|
|
|
+ },
|
|
|
+ user: {},
|
|
|
+ //充电位子list
|
|
|
+ listTypeIndex: 0,
|
|
|
+ listType: [{
|
|
|
+ name: '按时间付费'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '按金额付费(临时充电)'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ list: [
|
|
|
+
|
|
|
],
|
|
|
- //提交信息
|
|
|
- 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{
|
|
|
- //用于支付后返回系统 -- 点金计划
|
|
|
- var id=this.carhelp.get("qr-default-id")
|
|
|
- if(id){
|
|
|
- this.id =this.carhelp.get("qr-default-id");
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- this.init()
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
+ recordId:"",
|
|
|
+
|
|
|
+ moneylist: [{
|
|
|
+ id: '0.5',
|
|
|
+ name: '0.5元'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ name: '1元'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ name: '2元'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ name: '3元'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ name: '4元'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '5',
|
|
|
+ name: '5元'
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ 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: '8',
|
|
|
+ name: '8小时'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '10',
|
|
|
+ name: '10小时'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ selectItemObj: {},
|
|
|
+ //提交信息
|
|
|
+ submitForm: {
|
|
|
+ deviceNo: '',
|
|
|
+ channelNo: '',
|
|
|
+ hour: '0',
|
|
|
+ amount: "0.5",
|
|
|
+ //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 {
|
|
|
+ //用于支付后返回系统 -- 点金计划
|
|
|
+ var id = this.carhelp.get("qr-default-id")
|
|
|
+ if (id) {
|
|
|
+ this.id = this.carhelp.get("qr-default-id");
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.init()
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
methods: {
|
|
|
- switchCharge(){
|
|
|
- var stationId=this.detail.stationId;
|
|
|
- console.log("switchCharge")
|
|
|
-
|
|
|
- uni.redirectTo({
|
|
|
- url:'/pages/charge/switchCharge?id='+this.id+'&stationId='+stationId
|
|
|
- })
|
|
|
- },
|
|
|
- init(){
|
|
|
- if(!this.id){
|
|
|
- this.switchCharge()
|
|
|
- }else{
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- var data = {
|
|
|
-
|
|
|
- };
|
|
|
- if(this.id){
|
|
|
- data.deviceId=this.id
|
|
|
- }
|
|
|
- API.chargingData(data).then((res) => {
|
|
|
- this.detail = res.data.chargingDevice;
|
|
|
-
|
|
|
- if(!this.detail .online){
|
|
|
- uni.showToast({
|
|
|
- title:'设备不在线，请扫描其他二维码'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- this.carhelp.set("qr-default-id",this.id);
|
|
|
- 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(){
|
|
|
+ wxpay(){
|
|
|
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{
|
|
|
+ Pay.wxpay2({
|
|
|
+ recordId:this.recordId,
|
|
|
+ amount:this.fee
|
|
|
+ }).then((response) => {
|
|
|
+ if(!response.result){
|
|
|
uni.showToast({
|
|
|
- title: error
|
|
|
+ title: response.message
|
|
|
})
|
|
|
+ return
|
|
|
}
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- submit(){
|
|
|
-
|
|
|
- if(!this.submitForm.channelNo){
|
|
|
+ var data = response.data
|
|
|
+ uni.hideLoading()
|
|
|
+ console.log("Pay+"+new Date().getTime())
|
|
|
+ wxPayJs(data);
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
uni.showToast({
|
|
|
- title:'请先选择充电通道'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- var obj=this.list.find(item=>{
|
|
|
- return item.channelNo==this.submitForm.channelNo
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
})
|
|
|
-
|
|
|
- if(!obj||obj.status!=0){
|
|
|
- uni.showToast({
|
|
|
- title:'当前设备不可选'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if(this.submitForm.hour==0&&this.user.availableBalance<5){
|
|
|
- uni.showModal({
|
|
|
- title: '支付',
|
|
|
- content: '余额不足5元无法开启充满自停，是否充值？',
|
|
|
- success: res=> {
|
|
|
- if (res.confirm) {
|
|
|
- //付钱 改为组件
|
|
|
- this.gotoUrl("pages/user/recharge");
|
|
|
-
|
|
|
- } else if (res.cancel) {
|
|
|
- console.log('用户点击取消');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }else{
|
|
|
+ },
|
|
|
+ getListName() {
|
|
|
+ var list = [];
|
|
|
+ var value = [];
|
|
|
+
|
|
|
+
|
|
|
+ if (this.listTypeIndex == 0) {
|
|
|
+ list = this.timelist;
|
|
|
+ value = this.submitForm.hour;
|
|
|
+ } else {
|
|
|
+ list = this.moneylist;
|
|
|
+ value = this.submitForm.amount;
|
|
|
+ }
|
|
|
+ for (var i in list) {
|
|
|
+ var obj = list[i];
|
|
|
+ if (obj.id == value) {
|
|
|
+ return obj.name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ""
|
|
|
+ },
|
|
|
+ changeListType(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.listTypeIndex = e;
|
|
|
+ },
|
|
|
+ switchCharge() {
|
|
|
+ var stationId = this.detail.stationId;
|
|
|
+ console.log("switchCharge")
|
|
|
+
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/charge/switchCharge?id=' + this.id + '&stationId=' + stationId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ moneyClick_f(index, item) {
|
|
|
+ this.otherNum_f = '';
|
|
|
+ this.moneyActiveClass_f = index;
|
|
|
+ if (item) {
|
|
|
+ this.selectItemObj = item;
|
|
|
+ // if(item.imgUrl){
|
|
|
+ // this.selectImg=item
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ if (!this.id) {
|
|
|
+ this.switchCharge()
|
|
|
+ } else {
|
|
|
+
|
|
|
+ var data = {
|
|
|
+ //type:1 ,
|
|
|
+ };
|
|
|
+
|
|
|
+ API.marketingData(data).then((res) => {
|
|
|
+
|
|
|
+ this.moneyList_f = res.data.chargingMarketingList
|
|
|
+ if (this.moneyList_f.length > 0) {
|
|
|
+ this.selectItemObj = this.moneyList_f[0];
|
|
|
+ this.moneyActiveClass_f = this.moneyList_f[0].id
|
|
|
+ //(this.moneyActiveClass)
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ var data = {
|
|
|
+
|
|
|
+ };
|
|
|
+ if (this.id) {
|
|
|
+ data.deviceId = this.id
|
|
|
+ }
|
|
|
+ API.chargingData(data).then((res) => {
|
|
|
+ this.detail = res.data.chargingDevice;
|
|
|
+
|
|
|
+ if (!this.detail.online) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '设备不在线，请扫描其他二维码'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.carhelp.set("qr-default-id", this.id);
|
|
|
+ this.user = res.data.userAccount;
|
|
|
+ this.list = this.detail.chargeStatusArray
|
|
|
+ this.isReady = true;
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isReady = true;
|
|
|
+ uni.hideLoading()
|
|
|
+ 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;
|
|
|
+ //提交信息
|
|
|
+ var submitForm = {
|
|
|
+ deviceNo: this.submitForm.deviceNo,
|
|
|
+ channelNo: this.submitForm.channelNo,
|
|
|
+
|
|
|
+ };
|
|
|
+ if (this.listTypeIndex == 0) {
|
|
|
+ submitForm.hour = this.submitForm.hour
|
|
|
+ } else {
|
|
|
+ submitForm.amount = this.submitForm.amount
|
|
|
+ }
|
|
|
+
|
|
|
+ //paytype:'YE',
|
|
|
+
|
|
|
+ API.startCharging(submitForm).then((res) => {
|
|
|
|
|
|
- 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;
|
|
|
+ if(res.data.status=="5"){
|
|
|
+ uni.hideLoading()
|
|
|
+ this.showmodal2=true;
|
|
|
+ this.recordId=res.data.recordId;
|
|
|
+
|
|
|
+ var fee=res.data.fee;
|
|
|
+
|
|
|
+
|
|
|
+ this.fee=(fee-this.user.availableBalance).toFixed(2);
|
|
|
+ //this.otherNum_f=this.fee;
|
|
|
+ }else{
|
|
|
+ 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 => {
|
|
|
+ uni.hideLoading()
|
|
|
+ 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() {
|
|
|
+
|
|
|
+ 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.listTypeIndex==0&& this.submitForm.hour == 0 && this.user.availableBalance < 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>
|
|
|
-<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;
|
|
|
+ .recharge {
|
|
|
+ padding: 16px;
|
|
|
+ // padding-bottom: 80px;
|
|
|
+ .title {
|
|
|
|
|
|
- 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;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
- h4{
|
|
|
- font-weight: normal;
|
|
|
+
|
|
|
+ p {
|
|
|
+ color: #666;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
- span{
|
|
|
- color:#1677ff;
|
|
|
- margin-right: 5px;
|
|
|
+
|
|
|
+ .self-stop.active {
|
|
|
+
|
|
|
+ background-color: #EFFFF7;
|
|
|
+ border-color: #00B962;
|
|
|
+ color: #00B962;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .rechargeMain {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ .recharge-item {
|
|
|
+ .u-input {
|
|
|
+ text-align: center !important;
|
|
|
+ }
|
|
|
+ width: 31%;
|
|
|
+ border: 1px solid #e3e3e3;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ margin-left: 5px;
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background-color: #EFFFF7;
|
|
|
+ border-color: #00B962;
|
|
|
+ color: #00B962;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .self-stop {
|
|
|
+ width: 105px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial;
|
|
|
+ border: 1px solid rgba(227, 227, 227, 100);
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
+
|
|
|
+ .recharge-input {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 32px;
|
|
|
}
|
|
|
- }
|
|
|
- .foot-btn{
|
|
|
- padding: 10px;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+
|
|
|
+ .recharge-radio {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .recharge-radio-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge-radio-name {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin