wuye/wuyeH5/pages/index/index.vue

<template>
	<view class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="param" :rules="rules" ref="form1" labelWidth="80">
			<u-form-item label="楼号" prop="name" borderBottom ref="item1">
				<u--input v-model="param.buildingNo" border="none" placeholder="请输入楼号(例:1)" type='number'>
				</u--input>
			</u-form-item>
			<u-form-item label="单元号" prop="name" borderBottom ref="item1">
				<u--input v-model="param.unitNo" border="none" placeholder="请输入单元号(例:2)" type='number'>
				</u--input>
			</u-form-item>
			<u-form-item label="房间号" prop="name" borderBottom ref="item1">
				<u--input v-model="param.floor" border="none" placeholder="请输入房间号(例:501)" type='number'>
				</u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="查询" @click="selectInfo"></u-button>
		<u-toast ref="uToast"></u-toast>
		<view class="content1" v-if="isSHowInfo">
			<view class="fy-detail">
				<view class="title">
					户主信息
				</view>
				<view class="row">
					<view class="left">
						户主：
					</view>
					<view class="">
						{{wuyeAmountInfo.householder}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						房源号：
					</view>
					<view class="">
						{{wuyeAmountInfo.sourceNumber}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						实际面积：
					</view>
					<view class="">
						{{wuyeAmountInfo.actualMoney}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						付款状态：
					</view>
					<view v-if="wuyeAmountInfo.totalActualPayment==0" style="color:red">
						未支付
					</view>
					<view v-else style="color:#21d261">
						已支付{{wuyeAmountInfo.totalActualPayment}}元
					</view>
				</view>
				<view class="title-qj">
					缴费区间：{{wuyeAmountInfo.paymentRange}}
				</view>
				<view class="title">
					费用明细：
				</view>
				<view class="row">
					<view class="left">
						物业费：
					</view>
					<view class="">
						{{wuyeAmountInfo.propertyFee}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						电梯费：
					</view>
					<view class="">
						{{wuyeAmountInfo.elevatorFee}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						车位管理费：
					</view>
					<view class="">
						{{wuyeAmountInfo.parkingSpace}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						车库管理费：
					</view>
					<view class="">
						{{wuyeAmountInfo.garage}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						仓库管理费：
					</view>
					<view class="">
						{{wuyeAmountInfo.warehouse}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						垃圾清运费：
					</view>
					<view class="">
						{{wuyeAmountInfo.garbageClearing}}
					</view>
				</view>
			</view>
			<view class="total">
				<view class="left">
					应缴费总合计：
				</view>
				<view class="">
					{{total}}元
				</view>
			</view>
			<u-button type="primary" text="去付款" @click="pay" class="pay"></u-button>
		</view>
		<!-- <u-popup :show="isShowCode" @close="isShowCode= false" @open="open" mode="center">

		</u-popup> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSHowInfo: false,
				isShowCode: false,
				param: {
					buildingNo: '',
					unitNo: '',
					floor: '',
				},
				wuyeAmountInfo: {
					buildingNo: '',
					unitNo: '',
					floor: '',
				},
				rules: {
					'buildingNo': {
						type: 'string',
						required: true,
						message: '请填写楼号',
						trigger: ['blur', 'change']
					},
					'unitNo': {
						type: 'string',
						required: true,
						message: '请填写单元号',
						trigger: ['blur', 'change']
					},
					'floor': {
						type: 'string',
						required: true,
						message: '请填写房间号',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		computed: {
			total() {
				let _totalPrice = Number(this.wuyeAmountInfo.propertyFee) + Number(this.wuyeAmountInfo.elevatorFee) +
					Number(this.wuyeAmountInfo.parkingSpace) + Number(this.wuyeAmountInfo.garage) + Number(this
						.wuyeAmountInfo.warehouse) + Number(this.wuyeAmountInfo.garbageClearing)
				return _totalPrice;
			},
		},
		onShow() {
			if (this.param.buildingNo&&this.param.unitNo&&this.param.floor) {
				this.selectInfo()
			}
			
		},
		methods: {
			pay() {
				console.log("去付款")
				this.isShowCode = true
				uni.navigateTo({
					url: '/pages/pay/pay?price=' + this.total + "&id=" + this.wuyeAmountInfo.id
				})

			},
			selectInfo() {
				if (!this.param.buildingNo) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入楼号！',
					})
					return
				}
				if (!this.param.unitNo) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入单元号！',
					})
					return
				}
				if (!this.param.floor) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入房间号！',
					})
					return
				}

				uni.showLoading({
					title:"查询中"
				})
				this.$request.baseRequest('wuyeAmountInfoApp', 'getInfo', {
					wuyeAmountInfo: JSON.stringify(this.param)
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					this.isSHowInfo = false
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					if(res.data){
						this.isSHowInfo = true
						this.wuyeAmountInfo = res.data
					}
					uni.hideLoading()
				})

			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.content {
		padding: 0 40rpx;
	}

	.fy-detail {
		.title-qj {
			font-weight: 700;
			margin: 20rpx 0;
		}

		.title {
			font-size: 36rpx;
			font-weight: 700;
			margin: 20rpx 0;
		}

		.row {
			display: flex;

			.left {
				width: 200rpx;
			}
		}
	}

	.total {
		display: flex;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 700;

		.left {
			width: 260rpx;
		}
	}

	.pay {
		margin-top: 50rpx;
	}
</style>