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 }}
		</view>

		<view class="title">住房信息</view>
		<view class="info">
			<view class="info_time">
				{{ info.detaliInfo.startTimeMonth || 8 }}月{{ info.detaliInfo.startTimeDay || 2 }}日
				<text class="gap">星期{{ info.detaliInfo.startTimeWeek || '三' }}</text>
				<view class="time_line"></view>
				<view class="time_num">{{ info.detaliInfo.nightNum || 1 }}晚</view>
				<view class="time_line"></view>
				<view class="gap">{{ info.detaliInfo.endTimeMonth || 8 }}月{{ info.detaliInfo.endTimeDay || 3 }}日</view>
				<text>星期{{ info.detaliInfo.endTimeWeek || '四' }}</text>
			</view>
			<view class="info_msg">{{ info.detaliInfo.item.hName }}</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">{{ info.detaliInfo.item.hAreas }}㎡</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: {
		// 点击确认支付按钮回调
		async handleSub() {
			if (this.isChecked) {
				const res = await this.$myRequest({
					url: '/mhotel/abkpay.action',
					data: {
						open_id: uni.getStorageSync('openid'),
						bookingId: this.info.orderNo
					}
				})
				// console.log(res)
				if (res.code === 200) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: 'prepay_id=' + res.data.prepay_id,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (res) => {
							if (res.errMsg == 'requestPayment:ok') {
								uni.navigateTo({
									url: '/pages/payStatus/payStatus?status=1'
								})
							} else {
								uni.navigateTo({
									url: '/pages/payStatus/payStatus?status=2'
								})
							}
						},
						fail: (err) => {
							if (err.errMsg === 'requestPayment:fail cancel') {
								uni.showToast({
									title: '支付已取消',
									icon: 'none',
									mask: true
								})
							}
						}
					})
				}
			} 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>