MiniScmV3/subpkg_checkin/depositPayment/depositPayment.vue

<template>
	<view class="tip-area">
		<image class="image" src="/static/success.png"></image>
		<text class="text">房券支付成功，</text>
		<text class="text">即将进行押金支付</text>
	</view>

	<view class="payment-button">
		<button class="button" @click="payDeposit">支付押金</button>
		<u-button text="" color="#a09bc4"></u-button>
	</view>
</template>

<script setup>
	import {
		useAppInfoStore
	} from '../../store/appInfoStore';
	import {
		useOrderStore
	} from '../../store/orderStore';
	import {
		useUserStore
	} from '../../store/userStore';

	let userStore = useUserStore()
	let userInfo = userStore.userInfo
	let appInfoStore = useAppInfoStore()
	let orderStore = useOrderStore()
	let orderInfo = orderStore.orderInfo
	async function payDeposit() {
		let res = await uni.request({
			url: '/order/payment/weChatVoucher',
			method: 'POST',
			data: {
				openid: userInfo.openid,
				orderId: orderInfo.orderId,
				appId: appInfoStore.appId,
				payee: 'HOTEL'
			}
		})

		if (res.data.code == 200) {
			res.data.data.package = res.data.data.packageStr
			let paymentResult = await wx.requestPayment(res.data.data)
			console.log("payment result:", paymentResult)
			if (paymentResult.errMsg === 'requestPayment:ok') {
				uni.showToast({
					icon: 'none',
					title: '支付成功'
				})
				uni.redirectTo({
					url: '/subpkg_checkin/checkin/checkin'
				})
			}
		}
	}
</script>

<style lang="scss">
	.tip-area {
		padding-top: 160rpx;
		padding-bottom: 160rpx;
		display: flex;
		flex-direction: column;

		.image {
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
		}

		.text {
			color: #666666;
			font-size: 40rpx;
			text-align: center;
		}
	}

	.payment-button {
		width: 80vw;
		margin: 100rpx auto;

		.button {
			background-color: #a09bc4;
			color: #ffffff;
			border-radius: 20rpx;
		}
	}
</style>