officialAccount/pages/pay/index.vue

<template>
	<div class="container">
		<div class="input-group">
			<input type="number" v-model="amount" placeholder="请输入金额" class="amount-input" />
			<button @click="initiatePayment" :disabled="loading || !amount" class="pay-btn">
				支付
			</button>
		</div>

		<div class="status-group" v-if="statusMessage">
			<p>{{ statusMessage }}</p>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const amount = ref('')
	const loading = ref(false)
	const statusMessage = ref('')

	// 硬编码支付参数
	const payData = ref({
		timeStamp: "1747983532",
		package: "prepay_id=wx23145806465232c82870c59d2d41cf0000",
		paySign: "0pUqj2JZ77BYchyJuthQyP4yRfqhjvwag78Q4IMnIyQ3/OQP6OyJreZfmj0GFSEMrRsKAHIdBBM7tVnot0aaRhI5qwSOWpzyvJCkYa4eqPgqlV4XYVMqE3zeB/Cx4C9bv4poMXnaGlfFPdkhMYbUcdtsw4gBXXhqUx//9x7eu9cOERRzLquM8Z8rewRpar/kkVKSCV6h8pX19kRj+KEkK5LZB8IUIG995g1lsVFOqdO4mVFBJ1wZCkwJczgVI+jdNGgnR2lpdjwIpJFm+5Hm0y9SwR0UFvgkm95NrmY+Sruty/Zf8ekQwF4+atubW8CE6i8wm2zZpMEnnfS4WFwAwg==",
		appId: "wx8fc3e4305d2fbf0b",
		signType: "RSA",
		nonceStr: "DxpF2uIMl0VM7vPOG7pWnPHk2Dvi3V7K"
	})

	function callWeixinPay(data) {
		const invokePay = () => {
			window.WeixinJSBridge.invoke(
				'getBrandWCPayRequest', {
					appId: data.appId,
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign
				},
				function(res) {
					loading.value = false
					if (res.err_msg === 'get_brand_wcpay_request:ok') {
						statusMessage.value = '支付成功'
					} else {
						statusMessage.value = '支付失败或取消'
					}
				}
			)
		}
		if (typeof window.WeixinJSBridge === 'undefined') {
			document.addEventListener('WeixinJSBridgeReady', invokePay, false)
		} else {
			invokePay()
		}
	}
	const diaoqu = () =>{
		// const urlpost = `${saveurl.value}/weiXinPay/native`;
		const urlpost = `https://www.focusnu.com/nursing-unit_0010507/weiXinPay/native`
		const payload = {
		  title: "测试",
		  openId: openid.value,
		  amountPrice:amount.value
		};
		console.log("???/",payload)
		fetch(urlpost, {
		  method: 'POST',
		  headers: {
		    'Content-Type': 'application/json'
		  },
		  body: JSON.stringify(payload) 
		})
		  .then(res => res.json())
		  .then(data => {
		    // secondArray.value = [...data.result];
			// console.log("???",data)
			callWeixinPay(data)
		  })
		  .catch(err => {
		    console.error('请求失败:', err);
		  });
	}
	const saveurl = ref("")
	const openid = ref("")
	function initiatePayment() {
		if (!amount.value) return
		loading.value = true
		statusMessage.value = '拉起微信支付...'
		uni.getStorage({
		  key: 'serverUrl',
		  success: function (res) {
		    console.log('读取缓存：', res.data.url);
			saveurl.value = res.data.url;
			
		  }
		});
		uni.getStorage({
		  key: 'openid',
		  success: function (res) {
		    console.log('读取缓存：', res.data.openid);
			openid.value = res.data.openid;
		  }
		});
		diaoqu()
		
	}
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.input-group {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 20px;
	}

	.amount-input {
		flex: 1;
		height: 40px;
		border: 1px solid #ddd;
		padding: 0 10px;
		border-radius: 4px;
	}

	.pay-btn {
		padding: 0 20px;
		height: 40px;
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.status-group {
		margin-top: 10px;
	}
</style>