feat: 邀请有奖页面开发

src/locale/en.json

@@ -3,6 +3,7 @@
   "tabbar.income": "Income",
   "tabbar.mine": "Mine",
   "home.missionCenter": "Mission Center",
+  "home.refer&earn": "Refer & Earn",
   "home.vip": "VIP Membership",
   "search.placeholder": "Search",
   "search.filterPrice": "All Price",

src/pages.json

@@ -100,6 +100,14 @@
         "navigationBarBackgroundColor": "#fff"
       }
     },
+    {
+      "path": "pages/referEarn/referEarn",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/search/search",
       "type": "page",

src/pages/index/index.vue

@@ -60,8 +60,9 @@ const navIcons = ref([
   },
   {
     image: '/static/index/home-vip.png',
-    title: 'home.vip',
+    title: 'home.refer&earn',
     size: '100rpx',
+    url: '/pages/referEarn/referEarn',
   },
   {
     image: '/static/index/home-vip.png',

src/pages/referEarn/referEarn.vue

@@ -0,0 +1,115 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</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: 'ReferEarn', // 邀请赚钱
+})
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
+// 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">
+    <template #top>
+      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <wd-navbar custom-class="bg-transparent!" :bordered="false" left-arrow title="Refer Earn" />
+      </view>
+    </template>
+    <view class="mb-40rpx">
+      <!-- 邀请图 -->
+    </view>
+    <view class="px-24rpx">
+      <view class="mb-28rpx text-center text-32rpx text-[var(--wot-color-theme)]">
+        - How to Share and Earn Money -
+      </view>
+      <view class="mb-40rpx flex items-center justify-between text-center">
+        <view class="shadow='0rpx 2rpx 8rpx 0rpx rgba(249,205,150,0.5)' flex flex-1 flex-col items-center rounded-16rpx bg-#F9CD96/60 px-12rpx py-30rpx">
+          <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
+            1
+          </view>
+          <view class="text-24rpx text-#8F3301 font-bold">
+            Share Invite Friends
+          </view>
+        </view>
+        <wd-icon name="caret-right-small" size="32rpx" color="#D8D8D8" class="mx-16rpx" />
+        <view class="shadow='0rpx 2rpx 8rpx 0rpx rgba(249,205,150,0.5)' flex flex-1 flex-col items-center rounded-16rpx bg-#F9CD96/60 px-12rpx py-30rpx">
+          <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
+            2
+          </view>
+          <view class="text-24rpx text-#8F3301 font-bold">
+            Your Friend Join Group
+          </view>
+        </view>
+        <wd-icon name="caret-right-small" size="32rpx" color="#D8D8D8" class="mx-16rpx" />
+        <view class="shadow='0rpx 2rpx 8rpx 0rpx rgba(249,205,150,0.5)' flex flex-1 flex-col items-center rounded-16rpx bg-#F9CD96/60 px-12rpx py-30rpx">
+          <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
+            3
+          </view>
+          <view class="text-24rpx text-#8F3301 font-bold">
+            You Get ৳50 Reward
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="mb-18rpx text-32rpx">
+          Invited Friends
+        </view>
+        <view class="rounded-16rpx bg-white px-24rpx py-8rpx">
+          <view
+            v-for="i in 3"
+            :key="i"
+            class="flex items-center justify-between py-18rpx"
+            :class="{ 'border-b-1 border-b-solid border-#E1E1E1': i !== 3 }"
+          >
+            <view class="flex items-center">
+              <wd-img width="80rpx" height="80rpx" round src="https://picsum.photos/80" />
+              <view class="ml-20rpx text-28rpx font-bold">
+                Aamir Khan
+              </view>
+            </view>
+            <view class="text-24rpx">
+              2025/05/05 12:30
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/search/search.vue

@@ -144,6 +144,7 @@ page {
     margin: 0;
     max-width: 100%;
     .content {
+      box-sizing: border-box;
       position: relative;
       height: 100%;
       display: flex;
@@ -155,7 +156,7 @@ page {
       .search-input {
         box-sizing: border-box;
         flex: 1;
-        height: 72rpx;
+        height: 100%;
         text-align: left;
         background: rgba(245, 245, 245, 0.6);
         border-radius: 8rpx;

src/style/index.scss

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