feat: 钱包充值及记录

src/pages.json

@@ -193,12 +193,40 @@
         "navigationBarBackgroundColor": "#FFFFFF"
       }
     },
+    {
+      "path": "pages/wallet/myWallet",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "My Wallet",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
     {
       "path": "pages/wallet/recharge",
       "type": "page",
       "layout": "default",
       "style": {
         "navigationBarTitleText": "Recharge",
+        "navigationBarBackgroundColor": "#fff",
+        "app-plus": {
+          "titleNView": {
+            "buttons": [
+              {
+                "text": "Record",
+                "fontSize": "28rpx"
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "path": "pages/wallet/rechargeRecord",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "Recharge Record",
         "navigationBarBackgroundColor": "#fff"
       }
     }

src/pages/mine/mine.vue

@@ -17,9 +17,9 @@ const safeAreaInsets = systemInfo.safeAreaInsets
 
 const dayType = ref(1)
 
-function toPage() {
+function toPage(url: string) {
   uni.navigateTo({
-    url: '/pages/myOrders/myOrders',
+    url,
   })
 }
 
@@ -68,7 +68,7 @@ function queryList(pageNo, pageSize) {
     <view
       class="flex items-center justify-between rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
     >
-      <view class="flex items-center">
+      <view class="flex items-center" @click="toPage('/pages/wallet/myWallet')">
         <wd-img width="84rpx" height="84rpx" round src="https://picsum.photos/84" />
         <view class="ml-18rpx">
           <view class="text-22rpx text-#595959">
@@ -94,7 +94,7 @@ function queryList(pageNo, pageSize) {
       <text class="text-32rpx font-bold">
         My Group
       </text>
-      <view class="flex items-center" @click="toPage">
+      <view class="flex items-center" @click="toPage('/pages/myOrders/myOrders')">
         <text class="mr-8rpx text-22rpx text-#3A444C">
           All Group
         </text>

src/pages/wallet/myWallet.vue

@@ -0,0 +1,127 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'My Wallet',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+const dayType = ref(1)
+function toPage(url: string) {
+  uni.navigateTo({
+    url,
+  })
+}
+</script>
+
+<template>
+  <z-paging refresher-only>
+    <view class="px-24rpx pt-20rpx">
+      <view
+        class="mb-20rpx flex items-center justify-around rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
+      >
+        <view class="text-center">
+          <view class="text-22rpx text-#595959">
+            Wallet Balance
+          </view>
+          <view class="mb-22rpx text-44rpx text-[var(--wot-color-theme)] font-bold">
+            5,000
+          </view>
+          <view class="flex items-center text-22rpx text-#595959">
+            <text class="mr-1px">
+              Wallet Frozen Balance
+            </text>
+            <wd-icon name="help-circle" size="20rpx" />
+          </view>
+          <view class="text-26rpx font-bold">
+            1,000
+          </view>
+        </view>
+        <view class="flex flex-col items-end">
+          <wd-button size="small" @click="toPage('/pages/wallet/recharge')">
+            Recharge
+          </wd-button>
+          <view class="mt-10rpx text-20rpx text-#595959">
+            Highest Discount 5%
+          </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>
+      <view>
+        <view class="mb-20rpx text-32rpx">
+          Revenue Record
+        </view>
+        <view class="mb-20rpx">
+          <wd-radio-group v-model="dayType" shape="button">
+            <wd-radio :value="1">
+              DT
+            </wd-radio>
+            <wd-radio :value="2">
+              YT
+            </wd-radio>
+            <wd-radio :value="3">
+              L7D
+            </wd-radio>
+            <wd-radio :value="4">
+              MTD
+            </wd-radio>
+            <wd-radio :value="5">
+              YTD
+            </wd-radio>
+          </wd-radio-group>
+        </view>
+        <view class="rounded-16rpx bg-white px-20rpx">
+          <view
+            v-for="i in 3" :key="i" class="py-20rpx"
+            :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': i !== 3 }"
+          >
+            <view class="mb-8rpx flex items-center justify-between text-24rpx">
+              <text class="truncate">
+                Group Buying Reward：PPB123456789Reward：PPB123456789Reward：PPB123456789
+              </text>
+              <text class="flex-shrink-0 pl-16rpx">
+                ৳ 8
+              </text>
+            </view>
+            <view class="flex items-center justify-between text-22rpx">
+              <text class="text-#5B5B5B">
+                2025/05/05 12:30:30
+              </text>
+              <wd-text type="success" text="Completed" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+:deep(.wd-radio-group) {
+  background: transparent;
+
+  .wd-radio.is-button.is-checked {
+    .wd-radio__label {
+      background: #ff334a !important;
+      border-color: #ff334a !important;
+      color: #fff !important;
+    }
+  }
+
+  .wd-radio__label {
+    width: 100rpx !important;
+    height: 40rpx !important;
+    padding: 0 !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+    border-color: rgba(151, 151, 151, 0.2) !important;
+  }
+}
+</style>

src/pages/wallet/recharge.vue

@@ -4,6 +4,16 @@
   style: {
     navigationBarTitleText: 'Recharge',
     navigationBarBackgroundColor: '#fff',
+    "app-plus": {
+      "titleNView": {
+        "buttons": [
+          {
+            "text": "Record",
+            "fontSize": "28rpx"
+          }
+        ]
+      }
+    }
   },
 }
 </route>
@@ -13,6 +23,14 @@ defineOptions({
   name: 'Recharge', // 充值
 })
 const selectId = ref(1)
+// 触发确定按钮
+onNavigationBarButtonTap((event: any) => {
+  if (event.text === 'Record') {
+    uni.navigateTo({
+      url: '/pages/wallet/rechargeRecord',
+    })
+  }
+})
 </script>
 
 <template>

src/pages/wallet/rechargeRecord.vue

@@ -0,0 +1,59 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'Recharge 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: 'RechargeRecord', // 充值记录
+})
+// 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>