Homestay_manage_app/pages/pay/pay.vue

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

		<view class="title">住房信息</view>
		<view class="info">
			<view class="info_time">
				{{ getTime((info.orderStartTime || '').slice(0, 19)) }}
				<text class="gap">{{ getWeek((info.orderStartTime || '').slice(0, 19)) }}</text>
				<view class="time_line"></view>
				<view class="time_num">{{ info.orderLiveTime }}</view>
				<view class="time_line"></view>
				<view class="gap">{{ getTime((info.orderEndTime || '').slice(0, 19)) }}</view>
				<text>{{ getWeek((info.orderEndTime || '').slice(0, 19)) }}</text>
			</view>
			<view class="info_msg">{{ info.houseName }}房</view>
			<view class="info_type">
				<view class="type_item">包吃住型</view>
			</view>
			<view class="info_tag">
				<view class="tag_item" v-if="info.hAreas">{{ info.hAreas }}㎡</view>
				<view class="tag_item" v-for="tag in info.houseConfigList" :key="tag.id">{{ tag.name }}</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: null,
			// 订单id
			id: ''
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getData()
	},
	methods: {
		async getData() {
			const res = await this.$myRequest({
				url: '/mhotel/ampgetBookingById.action',
				data: {
					bookingId: this.id
				}
			})
			if (res.code === 200) {
				this.info = res.data
				console.log(this.info)
				// 计算出倒计时时间（毫秒）
				this.info.countDownTime = new Date(this.info.createTime.slice(0, 19)).getTime() + 15 * 60 * 1000 - new Date().getTime()
			}
		},
		// 点击确认支付按钮回调
		async handleSub() {
			if (this.isChecked) {
				const res = await this.$myRequest({
					url: '/mhotel/abkpay.action',
					data: {
						open_id: uni.getStorageSync('openid'),
						bookingId: this.info.id
					}
				})
				// 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
		},
		// 倒计时结束回调
		finish() {
			uni.showModal({
				title: '提示',
				content: '订单已超过可支付时间，请重新下单',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				}
			})
		},
		getWeek(time) {
			let date = new Date(time)
			// 获取星期
			let week = date.getDay()
			let weekList = ['日', '一', '二', '三', '四', '五', '六']

			let res = '周' + weekList[week]
			return res
		},
		getTime(time) {
			let date = new Date(time)
			// 获取月份
			let M = date.getMonth() + 1
			// 获取日期
			let D = date.getDate()

			let res = M + '月' + D + '日'
			return res
		}
	}
}
</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>