|
|
@@ -8,9 +8,7 @@
|
|
|
<view class="details-item">
|
|
|
充电桩类型：直流快充
|
|
|
</view>
|
|
|
- <view class="details-item">
|
|
|
- 充电桩属性：私人桩
|
|
|
- </view>
|
|
|
+
|
|
|
<view class="details-item">
|
|
|
桩号：80kW快充桩01
|
|
|
</view>
|
|
|
@@ -20,73 +18,199 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 电压详情 -->
|
|
|
- <view class="voltage-details box">
|
|
|
- <view class="voltage-item">
|
|
|
- <p class="item-num">0.0V</p>
|
|
|
- <p class="item-text">电压</p>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="border">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="voltage-item">
|
|
|
- <p class="item-num">0.0V</p>
|
|
|
- <p class="item-text">功率</p>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="border"></view>
|
|
|
- <view class="voltage-item">
|
|
|
- <p class="item-num">0.0V</p>
|
|
|
- <p class="item-text">电流</p>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+
|
|
|
<!-- 预留时长 -->
|
|
|
<view class="reserved-time box">
|
|
|
<p>充电桩预留时长</p>
|
|
|
- <view class="time1">
|
|
|
- 15分钟
|
|
|
- </view>
|
|
|
- <view class="time2">
|
|
|
- 30分钟
|
|
|
- </view>
|
|
|
+ <template v-for="(item,i) in timeList">
|
|
|
+ <view :key="i" @click="selectTime=item" :class="{
|
|
|
+ time1:selectTime==item,
|
|
|
+ time2:selectTime!=item
|
|
|
+ }">
|
|
|
+ {{item}}分钟
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
<view class="end-time">
|
|
|
- 预留截止时间：2022-05-31 09:30:00
|
|
|
+ 预留截止时间：{{endtime1}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 预计充电时长 -->
|
|
|
<view class="reserved-time box">
|
|
|
<p>充电桩预留时长</p>
|
|
|
- <view class="time0">
|
|
|
- 1小时0分钟
|
|
|
- </view>
|
|
|
- <view class="time1">
|
|
|
- 1小时30分钟
|
|
|
- </view>
|
|
|
- <view class="time2">
|
|
|
- 2小时0分钟
|
|
|
- </view>
|
|
|
+ <template v-for="(item,i) in numList">
|
|
|
+ <view :key="i" @click="selectNum=item" :class="{
|
|
|
+ time1:selectNum==item,
|
|
|
+ time0:selectNum!=item
|
|
|
+ }">
|
|
|
+ {{getPercent(item)}}
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
<view class="end-time">
|
|
|
- 预留截止时间：2022-05-31 09:30:00
|
|
|
+ 预留截止时间：{{endtime2}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 预约需知 -->
|
|
|
<view class="need-know box">
|
|
|
<p class="name">预约需知</p>
|
|
|
- <p>1.如超过预留时长，充电授权失效；</p>
|
|
|
- <p>2.授权失效，订单将变为过期，您需要重新预约充电授权；</p>
|
|
|
- <p>3.超时未充电，将被判定违约，系统会根据您的充电习惯作出相应惩罚。</p>
|
|
|
+ <p v-html="apointment">
|
|
|
+
|
|
|
+ </p>
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
<view class="bottom">
|
|
|
- <u-button class="button" shape="square">提交预约</u-button>
|
|
|
+ <u-button class="button"
|
|
|
+ @click="submit()"
|
|
|
+ shape="square">提交预约</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime
|
|
|
+ } from '@/utils'
|
|
|
+ import * as API from '@/apis/apointment.js'
|
|
|
+ import * as newsApi from '@/apis/news.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:0,
|
|
|
+ detail:{},
|
|
|
+ timeList:[15,30],
|
|
|
+ numList:[60,90,120,0],
|
|
|
+ apointment:"",
|
|
|
+ selectTime:15,
|
|
|
+ selectNum:60,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ this.id= op.id;
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ submit(){
|
|
|
+
|
|
|
+ uni.reLaunch({
|
|
|
+ url:"/pages/user/preengaged/preengagedListDetails?&isback=1"
|
|
|
+ })
|
|
|
+ return;
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ //this.submitForm.deviceNo = this.detail.deviceNo;
|
|
|
+ API.startCarCharging(this.submitForm).then((res) => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url:"/pages/user/preengaged/preengagedListDetails?id="+res.data.id+"&isback=1"
|
|
|
+ })
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading()
|
|
|
+ if (error == '用户账户余额不足!') {
|
|
|
+ uni.showModal({
|
|
|
+ title: '支付',
|
|
|
+ content: '用户账户余额不足，是否充值？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ //付钱 改为组件
|
|
|
+ this.gotoUrl("pages/user/finance/recharge");
|
|
|
+
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getInfo(){
|
|
|
+ newsApi.findConfigureByKey({
|
|
|
+ key:"apointment"
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ this.apointment = res.data.value;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+ return
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.couponList({
|
|
|
+ id:this.id,
|
|
|
+ selectTime:this.selectTime,
|
|
|
+ selectNum:this.selectNum,
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.detail= res.data.recordsTotal;
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ newsApi.findConfigureByKey({
|
|
|
+ key:"apointment"
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ this.apointment = res.data;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getPercent(estimateMinute) {
|
|
|
+ var value="";
|
|
|
+
|
|
|
+ var ms =estimateMinute
|
|
|
+ if (ms > 0) {
|
|
|
+ var Hour = parseInt(Math.floor(ms / 60 ));
|
|
|
+ var Fen = parseInt(Math.floor(ms % 60 ));
|
|
|
+ if(Hour>0){
|
|
|
+ value=Hour + "小时"
|
|
|
+ }
|
|
|
+ value += Fen+"分钟"
|
|
|
+ }
|
|
|
+
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ endtime1(){
|
|
|
+ var date=new Date().getTime()+this.selectTime*60*1000
|
|
|
+
|
|
|
+ return parseUnixTime(new Date(date))
|
|
|
+ },
|
|
|
+ endtime2(){
|
|
|
+ var date=new Date().getTime()+this.selectNum*60*1000
|
|
|
+ return parseUnixTime(new Date(date))
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
zhengkaixin