wy

pages/service-recode/components/recharge.vue

@@ -69,7 +69,7 @@
 					page: 1,
 					orderByWays: "desc", //降序
 				},
-				dataInfo: {}, //弹出框数据
+				dataInfo: [], //弹出框数据
 				titlenum: '充电明细',
 				time: [], //时间
 				chargerList: [], //充电机数据
@@ -150,7 +150,7 @@
 			//抽屉
 			charging(item) {
 				this.$refs.showRight.open();
-				this.dataInfo = item;
+				this.dataInfo = item.interval;
 				// console.log(item, 'item')
 			},
 			//充电机下拉选择事件

pages/service-recode/components/rechargeDrawer.vue

@@ -1,41 +1,146 @@
-<template>
-	<view>
-		<uni-forms :modelValue="infodata">
-			<uni-forms-item label="开始时间段:" name="name" label-align="right" label-width="120px">
-				<uni-easyinput type="text" v-model="infodata.chgBeginTime || '-'" placeholder="请输入" disabled/>
-			</uni-forms-item>
-			<uni-forms-item label="结束时间段:" name="name" label-align="right" label-width="120px">
-				<uni-easyinput type="text" v-model="infodata.chgEndTime || '-'" placeholder="请输入" disabled/>
-			</uni-forms-item>
-			<uni-forms-item label="充电量KWH:" name="name" label-align="right" label-width="120px">
-				<uni-easyinput type="text" v-model="infodata.chgCapacity || '-'" placeholder="请输入" disabled/>
-			</uni-forms-item>
-		</uni-forms>
-	</view>
-</template>
-
-<script>
-export default {
-	name:'rechargeDrawer',
-	props:['infodata'],
-	data() {
-		return {
-		
-		}
-	},
-	}
-
-	
+<template>
+	<view class="content_main">
+		<scroll-view style="height: 100%;" scroll-y="true">
+		<view class="CarnoData" v-if="!dat"></view>
+		<view class="Carlist" v-for="(item,index) in dat" :key="index">
+			<view class="carDetail">
+				<view class="vinMa">
+					<view>开始时间段</view>
+					<view>{{item.startTime }}</view>
+				</view>
+				<view class="box_vinma">
+					<view class="vinMa">
+						<view>结束时间段</view>
+						<view>{{item.endTime }}</view>
+					</view>
+					
+					<view class="vinMa">
+						<view>充电量kWh</view>
+						<view>{{item.chargePower}}</view>
+					</view>
+				</view>
+
+			</view>
+		</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'rechargeDrawer',
+		props: ['infodata'],
+		data() {
+			return {
+				dat:[{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				},
+				{
+					startTime:123,
+					endTime:456,
+					chargePower:789
+				}]
+			}
+		},
+	}
 </script>
 <style lang="scss" scoped>
-	::v-deep .uni-forms-item__content{
-		background: rgba(255,255,255,0);
+	::v-deep .uni-forms-item__content {
+		background: rgba(255, 255, 255, 0);
 		border-radius: 2px 2px 2px 2px;
 		border: 1px solid #263042;
-		.uni-easyinput__content{
+
+		.uni-easyinput__content {
 			background: none !important;
 			border: none !important;
 			color: #fff;
 		}
 	}
-</style>
+
+	.content_main {
+		height: 635px;
+	}
+
+	.CarnoData {
+		width: 274px;
+		height: 227px;
+		background-image: url('@/static/change/noData.png');
+		background-size: 100% 100%;
+		margin: 20px 43px;
+	}
+
+	.Carlist {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		.carDetail {
+			width: 360px;
+			height: 90px;
+			border-radius: 8px;
+			margin-bottom: 16px;
+			background-color:#1D283E ;
+			box-sizing: border-box;
+			padding: 20px;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+
+			.vinMa {
+				display: flex;
+
+				view:first-child {
+					width: 80px;
+					font-size: 14px;
+					font-weight: 400;
+					color: rgba(153, 174, 197, 0.65);
+				}
+
+				view:last-child {
+					flex: 1;
+					font-size: 14px;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 0.85);
+				}
+			}
+		}
+	}
+	.box_vinma{
+		display: flex;
+		.vinMa{
+			width: 50%;
+		}
+	}
+</style>