172 lines
3.5 KiB
Vue
172 lines
3.5 KiB
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>
|
||
</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("支付失败")
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
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"
|
||
})
|
||
}
|
||
</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> |