支付回调页显示支付失败情况

 <!--
  * @Date: 2024-01-26 10:24:45
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-26 16:30:31
+ * @LastEditTime: 2024-01-26 17:03:58
  * @FilePath: /xysBooking/src/views/callback.vue
  * @Description: 反馈页面
 -->
 <template>
   <div class="callback-page">
     <div style="">
-      <div class="text-prompts">
+      <div v-if="billInfo?.pay_status === PAY_STATUS.FAIL" class="text-prompts">
+        <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png">
+        <div class="text">支付失败</div>
+      </div>
+      <div v-else class="text-prompts">
         <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png">
         <div class="text">支付完成</div>
       </div>
@@ -47,6 +51,12 @@ const formatDatetime = (data) => { // 格式化日期
   return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
 }
 
+const PAY_STATUS = {
+  SUCCESS: '0',
+  FAIL: '1',
+  UNKNOWN: '2',
+}
+
 onMounted(async () => {
   // 获取订单ID
   const { code, data } = await icbcOrderQryAPI({ out_trade_no: $route.query.out_trade_no });
@@ -56,10 +66,10 @@ onMounted(async () => {
     if (code_pay) {
       //
       data_pay.datetime = data_pay && formatDatetime(data_pay);
+      data_pay.pay_status = data.pay_status;
       billInfo.value = data_pay;
     }
   }
-
 })
 </script>