feat: 收益、我的tabbar页面开发

src/pages.json

@@ -77,19 +77,18 @@
     {
       "path": "pages/income/income",
       "type": "page",
-      "layout": "tabbar",
+      "layout": "default",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
+        "navigationBarTitleText": "Revenue Center",
+        "navigationBarBackgroundColor": "#fff"
       }
     },
     {
       "path": "pages/mine/mine",
       "type": "page",
-      "layout": "tabbar",
+      "layout": "default",
       "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
+        "navigationStyle": "custom"
       }
     },
     {

src/pages/income/income.vue

@@ -1,47 +1,214 @@
-<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
 <route lang="json5">
-{
-  layout: 'tabbar',
-  style: {
-    // 'custom' 表示开启自定义导航栏，默认 'default'
-    navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
-  },
-}
-</route>
+  {
+    layout: 'default',
+    style: {
+      navigationBarTitleText: 'Revenue Center',
+      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: 'Income',
+  name: 'Income', // 收益
 })
 
-// 获取屏幕边界到安全区域距离
-let safeAreaInsets
-let systemInfo
-
-// #ifdef MP-WEIXIN
-// 微信小程序使用新的API
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
-    }
-  : null
-// #endif
-
-// #ifndef MP-WEIXIN
-// 其他平台继续使用uni API
-systemInfo = uni.getSystemInfoSync()
-safeAreaInsets = systemInfo.safeAreaInsets
-// #endif
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+
+const dayType = ref(1)
+
+// 搜索结果
+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>
-  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    121212312312
-  </view>
-  <tabbar />
+  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+    <view class="px-24rpx pb-24rpx">
+      <view
+        class="mb-20rpx rounded-16rpx from-[rgba(52,52,52,0.95)] to-[rgba(16,16,16,0.95)] bg-gradient-to-br pb-28rpx pt-44rpx text-white"
+      >
+        <view class="mb-50rpx flex items-center justify-around text-center">
+          <view>
+            <view class="text-22rpx">
+              Total Earnings
+            </view>
+            <view class="text-40rpx font-bold">
+              152,418
+            </view>
+          </view>
+          <view>
+            <view class="text-22rpx">
+              Account Balance
+            </view>
+            <view class="relative text-40rpx font-bold">
+              <text>51,200</text>
+              <wd-icon custom-class="absolute -right-24rpx top-1/2 -translate-y-1/2" name="arrow-right" size="24rpx" />
+            </view>
+          </view>
+        </view>
+        <view class="flex items-center justify-around text-center">
+          <view>
+            <view class="text-22rpx">
+              <text class="mr-1px">
+                Settled Amount
+              </text>
+              <wd-icon name="help-circle" size="20rpx" />
+            </view>
+            <view class="text-40rpx font-bold">
+              102,566
+            </view>
+          </view>
+          <wd-divider dashed custom-class="h-60rpx!" color="#A4A4A4" vertical />
+          <view>
+            <view class="text-22rpx">
+              <text class="mr-1px">
+                Pending Amount
+              </text>
+              <wd-icon name="help-circle" size="20rpx" />
+            </view>
+            <view class="text-40rpx font-bold">
+              28,925
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="mb-20rpx rounded-16rpx bg-white py-24rpx text-center">
+        <view class="flex items-center justify-between">
+          <view class="flex-[33.33%]">
+            <view class="text-22rpx text-#5B5B5B">
+              TD Earnings
+            </view>
+            <view class="text-26rpx font-bold">
+              12,566
+            </view>
+          </view>
+          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
+          <view class="flex-[33.33%]">
+            <view class="text-22rpx text-#5B5B5B">
+              TD Earnings
+            </view>
+            <view class="text-26rpx font-bold">
+              12,566
+            </view>
+          </view>
+          <wd-divider dashed custom-class="h-40rpx!" color="#A4A4A4" vertical />
+          <view class="flex-[33.33%]">
+            <view class="text-22rpx text-#5B5B5B">
+              TD Earnings
+            </view>
+            <view class="text-26rpx font-bold">
+              12,566
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="mb-20rpx flex items-center justify-between gap-22rpx text-center text-32rpx">
+        <view class="flex-1 rounded-16rpx bg-[rgba(var(--wot-color-theme-rgb),0.5)] py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]">
+          <text class="pr-16rpx">
+            My Group Data
+          </text>
+          <wd-icon name="chevron-right-circle" size="32rpx" />
+        </view>
+        <view class="flex-1 rounded-16rpx bg-#FEE750/50 py-32rpx shadow-[4rpx_4rpx_8rpx_0rpx_rgba(0,0,0,0.5)]">
+          <text class="pr-16rpx">
+            My Group Data
+          </text>
+          <wd-icon name="chevron-right-circle" size="32rpx" />
+        </view>
+      </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>
+page {
+  background: #f5f5f5;
+}
+</style>
+
+<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/index/index.vue

