Homestay_manage_app/pages/pay/pay.vue

<template>
	<view class="container">
		<view class="countDown">
			交易剩余时间
			<uv-count-down :time="countDownTime" format="mm:ss" @change="change" @finish="finish"></uv-count-down>
		</view>
		<view class="price">
			<text>¥</text>
			{{ info.price || '188.00' }}
		</view>

		<view class="title">住房信息</view>
		<view class="info">
			<view class="info_time">
				{{ info.startTimeMonth || 8 }}月{{ info.startTimeDay || 2 }}日
				<text class="gap">星期{{ info.startTimeWeek || '三' }}</text>
				<view class="time_line"></view>
				<view class="time_num">{{ info.nightNum || 1 }}晚</view>
				<view class="time_line"></view>
				<view class="gap">{{ info.endTimeMonth || 8 }}月{{ info.endTimeDay || 3 }}日</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" @click="handleSub">提交订单</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isChecked: true,
			info: {},
			// 倒计时时间（毫秒）
			countDownTime: 1000 * 60 * 15
		}
	},
	onLoad(options) {
		if (options.info) {
			this.info = JSON.parse(options.info)
		}
		console.log(this.info)
	},
	methods: {
		// 点击提交订单按钮回调
		handleSub() {
			if (this.isChecked) {
				// 1 支付成功  2 支付失败
				uni.navigateTo({
					url: '/pages/payStatus/payStatus?status=1'
				})
			} else {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				})
			}
		},
		// 点击支付方式回调
		handleChange() {
			this.isChecked = !this.isChecked
		},
		// 倒计时变化时触发
		change(e) {
			// console.log(e)
		},
		// 倒计时结束回调
		finish() {
			uni.showModal({
				title: '提示',
				content: '订单已超过可支付时间，请重新下单',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}
			})
		}
	}
}
</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>