referEarn.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationStyle: 'custom',
  6. },
  7. }
  8. </route>
  9. <script lang="ts" setup>
  10. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  11. // eslint-disable-next-line unused-imports/no-unused-imports
  12. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  13. import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
  14. import { myUsers } from '@/api/mine'
  15. import { goBack } from '@/utils/page'
  16. defineOptions({
  17. name: 'ReferEarn', // 邀请赚钱
  18. })
  19. // z-paging
  20. const paging = ref(null)
  21. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  22. useZPaging(paging)
  23. // 搜索结果
  24. const dataList = ref([])
  25. async function queryList(pageNo: number, pageSize: number) {
  26. try {
  27. const res = await myUsers({
  28. page: pageNo,
  29. size: pageSize,
  30. type: 1,
  31. })
  32. paging.value.complete(res.data.list)
  33. }
  34. catch {
  35. paging.value.complete(false)
  36. }
  37. }
  38. </script>
  39. <template>
  40. <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false" fixed>
  41. <template #left>
  42. <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="() => goBack()" />
  43. </template>
  44. <template #title>
  45. <view class="text-white font-bold text-32rpx!">
  46. {{ $t('referEarn.title') }}
  47. </view>
  48. </template>
  49. </wd-navbar>
  50. <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
  51. <view class="relative mb-40rpx">
  52. <!-- 邀请图 -->
  53. <image src="/static/images/refer-earn-bg.png" class="w-full" mode="widthFix" />
  54. <view class="absolute bottom-166rpx left-1/2 w-326rpx transform text-center -translate-x-1/2">
  55. <view class="px-14rpx text-36rpx text-white">
  56. <view>{{ $t('referEarn.inviteFriends') }}</view>
  57. <view class="mb-26rpx">
  58. {{ $t('referEarn.earnCash') }}
  59. <text class="text-[var(--wot-color-theme)]">
  60. ৳50
  61. </text>
  62. </view>
  63. </view>
  64. <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)]">
  65. {{ $t('referEarn.shareNow') }}
  66. </view>
  67. </view>
  68. </view>
  69. <view class="px-24rpx">
  70. <view class="mb-28rpx text-center text-32rpx text-[var(--wot-color-theme)]">
  71. {{ $t('referEarn.howToShare') }}
  72. </view>
  73. <view class="mb-40rpx flex items-center justify-between text-center">
  74. <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">
  75. <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
  76. 1
  77. </view>
  78. <view class="text-24rpx text-#8F3301 font-bold">
  79. {{ $t('referEarn.step1') }}
  80. </view>
  81. </view>
  82. <wd-icon name="caret-right-small" size="32rpx" color="#D8D8D8" class="mx-16rpx" />
  83. <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">
  84. <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
  85. 2
  86. </view>
  87. <view class="text-24rpx text-#8F3301 font-bold">
  88. {{ $t('referEarn.step2') }}
  89. </view>
  90. </view>
  91. <wd-icon name="caret-right-small" size="32rpx" color="#D8D8D8" class="mx-16rpx" />
  92. <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">
  93. <view class="mb-10rpx text-48rpx text-[var(--wot-color-theme)]">
  94. 3
  95. </view>
  96. <view class="text-24rpx text-#8F3301 font-bold">
  97. {{ $t('referEarn.step3') }}
  98. </view>
  99. </view>
  100. </view>
  101. <view>
  102. <view class="mb-18rpx text-32rpx">
  103. {{ $t('referEarn.invitedFriends') }}
  104. </view>
  105. <view v-if="dataList.length" class="rounded-16rpx bg-white px-24rpx py-8rpx">
  106. <view
  107. v-for="(item, index) in dataList"
  108. :key="index"
  109. class="flex items-center justify-between py-18rpx"
  110. :class="{ 'border-b-1 border-b-solid border-#E1E1E1': index !== dataList.length - 1 }"
  111. >
  112. <view class="flex items-center">
  113. <wd-img width="80rpx" height="80rpx" round :src="item.headPic" />
  114. <view class="ml-20rpx text-28rpx font-bold">
  115. {{ item.name }}
  116. </view>
  117. </view>
  118. <view class="text-24rpx">
  119. {{ item.createTime }}
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. </view>
  125. </z-paging>
  126. </template>
  127. <style lang="scss" scoped>
  128. //
  129. </style>