liangan 1 місяць тому
батько
коміт
f65ca7fd04

+ 3 - 0
src/App.vue

@@ -48,6 +48,7 @@ image {
 
 // 输入框样式 - 使用特殊化命名避免冲突
 :deep(.bandhu-auth-input-field) {
+  box-sizing: border-box;
   height: 72rpx !important;
   background: #ffffff !important;
   border-radius: 8rpx !important;
@@ -60,6 +61,7 @@ image {
 
 // 主要按钮样式
 :deep(.bandhu-auth-primary-btn) {
+  box-sizing: border-box;
   height: 88rpx !important;
   border-radius: 44rpx !important;
   font-size: 32rpx !important;
@@ -68,6 +70,7 @@ image {
 
 // 次要按钮样式(如获取验证码按钮)
 :deep(.bandhu-auth-secondary-btn) {
+  box-sizing: border-box;
   width: 160rpx !important;
   height: 72rpx !important;
   border-radius: 12rpx !important;

+ 18 - 0
src/pages.json

@@ -230,6 +230,24 @@
         "navigationBarTitleText": "Recharge Record",
         "navigationBarBackgroundColor": "#fff"
       }
+    },
+    {
+      "path": "pages/wallet/withdraw",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "Withdraw"
+      }
+    },
+    {
+      "path": "pages/wallet/withdrawRecord",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Withdraw Record",
+        "navigationBarBackgroundColor": "#fff"
+      }
     }
   ],
   "subPackages": []

+ 7 - 5
src/pages/wallet/myWallet.vue

@@ -49,11 +49,13 @@ function toPage(url: string) {
           </view>
         </view>
       </view>
-      <view class="mb-20rpx flex items-center justify-center">
-        <text class="mr-8rpx">
-          Withdraw Now
-        </text>
-        <wd-icon name="arrow-right" size="28rpx" />
+      <view class="mb-20rpx flex justify-center">
+        <view class="flex items-center justify-center" @click="toPage('/pages/wallet/withdraw')">
+          <text class="mr-8rpx">
+            Withdraw Now
+          </text>
+          <wd-icon name="arrow-right" size="28rpx" />
+        </view>
       </view>
       <view>
         <view class="mb-20rpx text-32rpx">

+ 118 - 0
src/pages/wallet/withdraw.vue

@@ -0,0 +1,118 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: 'Withdraw',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'Withdraw', // 提现
+})
+// 表单数据
+const formData = ref({
+  username: '',
+  password: '',
+})
+function toPage(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+</script>
+
+<template>
+  <view class="min-h-100vh flex flex-col bg-#FEE750">
+    <wd-navbar
+      custom-class="bg-#FEE750!"
+      :bordered="false"
+
+      safe-area-inset-top left-arrow placeholder fixed
+      title="Withdraw"
+    >
+      <template #right>
+        <text class="text-28rpx" @click="toPage('/pages/wallet/withdrawRecord')">
+          Record
+        </text>
+      </template>
+    </wd-navbar>
+    <view class="px-28rpx pb-28rpx pt-40rpx">
+      <view class="text-28rpx">
+        Wallet Balance
+      </view>
+      <view>
+        <text class="text-28rpx">
+          ৳
+        </text>
+        <text class="text-48rpx font-bold">
+          5,000
+        </text>
+      </view>
+    </view>
+    <view class="flex-1 rounded-t-24rpx bg-white p-24rpx">
+      <view class="mb-28rpx text-32rpx">
+        Withdrawal information
+      </view>
+      <wd-form ref="form" :model="formData" custom-class="mb-28rpx">
+        <view class="mb-40rpx space-y-32rpx">
+          <wd-input
+            v-model="formData.username"
+            placeholder="Bank Name"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <wd-input
+            v-model="formData.password"
+            placeholder="Bank Account Name"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <wd-input
+            v-model="formData.password"
+            placeholder="Bank Account No."
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <view class="flex items-center gap-20rpx">
+            <wd-input
+              v-model="formData.password"
+              placeholder="Withdrawal Amount"
+              no-border
+              custom-class="flex-1 bandhu-auth-input-field"
+            />
+            <wd-button
+              type="error"
+              plain
+              custom-class="bandhu-auth-secondary-btn"
+            >
+              All Amounts
+            </wd-button>
+          </view>
+        </view>
+        <wd-button plain block custom-class="h-80rpx!">
+          Submit
+        </wd-button>
+      </wd-form>
+      <view class="text-24rpx text-#5A5A5A line-height-48rpx">
+        Notes:
+        <br>
+        1.Withdrawal Review Hours Are From 9 AM To 10 PM. Expected to arrive within 2 hours after withdrawal, actual arrival time is subject to the final successful processing time
+        <br>
+        2.Make sure your bank account details is correct.
+        <br>
+        3.The withdrawal bank account information must be consistent with the registered account information.
+        <br>
+        4.The minimum amount for a single withdrawal is ৳300 and the maximum is ৳20,000;
+        <br>
+        5.Every withdrawal you make will incur a 3% withdrawal handling fee;
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

+ 59 - 0
src/pages/wallet/withdrawRecord.vue

@@ -0,0 +1,59 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'Withdraw Record',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'WithdrawRecord', // 充值记录
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
+useZPaging(paging)
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示,请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+</script>
+
+<template>
+  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+    <view class="py-20rpx">
+      <view class="bg-white px-22rpx py-18rpx">
+        <view class="mb-8rpx flex items-center justify-between">
+          <view>ID:20250505123030120</view>
+          <wd-text type="primary" bold text="Processing" />
+        </view>
+        <view class="flex items-center justify-between text-22rpx text-#3A444C">
+          <view>Wallet Balance:+300.00</view>
+          <view>05.05 12:30</view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

+ 1 - 0
src/style/index.scss

@@ -17,6 +17,7 @@ page {
   // 修改按主题色
   --wot-color-theme: #e61b28;
   --wot-color-theme-rgb: 230, 27, 40; // RGB值分解,对应#e61b28
+  --wot-navbar-title-font-size: 32rpx;
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
 }