diff --git a/api/machine/machineApi.js b/api/machine/machineApi.js
index 5a955ea..f35d9d2 100644
--- a/api/machine/machineApi.js
+++ b/api/machine/machineApi.js
@@ -203,3 +203,27 @@ export function getChargeMachineOrder(_objData) {
 		});
 	});
 };
+
+/**
+ * 查询充电订单
+ */
+export function getMeterMachine(_objData) {
+	return new Promise((resolve, reject) => {
+		request({
+			url: url.listMeterMachine,
+			method: "GET",
+			data: _objData,
+			success: function(res) {
+				if (res.data.code != 0) {
+					reject(res.data.msg);
+					return;
+				}
+				resolve(res.data.data);
+			},
+			fail: function(res) {
+				reject(res);
+			}
+		});
+	});
+};
+
diff --git a/components/service/service-property.vue b/components/service/service-property.vue
index 67955b1..59255d4 100644
--- a/components/service/service-property.vue
+++ b/components/service/service-property.vue
@@ -75,6 +75,11 @@
 						src: this.imgUrl + '/h5/images/serve/12.png',
 						href: '/pages/fee/contractFeeList'
 					},
+					{
+						name: '水电充值',
+						src: this.imgUrl + '/h5/images/serve/5.png',
+						href: '/pages/meter/meter'
+					},
 					{
 						name: '家庭成员',
 						src: this.imgUrl + '/h5/images/serve/2.png',
diff --git a/constant/url.js b/constant/url.js
index c5e7966..e333c41 100755
--- a/constant/url.js
+++ b/constant/url.js
@@ -202,6 +202,7 @@ export default {
 	listChargeMachineOrder:baseUrl+"app/chargeMachine.listChargeMachineOrder", // 查询充电订单
 	saveExamineStaffValue:baseUrl+"app/examine.saveExamineStaffValue", // 查询充电订单
 	listExamineStaffValue:baseUrl+"app/examine.listExamineStaffValue", // 查询充电订单
+	listMeterMachine:baseUrl+"app/meterMachine.listMeterMachine",
 
 
 	NEED_NOT_LOGIN_PAGE: [
diff --git a/pages.json b/pages.json
index c9f4111..f40c464 100755
--- a/pages.json
+++ b/pages.json
@@ -838,6 +838,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/meter/meter",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "水电充值",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/meter/preStoreMeter",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "预存费用",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"tabBar": {
 		"color": "#272636",
diff --git a/pages/meter/meter.vue b/pages/meter/meter.vue
new file mode 100644
index 0000000..1564416
--- /dev/null
+++ b/pages/meter/meter.vue
@@ -0,0 +1,193 @@
+<template>
+	<view>
+		<view class="header_fixed">
+			<scroll-view v-if="rooms.length <5 && rooms.length >1" class="bg-white nav">
+				<view class="flex text-center">
+					<view class="cu-item flex-sub" :class="item.roomId==curRoom.roomId?'text-green cur':''" v-for="(item,index) in rooms"
+					 :key="index" @tap="switchRoom(item)" :data-id="index">
+						{{item.floorNum}}栋{{item.roomNum}}室
+					</view>
+				</view>
+			</scroll-view>
+			<scroll-view v-if="rooms.length >4" scroll-x class="bg-white nav" scroll-with-animation scroll-left="true">
+				<view class="cu-item flex-sub" :class="item.roomId==curRoom.roomId?'text-green cur':''" v-for="(item,index) in rooms"
+				 :key="index" @tap="switchRoom(item)" :data-id="index">
+					{{item.floorNum}}栋{{item.roomNum}}室
+				</view>
+			</scroll-view>
+		</view>
+		<view v-if="rooms.length == 1" class="block__title">{{rooms[0].floorNum}}栋{{rooms[0].roomNum}}室</view>
+		<view v-if="rooms.length > 1" class="margin-header-top"></view>
+		
+		<view v-if="noData == false" style="padding-bottom: 200rpx;">
+			<view class="cu-list menu" v-if="machines.length > 0" v-for="(machine, idx) in machines" :key="idx" :data-item="machine"
+			 @click="_preStoreWeterFee(machine)">
+				<view class="cu-item arrow">
+					<view class="content padding-tb-sm">
+							<view class="text-cut" style="width:220px">{{machine.machineName}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-else>
+			<no-data-page></no-data-page>
+		</view>
+	</view>
+</template>
+
+<script>
+	import context from '../../lib/java110/Java110Context.js';
+	const constant = context.constant;
+	import noDataPage from '@/components/no-data-page/no-data-page.vue'
+	
+	import {
+		getRooms
+	} from '../../api/room/roomApi.js';
+	
+	import {getCommunityId} from '../../api/community/communityApi.js'
+	
+	import {getMeterMachine} from '../../api/machine/machineApi.js';
+	
+	export default {
+		data() {
+			return {
+				rooms: [],
+				curRoom:{},
+				machines:[],
+				noData: false
+			}
+		},
+		components: {
+			noDataPage
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad: function(options) {
+			context.onLoad(options);
+			this._loadRooms();
+		},
+		methods: {
+			_loadRooms:function(){
+				let _that = this;
+				_that.noData = false;
+				getRooms().then(data => {
+					let _rooms = data.rooms;
+					this.rooms = _rooms;
+					if (_rooms.length == 0) {
+						_that.noData = true;
+						return;
+					}
+					_that.curRoom = _rooms[0];
+					_that._loadMeterMachines();
+				});
+			},
+			_loadMeterMachines:function(){
+				let _that = this;
+				getMeterMachine({
+					page:1,
+					row:10,
+					communityId:getCommunityId(),
+					roomId:this.curRoom.roomId,
+					machineModel:'1001'
+				}).then(_data=>{
+					_that.machines = _data;
+				})
+			},
+			switchRoom: function(_room) {
+				this.curRoom = _room;
+				this.noData = false;
+				this._loadMeterMachines();
+			},
+			_preStoreWeterFee:function(machine){
+				uni.navigateTo({
+					url:'/pages/meter/preStoreMeter?machineId='+machine.machineId+"&roomId="+machine.roomId
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.ppfl_footer{
+	  text-align: right;
+	}
+	.ppfl_footer .ppfl_footer_his{
+	  margin-right: 20rpx;
+	}
+	
+	.ppfl_c{
+	  padding: 0rpx 20rpx 20rpx 20rpx;
+	}
+	
+	.block__title {
+	  margin: 0;
+	  font-weight: 400;
+	  font-size: 14px;
+	  color: rgba(69,90,100,.6);
+	  padding: 40rpx 30rpx 20rpx;
+	}
+	
+	.ppfl_context{
+	  padding: 20rpx 40rpx 40rpx 40rpx;
+	  font-size: 28rpx;
+	  color: #8a8a8a;
+	}
+	
+	.ppfl_context .ppfl_context_row{
+	  margin-top: 30rpx;
+	}
+	
+	
+	.button_up_blank{
+	  height: 40rpx;
+	}
+
+	.solid-bottom::after {
+		border-bottom: 2upx solid rgba(0, 0, 0, 0.1);
+	}
+
+	.solid-top::after {
+		border-top: 2upx solid rgba(0, 0, 0, 0.1);
+	}
+
+	.margin-header-top {
+		height: 100upx;
+	}
+
+	/*  #ifdef  APP-PLUS || MP-WEIXIN  */
+	.header_fixed {
+		position: fixed;
+		top: 0upx;
+		left: 0;
+		width: 100%;
+		z-index: 2;
+	}
+
+	/*  #endif  */
+	/*  #ifdef  H5  */
+	/** //top: 80upx; **/
+	.header_fixed {
+		position: fixed;
+		top: 0upx;
+		left: 0;
+		width: 100%;
+		z-index: 2;
+	}
+
+	/*  #endif  */
+	.cu-btn.lgplus {
+		padding: 0 20px;
+		font-size: 18px;
+		height: 100upx;
+	
+	}
+	
+	.cu-btn.sharp {
+		border-radius: 0upx;
+	}
+	
+	.line-height {
+		line-height: 100upx;
+	}
+</style>
diff --git a/pages/meter/preStoreMeter.vue b/pages/meter/preStoreMeter.vue
new file mode 100644
index 0000000..260857e
--- /dev/null
+++ b/pages/meter/preStoreMeter.vue
@@ -0,0 +1,170 @@
+<template>
+	<view>
+		<view class="block__title">{{machineName}}充值</view>
+		<view class="cu-list menu">
+			<view class="cu-item">
+				<view class="content">
+					<text class="text-grey">费用</text>
+				</view>
+				<view class="action">
+					<text class="text-grey text-sm">{{feeConfigName}}</text>
+				</view>
+			</view>
+			<view class="cu-item">
+				<view class="content">
+					<text class="text-grey">剩余读数</text>
+				</view>
+				<view class="action">
+					<text class="text-grey text-sm">{{degree}}</text>
+				</view>
+			</view>
+			<view class="cu-item">
+				<view class="content">
+					<text class="text-grey">充值金额</text>
+				</view>
+				<view class="action">
+					<input v-model="amount" placeholder="请输入充值金额" type="number" class="text-right"></input>
+				</view>
+			</view>
+		</view>
+		
+		<view class=" bg-white  border flex justify-end" style="position: fixed;width: 100%;bottom: 0;">
+		
+			<view class="action text-orange margin-right line-height">
+				合计：{{amount}}元
+			</view>
+			<view class="btn-group">
+				<!-- #ifdef H5 || MP-WEIXIN -->
+				<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="onPayFee()">提交订单</button>
+				<!-- #endif -->
+				<!-- #ifdef APP-PLUS -->
+				<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="_payWxApp()">提交订单</button>
+				<!-- #endif -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// pages/account/myAccount.js
+	import context from '../../lib/java110/Java110Context.js';
+	import {getMeterMachine} from '../../api/machine/machineApi.js';
+	import {getCommunityId} from '@/api/community/communityApi.js';
+	
+	import {payFeeApp,payFeeWechat} from '@/api/fee/feeApi.js';
+	export default {
+		data() {
+			return {
+				machineId:'',
+				machineName:'',
+				feeConfigName:'',
+				degree:'0',
+				amount:'0',
+				appId:'',
+				communityId:'',
+				roomId:''
+			}
+		},
+		onLoad(options) {
+			this.machineId = options.machineId;
+			this.roomId = options.roomId;
+			this.loadMeterMachine();
+			// #ifdef MP-WEIXIN
+			let accountInfo = uni.getAccountInfoSync();
+			this.appId = accountInfo.miniProgram.appId;
+			// #endif
+			// #ifdef H5
+			this.appId = uni.getStorageSync(constant.mapping.W_APP_ID)
+			// #endif
+		},
+		methods: {
+			loadMeterMachine: function() {
+				let _that = this;
+				getMeterMachine({
+					page:1,
+					row:10,
+					communityId:getCommunityId(),
+					machineId:this.machineId,
+					roomId:this.roomId
+				}).then(_data=>{
+					_that.machineName=_data[0].machineName;
+					_that.feeConfigName=_data[0].feeConfigName;
+					_that.degree=_data[0].degree;
+					_that.amount=_data[0].amount;
+				})
+			},
+			_payWxApp: function(_data) {
+				if(!this.amount){
+					uni.showToast({
+						icon:'none',
+						title:'未填写金额'
+					});
+					return ;
+				}
+				let _receivedAmount = this.amount;
+				let _tradeType = 'APP';
+				payFeeApp(this,{
+					communityId:getCommunityId(),
+					roomId: this.roomId,
+					machineId: this.machineId,
+					feeName: this.feeConfigName+'充值',
+					receivedAmount: _receivedAmount,
+					tradeType: _tradeType,
+					appId: this.appId,
+				});
+				
+			},
+			onPayFee: function() {
+				if(!this.amount){
+					uni.showToast({
+						icon:'none',
+						title:'未填写金额'
+					});
+					return ;
+				}
+				let _receivedAmount = this.amount;
+				let _tradeType = 'JSAPI';
+				
+				payFeeWechat(this,{
+					business: "preStoreMeter",
+					communityId:getCommunityId(),
+					roomId: this.roomId,
+					machineId: this.machineId,
+					feeName: this.feeConfigName+'充值',
+					receivedAmount: _receivedAmount,
+					tradeType: _tradeType,
+					appId: this.appId,
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.block__title {
+		margin: 0;
+		font-weight: 400;
+		font-size: 14px;
+		color: rgba(69, 90, 100, .6);
+		padding: 40rpx 30rpx 20rpx;
+	}
+	
+	.button_up_blank {
+		height: 40rpx;
+	}
+	
+	.cu-btn.lgplus {
+		padding: 0 20px;
+		font-size: 18px;
+		height: 100upx;
+	
+	}
+	
+	.cu-btn.sharp {
+		border-radius: 0upx;
+	}
+	
+	.line-height {
+		line-height: 100upx;
+	}
+</style>