index.vue
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<view class="callback-page">
<view>
<view v-if="pay_status === PAY_STATUS.FAIL" class="text-prompts">
<image
src="https://cdn.ipadbiz.cn/xys/booking/shibai.png"
mode="widthFix"
class="status-icon"
/>
<view class="text">支付失败</view>
</view>
<view v-else class="text-prompts">
<image
src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png?imageMogr2/thumbnail/200x/strip/quality/70"
mode="widthFix"
class="status-icon"
/>
<!-- <view class="text">支付完成</view> -->
</view>
<view class="appointment-information">
<view class="info-item"
>参观人数：<text>{{ billInfo?.total_qty || 0 }} 人</text></view
>
<view class="info-item"
>参访时间：<text>{{ billInfo?.datetime || '--' }}</text></view
>
<view class="info-item"
>支付金额：<text>¥ {{ billInfo?.total_amt || 0 }}</text></view
>
</view>
<view style="padding: 16rpx; display: flex; justify-content: center; margin-top: 32rpx">
<nut-button color="#A67939" size="small" @click="returnMerchant">返回首页</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Taro, { useRouter } from '@tarojs/taro'
import { onAuthBillInfoAPI } from '@/api/index'
import { useGo } from '@/hooks/useGo'
import { formatDatetime } from '@/utils/tools'
const router = useRouter()
const go = useGo()
const billInfo = ref({})
const PAY_STATUS = {
SUCCESS: '0',
FAIL: '1',
UNKNOWN: '2'
}
const pay_status = ref('0') // Default to success as per logic
const out_trade_no = router.params.out_trade_no
const getBillInfo = async () => {
if (!out_trade_no) {
return
}
try {
// Get order details
const { code, data } = await onAuthBillInfoAPI({ order_id: out_trade_no })
if (code && data) {
data.datetime = data && formatDatetime(data)
billInfo.value = data
} else {
// Handle error if needed
}
} catch (e) {
console.error(e)
}
}
const returnMerchant = () => {
go('/pages/index/index')
}
onMounted(() => {
getBillInfo()
})
</script>
<style lang="less">
.callback-page {
padding: 32rpx;
background: #fff;
min-height: 100vh;
.text-prompts {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 64rpx;
padding-top: 64rpx;
.status-icon {
width: 200rpx;
height: 200rpx;
}
.text {
margin-top: 32rpx;
font-size: 38rpx;
color: #333;
}
}
.appointment-information {
background: #f8f8f8;
padding: 32rpx;
border-radius: 16rpx;
.info-item {
margin-bottom: 16rpx;
font-size: 29rpx;
color: #666;
text {
color: #333;
font-weight: 500;
margin-left: 16rpx;
}
}
}
}
</style>