feat(提现、转账详情): 对接接口调试,但是先隐藏跳转按钮
This commit is contained in:
parent
643514fc38
commit
08743f3bf7
@ -341,3 +341,15 @@ export const withdrawApply = async (data) => {
|
|||||||
throw error
|
throw error
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取提现记录
|
||||||
|
export const apiGetCashOutRecords = async () => {
|
||||||
|
try {
|
||||||
|
const response = await get(`/activity/lottery/withdraw/records`)
|
||||||
|
return response
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch get cash out records:', error)
|
||||||
|
console.error('error:' + error.response.errorMsg)
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -19,10 +19,10 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style="font-weight: 600">{{ t('available_salaries') }}</div>
|
<div style="font-weight: 600">{{ t('available_salaries') }}</div>
|
||||||
<div style="display: flex; align-items: center" @click="showDetails">
|
<!-- <div style="display: flex; align-items: center" @click="showDetails">
|
||||||
<div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
|
<div style="color: rgba(0, 0, 0, 0.4)">{{ t('details') }}</div>
|
||||||
<img src="../../assets/icon/arrow.png" alt="" width="16px" class="flipImg" />
|
<img src="../../assets/icon/arrow.png" alt="" width="16px" class="flipImg" />
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
|
|||||||
@ -7,128 +7,104 @@
|
|||||||
color="black"
|
color="black"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
<div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
|
<div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
|
||||||
<!-- Cash Out 记录 -->
|
|
||||||
<div
|
<div
|
||||||
v-for="record in cashOutRecords"
|
v-for="record in Records"
|
||||||
:key="record.id"
|
:key="record.id"
|
||||||
style="
|
style="
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
<!-- 提现记录 -->
|
||||||
<div style="font-weight: 600">{{ t('cash_out') }}</div>
|
|
||||||
<div style="font-weight: 600">${{ record.amount }}</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
|
||||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
|
||||||
{{ record.date }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-weight: 510;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
"
|
|
||||||
:style="{
|
|
||||||
backgroundImage:
|
|
||||||
record.status === 'Under review'
|
|
||||||
? 'linear-gradient(248deg, #FFE675 5.66%, #FFC53D 42.49%)'
|
|
||||||
: record.status === 'Approved'
|
|
||||||
? 'linear-gradient(248deg, #75FF98 5.66%, #3DFF54 42.49%)'
|
|
||||||
: 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ getStatusText(record.status) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Transfer 记录 -->
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div style="font-weight: 700">{{ t('transfer') }}</div>
|
|
||||||
<div
|
<div
|
||||||
style="
|
v-if="record.type === 'cashOut'"
|
||||||
padding: 12px;
|
style="display: flex; flex-direction: column; gap: 4px"
|
||||||
border-radius: 12px;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div style="width: 70%; display: flex">
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
<div style="display: flex; justify-content: center; align-items: center">
|
<div style="font-weight: 600">{{ t('cash_out') }}</div>
|
||||||
<img
|
<div style="font-weight: 600">${{ record.amount }}</div>
|
||||||
src=""
|
|
||||||
alt=""
|
|
||||||
@error="defaultAvatarUrl"
|
|
||||||
style="
|
|
||||||
width: 10vw;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
object-fit: cover;
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; flex-direction: column; justify-content: space-between">
|
|
||||||
<div style="font-weight: 600; font-size: 0.9em">asdfasdfasdfasdsfasfasfasd</div>
|
|
||||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
|
|
||||||
ID:1234567890
|
|
||||||
</div>
|
|
||||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
|
|
||||||
21/10/2025 17:56
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
<div style="font-weight: 600; font-size: 0.9em">
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||||
{{ t('plus_coins', { amount: '10000' }) }}
|
{{ record.date }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-weight: 510;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
backgroundImage:
|
||||||
|
record.status === 'Under review'
|
||||||
|
? 'linear-gradient(248deg, #FFE675 5.66%, #FFC53D 42.49%)'
|
||||||
|
: record.status === 'Approved'
|
||||||
|
? 'linear-gradient(248deg, #75FF98 5.66%, #3DFF54 42.49%)'
|
||||||
|
: 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ getStatusText(record.status) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 其他记录 -->
|
<!-- 转账记录 -->
|
||||||
<div
|
<div
|
||||||
v-for="record in otherRecords"
|
v-if="record.type === 'Transfer'"
|
||||||
:key="record.id"
|
style="display: flex; flex-direction: column; gap: 4px"
|
||||||
style="
|
>
|
||||||
padding: 12px;
|
<div style="font-weight: 700">{{ t('transfer') }}</div>
|
||||||
border-radius: 12px;
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
background: #fff;
|
<div style="width: 70%; display: flex">
|
||||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
display: flex;
|
<img
|
||||||
flex-direction: column;
|
:src="record.avatar || ''"
|
||||||
gap: 4px;
|
alt=""
|
||||||
|
@error="defaultAvatarUrl"
|
||||||
|
style="
|
||||||
|
width: 10vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
object-fit: cover;
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; flex-direction: column; justify-content: space-between">
|
||||||
|
<div style="font-weight: 600; font-size: 0.9em">{{ record.name }}</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
|
||||||
|
ID:{{ record.id }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="font-weight: 600; font-size: 0.9em">
|
||||||
|
{{ t('plus_coins', { amount: record.amount }) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
|
||||||
|
21/10/2025 17:56
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 充值和收入 -->
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
record.type === 'Exchange Coins' ||
|
||||||
|
record.type === 'BD income' ||
|
||||||
|
record.type === 'BD Leader income'
|
||||||
"
|
"
|
||||||
|
style="display: flex; flex-direction: column; gap: 4px"
|
||||||
>
|
>
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
<div style="font-weight: 600">{{ record.type }}</div>
|
<div style="font-weight: 600">{{ record.type }}</div>
|
||||||
<div
|
<div style="font-weight: 600">-${{ record.amount }}</div>
|
||||||
:style="{
|
|
||||||
fontWeight: '600',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ record.amount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||||
{{ record.date }}
|
{{ record.date }}
|
||||||
@ -144,52 +120,65 @@ import { useI18n } from 'vue-i18n'
|
|||||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { setDocumentDirection } from '@/locales/i18n'
|
import { setDocumentDirection } from '@/locales/i18n'
|
||||||
|
import { apiGetCashOutRecords } from '@/api/wallet'
|
||||||
|
|
||||||
const { t, locale } = useI18n()
|
const { t, locale } = useI18n()
|
||||||
|
|
||||||
// 监听语言变化并设置文档方向
|
// 监听语言变化并设置文档方向
|
||||||
locale.value && setDocumentDirection(locale.value)
|
locale.value && setDocumentDirection(locale.value)
|
||||||
|
|
||||||
// Cash Out 记录数据
|
// 记录数据
|
||||||
const cashOutRecords = ref([
|
const Records = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
|
type: 'cashOut',
|
||||||
amount: 10,
|
amount: 10,
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
status: 'Under review',
|
status: 'Under review',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
|
type: 'cashOut',
|
||||||
amount: 10,
|
amount: 10,
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
status: 'Approved',
|
status: 'Approved',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
type: 'cashOut',
|
||||||
amount: 10,
|
amount: 10,
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
status: 'Rejection',
|
status: 'Rejection',
|
||||||
},
|
},
|
||||||
])
|
{
|
||||||
|
id: 7,
|
||||||
// 其他记录数据
|
type: 'Transfer',
|
||||||
const otherRecords = ref([
|
avatar: '',
|
||||||
|
name: 'asdfasdfasdfasdsfasfasfasd',
|
||||||
|
id: '1234567890',
|
||||||
|
addStatus: '1',
|
||||||
|
amount: '10000',
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
type: 'Exchange Coins',
|
type: 'Exchange Coins',
|
||||||
amount: '- $10',
|
addStatus: '0',
|
||||||
|
amount: '10',
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
type: "BD's income",
|
type: 'BD income',
|
||||||
amount: '+ $10',
|
addStatus: '1',
|
||||||
|
amount: '10',
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
type: "BD Leader's income",
|
type: 'BD Leader income',
|
||||||
amount: '+ $10',
|
addStatus: '1',
|
||||||
|
amount: '10',
|
||||||
date: '21/10/2025 17:56',
|
date: '21/10/2025 17:56',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
@ -214,8 +203,17 @@ const defaultAvatarUrl = (e) => {
|
|||||||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取提现记录
|
||||||
|
const getCashOutRecords = async () => {
|
||||||
|
const resCashOutRecords = await apiGetCashOutRecords()
|
||||||
|
console.log('已邀请列表:', resCashOutRecords)
|
||||||
|
if (resCashOutRecords.status && resCashOutRecords.body) {
|
||||||
|
// invitedUserList.value = resCashOutRecords.body
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 这里可以添加数据获取逻辑
|
getCashOutRecords() // 获取提现记录
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user