From cb0f23a1b7f445b2bf8c39f8288cd4b7474e35f7 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 23 Oct 2025 16:02:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E6=8F=90=E7=8E=B0=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/utils/routeGuard.js              |   1 +
 src/views/Wallet/CashOut/CashOut.vue |  11 ++-
 src/views/Wallet/CashOut/Details.vue | 113 +++++++++++++++++++++++++++
 5 files changed, 129 insertions(+), 3 deletions(-)
 create mode 100644 src/views/Wallet/CashOut/Details.vue

diff --git a/src/router/index.js b/src/router/index.js
index cee757e..4723ce3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -257,6 +257,12 @@ const router = createRouter({
       component: () => import('../views/Wallet/CashOut/CashOut.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/cash-out-details',
+      name: 'cash-out-details',
+      component: () => import('../views/Wallet/CashOut/Details.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index d1e7d8a..a8c7317 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -121,6 +121,7 @@ export const ROLE_PERMISSIONS = {
     '/invitation-to-register', //邀请新用户注册页面
     '/lottery', // 抽奖活动页面
     '/cash-out', // 提现页面
+    '/cash-out-details', //提现详情页面
   ],
 
   // 加载页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index ff9e275..6c93dd7 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -412,6 +412,7 @@ class RouteGuard {
       '/invitation-to-register', //邀请新用户注册页面
       '/lottery', // 抽奖活动页面
       '/cash-out', // 提现页面
+      '/cash-out-details', //提现详情页面
     ]
     return publicPages.includes(path)
   }
diff --git a/src/views/Wallet/CashOut/CashOut.vue b/src/views/Wallet/CashOut/CashOut.vue
index e7efc79..559720f 100644
--- a/src/views/Wallet/CashOut/CashOut.vue
+++ b/src/views/Wallet/CashOut/CashOut.vue
@@ -7,7 +7,7 @@
       backImg="/src/assets/icon/arrowBackBlack.png"
     />
 
-    <div style="padding: 16px; height: 150vh">
+    <div style="padding: 16px">
       <!-- 信息部分 -->
       <div>
         <div
@@ -179,8 +179,9 @@
 <script setup>
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
-
 import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 const maskLayerShow = ref(false)
 
@@ -191,7 +192,11 @@ const hasBankCard = computed(() => {
   return Object.keys(bankCardInfo.value).length > 0
 })
 
-// 点击按钮
+const lookDetails = () => {
+  router.push('/cash-out-details')
+}
+
+// 提现按钮
 const CashOut = () => {
   if (hasBankCard.value) {
   } else {
diff --git a/src/views/Wallet/CashOut/Details.vue b/src/views/Wallet/CashOut/Details.vue
new file mode 100644
index 0000000..9b72334
--- /dev/null
+++ b/src/views/Wallet/CashOut/Details.vue
@@ -0,0 +1,113 @@
+<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">
+      <div
+        v-for="item in history"
+        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">${{ item.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">{{ item.date }}</div>
+          <div
+            style="
+              font-weight: 510;
+              background-clip: text;
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            "
+            :style="{
+              backgroundImage:
+                item.status == 0
+                  ? 'linear-gradient(248deg, #759cff 5.66%, #3d73ff 42.49%)'
+                  : item.status == 1
+                  ? 'linear-gradient(248deg, #75FF98 5.66%, #3DFF54 42.49%)'
+                  : 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
+            }"
+          >
+            {{ showStatus(item) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import { ref, onMounted, watch, computed } from 'vue'
+
+const history = ref([
+  { date: '21/10/2025 17:56', Amount: '10', status: 0 },
+  { date: '21/10/2025 17:56', Amount: '20', status: 1 },
+  { date: '21/10/2025 17:56', Amount: '10', status: 2 },
+])
+
+const showStatus = (item) => {
+  if (item.status == 0) {
+    return 'Under review'
+  } else if (item.status == 1) {
+    return 'Approved'
+  } else if (item.status == 2) {
+    return 'Rejection'
+  }
+}
+</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: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>