|
|
@@ -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>
|
liangan