Merge branch 'master' of http://47.92.161.104:10080/zkx/JP-ChargeTeam51 into master

pages/record/details.vue

@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<u-navbar title="收益详情"></u-navbar>
+		<view class="details">
+			<view class="details-head">
+				<u-icon name="charging-pile-fill" custom-prefix="custom-icon" color="#27B148" size="48"></u-icon>
+				<h4>荆鹏软件园充电站</h4>
+			</view>
+			<view class="details-main">
+				<view class="details-price">
+					<span>￥</span><h3>15.00</h3><span>元</span>
+				</view>
+				<p>订单总额</p>
+			</view>
+			<view class="details-row"><p>电费(元)</p><span>￥400.00</span></view>
+			<view class="details-row"><p>服务费(元)</p><span>￥100.00</span></view>
+		</view>
+		<view class="details">
+			<view class="details-title">
+				<h4>充电详情</h4>
+			</view>
+			<view class="details-row"><p>消费电量(kW-h)</p><span>40.000</span></view>
+			<view class="details-row"><p>开始时间</p><span>2022-05-01 10:00:00</span></view>
+			<view class="details-row"><p>结束时间</p><span>2022-05-01 11:59:59</span></view>
+			<view class="details-row"><p>充电时长</p><span>1小时59分59秒</span></view>
+		</view>
+		<view class="details">
+			<view class="details-title">
+				<h4>更多信息</h4>
+			</view>
+			<view class="details-row"><p>结束原因</p><span>用户手动结束</span></view>
+			<view class="details-row"><p>订单状态</p><span>已缴费</span></view>
+			<view class="details-row"><p>充电桩编号</p><span>A000152</span></view>
+			<view class="details-row"><p>更新时间</p><span>2022-05-01 12:00:00</span></view>
+			<view class="details-row"><p>充电车辆</p><span>鄂D999999</span></view>
+		</view>
+		<view class="detailsBtn">
+			<u-button class="detailsBtn-btn" type="primary" shape="circle" plain>返回</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					name: '',
+					intro: '',
+				},
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+<style>
+	page{
+		background-color: #F7F7F7;
+	}
+</style>
+<style lang="scss" scoped>
+	.detailsBtn{
+		margin: 16px;
+		.detailsBtn-btn{
+			border-color:#00B962!important;
+			border-radius: 8px!important;
+			background: none!important;
+			color:#00B962!important;
+		}
+	}
+	.details-title{
+		margin-bottom: 16px;
+		h4{
+			font-weight: normal;
+			font-size: 16px;
+			position: relative;
+			padding-left:10px;
+			&::after{
+				content: '';
+				position: absolute;
+				height: 12px;
+				width: 4px;
+				background-color: #27B148;
+				left: 0;
+				top:5px;
+			}
+		}
+	}
+	.details-row{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 15px;
+		p{color:#888}
+	}
+	.details{
+		margin: 16px;
+		padding: 20px;
+		background-color: #fff;
+		border-radius: 8px;
+		.details-head{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			h4{
+				font-size: 18px;
+				font-weight: normal;
+				margin-left: 4px;
+			}
+		}
+		.details-price{
+			margin-top: 28px;
+			display: flex;
+			align-items: flex-end;
+			justify-content: center;
+			h3{
+				font-size: 36px;
+				color:#FF6200;
+				line-height: 36px;
+				margin: 0  4px;
+				font-weight: normal;
+			}
+			span{
+				font-size: 20px;
+				color:#FF6200;
+			}
+		}
+		.details-main{
+			text-align: center;
+			margin-bottom: 20px;
+			p{
+				color:#777;
+				margin-top: 4px;
+			}
+		}
+	}
+</style>

pages/record/index.vue

@@ -0,0 +1,129 @@
+<template>
+	<view>
+		<u-navbar title="充电订单"></u-navbar>
+		
+		<view class="record">
+			<view class="recordTime">
+				<p>5月</p>
+				<u-icon name="arrow-down-s-fill" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
+			</view>
+			<view class="recordList">
+				<view class="recordList-item">
+					<view class="recordList-name">
+						<h4>荆鹏软件园充电站/A0001</h4>
+						<span class="state1">排队中</span>
+					</view>
+					<view class="recordList-row">
+						<p>开始时间：2022-05-05 12:00:00</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电电量：20.000kW-h</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电时长：10分20秒</p>
+						<h4>61.50</h4>
+					</view>
+				</view>
+				<view class="recordList-item">
+					<view class="recordList-name">
+						<h4>荆鹏软件园充电站/A0001</h4>
+						<span class="state2">进行中</span>
+					</view>
+					<view class="recordList-row">
+						<p>开始时间：2022-05-05 12:00:00</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电电量：20.000kW-h</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电时长：10分20秒</p>
+						<h4>61.50</h4>
+					</view>
+				</view>
+				<view class="recordList-item">
+					<view class="recordList-name">
+						<h4>荆鹏软件园充电站/A0001</h4>
+						<span class="state3">已结束</span>
+					</view>
+					<view class="recordList-row">
+						<p>开始时间：2022-05-05 12:00:00</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电电量：20.000kW-h</p>
+					</view>
+					<view class="recordList-row">
+						<p>充电时长：10分20秒</p>
+						<h4>61.50</h4>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.recordTime{
+		height: 44px;
+		background-color: #fff;
+		border-bottom: 1px solid #F2F2F2;
+		display: flex;
+		align-items: center;
+		padding: 0 16px;
+		p{
+			margin-right: 4px;
+		}
+	}
+	.recordList{
+		background-color: #fff;
+	}
+	.recordList-item{
+		background-color: #fff;
+		border-bottom: 1px solid #ededed;
+		margin-left: 16px;
+		padding: 16px 16px 16px 0;
+		.recordList-name{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 12px;
+			h4{
+				font-weight: normal;
+				font-size: 15px;
+			}
+			.state1{
+				color:#8161FF;
+			}
+			.state2{
+				color:#00B962;
+			}
+			.state3{
+				color:#666666;
+			}
+		}
+		.recordList-row{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 8px;
+			p{
+				color:#888;
+			}
+			h4{
+				font-size: 16px;
+			}
+		}
+	}
+</style>