waterpay_h5/pages/pay/pay.vue

<template>
	<view class="container">
		<view class="body">
			<view class="form">

				<view class="form_item">
					<view class="form_item_key">收费单位</view>
					<view class="form_item_value">南昌交通学院</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">宿舍</view>
					<view class="form_item_value">{{room}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">时间</view>
					<view class="form_item_value">{{info.title}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">上月表数</view>
					<view class="form_item_value">{{info.last}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">本月表数</view>
					<view class="form_item_value">{{info.current}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">用量</view>
					<view class="form_item_value">{{info.use}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">补助吨数</view>
					<view class="form_item_value">{{info.sub}}</view>
				</view>

				<view class="form_item">
					<view class="form_item_key">实付款</view>
					<view class="form_item_value">￥{{info.money}}</view>
				</view>

				<view class="info">
					备注：{{info.notes}}
				</view>

				<view class="foot_button">
					<button type="primary" @click="handlePay">支付</button>
				</view>

				<view class="foot_button bottom">
					<button type="primary" plain @click="goBack">返回</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 宿舍号
				room: "",
				// 账单数据
				info: {},
			};
		},
		onLoad(options) {
			// 获取宿舍号
			this.room = localStorage.room
			// 从上一个页面获取账单数据
			this.info = JSON.parse(options.info)
			// 切割多余的字符
			let index = this.info.title.indexOf("月", 0)
			this.info.title = this.info.title.substring(0, index + 1)
			console.log(this.info);
		},
		methods: {
			handlePay() {
				// console.log(123);
				console.log("支付");
			},
			// 返回按钮回调
			goBack() {
				uni.redirectTo({
					url: "/pages/home/home"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-image: url(../../static/bg.png);
		background-size: 100% 100%;

		.body {
			margin: 0 30rpx;
			padding: 60rpx 0;

			.form {
				border-radius: 5px;
				background-color: #fff;

				.form_item {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
					line-height: 100rpx;
					border-bottom: 1px solid #D9D9D9;

					.form_item_key {
						width: 160rpx;
						font-size: 32rpx;
						color: #808080;
						text-align-last: justify;
					}

					.form_item_value {
						margin-left: 60rpx;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.info {
					margin: 0 40rpx;
					font-size: 24rpx;
					color: #808080;
				}

				.foot_button {
					margin-top: 30rpx;
					padding: 0 40rpx;
				}

				.bottom {
					padding-bottom: 50rpx;
				}
			}
		}
	}
</style>