From afd54b4988cb3f1f57c39650cfc2fbab866ddac0 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 23 Oct 2025 15:35:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E7=BE=8E?=
 =?UTF-8?q?=E5=85=83=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/assets/icon/arrowBackBlack.png   | Bin 0 -> 514 bytes
 src/views/Wallet/CashOut/CashOut.vue | 246 ++++++++++++++++++++++++++-
 2 files changed, 243 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icon/arrowBackBlack.png

diff --git a/src/assets/icon/arrowBackBlack.png b/src/assets/icon/arrowBackBlack.png
new file mode 100644
index 0000000000000000000000000000000000000000..09af39d8bc17136e84819d455422eb01f1fda1b8
GIT binary patch
literal 514
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!oCO|{#S9FJ79h;%I?XTvD9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~!m+;mSD$B+ufx3>@a9(E9EdB{E|*dd02H^6b$
zLiHfF00!0ry;2JpG#L7G<OS4Drk16z`MD%i<mZ%lKfXHsP(d&-lsZ-%{qcC64gcfH
zx#yF8H?GJ##r#O-_4m1(XWzFMzgYS*`q7*4b$3N)RxJoFe6aY$6y~|z%vaWn$4p)3
z{Yd7y^HK>9HNF+Ble(C_8lOCB@KQKwu|UAXjPDDdiY$8-+oXQxy-blu8s!>u9yz>r
z2rFEWs<7MQg4TponGC@bW_%l%BabttDg3rLz_q0lNPG#A?qKe5UpK=fM~TmXsrG7{
z!Ly|MroG8+_3QK(&)RNuKuYG(VfiencWXCx9^q=){bH$^K&NHZJr|X4Irr>>x}UPX
z_E@{kI!AeHO#Q~5D^>O<^n&_XwN`uVH9M1|^fl(-=8h}X?tylb4hbzUQJJb6e$&G%
z`@p1$SH3NIs-&qm$=fyP?w0)~LUQl-iBEhb_2JQ-9~_N*u1of1{<oa>`)BFdbth#0
ztuE9Os=a(qQDBYhA^t6AYu2jrsI_->fWU{Z%wFxqoh>1Z3xH9^;OXk;vd$@?2>`@9
B(4+tW

literal 0
HcmV?d00001

diff --git a/src/views/Wallet/CashOut/CashOut.vue b/src/views/Wallet/CashOut/CashOut.vue
index b096c63..e7efc79 100644
--- a/src/views/Wallet/CashOut/CashOut.vue
+++ b/src/views/Wallet/CashOut/CashOut.vue
@@ -1,7 +1,247 @@
 <template>
-  <div>1111111</div>
+  <div class="fullPage">
+    <GeneralHeader
+      style="width: 100%"
+      title="Cash out"
+      color="color: rgba(0, 0, 0, 0.80)"
+      backImg="/src/assets/icon/arrowBackBlack.png"
+    />
+
+    <div style="padding: 16px; height: 150vh">
+      <!-- 信息部分 -->
+      <div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+          "
+        >
+          <div style="font-weight: 600">Information</div>
+          <div style="display: flex; align-items: center" @click="lookDetails">
+            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
+            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+          </div>
+        </div>
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+        >
+          <span style="font-weight: 510; font-size: 0.8em">Available salary: </span>
+          <span style="font-weight: 700; color: #333">12345645</span>
+        </div>
+      </div>
+
+      <!-- 银行帐号信息 -->
+      <div>
+        <div style="display: flex; align-items: center; margin-bottom: 10px">
+          <div style="font-weight: 600">KYC</div>
+        </div>
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          "
+        >
+          <!-- 未上传银行卡信息 -->
+          <div
+            v-if="!hasBankCard"
+            style="display: flex; justify-content: space-between; align-items: center"
+          >
+            <span style="font-weight: 510; font-size: 1em">Complete information</span>
+            <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+          </div>
+          <!-- 获取到银行卡信息 -->
+          <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
+            <!-- 图片 -->
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <span style="font-weight: 510; font-size: 1em">Passport/ID card:(3/3)</span>
+              <img src="../../../assets/icon/arrow.png" alt="" style="width: 6vw" />
+            </div>
+            <div style="display: flex; align-items: center; gap: 4px">
+              <div
+                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
+              ></div>
+              <div
+                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
+              ></div>
+              <div
+                style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px; background: #ededed"
+              ></div>
+            </div>
+
+            <!-- 卡号 -->
+            <div style="font-weight: 500">Contact number:</div>
+            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
+              123-456-789-1234
+            </div>
+
+            <!-- 备注信息 -->
+            <div style="font-weight: 500">Other description:</div>
+            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
+              asdfasdfasdfasdf asfasfsaasdasdfasdfasdfa sfasfasfasfasfsdasdfasdfasf asdfafdsa asdf
+              asdasddsasdsadads
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提现按钮 -->
+      <div style="display: flex; justify-content: center; align-items: center">
+        <div
+          style="
+            width: 80%;
+            border-radius: 32px;
+            background: linear-gradient(135deg, #d1ced6 2.82%, #7c7882 99.15%);
+            padding: 12px;
+            color: #fff;
+            font-weight: 590;
+            text-align: center;
+          "
+          :style="{
+            background: hasBankCard
+              ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
+              : 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
+          }"
+          @click="CashOut"
+        >
+          Cash out
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
+      <div
+        style="
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        @click.stop
+      >
+        <div
+          style="
+            width: 80%;
+            border-radius: 12px;
+            background: #fff;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+          "
+        >
+          <div style="font-weight: 800; font-size: 1.2em">Tips</div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.9em">
+            Please fill in the information carefully. You can only withdraw cash after the
+            information is completed.
+          </div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
+            *lf there is a problem with the card number and the transfer cannot be made, it will
+            result in the review being.
+          </div>
+          <div style="display: flex; justify-content: center; align-items: center">
+            <div
+              style="
+                padding: 12px 20px;
+                border-radius: 12px;
+                background: linear-gradient(
+                  152deg,
+                  rgba(198, 112, 255, 0.8) 7.01%,
+                  rgba(119, 38, 255, 0.8) 92.99%
+                );
+                color: #fff;
+                font-weight: 800;
+              "
+              @click="Receive"
+            >
+              Receive
+            </div>
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import maskLayer from '@/components/MaskLayer.vue'
 
-<style lang="scss" scoped></style>
+import { ref, onMounted, computed } from 'vue'
+
+const maskLayerShow = ref(false)
+
+const bankCardInfo = ref({
+  id: '',
+})
+const hasBankCard = computed(() => {
+  return Object.keys(bankCardInfo.value).length > 0
+})
+
+// 点击按钮
+const CashOut = () => {
+  if (hasBankCard.value) {
+  } else {
+    maskLayerShow.value = true
+  }
+}
+
+// 关闭提示信息
+const Receive = () => {
+  maskLayerShow.value = false
+}
+</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>