@@ -144,7 +144,7 @@ function queryList(pageNo, pageSize) {
       @click="handleClick"
       @change="onChange"
     />
-    <view class="px-25rpx pb-24rpx">
+    <view class="px-24rpx pb-24rpx">
       <view class="flex items-end justify-between pb-22rpx pt-24rpx">
         <view class="flex items-center justify-between">
           <view class="flex flex-col items-center">

src/pages/mine/mine.vue

@@ -1,47 +1,111 @@
-<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
 <route lang="json5">
-{
-  layout: 'tabbar',
-  style: {
-    // 'custom' 表示开启自定义导航栏，默认 'default'
-    navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
-  },
-}
-</route>
+  {
+    layout: 'default',
+    style: {
+      navigationStyle: 'custom',
+    },
+  }
+  </route>
 
 <script lang="ts" setup>
 defineOptions({
-  name: 'Mine',
+  name: 'Mine', // 我的
 })
-
 // 获取屏幕边界到安全区域距离
-let safeAreaInsets
-let systemInfo
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
 
-// #ifdef MP-WEIXIN
-// 微信小程序使用新的API
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
-    }
-  : null
-// #endif
+const dayType = ref(1)
 
-// #ifndef MP-WEIXIN
-// 其他平台继续使用uni API
-systemInfo = uni.getSystemInfoSync()
-safeAreaInsets = systemInfo.safeAreaInsets
-// #endif
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+  }, 1000)
+}
 </script>
 
 <template>
-  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    121212312312
+  <view
+    class="flex items-center justify-between bg-[rgba(var(--wot-color-theme-rgb),0.3)] pb-48rpx pl-24rpx pr-54rpx"
+    :style="{ paddingTop: `${safeAreaInsets?.top + 3}px` }"
+  >
+    <view class="flex items-center">
+      <wd-img width="96rpx" height="96rpx" round src="https://picsum.photos/96" />
+      <view class="ml-24rpx text-32rpx font-bold">
+        Aamir Khan
+      </view>
+    </view>
+    <wd-icon name="setting" color="#3A444C" size="36rpx" />
+  </view>
+  <view class="relative rounded-tl-24rpx rounded-tr-24rpx bg-white px-24rpx pb-24rpx pt-28rpx -top-24rpx">
+    <view class="mb-18rpx text-32rpx">
+      BandhuBuy Wallet
+    </view>
+    <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">
+        <wd-img width="84rpx" height="84rpx" round src="https://picsum.photos/84" />
+        <view class="ml-18rpx">
+          <view class="text-22rpx text-#595959">
+            Wallet Balance
+          </view>
+          <view class="text-44rpx text-[var(--wot-color-theme)] font-bold">
+            5,000
+          </view>
+        </view>
+      </view>
+      <view class="flex flex-col items-end">
+        <wd-button size="small">
+          Recharge
+        </wd-button>
+        <view class="mt-10rpx text-20rpx text-#595959">
+          Highest Discount 5%
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="mb-20rpx bg-white px-24rpx pb-32rpx pt-26rpx">
+    <view class="mb-24rpx flex items-center justify-between">
+      <text class="text-32rpx font-bold">
+        My Group
+      </text>
+      <view class="flex items-center">
+        <text class="mr-8rpx text-22rpx text-#3A444C">
+          All Group
+        </text>
+        <wd-icon name="chevron-right" size="28rpx" />
+      </view>
+    </view>
+    <view class="grid grid-cols-4 gap-24rpx">
+      <view v-for="i in 4" :key="i" class="flex flex-col items-center">
+        <wd-img width="48rpx" height="48rpx" src="https://picsum.photos/48" />
+        <view class="mt-18rpx text-22rpx text-#3A444C">
+          To Pay
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="grid grid-cols-3 gap-24rpx bg-white py-45rpx">
+    <view v-for="i in 6" :key="i" class="flex flex-col items-center">
+      <wd-img width="48rpx" height="48rpx" src="https://picsum.photos/48" />
+      <view class="mt-18rpx text-22rpx text-#3A444C">
+        To Pay
+      </view>
+    </view>
   </view>
