From 9c80d88e5add1a8041f46fcd3a3fd37e00ff1864 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 28 Oct 2025 16:31:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=94=B6?=
 =?UTF-8?q?=E5=85=A5=E6=93=8D=E4=BD=9C=E7=BB=93=E6=9E=9C=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                    |   6 +
 src/utils/permissionManager.js         |   1 +
 src/views/BDCenter/availableIncome.vue |   2 +-
 src/views/BDCenter/incomeDetails.vue   | 238 +++++++++++++++++++++++++
 4 files changed, 246 insertions(+), 1 deletion(-)
 create mode 100644 src/views/BDCenter/incomeDetails.vue

diff --git a/src/router/index.js b/src/router/index.js
index 8424298..7d36fb8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -275,6 +275,12 @@ const router = createRouter({
       component: () => import('../views/BDCenter/availableIncome.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/income-details',
+      name: 'income-details',
+      component: () => import('../views/BDCenter/incomeDetails.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index b312f5e..60faa83 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -75,6 +75,7 @@ export const ROLE_PERMISSIONS = {
     '/history-salary',
     '/platform-salary',
     '/available-income', //操作收益页
+    '/income-details', //操作结果页
   ],
 
   // Anchor (主播)
diff --git a/src/views/BDCenter/availableIncome.vue b/src/views/BDCenter/availableIncome.vue
index 3af02d2..6a95768 100644
--- a/src/views/BDCenter/availableIncome.vue
+++ b/src/views/BDCenter/availableIncome.vue
@@ -515,7 +515,7 @@ const fetchBankBalance = async () => {
 
 // 方法
 const showDetails = () => {
-  router.push('/information-details')
+  router.push('/income-details')
 }
 
 const searchPayee = () => {
diff --git a/src/views/BDCenter/incomeDetails.vue b/src/views/BDCenter/incomeDetails.vue
new file mode 100644
index 0000000..adb605c
--- /dev/null
+++ b/src/views/BDCenter/incomeDetails.vue
@@ -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>