ebike-ui/ebike-user/components/bike-pay/bike-pay.vue

<template>
	<div style="padding: 15px;background-color: white;">
		<div class="divPay">
			<div class="divTitle">
				<label>
					<image class="divImg" :src='imgPath+"static/userui/home/money.png"' />
				</label>
				<label>待支付：</label>
				<label>{{data.totalAmount}}元</label>
			</div>
			<div class="divFont">
				{{data.createdAt}}
			</div>
			<div class="divTitle2">
				费用明细
			</div>
			<div class="divRow divFont" v-for="(item,index) in data.details" :key="index">
				<label>{{item.itemName}}</label>
				<label>{{item.itemAmount}}元</label>
			</div>
			<!-- 		<div class="divRow divFont">
				<label>时长费</label>
				<label>{{data.scf}}元</label>
			</div> -->
			<div class="divHJ">
				<label>合计：</label>
				<label>￥{{data.totalAmount}}元</label>
			</div>
		</div>
		<div>
			<div class="divBtn" @click="handlePaymentClick">
				<label>
					<uni-icons custom-prefix="iconfont" type="icon-ebikeweixin" color="white" size="25" />
				</label>
				支付
			</div>
			<view class="cu-btn" @click="gotoRefundRequest">退款</view>
		</div>
	</div>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import config from '@/utils/config';
	import * as api from '@/utils/api.js';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	const imgPath = config.imgPath;
	const props = defineProps(["orderId"]);
	const data = ref({
		hj: "2.5",
		sj: "2025-04-03 14:15:13",
		qbj: "2.0",
		scf: "0.5"
	})

	onMounted(() => {
		getInfoOrderData();
	})
	const getInfoOrderData = () => {
		api.callOrdereApi("userOrders/orderDetailsInfo?orderId=" + props.orderId, {}, "get").then(res => {
			if (res.code == 200) {
				data.value = res.data;
			}

		})
	}
	const handlePaymentClick = () => {
		console.log('支付按钮被点击');
		const params = {
			"orderId": props.orderId
		}
		api.callPaymentApi("wxPayment/prepay", params).then(res => {
			if (res.code == 200) {
				wx.requestPayment({
					"timeStamp": res.data.timeStamp,
					"nonceStr": res.data.nonceStr,
					"package": res.data.package,
					"signType": res.data.signType,
					"paySign":  res.data.paySign,
					"success": function(res) {
						//轮询看是否支付成功
						checkPaymentStatus();
					},
					"fail": function(res) {
						showModelMessage("支付失败")
					},
					"complete": function(res) {
						showModelMessage("支付失败") 
					}
				})
			}else{
						showModelMessage("支付失败") 
			}
		})
	}

	function checkPaymentStatus() {
		api.callPaymentApi("wxPayment/queryOrderByOutTradeNo?outTradeNo=" + props.orderId, {}, "get")
			.then(res => {
				if (res.code == 200) {
					gotoHome();
				} else {
					console.log("支付未成功，继续轮询");
					checkPaymentStatus(); // 继续轮询
				}
			})
			.catch(error => {
				console.log("请求失败，继续轮询", error);
				checkPaymentStatus(); // 请求失败也继续轮询
			});
	}
	const gotoHome = () => {
		uni.navigateTo({
			url: "/pages/user/home/home"
		})
	}
	
	const gotoRefundRequest=()=>{
		uni.navigateTo({
			url: "/pages/user/views/PaymentFeedback?orderId="+props.orderId
		})
	}
</script>

<style scoped>
	.divPay {
		width: 260px;
	}

	.divTitle {
		line-height: 30px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

	.divTitle2 {
		font-size: 16px;
		line-height: 35px;
	}

	.divImg {
		width: 15px;
		height: 12px;
		margin-right: 5px;
	}

	.divFont {
		color: #000;
		font-size: 12px;
		opacity: 0.7;
	}

	.divRow {
		line-height: 20px;
		display: flex;
		justify-content: space-between;
	}

	.divHJ {
		text-align: right;
		font-size: 14px;
		color: red;
		font-weight: bold;
	}

	.divBtn {
		text-align: center;
		background: #61D145;
		color: white;
		line-height: 40px;
		border-radius: 5px;
		margin-top: 20px;
	}
</style>