-  <tabbar />
 </template>
+
+<style>
+page {
+  background: #f5f5f5;
+}
+</style>

src/pages/search/search.vue

@@ -13,11 +13,13 @@
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import { useQueue } from 'wot-design-uni'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
-import { t } from '@/locale'
 
 defineOptions({
-  name: 'Index', // 首页
+  name: 'SearchPage', // 搜索
 })
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
 // z-paging
 const paging = ref(null)
 // 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
@@ -32,13 +34,13 @@ const value2 = ref<number>(0)
 const value3 = ref<number>(0)
 
 const option1 = ref<Record<string, any>[]>([
-  { label: t('search.filterPrice'), value: 0 },
+  { label: 'All Price', value: 0 },
 ])
 const option2 = ref<Record<string, any>[]>([
-  { label: t('search.filterCategory'), value: 0 },
+  { label: 'Category', value: 0 },
 ])
 const option3 = ref<Record<string, any>[]>([
-  { label: t('search.filterSellers'), value: 0 },
+  { label: 'Best Sellers', value: 0 },
 ])
 
 function handleChange1({ value }) {
@@ -102,24 +104,26 @@ function queryList(pageNo, pageSize) {
 <template>
   <z-paging ref="paging" refresher-only use-page-scroll @query="queryList" @click="closeOutside">
     <template #top>
-      <wd-navbar :bordered="false" safe-area-inset-top placeholder fixed>
-        <template #title>
-          <view class="content">
-            <view class="back">
-              <wd-icon name="thin-arrow-left" size="36rpx" />
+      <view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <wd-navbar :bordered="false">
+          <template #title>
+            <view class="content">
+              <view class="back">
+                <wd-icon name="thin-arrow-left" size="36rpx" />
+              </view>
+              <input v-model.trim="keyword" class="search-input" type="text" :placeholder="$t('search.placeholder')">
+              <wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
             </view>
-            <input v-model.trim="keyword" class="search-input" type="text" :placeholder="$t('search.placeholder')">
-            <wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
-          </view>
-        </template>
-      </wd-navbar>
-      <wd-drop-menu>
-        <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
-        <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
-        <wd-drop-menu-item v-model="value3" :options="option3" @change="handleChange3" />
-      </wd-drop-menu>
+          </template>
+        </wd-navbar>
+        <wd-drop-menu>
+          <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
+          <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
+          <wd-drop-menu-item v-model="value3" :options="option3" @change="handleChange3" />
+        </wd-drop-menu>
+      </view>
     </template>
-    <view class="px-25rpx pb-24rpx">
+    <view class="px-24rpx pb-24rpx">
       <view class="flex flex-wrap gap-20rpx">
         <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" />
         <view />

src/style/index.scss

@@ -13,6 +13,7 @@ page {
   font-size: 28rpx;
   // 修改按主题色
   --wot-color-theme: #e61b28;
+  --wot-color-theme-rgb: 230, 27, 40; // RGB值分解，对应#e61b28
   --wot-navbar-height: 110rpx;
 
   // 修改按钮背景色