wuye/wuyeH5/pages/index/index.vue

<template>
	<view class="content">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1" labelWidth="80">
			<u-form-item label="楼号" prop="name" borderBottom ref="item1">
				<u--input v-model="userInfo.name" border="none" placeholder="请输入楼号"></u--input>
			</u-form-item>
			<u-form-item label="单元号" prop="name" borderBottom ref="item1">
				<u--input v-model="userInfo.name1" border="none" placeholder="请输入单元号"></u--input>
			</u-form-item>
			<u-form-item label="房间号" prop="name" borderBottom ref="item1">
				<u--input v-model="userInfo.name2" border="none" placeholder="请输入房间号"></u--input>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="查询" @click="selectInfo"></u-button>
		<u-toast ref="uToast"></u-toast>
		<view class="fy-detail">
			<view class="title">
				户主信息
			</view>
			<view class="row">
				<view class="left">
					户主：
				</view>
				<view class="">
					王洋
				</view>
			</view>
			<view class="row">
				<view class="left">
					房源号：
				</view>
				<view class="">
					1-1-602
				</view>
			</view>
			<view class="row">
				<view class="left">
					实际面积：
				</view>
				<view class="">
					110.1
				</view>
			</view>
			<view class="title">
				费用明细：
			</view>
			<view class="row">
				<view class="left">
					物业费：
				</view>
				<view class="">
					2,114
				</view>
			</view>
			<view class="row">
				<view class="left">
					电梯费：
				</view>
				<view class="">
					110.1
				</view>
			</view>
			<view class="row">
				<view class="left">
					车位管理费：
				</view>
				<view class="">
					110.1
				</view>
			</view>
			<view class="row">
				<view class="left">
					车库管理费：
				</view>
				<view class="">
					110.1
				</view>
			</view>
			<view class="row">
				<view class="left">
					仓库管理费：
				</view>
				<view class="">
					110.1
				</view>
			</view>
			<view class="row">
				<view class="left">
					垃圾清运费：
				</view>
				<view class="">
					110.1
				</view>
			</view>
		</view>
		<view class="total">
			<view class="left">
				应缴费总合计：
			</view>
			<view class="">
				110.1
			</view>
		</view>
		<u-button type="primary" text="去付款" @click="pay" class="pay"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				userInfo: {
					name: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写楼号',
						trigger: ['blur']
					},
					'name1': {
						type: 'string',
						required: true,
						message: '请填写单元号',
						trigger: ['blur']
					},
					'name2': {
						type: 'string',
						required: true,
						message: '请填写房间号',
						trigger: ['blur']
					}
				}
			};
		},
		methods: {
			pay() {
				console.log("去付款")
			},
			selectInfo() {
				this.$request.baseRequest('sunServiceOrderApp', 'payment', {
					sunServiceOrder: JSON.stringify(this.dataObj)
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res)
				})

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

	.fy-detail {
		.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>