hookehuyr

feat(支付): 添加微信支付弹窗及相关处理逻辑

在订单页面中引入微信支付弹窗组件,并实现支付成功、支付失败及支付处理中的回调处理逻辑。支付成功后刷新订单列表,确保用户看到最新的订单状态。
......@@ -156,6 +156,24 @@
</div>
</div>
</van-dialog>
<!-- 支付弹窗 -->
<van-popup
v-model:show="showPaymentPopup"
position="bottom"
round
closeable
close-icon-position="top-right"
:style="{ height: '90%' }"
>
<WechatPayment
v-if="showPaymentPopup && currentOrder"
:order-id="currentOrder.id"
@success="handlePaymentSuccess"
@failed="handlePaymentFailed"
@processing="handlePaymentProcessing"
/>
</van-popup>
</AppLayout>
</template>
......@@ -164,6 +182,7 @@ import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import WechatPayment from '@/components/payment/WechatPayment.vue'
import { useTitle } from '@vueuse/core';
import { showConfirmDialog, showToast, Dialog } from 'vant';
import { formatDate } from '@/utils/tools';
......@@ -272,8 +291,35 @@ const onLoad = async () => {
};
// 支付订单
// 支付相关状态
const showPaymentPopup = ref(false)
const currentOrder = ref(null)
// 处理支付
const handlePay = (order) => {
showToast('支付功能暂未开放');
currentOrder.value = order
showPaymentPopup.value = true
}
// 处理支付成功
const handlePaymentSuccess = () => {
showPaymentPopup.value = false
showToast('支付成功')
// 刷新订单列表
page.value = 0
orders.value = []
finished.value = false
onLoad()
}
// 处理支付失败
const handlePaymentFailed = (error) => {
showToast(error || '支付失败')
}
// 处理支付处理中
const handlePaymentProcessing = () => {
showToast('支付处理中...')
}
// 查看订单详情
......