bandhuBuy-uniapp/src/pages/referEarn/referEarn.vue

<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'
import { myUsers } from '@/api/mine'
import { goBack } from '@/utils/page'

defineOptions({
  name: 'ReferEarn', // 邀请赚钱
})

// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// 搜索结果
const dataList = ref([])
async function queryList(pageNo: number, pageSize: number) {
  try {
    const res = await myUsers({
      page: pageNo,
      size: pageSize,
      type: 1,
    })
    paging.value.complete(res.data.list)
  }
  catch {
    paging.value.complete(false)
  }
}
</script>

<template>
  <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false" fixed>
    <template #left>
      <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="() => goBack()" />
    </template>
    <template #title>
      <view class="text-white font-bold text-32rpx!">
        {{ $t('referEarn.title') }}
      </view>
    </template>
  </wd-navbar>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
    <view class="relative mb-40rpx">
      <!-- 邀请图 -->
      <image src="/static/images/refer-earn-bg.png" class="w-full" mode="widthFix" />
      <view class="absolute bottom-166rpx left-1/2 w-326rpx transform text-center -translate-x-1/2">
        <view class="px-14rpx text-36rpx text-white">
          <view>{{ $t('referEarn.inviteFriends') }}</view>
          <view class="mb-26rpx">
            {{ $t('referEarn.earnCash') }}
            <text class="text-[var(--wot-color-theme)]">
              ৳50
            </text>
          </view>
        </view>
        <view class="rounded-full bg-#F9CD96 py-14rpx text-34rpx text-[var(--wot-color-theme)] font-bold shadow-[0_2rpx_8rpx_0_rgba(249,205,150,0.5)]">
          {{ $t('referEarn.shareNow') }}
        </view>
      </view>
    </view>
    <view class="px-24rpx">
      <view class="mb-28rpx text-center text-32rpx text-[var(--wot-color-theme)]">
        {{ $t('referEarn.howToShare') }}
      </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">
            {{ $t('referEarn.step1') }}
          </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">
            {{ $t('referEarn.step2') }}
          </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">
            {{ $t('referEarn.step3') }}
          </view>
        </view>
      </view>
      <view>
        <view class="mb-18rpx text-32rpx">
          {{ $t('referEarn.invitedFriends') }}
        </view>
        <view v-if="dataList.length" class="rounded-16rpx bg-white px-24rpx py-8rpx">
          <view
            v-for="(item, index) in dataList"
            :key="index"
            class="flex items-center justify-between py-18rpx"
            :class="{ 'border-b-1 border-b-solid border-#E1E1E1': index !== dataList.length - 1 }"
          >
            <view class="flex items-center">
              <wd-img width="80rpx" height="80rpx" round :src="item.headPic" />
              <view class="ml-20rpx text-28rpx font-bold">
                {{ item.name }}
              </view>
            </view>
            <view class="text-24rpx">
              {{ item.createTime }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
//
</style>