uniapp 微信点金计划中商家小票开发

背景

• 项目是H5项目
• 使用JSAPI支付方式进行支付

如果是项目是H5项目并且使用的是微信的JSAPI支付，那么微信会在用户支付完成页面点击完成按钮后关闭原来的页面，这就会导致用户支付完成后点击完成直接整个页面都消失了，这不符合客户的需要

所以就一定得加入微信的点金计划，点金计划中有一个商家小票模块，这个模块就是我们可以自定义的，所以我们还得开启商家小票，并且自定义小票模块的展示内容，这样我们就能让用户点击小票模块中的按钮回到我们项目的页面了

代码

<template>
	<div class="page-box">
		<view class="status-box" :style="{ color: orderInfo.statusColor }">
			{{ orderInfo.statusMsg }}
		</view>
		<view class="back-btn" @click="toReport" v-if="orderInfo.status != '404'"> 点击查看报告 </view>
		<view class="back-btn" @click="toHome" v-else> 返回首页 </view>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue';

	const url = 'https://payapp.weixin.qq.com';

	onMounted(() => {
		getQueryVal();
		showCustomPage();
		if (!result.out_trade_no) {
			uni.showToast({
				title: '没有订单号，请联系管理员！',
				icon: 'none',
			});
			orderInfo.value = {
				status: '404',
				statusMsg: '没有订单号，请联系管理员！',
				statusColor: '#ccc',
			};
		} else {
			queryOrderInfo();
		}
	});

	let result = {};
	// 获取地址栏字段
	function getQueryVal() {
		let queryStr = window.location.search.substring(1); // 地址栏字符串
		let strArr = queryStr.split('&');
		/*
		自定义小票页面url会自动携带以下参数:
		特约商户号 sub_mch_id
		商户订单号 out_trade_no
		md5校验码 check_code 三个字段的信息
		 */
		result = {};
		if (strArr.length) {
			strArr.forEach((val) => {
				let subStrArr = val.split('=');
				result[subStrArr[0]] = subStrArr[1];
			});
		}
		console.log('result', result);
	}

	// 用于展示商家小票
	function showCustomPage() {
		let height = 0;
		// 计算服务商页面当前高度
		const customPageHeight = document.body.scrollHeight;
		// 换算传入点金计划页面的高度
		height =
			customPageHeight * (640 / Math.round(document.documentElement.getBoundingClientRect().width));
		// 限定height范围在[600, 960]之间
		height = Math.min(Math.max(height, 600), 960);
		let customData = JSON.stringify({
			action: 'onIframeReady',
			displayStyle: 'SHOW_CUSTOM_PAGE',
			height,
		});
		parent.postMessage(customData, url);
	}

	import { $checkStatus } from '@/api/pay.js';
	const orderInfo = ref({});
	// 请求订单信息
	async function queryOrderInfo() {
		try {
			let res = await $checkStatus({ order_sn: result.out_trade_no });
			// console.log('查询订单信息成功', res);
			switch (res.status) {
				case '2':
					res.statusMsg = '支付成功';
					res.statusColor = '#B59258';
					break;
				case '3':
					res.statusMsg = '支付失败';
					res.statusColor = '#FF0000';
					break;
				default:
					res.statusMsg = '支付状态未知';
					res.statusColor = '#ccc';
					break;
			}
			orderInfo.value = res;
		} catch (error) {
			console.log('查询订单信息失败', error);
			orderInfo.value = {
				status: '404',
				statusMsg: '查询订单信息失败',
				statusColor: '#ccc',
			};
		}
	}

	function toReport() {
		let mchData = {
			action: 'jumpOut',
			jumpOutUrl: `${location.origin}/pages/report/detail?id=${orderInfo.value.report_id}`,
		};
		let postData = JSON.stringify(mchData);
		parent.postMessage(postData, url);
	}
	function toHome() {
		let mchData = {
			action: 'jumpOut',
			jumpOutUrl: `${location.origin}/pages/home/index`,
		};
		let postData = JSON.stringify(mchData);
		parent.postMessage(postData, url);
	}
</script>

<style lang="scss">
	.page-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100vh;
	}
	.status-box {
		margin-bottom: 40px;
		font-size: 64rpx;
		font-weight: 800;
	}
	.back-btn {
		width: 40%;
		height: 90rpx;
		background: #4a8c90;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}
</style>

• 代码可根据项目需求自己更改
• 开发的准备工作、注意事项等自己去官方文档查看
• 官方开发文档：pay.weixin.qq.com/doc/v3/part…