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
130
131
132
133
134
<template>
<div class="ryds-page">
<pay-up ref="payUpRef" />
<div class="step-container" v-if="userInfo.a1">
<var-steps direction="vertical" :active="userInfo.a3">
<var-step v-for="(step, stepIndex) in getSteps(userInfo)" :key="stepIndex">
<template #default>
<div class="step-content">
<span class="step-text">{{ step.text }}</span>
<var-button
v-if="step.amount && stepIndex === userInfo.a3"
type="danger"
size="small"
@click="handlePay(step)"
>
立即缴纳
</var-button>
</div>
</template>
</var-step>
</var-steps>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import payUp from '@/components/payUp.vue'
interface UserInfo {
a1: string
a2: string
a3: string
a4: string
id: string
}
const payUpRef = ref(null)
const userInfo = ref<UserInfo>({
a1: '',
a2: '',
a3: '',
a4: '',
id: ''
})
// 步骤配置
const baseSteps = [
{ text: '邀请好友' },
{ text: '正在审核' },
{ text: '审核失败' },
{ text: '跳过审核', amount: 600 },
{ text: '正在下发' },
{ text: '立即到帐', amount: 300 },
{ text: '入款中' }
]
const getSteps = (info: UserInfo) => {
return baseSteps.filter((item, index) => index <= parseInt(info.a3) || 0)
}
// 获取用户申请信息
const fetchUserInfo = async () => {
try {
const res = await request.get('/business/businessYw2/getByUserOne')
if (res.result) {
userInfo.value = {
...res.result,
a3: parseInt(res.result.a3) || 0
}
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
// 处理支付
const handlePay = (step: { amount: number; text: string }) => {
payUpRef.value?.open({
amount: step.amount,
payTitle: step.text,
payType: 2,
productId: userInfo.value.id,
needPassword: false
})
}
onMounted(() => {
fetchUserInfo()
})
</script>
<style scoped lang="scss">
.ryds-page {
height: inherit;
box-sizing: border-box;
background: url('@/static/cbg1.png') no-repeat center center;
background-size: 100% 100%;
padding: 20px;
}
.step-container {
background: #fff;
border-radius: 8px;
padding: 16px;
}
.step-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.step-text {
font-size: 14px;
color: #323233;
}
:deep(.van-step) {
.van-step__circle {
background-color: #1989fa;
border-color: #1989fa;
}
.van-step__line {
background-color: #1989fa;
}
}
:deep(.van-step--vertical) {
padding: 10px 10px 10px 0;
}
</style>