查看缴费详情

apis/finance.js

@@ -161,3 +161,14 @@ export function helpList (data) {
 } 
 
 
+
+
+export function priceList(data) {
+	var url='/mobile/chargingPrice/priceList';
+	return request({
+		jp_identity:"merchantUser",// 分润接口
+		method: 'post',
+		data: data,
+		url: url
+	})
+}

pagesFinance/user/chargingDetails.vue

@@ -1,302 +1,294 @@
-<template>
-	<view >
-		<u-navbar title="充电价格详情"></u-navbar>
-		
- <!-- 主体 -->
-<!-- 充电桩信息 -->
-       <view class="main">
-		   
-	    <!-- 收费标准 -->
-		<view class="rates">
-			<view class="rates-title">
-				<view class="title-left">
-					收费标准
-				</view>
-				<view class="title-right">
-					峰谷平电价计费
-				</view>
-				
-			</view>
-			<!-- 时段分类 -->
-		<view class="time-rates">
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						00:00-07:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						00:70-09:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						09:00-15:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						15:00-20:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						20:00-22:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						22:00-23:00
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view class="time-part">
-				<view class="part-top">
-					<view class="time">
-						23:00-23:59
-					</view>
-					<view class="price">
-						
-						<text class="price-number">1.2500</text>
-						<text class="price-unit">元/度</text>
-					</view>
-				</view>
-				<view class="part-bottom">
-					<view class="unitPrice-servicePrice">
-						充电单价：￥1.0000 | 服务费：￥0.2500
-					</view>
-				</view>
-			</view>
-			<view style="
-    text-align: center;
-    color: #999999;
-">*充电费用仅供参考，请以充电桩上的费用为准。</view>
+<template>
+	<view>
+		<u-navbar title="充电价格详情"></u-navbar>
+
+		<!-- 主体 -->
+		<!-- 充电桩信息 -->
+		<view class="main">
+			<!-- 收费标准 -->
+						<view class="rates" v-if="prices&&prices.length">
+							<view class="rates-title">
+								<view class="title-left">
+									收费标准
+								</view>
+								<view class="title-right">
+									充电功率计费
+								</view>
 			
-		</view>
-
-		</view >
+							</view>
+							<!-- 时段分类 -->
+							<view class="time-rates">
+								
+								<view class="time-part" v-for="(item,index) in prices" :key="index">
+									<view class="part-top">
+										<view class="time">
+											{{item.minPower}}W-{{item.maxPower}}W
+										</view>
+										<view class="price">
 			
