完成缴费明细

pages/report/reportPayFeeDetail.vue

@@ -5,16 +5,40 @@
 				<input type="text" class="q-input" placeholder="输入房屋号" v-model="roomName"></input>
 			</view>
 			<view class="q-item">
-				<input type="text" class="q-input" placeholder="输入开始时间" v-model="startTime" ></input>
+				<view class=" arrow q-input">
+					<picker mode="date" :value="startTime" class="" start="2020-09-01" end="2050-09-01"
+						@change="startTimeChange">
+						<view class="picker">
+							{{startTime||'请选择'}}
+						</view>
+					</picker>
+				</view>
 			</view>
 			<view class="q-item">
-				<input type="text" class="q-input" placeholder="输入结束时间" v-model="endTime"></input>
+				<view class=" arrow q-input">
+					<picker mode="date" :value="endTime"  start="2020-09-01" end="2050-09-01"
+						@change="endTimeChange">
+						<view class="picker">
+							{{endTime||'请选择'}}
+						</view>
+					</picker>
+				</view>
 			</view>
 			<view class="q-item">
-				<input type="text" class="q-input" placeholder="费用项" v-model="endTime"></input>
+				<picker bindchange="PickerChange" :value="feeTypeIndex" :range-key="'name'" :range="feeTypeCds"
+				 @change="feeTypeChange">
+					<view class="picker">
+						{{feeTypeIndex==-1 ? "请选择" : feeTypeCds[feeTypeIndex].name}}
+					</view>
+				</picker>
 			</view>
 			<view class="q-item">
-				<input type="text" class="q-input" placeholder="支付方式" v-model="endTime"></input>
+				<picker bindchange="PickerChange" :value="primeRateIndex" :range-key="'name'" :range="primeRates"
+				 @change="primeRateChange">
+					<view class="picker">
+						{{primeRateIndex==-1 ? "请选择" : primeRates[primeRateIndex].name}}
+					</view>
+				</picker>
 			</view>
 			<view class="q-item-btn">
 				<button class="cu-btn  line-blue round q-input" @click="_loadFeeDetails">搜索</button>
@@ -26,7 +50,8 @@
 		</view>
 
 		<view class="margin-top" v-if="feeDetails.length > 0">
-			<view class="bg-white margin-bottom padding-sm margin-sm radius-sm" v-for="(item,index) in feeDetails" :key="index" >
+			<view class="bg-white margin-bottom padding-sm margin-sm radius-sm" v-for="(item,index) in feeDetails"
+				:key="index">
 				<view class="apply-title flex justify-between">
 					<view>
 						<text class="text-bold">{{item.objName}}/{{item.ownerName}}</text>
@@ -35,7 +60,7 @@
 					<view class="flex justify-start">
 						<!-- <button class="cu-btn round sm line-black margin-left-sm"
 							@tap="_toApplyDetail(item)">详情</button> -->
-							{{item.createTime}}
+						{{item.createTime}}
 					</view>
 				</view>
 				<view class="apply-content flex justify-start flex-wrap">
@@ -75,39 +100,89 @@
 </template>
 
 <script>
-	import {queryPayFeeDetail} from '@/api/fee/feeDetail.js' ;
+	import {
+		queryPayFeeDetail
+	} from '@/api/fee/feeDetail.js';
+	import {queryDictInfo} from '@/api/apply/apply.js';
 	export default {
 		data() {
 			return {
-				feeDetails:[],
+				feeDetails: [],
-				roomName:'',
+				roomName: '',
-				startTime:'',
+				startTime: '',
-				endTime:'',
+				endTime: '',
-				allReceivableAmount:'',
+				allReceivableAmount: '',
-				allReceivedAmount:'',
+				allReceivedAmount: '',
-				
+				feeTypeCds: [],
+				feeTypeCd:'',
+				feeTypeIndex:'-1',
+				primeRates: [],
+				primeRate:'',
+				primeRateIndex:'-1'
 			}
 		},
 		onLoad() {
 
 			this._loadFeeDetails();
+			this._loadQuery();
 
 		},
 		methods: {
 
-			_loadFeeDetails:function(){
+			_loadFeeDetails: function() {
 				let _that = this;
-				queryPayFeeDetail(this,{
+				queryPayFeeDetail(this, {
-					communityId:this.getCommunityId(),
+					communityId: this.getCommunityId(),
-					page:1,
+					feeTypeCd:this.feeTypeCd,
-					row:100
+					primeRate:this.primeRate,
-				}).then(_data =>{
+					roomName:this.roomName,
+					startTime:this.startTime,
+					endTime:this.endTime,
+					page: 1,
+					row: 100
+				}).then(_data => {
 					_that.feeDetails = _data.data;
 					_that.allReceivableAmount = _data.sumTotal.allReceivableAmount;
 					_that.allReceivedAmount = _data.sumTotal.allReceivedAmount;
 				})
-			}
+			},
-
+			startTimeChange: function(e) {
+				this.startTime = e.detail.value;
+			},
+			endTimeChange:function(e){
+				this.endTime = e.detail.value;
+			},
+			_loadQuery:function(){
+				let _that = this;
+				queryDictInfo(this,{
+					'name': "pay_fee_config",
+					'type': "fee_type_cd",
+				}).then(_data=>{
+					_that.feeTypeCds = _data;
+				});
+				queryDictInfo(this,{
+					'name': "pay_fee_detail",
+					'type': "prime_rate",
+				}).then(_data=>{
+					_that.primeRates = _data;
+				})
+			},
+			feeTypeChange: function(e) {
+				this.feeTypeIndex = e.target.value //取其下标
+				let selected = this.feeTypeCds[this.feeTypeIndex] //获取选中的数组
+				if(!selected){
+					return;
+				}
+				this.feeTypeCd = selected.statusCd; //选中的id
+			},
+			primeRateChange: function(e) {
+				this.primeRateIndex = e.target.value //取其下标
+				let selected = this.primeRates[this.primeRateIndex] //获取选中的数组
+				if(!selected){
+					return;
+				}
+				this.primeRate = selected.statusCd; //选中的id
+			},
 		}
 	}
 </script>
@@ -115,39 +190,46 @@
 <style lang="scss">
 	.q-query {
 		background-color: #FFF;
-		padding:15upx;
+		padding: 15upx;
 
-		.q-item{
+		.q-item {
 			width: 30%;
 			margin-left: 15upx;
 			padding: 10upx 15upx;
 			border-radius: 15upx;
 			background-color: #f1f1f1;
-			.q-input{
+
+			.q-input {
 				height: 40upx;
 			}
+
 			margin-bottom: 15upx;
 		}
-		.q-item-btn{
+
+		.q-item-btn {
 			width: 30%;
 			margin-left: 15upx;
-			.q-input{
+
+			.q-input {
 				height: 60upx;
 			}
 		}
 	}
-	.apply-title{
+
+	.apply-title {
 		height: 60upx;
 		line-height: 50upx;
 		border-bottom: 1upx solid #F1F1F1;
 	}
-	.apply-content{
+
-		.item{
+	.apply-content {
+		.item {
 			width: 50%;
-			margin-top:20upx;
+			margin-top: 20upx;
 		}
 	}
-	.radius-sm{
+
+	.radius-sm {
 		border-radius: 16upx;
 	}
 </style>