feat(新页面): 收入操作结果页
This commit is contained in:
hzj
parent
5a51987c9c
commit
9c80d88e5a
@ -275,6 +275,12 @@ const router = createRouter({
|
|||||||
component: () => import('../views/BDCenter/availableIncome.vue'),
|
component: () => import('../views/BDCenter/availableIncome.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/income-details',
|
||||||
|
name: 'income-details',
|
||||||
|
component: () => import('../views/BDCenter/incomeDetails.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -75,6 +75,7 @@ export const ROLE_PERMISSIONS = {
|
|||||||
'/history-salary',
|
'/history-salary',
|
||||||
'/platform-salary',
|
'/platform-salary',
|
||||||
'/available-income', //操作收益页
|
'/available-income', //操作收益页
|
||||||
|
'/income-details', //操作结果页
|
||||||
],
|
],
|
||||||
|
|
||||||
// Anchor (主播)
|
// Anchor (主播)
|
||||||
|
|||||||
@ -515,7 +515,7 @@ const fetchBankBalance = async () => {
|
|||||||
|
|
||||||
// 方法
|
// 方法
|
||||||
const showDetails = () => {
|
const showDetails = () => {
|
||||||
router.push('/information-details')
|
router.push('/income-details')
|
||||||
}
|
}
|
||||||
|
|
||||||
const searchPayee = () => {
|
const searchPayee = () => {
|
||||||
|
|||||||
238
src/views/BDCenter/incomeDetails.vue
Normal file
238
src/views/BDCenter/incomeDetails.vue
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fullPage">
|
||||||
|
<GeneralHeader
|
||||||
|
style="width: 100%"
|
||||||
|
title="Details"
|
||||||
|
color="color: rgba(0, 0, 0, 0.80)"
|
||||||
|
backImg="/src/assets/icon/arrowBackBlack.png"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
|
||||||
|
<!-- Cash Out 记录 -->
|
||||||
|
<div
|
||||||
|
v-for="record in cashOutRecords"
|
||||||
|
:key="record.id"
|
||||||
|
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: 4px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<div style="font-weight: 600">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%)',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ 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">Transfer</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 12px;
|
||||||
|
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: center; align-items: center">
|
||||||
|
<img
|
||||||
|
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 style="font-weight: 600; font-size: 0.9em">+10000 Coins</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 其他记录 -->
|
||||||
|
<div
|
||||||
|
v-for="record in otherRecords"
|
||||||
|
:key="record.id"
|
||||||
|
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: 4px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||||
|
<div style="font-weight: 600">{{ record.type }}</div>
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
fontWeight: '600',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ record.amount }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||||
|
{{ record.date }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
// Cash Out 记录数据
|
||||||
|
const cashOutRecords = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
amount: 10,
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
status: 'Under review',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
amount: 10,
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
status: 'Approved',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
amount: 10,
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
status: 'Rejection',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// 其他记录数据
|
||||||
|
const otherRecords = ref([
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
type: 'Exchange Coins',
|
||||||
|
amount: '- $10',
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
type: "BD's income",
|
||||||
|
amount: '+ $10',
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
type: "BD Leader's income",
|
||||||
|
amount: '+ $10',
|
||||||
|
date: '21/10/2025 17:56',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const defaultAvatarUrl = (e) => {
|
||||||
|
console.log('头像资源出错')
|
||||||
|
e.target.onerror = null //防止循环
|
||||||
|
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 这里可以添加数据获取逻辑
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
* {
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
font-family: 'SF Pro Text';
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullPage {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: url(/src/assets/images/secondBg.png);
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
* {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
* {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user