feat(邀请注册页面): 对接接口

src/api/invitation.js

@@ -0,0 +1,73 @@
+import { get, post } from '../utils/http.js'
+
+// 获取我的邀请码
+export const getMyInviteCode = async () => {
+  try {
+    const response = await get(`/activity/invite/user/my/invite/code`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my invite code:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 绑定邀请码
+export const bindInviteCode = async (data) => {
+  try {
+    const response = await post(`/activity/invite/user/bind/invite/code`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch bind invite code:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取收益统计
+export const getMyInviteIncome = async () => {
+  try {
+    const response = await get(`/activity/invite/user/income/statistics`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my invite income:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 有效邀请用户列表
+export const getMyInviteUsers = async () => {
+  try {
+    const response = await get(`/activity/invite/user/valid/invite/users`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my invite users:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 邀请用户奖励池
+export const getInviteAwardPool = async () => {
+  try {
+    const response = await get(`/activity/invite/user/award/pool`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my invite award pool:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 邀请用户领取奖励
+export const getInviteReceiveAward = async (awardId) => {
+  try {
+    const response = await get(`/activity/invite/user/receive/award?id=${awardId}`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get receive invite award:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}

src/views/Invitation/InvitationToRegister.vue

@@ -20,7 +20,7 @@
       style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
     >
       <!-- 倒计时 -->
-      <div style="position: relative">
+      <!-- <div style="position: relative">
         <img :src="images.countdownBg" alt="" width="100%" style="display: block" />
         <div
           style="
@@ -37,7 +37,7 @@
         >
           29D 23：23:23
         </div>
-      </div>
+      </div> -->
 
       <!-- 我的邀请码 -->
       <div
@@ -65,12 +65,12 @@
             gap: 4px;
           "
         >
-          <div style="font-weight: 590">18709616238</div>
+          <div style="font-weight: 590">{{ myInviteInfo.inviteCode || '' }}</div>
           <img
             src="../../assets/icon/copy.png"
             alt=""
             width="24px"
-            @click="copyCode('18709616238')"
+            @click="copyCode(myInviteInfo.inviteCode || '')"
           />
         </div>
         <div style="font-weight: 510; font-size: 0.7em">
@@ -123,7 +123,7 @@
               "
             >
               <img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
-              <div style="font-weight: 590">111111</div>
+              <div style="font-weight: 590">{{ myInviteIncome.totalIncome || 0 }}</div>
             </div>
           </div>
           <div style="position: relative; width: 47%">
@@ -140,7 +140,7 @@
               "
             >
               <img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
-              <div style="font-weight: 590">111111</div>
+              <div style="font-weight: 590">{{ myInviteIncome.todayIncome || 0 }}</div>
             </div>
           </div>
         </div>
@@ -165,7 +165,9 @@
               background: radial-gradient(323.25% 50.32% at 50% 50%, #d58ef4 0%, #7a5aff 100%);
             "
           ></div>
-          <div style="font-weight: 590">Number of valid users l invited: 9</div>
+          <div style="font-weight: 590">
+            Number of valid users l invited: {{ myInviteIncome.validInviteCount || 0 }}
+          </div>
         </div>
 
         <!-- 列表 -->
@@ -220,9 +222,15 @@
               Prowide income
             </div>
           </div>
+
           <!-- 列表项 -->
-          <div v-for="value in 10" style="width: 100%; display: flex; align-items: center">
+          <div
-            <div style="flex: 1; font-weight: 590; font-size: 0.7em">ID:152319866</div>
+            v-for="user in myInviteUsers"
+            style="width: 100%; display: flex; align-items: center"
+          >
+            <div style="flex: 1; font-weight: 590; font-size: 0.7em">
+              ID:{{ user.invitedUserAccount || '-' }}
+            </div>
             <div
               style="
                 flex: 1;
@@ -243,7 +251,7 @@
                   );
                 "
               ></div>
-              <div style="font-weight: 590; font-size: 0.7em">10Day</div>
+              <div style="font-weight: 590; font-size: 0.7em">{{ user.remainingDays || 0 }}Day</div>
               <div
                 style="
                   width: 1px;
@@ -266,7 +274,9 @@
               "
             >
               <img src="../../assets/icon/coin.png" alt="" width="15%" />
-              <div style="color: #ffb627; font-size: 0.8em; font-weight: 590">11111111111</div>
+              <div style="color: #ffb627; font-size: 0.8em; font-weight: 590">
+                {{ user.provideIncome || 0 }}
+              </div>
             </div>
           </div>
         </div>
@@ -274,9 +284,13 @@
 
       <!-- 奖励说明模块 -->
       <div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
-        <!-- 邀请5人奖励 -->
+        <div style="position: relative" v-for="poolItem in inviteAwardPool">
-        <div style="position: relative">
+          <img
-          <img :src="images.reward5people" alt="" width="100%" style="display: block" />
+            :src="images[`reward${poolItem.quantity}people`]"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
           <div
             style="
               position: absolute;
@@ -287,7 +301,10 @@
             "
           >
             <div style="display: flex; justify-content: space-around">
-              <div style="width: 45%; position: relative">
+              <div
+                style="width: 45%; position: relative"
+                v-for="(award, index) in poolItem.activityRewardPropsList"
+              >
                 <img :src="images.rewardItemBg" alt="" width="100%" />
                 <div
                   style="
@@ -298,161 +315,19 @@
                     align-items: center;
                   "
                 >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                  <img :src="award.cover" alt="" width="50%" />
-                </div>
-              </div>
-              <div style="width: 45%; position: relative">
-                <img :src="images.rewardItemBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    inset: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
                 </div>
               </div>
             </div>
             <div style="display: flex; justify-content: center">
               <img
-                v-if="reward5peopleShow"
+                v-if="poolItem.state == '1'"
                 :src="images.receiveBtActive"
                 alt=""
                 width="35%"
-                @click="reward5peopleShow = false"
+                @click="receiveAward(poolItem.id)"
-              />
-              <img
-                v-else
-                :src="images.receiveBt"
-                alt=""
-                width="35%"
-                @click="reward5peopleShow = true"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 邀请10人奖励 -->
-        <div style="position: relative">
-          <img :src="images.reward10people" alt="" width="100%" style="display: block" />
-          <div
-            style="
-              position: absolute;
-              inset: 12% 0 0;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-            "
-          >
-            <div style="display: flex; justify-content: space-around">
-              <div style="width: 45%; position: relative">
-                <img :src="images.rewardItemBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    inset: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
-                </div>
-              </div>
-              <div style="width: 45%; position: relative">
-                <img :src="images.rewardItemBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    inset: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
-                </div>
-              </div>
-            </div>
-            <div style="display: flex; justify-content: center">
-              <img
-                v-if="reward10peopleShow"
-                :src="images.receiveBtActive"
-                alt=""
-                width="35%"
-                @click="reward10peopleShow = false"
-              />
-              <img
-                v-else
-                :src="images.receiveBt"
-                alt=""
-                width="35%"
-                @click="reward10peopleShow = true"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 邀请15人奖励 -->
-        <div style="position: relative">
-          <img :src="images.reward15people" alt="" width="100%" style="display: block" />
-          <div
-            style="
-              position: absolute;
-              inset: 12% 0 0;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-            "
-          >
-            <div style="display: flex; justify-content: space-around">
-              <div style="width: 45%; position: relative">
-                <img :src="images.rewardItemBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    inset: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
-                </div>
-              </div>
-              <div style="width: 45%; position: relative">
-                <img :src="images.rewardItemBg" alt="" width="100%" />
-                <div
-                  style="
-                    position: absolute;
-                    inset: 0;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
-                </div>
-              </div>
-            </div>
-            <div style="display: flex; justify-content: center">
-              <img
-                v-if="reward15peopleShow"
-                :src="images.receiveBtActive"
-                alt=""
-                width="35%"
-                @click="reward15peopleShow = false"
-              />
-              <img
-                v-else
-                :src="images.receiveBt"
-                alt=""
-                width="35%"
-                @click="reward15peopleShow = true"
               />
+              <img v-else :src="images.receiveBt" alt="" width="35%" />
             </div>
           </div>
         </div>
@@ -517,7 +392,7 @@
             </div>
 
             <!-- 确认按钮 -->
-            <img :src="images.confirm" alt="" width="25%" @click="confirmInvitationCode" />
+            <img :src="images.confirm" alt="" width="25%" @click="confirm" />
           </div>
           <div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
             *Only users who registered within 72 hours can fill in the invitation code. Once the
@@ -556,13 +431,18 @@ import {
 } from '@/utils/appConnectionManager.js'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import GeneralHeader from '@/components/GeneralHeader.vue'
-import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
-import TopUser from '@/components/WeeklyStar/topUser.vue'
 import maskLayer from '../../components/MaskLayer.vue'
-import { useDebounce, useThrottle } from '@/utils/useDebounce'
 import { getMemberProfile } from '@/api/wallet'
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
-import { set, useClipboard } from '@vueuse/core'
+import { useClipboard } from '@vueuse/core'
+import {
+  getMyInviteCode, // 获取我的邀请码
+  bindInviteCode, // 绑定邀请码
+  getMyInviteIncome, // 获取收益统计
+  getMyInviteUsers, // 有效邀请用户列表
+  getInviteAwardPool, // 邀请用户奖励池
+  getInviteReceiveAward, // 邀请用户领取奖励
+} from '@/api/invitation.js'
 
 // vite动态导入图片
 const imageModules = import.meta.glob('@/assets/images/InvitationNewUser/*.{png,jpg,svg}', {
@@ -587,13 +467,13 @@ const enterCodeShow = ref(false) //交易弹窗
 const tipShow = ref(false) //提示弹窗
 
 const invitationCode = ref('') //邀请码
+const myInviteInfo = ref({}) //我的邀请信息
+const myInviteIncome = ref({}) //邀请用户收益统计
+const myInviteUsers = ref([]) //邀请用户列表
+const inviteAwardPool = ref({})
 
 const showModule = ref('list') //显示模块
 
-const reward5peopleShow = ref(false)
-const reward10peopleShow = ref(false)
-const reward15peopleShow = ref(false)
-
 // 展示遮罩层
 const maskLayerShow = computed(() => {
   return helpInfoShow.value || enterCodeShow.value
@@ -747,19 +627,83 @@ const connectToApp = async () => {
   }
 }
 
+// 更改邀请码
 const confirmInvitationCode = () => {
   if (!invitationCode.value.trim()) {
     showWarning('Please enter a valid invitation code.')
     return
   }
-  invitationCode.value = ''
+}
-  showSuccess('Invitation code confirmed!')
+
-  enterCodeShow.value = false
+// 获取我的邀请码
+const apiGetMyInviteCode = async () => {
+  const resCode = await getMyInviteCode()
+  if (resCode.status && resCode.body) {
+    myInviteInfo.value = resCode.body
+  }
+}
+
+// 绑定邀请码
+const confirm = async () => {
+  if (!invitationCode.value.trim()) {
+    showWarning('Please enter a valid invitation code.')
+    return
+  }
+  let data = { inviteCode: invitationCode.value.trim(), inviteType: 'REGISTER' }
+  try {
+    const resBind = await bindInviteCode(data)
+    if (resBind.status) {
+      showSuccess('Invitation code bound successfully!')
+    } else {
+      showError('Invitation code binding failed.')
+    }
+    invitationCode.value = ''
+    enterCodeShow.value = false
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 获取收益统计
+const apiGetMyInviteIncome = async () => {
+  const resIncome = await getMyInviteIncome()
+  if (resIncome.status && resIncome.body) {
+    myInviteIncome.value = resIncome.body
+  }
+}
+
+// 有效邀请用户列表
+const apiGetMyInviteUsers = async () => {
+  const resUserList = await getMyInviteUsers()
+  if (resUserList.status && resUserList.body) {
+    myInviteUsers.value = resUserList.body
+  }
+}
+
+// 邀请用户奖励池
+const apiGetInviteAwardPool = async () => {
+  const resAwardPool = await getInviteAwardPool()
+  if (resAwardPool.status && resAwardPool.body) {
+    inviteAwardPool.value = resAwardPool.body
+  }
+}
+
+// 邀请用户领取奖励
+const receiveAward = async (awardId) => {
+  const resAward = await getInviteReceiveAward(awardId)
+  if (resAward.status && resAward.body) {
+    apiGetInviteAwardPool() // 刷新奖励池
+  }
 }
 
 onMounted(() => {
   connectToApp()
   isInAppEnvironment.value = isInApp()
+
+  apiGetMyInviteCode() // 获取我的邀请码
+  apiGetMyInviteIncome() // 获取收益统计
+  apiGetMyInviteUsers() // 有效邀请用户列表
+  apiGetInviteAwardPool() // 邀请用户奖励池
 })
 </script>