优化充电桩详情

This commit is contained in:
wuxw 2024-10-10 15:20:29 +08:00
parent 455a2de25c
commit 00c8a87f8b
2 changed files with 123 additions and 30 deletions

View File

@ -38,7 +38,6 @@
<view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)"> <view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)">
订单 订单
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<view v-show="active == 0" class="margin-top-xs"> <view v-show="active == 0" class="margin-top-xs">

View File

@ -1,35 +1,110 @@
<template> <template>
<view> <view>
<view> <scroll-view scroll-x class="bg-white nav ">
<image :src="topImg" class="heard-location-icon"></image> <view class="flex text-center">
<view class="cu-item flex-sub" :class="active==0?'text-blue cur':''" @tap="tabSelect(0)">
充电桩
</view> </view>
<view class="cu-item flex-sub" :class="active==1?'text-blue cur':''" @tap="tabSelect(1)">
订单
</view>
</view>
</scroll-view>
<view v-show="active == 0" class="margin-top-xs">
<view class="cu-list grid" :class="'col-2'"> <view class="cu-list grid" :class="'col-2'">
<view class="cu-item" @click="_toChargeDetail(item);" <view class="cu-item" @click="_toChargeDetail(item);" v-for="(item,index) in machines" :key="index">
v-for="(item,index) in machines" :key="index"> <view :class="['cuIcon-command','text-grey']"></view>
<view :class="['cuIcon-command','text-green']"></view>
<text>{{item.machineName}}</text> <text>{{item.machineName}}</text>
</view> </view>
</view> </view>
</view>
<view v-show="active == 1" class="margin-top-xs">
<no-data-page v-if="!orders || orders.length < 1"></no-data-page>
<view class="bg-white margin-bottom padding-sm margin-sm radius-sm" v-else v-for="(item,index) in orders"
:key="index">
<view class="apply-title flex justify-between">
<view>
<text class="text-bold">{{item.personName}}/{{item.personTel}}</text>
</view>
<view class="flex justify-start">
{{item.orderId}}
</view>
</view>
<view class="apply-content flex justify-start flex-wrap">
<view class="item">
<text>充电桩:</text>
<text>{{item.machineName}}>{{item.machineCode}}</text>
</view>
<view class="item">
<text>插座:</text>
<text>{{item.portCode}}</text>
</view>
<view class="item">
<text>充电小时:</text>
<text>{{item.chargeHours}}</text>
</view>
<view class="item">
<text>小时电价:</text>
<text>{{item.durationPrice}}</text>
</view>
<view class="item">
<text>充电量:</text>
<text>{{item.energy}}</text>
</view>
<view class="item">
<text>扣款金额:</text>
<text>{{item.amount}}</text>
</view>
<view class="item">
<text>开始时间:</text>
<text>{{item.startTime}}</text>
</view>
<view class="item">
<text>结束时间:</text>
<text>{{item.endTime}}</text>
</view>
<view class="item">
<text>状态:</text>
<text>{{item.stateName}}</text>
</view>
<view class="item">
<text>备注:</text>
<text>{{item.remark}}</text>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import {getChargeMachines} from '../../api/machine/machineApi.js'; import {
import {getCommunityId} from '../../api/community/communityApi.js'; getChargeMachines,
getChargeMachineOrder
} from '../../api/machine/machineApi.js';
import {
getCommunityId
} from '../../api/community/communityApi.js';
import { import {
hasOwner hasOwner
} from '@/api/owner/ownerApi.js'; } from '@/api/owner/ownerApi.js';
import noDataPage from '@/components/no-data-page/no-data-page.vue'
export default { export default {
data() { data() {
return { return {
topImg: this.imgUrl + '/h5/images/chargeMachine.jpg', topImg: this.imgUrl + '/h5/images/chargeMachine.jpg',
machines:[] machines: [],
active:0,
orders:[],
} }
}, },
onLoad(options) { onLoad(options) {
this._loadChargeMachines(); this._loadChargeMachines();
}, },
components:{
noDataPage
},
methods: { methods: {
_loadChargeMachines: function() { _loadChargeMachines: function() {
let _that = this; let _that = this;
@ -41,14 +116,32 @@
_that.machines = _data.data; _that.machines = _data.data;
}) })
}, },
_toCharge:function(_item){ _loadChargeMachineOrder:function(){
// this.vc.navigateTo({ let _that =this;
// url: '/pages/machine/machineToCharge?machineId='+_item.machineId+"&communityId="+_item.communityId getChargeMachineOrder({
// }); page: 1,
row: 100,
communityId: getCommunityId()
}).then(_data => {
_that.orders = _data.data;
})
},
tabSelect:function(_active){
this.active = _active;
if(this.active == 0){
this._loadChargeMachines();
return;
}
if(this.active == 1){
//listChargeMachinePortBmoImpl
this._loadChargeMachineOrder();
return;
}
}, },
_toChargeDetail: function(_item) { _toChargeDetail: function(_item) {
this.vc.navigateTo({ this.vc.navigateTo({
url: '/pages/machine/chargeDetail?machineId='+_item.machineId+"&communityId="+_item.communityId url: '/pages/machine/chargeDetail?machineId=' + _item.machineId + "&communityId=" + _item
.communityId
}); });
} }
@ -61,6 +154,7 @@
width: 100%; width: 100%;
height: 300rpx; height: 300rpx;
} }
text { text {
text-align: center; text-align: center;
} }