Homestay_manage_app/pages/pay/pay.vue

<template>
	<view class="container">
		<view class="countDown">交易剩余时间15:00</view>
		<view class="price">
			<text>¥</text>
			{{ info.price }}
		</view>

		<view class="title">住房信息</view>
		<view class="info">
			<view class="info_time">
				{{ info.startTimeMonth }}月{{ info.startTimeDay }}日
				<text class="gap">星期{{ info.startTimeWeek }}</text>
				<view class="time_line"></view>
				<view class="time_num">{{ info.nightNum }}晚</view>
				<view class="time_line"></view>
				<view class="gap">{{ info.endTimeMonth }}月{{ info.endTimeDay }}日</view>
				<text>星期{{ info.endTimeWeek }}</text>
			</view>
			<view class="info_msg">大床房</view>
			<view class="info_type">
				<view class="type_item">包吃住型</view>
				<view class="type_item">包吃住型</view>
				<view class="type_item">包吃住型</view>
			</view>
			<view class="info_tag">
				<view class="tag_item">16-20㎡</view>
				<view class="tag_item">双人床</view>
				<view class="tag_item">窗户位于走廊/窗户较小</view>
			</view>
		</view>

		<view class="title">支付方式</view>
		<view class="way">
			<view class="way_item" @click="handleChange">
				<img src="../../static/index/wxPay.png" />
				<view class="way_text">微信支付</view>
				<radio class="way_radio" :checked="isChecked" />
			</view>
		</view>

		<!-- 提交订单区域 -->
		<view class="btn">提交订单</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isChecked: true,
			info: {}
		}
	},
	onLoad(options) {
		this.info = JSON.parse(options.info)
		console.log(this.info)
	},
	methods: {
		// 点击支付方式回调
		handleChange() {
			this.isChecked = !this.isChecked
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	box-sizing: border-box;
	padding: 0 20rpx 160rpx;
	min-height: 100vh;
	background-color: #f2f3f5;

	.countDown {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		color: #808080;
		font-size: 24rpx;
	}

	.price {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 65rpx;
		font-size: 50rpx;
		font-weight: bold;

		text {
			font-size: 28rpx;
		}
	}

	.title {
		margin-top: 14rpx;
		color: #808080;
		font-size: 24rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 18rpx;
		width: 100%;
		border-radius: 15rpx;
		background-color: #fff;

		.info_time {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			font-size: 32rpx;
			font-weight: bold;

			.time_line {
				width: 17rpx;
				height: 1rpx;
				background-color: #096562;
			}

			.time_num {
				box-sizing: border-box;
				padding: 0 15rpx;
				height: 46rpx;
				line-height: 46rpx;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 66rpx;
				border: 1rpx solid #096562;
				background-color: #f0f2f5;
			}

			.gap {
				margin: 0 10rpx;
			}

			text {
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.info_msg {
			margin-top: 15rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.info_type {
			display: flex;
			flex-wrap: wrap;
			margin-top: 15rpx;

			.type_item {
				box-sizing: border-box;
				padding: 0 15rpx;
				margin-right: 20rpx;
				height: 41rpx;
				line-height: 41rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 34rpx;
				background-color: #096562;
			}
		}

		.info_tag {
			display: flex;
			flex-wrap: wrap;
			margin: 18rpx 0 30rpx;
			color: #808080;
			font-size: 24rpx;

			.tag_item {
				margin-right: 20rpx;
			}
		}
	}

	.way {
		.way_item {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin-top: 18rpx;
			height: 100rpx;
			font-size: 28rpx;
			border-radius: 15rpx;
			background-color: #fff;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			.way_text {
				margin-left: 18rpx;
			}

			.way_radio {
				margin-left: auto;
				transform: scale(0.9);
			}
		}
	}

	.btn {
		position: fixed;
		bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 710rpx;
		height: 96rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 64rpx;
		background-color: #096562;
	}
}
</style>