-		 
-	   </view>
-<!-- 底部按钮 -->
- 
-	</view>
-	
-	
-</template>
-<script>
-	export default {
-		data() {
-		return{
+											<text class="price-number">{{item.price}}</text>
+											<text class="price-unit">元每小时</text>
+										</view>
+									</view>
+									<!-- <view class="part-bottom">
+										<view class="unitPrice-servicePrice">
+											充电单价：￥{{item.costPrice}} | 服务费：￥{{item.servicePrice}}
+										</view>
+									</view> -->
+								</view>
+							 
+								<view style="
+			    text-align: center;
+			    color: #999999;
+			">*充电费用仅供参考，请以充电桩上的费用为准。</view>
 			
-			description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
-		}
-		}
-	}
-</script>
-
-
-<style lang="scss">
-	// 头部
-	.title {
-		width: 100%;
-		line-height: 44px;
-		background-color: rgba(255, 255, 255, 100);
-		text-align: center;
-		border: 1px solid rgba(242, 242, 242, 100);
-		position: fixed;
-		top: 0;
+							</view>
+			
+						</view>
+						
+			<!-- 收费标准 -->
+			<view class="rates" v-if="carPrices&&carPrices.length">
+				<view class="rates-title">
+					<view class="title-left">
+						收费标准
+					</view>
+					<view class="title-right">
+						峰谷平电价计费
+					</view>
+
+				</view>
+				<!-- 时段分类 -->
+				<view class="time-rates">
+					
+					<view class="time-part" v-for="(item,index) in carPrices" :key="index">
+						<view class="part-top">
+							<view class="time">
+								{{item.startTime}}-{{item.endTime}}
+							</view>
+							<view class="price">
+
+								<text class="price-number">{{item.electricityPrice}}</text>
+								<text class="price-unit">元/度</text>
+							</view>
+						</view>
+						<view class="part-bottom">
+							<view class="unitPrice-servicePrice">
+								充电单价：￥{{item.costPrice}} | 服务费：￥{{item.servicePrice}}
+							</view>
+						</view>
+					</view>
+				 
+					<view style="
+    text-align: center;
+    color: #999999;
+">*充电费用仅供参考，请以充电桩上的费用为准。</view>
+
+				</view>
+
+			</view>
+
+
+		</view>
+		<!-- 底部按钮 -->
+
+	</view>
+
+
+</template>
+<script>
+	import * as API from '@/apis/finance.js'
+
+	export default {
+		data() {
+			return {
+				id:'',
+				carPrices: [],
+				device: [],
+				prices: null,
+				description: '温馨提示：充电前请确保您的车辆已与充电桩连接！并关闭车内电源。'
+			}
+		},
+		onLoad(op) {
+			if(op){
+				this.id=op.id
+					this.getInfo()
+			}
+		},
+		onReady() {
 		
-	}
-	
-	// 主体
-	.main{
-		width: 100%;
-		//margin-top: 44px;
-		// margin-bottom: 64px;
-		//padding-bottom: 234px;
-		.main-detail{
-			display: flex;
-			justify-content: space-between;
-			padding: 14px 16px 0 0;
-			height: 48px;
-			line-height: 48px;
-			background-color: #fff;
-			border-bottom: 1px solid rgba(242, 242, 242, 100);
-			.detail-name{
-               margin-left: 16px;
-				height: 20px;
-				line-height: 23px;
-				color: rgba(102, 102, 102, 100);
-				font-size: 14px;
+		},
+		methods: {
+			getInfo(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				API.priceList({
+					deviceNo:this.id
+				}).then((res) => {
 				
-			}
-			.detail-content{
-				height: 23px;
-				line-height: 23px;
-				color: rgba(51, 51, 51, 100);
-				font-size: 14px;
+					this.carPrices=res.data.carPrices
+					this.device=res.data.device
+					this.prices=res.data.prices
 				
+					uni.hideLoading()
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error
+					})
+				})
 			}
-		}
-		// 收费标准
-	   .rates{
-		   width: 100%;
-		   background-color: #fff;
-		   margin-top: 12px;
-		   .rates-title{
-			   display: flex;
-			   justify-content: space-between;
-			   height: 48px;
-			   line-height: 48px;
-			   padding: 0px 16px 0 ;
-			   border-bottom: 1px solid rgba(242, 242, 242, 100);
-		   }
-		   .time-part{
-			   width: 100%;
-			   .part-top{
-				   display: flex;
-				   justify-content: space-between;
-				   padding: 16px;
-				   .time{
-					   color: rgba(16, 16, 16, 100);
-					   font-size: 16px;
-				   }
-				   .price{
-					   .price-number{
-						   color: rgba(255, 61, 0, 100);
-						   font-size: 18px;
-						   text-align: right;
-						   font-family: Roboto-regular;
-						   display: inline-block;
-						   height: 20px;
-						   font-weight: 600;
-					   }
-					   .price-unit{
-						   color: rgba(102, 102, 102, 100);
-						   font-size: 14px;
-						   text-align: right;
-						   margin-left: 4px;
-						   display: inline-block;
-						   height: 20px;
-					   }
-				   }
-			   }
-			   .part-bottom{
-				   .unitPrice-servicePrice{
-					   eight: 18px;
-					   color: rgba(136, 136, 136, 100);
-					   font-size: 12px;
-					   text-align: right;
-					   padding-right: 16px;
-					   padding-bottom: 18px;
-				   }
-			   }
-		   }
-	   }
-	 .tips{
-		
-		 font-size: 12px;
-		 margin-top: 24px;
-		 /deep/.u-alert-desc[data-v-4d234687]{
-		 			 font-size: 12px
-		 }
-	 }
-	}
-	
-	// 尾部
-	.bottom{
-		background-color: #fff;;
-		width: 100%;
-		height: 64px;
-		line-height: 64px;
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		z-index:999;
-		padding: 12px 16px;
-		.botton{
-			width: 343px;
-			height: 40px;
-			line-height: 40px;
-			border-radius: 50px;
-			background-color: rgba(0, 185, 98, 100);
-			color: rgba(255, 255, 255, 100);
-			font-size: 16px;
-			text-align: center;
-			margin: 0 auto;
-		}
-		
-	}
+		}
+	}
+</script>
+
+
+<style lang="scss">
+	// 头部
+	.title {
+		width: 100%;
+		line-height: 44px;
+		background-color: rgba(255, 255, 255, 100);
+		text-align: center;
+		border: 1px solid rgba(242, 242, 242, 100);
+		position: fixed;
+		top: 0;
+
+	}
+
+	// 主体
+	.main {
+		width: 100%;
+
+		//margin-top: 44px;
+		// margin-bottom: 64px;
+		//padding-bottom: 234px;
+		.main-detail {
+			display: flex;
+			justify-content: space-between;
+			padding: 14px 16px 0 0;
+			height: 48px;
+			line-height: 48px;
+			background-color: #fff;
+			border-bottom: 1px solid rgba(242, 242, 242, 100);
+
+			.detail-name {
+				margin-left: 16px;
+				height: 20px;
+				line-height: 23px;
+				color: rgba(102, 102, 102, 100);
+				font-size: 14px;
+
+			}
+
+			.detail-content {
+				height: 23px;
+				line-height: 23px;
+				color: rgba(51, 51, 51, 100);
+				font-size: 14px;
+
+			}
+		}
+
+		// 收费标准
+		.rates {
+			width: 100%;
+			background-color: #fff;
+			margin-top: 12px;
+
+			.rates-title {
+				display: flex;
+				justify-content: space-between;
+				height: 48px;
+				line-height: 48px;
+				padding: 0px 16px 0;
+				border-bottom: 1px solid rgba(242, 242, 242, 100);
+			}
+
+			.time-part {
+				width: 100%;
+
+				.part-top {
+					display: flex;
+					justify-content: space-between;
+					padding: 16px;
+
+					.time {
+						color: rgba(16, 16, 16, 100);
+						font-size: 16px;
+					}
+
+					.price {
+						.price-number {
+							color: rgba(255, 61, 0, 100);
+							font-size: 18px;
+							text-align: right;
+							font-family: Roboto-regular;
+							display: inline-block;
+							height: 20px;
+							font-weight: 600;
+						}
+
+						.price-unit {
+							color: rgba(102, 102, 102, 100);
+							font-size: 14px;
+							text-align: right;
+							margin-left: 4px;
+							display: inline-block;
+							height: 20px;
+						}
+					}
+				}
+
+				.part-bottom {
+					.unitPrice-servicePrice {
+						eight: 18px;
+						color: rgba(136, 136, 136, 100);
+						font-size: 12px;
+						text-align: right;
+						padding-right: 16px;
+						padding-bottom: 18px;
+					}
+				}
+			}
+		}
+
+		.tips {
+
+			font-size: 12px;
+			margin-top: 24px;
+
+			/deep/.u-alert-desc[data-v-4d234687] {
+				font-size: 12px
+			}
+		}
+	}
+
+	// 尾部
+	.bottom {
+		background-color: #fff;
+		;
+		width: 100%;
+		height: 64px;
+		line-height: 64px;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 999;
+		padding: 12px 16px;
+
+		.botton {
+			width: 343px;
+			height: 40px;
+			line-height: 40px;
+			border-radius: 50px;
+			background-color: rgba(0, 185, 98, 100);
+			color: rgba(255, 255, 255, 100);
+			font-size: 16px;
+			text-align: center;
+			margin: 0 auto;
+		}
+
+	}
 </style>

pagesFinance/user/deviceDetails.vue

@@ -15,7 +15,7 @@
 		 style="
 		     color: #5a8eef;
 		 "
-		 @click="gotoUrl('pagesFinance/user/chargingDetails?id='+id)" >查看详情</span></view>
+		 @click="gotoUrl('pagesFinance/user/chargingDetails?id='+detail.deviceNo)" >查看详情</span></view>
 		
 		
 		</view>