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

<template>
	<div style="padding: 15px;background-color: white;">
		<div class="divPay">
			<view class="flex justify-between">
				<view class="width-65">
					<div class="divTitle">
						<label>
							<image class="divImg" :src='imgPath+"static/userui/home/money.png"' />
						</label>
						<label>{{status==3 ? '已支付：' :'待支付：'}}</label>
						<label>{{data.totalAmount}}元</label>
					</div>
					<div class="divFont">
						{{data.createdAt}}
					</div>
				</view>
				<view class="width-35 flex justify-end"> <!--已支付 v-if="status==3"-->
					<view v-if="status==3"  @click="handleFeeAppealClick">
						<view class="text-center">
							<uni-icons type="help" size="20"></uni-icons>
						</view>
						<view class="text-center wzfysh">
							费用申述
						</view>
					</view>
					<view @click="handleFaultReportClick" style="margin-left: 10px;">
						<view class="text-center">
							<uni-icons custom-prefix="iconfont" color="rgb(102,102,102)" type="icon-ebikeweixiuoff" size="20"></uni-icons>
						</view>
						<view class="text-center wzfysh">
							故障上报
						</view> 
					</view>

				</view>

			</view>

			<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 v-if="status==2" class="divBtn" @click="handlePaymentClick">
				<label>
					<uni-icons custom-prefix="iconfont" type="icon-ebikeweixin" color="white" size="25" />
				</label>
				支付
			</div>
		</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 status = ref("")
	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;
				status.value = res.data.status;
			}

		})
	}
	const handlePaymentClick = () => {
		api.callPaymentApi("wxPayment/prepay?orderId=" + props.orderId, {}, "get").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) {
						console.log("fail", res)
					},
					"complete": function(res) {
						console.log("complete", res)
					}
				})
			} 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 handleFeeAppealClick=()=>{//费用 申述
		uni.navigateTo({
			url: "/pages/user/views/PaymentFeedback?orderId="+props.orderId
		})
	}
	const handleFaultReportClick=()=>{// 故障上报
		uni.navigateTo({
			url: "/pages/user/login/TroubleReportUser?bikeCode="+data.value.bikeCode+"&orderCode="+props.orderId
		})
	}
</script>

<style scoped>
	.divPay {
		width: auto;
	}

	.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;
	}

	.width-65 {
		width: 65%;
	}

	.width-35 {
		width: 35%;
	}
	.wzfysh{
		font-size: 10px;
	}
</style>