feat(新页面): 历史提现页

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 },
+    },
   ],
 })
 

src/utils/permissionManager.js

@@ -121,6 +121,7 @@ export const ROLE_PERMISSIONS = {
     '/invitation-to-register', //邀请新用户注册页面
     '/lottery', // 抽奖活动页面
     '/cash-out', // 提现页面
+    '/cash-out-details', //提现详情页面
   ],
 
   // 加载页面

src/utils/routeGuard.js

@@ -412,6 +412,7 @@ class RouteGuard {
       '/invitation-to-register', //邀请新用户注册页面
       '/lottery', // 抽奖活动页面
       '/cash-out', // 提现页面
+      '/cash-out-details', //提现详情页面
     ]
     return publicPages.includes(path)
   }

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 {

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>