活动页面1上静态接口

pages/activity/invite-user/components/BuyRecordList.vue

@@ -8,10 +8,10 @@
     </div>
     <div class="record-list">
       <div class="record-item" v-for="(item, index) in data" :key="index">
-        <div class="body-text record-account">{{ item.phone }}</div>
-        <div class="body-text record-pay">{{ item.money }}</div>
-        <div class="body-text record-time">{{ item.time }}</div>
-        <div class="body-text record-back">{{ item.status }}</div>
+        <div class="body-text record-account">{{ item.newPhone }}</div>
+        <div class="body-text record-pay">{{ item.totalAmount }}</div>
+        <div class="body-text record-time">{{ item.finishTime }}</div>
+        <div class="body-text record-back">{{ item.rakeBackAmount }}</div>
       </div>
     </div>
   </div>

pages/activity/invite-user/components/RecordList.vue

@@ -6,8 +6,8 @@
     </div>
     <div class="record-list">
       <div class="record-item" v-for="(item, index) in data" :key="index">
-        <div class="record-title">{{ item.phone }}</div>
-        <div class="record-time">{{ item.time }}</div>
+        <div class="record-title">{{ item.phoneNumber }}</div>
+        <div class="record-time">{{ item.createTime }}</div>
       </div>
     </div>
   </div>

pages/activity/invite-user/components/WithdrawalRecord.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="list-header">
+      <div class="header-text haeder-one">提现日期</div>
+      <div class="header-text header-two">佣金</div>
+    </div>
+    <div class="record-list">
+      <div class="record-item" v-for="(item, index) in data" :key="index">
+        <div class="record-title">{{ item.withdrawalTime }}</div>
+        <div class="record-time">{{ item.withdrawalMoney }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WithdrawalRecord',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-header{
+  background-color: #FFEED7;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .haeder-one{
+    flex: 0.45;
+  }
+  .header-two{
+    flex: 0.55;
+  }
+
+  .header-text{
+    text-align: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #333;
+    line-height: 24px;
+  }
+}
+
+.record-item{
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+
+  .record-title,
+  .record-time{
+    text-align: center;
+    line-height: 33px;
+  }
+
+  .record-title{
+    flex: 0.45;
+  
+  }
+
+  .record-time{
+    flex: 0.55;
+  }
+}
+</style>

pages/activity/invite-user/invite-new-user.vue

@@ -12,29 +12,27 @@
       <!-- 分享按钮 -->
       <v-btn @click="shareHandle" class="share-btn mb-8" rounded />
 
-      <div class="day-statistics mb-3">今日邀请注册人数：1000</div>
+      <div class="day-statistics mb-3">今日邀请注册人数：{{ registerCount }}</div>
 
       <div class="user-main pt-3 pr-3 pb-3 pl-3 mb-3">
         <div class="userinfo">
-          <div class="avatar mr-1"></div>
-          <!-- <img class="avatar mr-4" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
+          <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt="">
           <div class="userinfo-text ml-1">
-            <div class="userinfo-name">用户昵称</div>
-            <div class="userinfo-id">ID：123456789</div>
+            <div class="userinfo-name">{{ nickname }}</div>
           </div>
         </div>
         <div class="possess-warp mb-3">
-          <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥30.0</span></div>
+          <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥{{ withdrawalBalance }}</span></div>
           <div class="withdrawal-btn">提现</div>
         </div>
         <div class="userinfo-detail">
           <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
-            <div class="userinfo-detail-item-content">1000</div>
-            <div class="userinfo-detail-item-title">累计邀请人数</div>
+            <div class="userinfo-detail-item-content">{{ inviteBuyAmount }}</div>
+            <div class="userinfo-detail-item-title">累计邀请购买</div>
           </div>
           <div style="flex: 0 0 11px"></div>
           <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
-            <div class="userinfo-detail-item-content">1000</div>
+            <div class="userinfo-detail-item-content">{{ accumulatedWithdrawal }}</div>
             <div class="userinfo-detail-item-title">累计邀请金额</div>
           </div>
         </div>
@@ -55,7 +53,7 @@
             <BuyRecordList class="mt-3 pr-1 pl-1 list-wrqp" v-if="activeTab === 1" :data="tab.data"/>
 
             <!-- 提现记录 -->
-            <RecordList
+            <WithdrawalRecord
               v-if="activeTab === 2"
               class="mt-3 pr-1 pl-1 list-wrqp"
               :data="tab.data"
@@ -84,6 +82,7 @@ import layout from './components/layout';
 import RecordList from './components/RecordList';
 import InvitePagination from './components/InvitePagination';
 import BuyRecordList from './components/BuyRecordList';
+import WithdrawalRecord from './components/WithdrawalRecord';
 import SharePopup from './components/SharePopup';
 import WxPopTpis from './components/WxPopTpis';
 
@@ -93,106 +92,72 @@ export default {
   head: {
     title: '邀请好友得现金',
   },
-  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, SharePopup, WxPopTpis },
+  components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, WithdrawalRecord, SharePopup, WxPopTpis },
   data() {
     return {
+      registerCount: 0, // 今日注册人数
+      nickname: '', // 用户昵称
+      withdrawalBalance: 0, // 可提现余额
+      inviteBuyAmount: 0, // 累计邀请金额
+      activityId: 1, // 活动ID
+      accumulatedWithdrawal: 0, // 累计提现金额,
+      // 查询参数
+      queryData: {
+        phoneNumber: '', // 手机号
+        merchantSign: '', // 商户标识
+        userName: '', // 邀请人用户名
+        quiltUserName: '', // 被邀请人用户名
+        activityId: '', // 活动ID
+        toDay: '', // 今日日期
+        inviteUserName: '', // 邀请人名称
+      },
       activeTab: 0,
       tabs: [{
         title: '邀请记录',
         query: {
-          pageNum: 1,
-          pageSize: 10,
+          pageNum: 1, // 页码
+          pageSize: 10, // 每页数量
         },
         data: [{
           id: 1,
           name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
+          phoneNumber: '13800138000',
+          createTime: '2025-04-03 10:00:00',
           money: '100.00',
           status: '已提现',
-          statusColor: '#FF505C',
         },
         {
           id: 1,
           name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
+          phoneNumber: '13800138000',
+          createTime: '2025-04-03 10:00:00',
           money: '100.00',
           status: '已提现',
-          statusColor: '#FF505C',
         },
         {
           id: 1,
           name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
+          phoneNumber: '13800138000',
+          createTime: '2025-04-03 10:00:00',
           money: '100.00',
           status: '已提现',
-          statusColor: '#FF505C',
         },
         {
           id: 1,
           name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
+          phoneNumber: '13800138000',
+          createTime: '2025-04-03 10:00:00',
           money: '100.00',
           status: '已提现',
-          statusColor: '#FF505C',
         },
         {
           id: 1,
           name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
+          phoneNumber: '13800138000',
+          createTime: '2025-04-03 10:00:00',
           money: '100.00',
           status: '已提现',
-          statusColor: '#FF505C',
         },
-        // {
-        //   id: 1,
-        //   name: '1305677',
-        //   phone: '13800138000',
-        //   time: '2025-04-03 10:00:00',
-        //   money: '100.00',
-        //   status: '已提现',
-        //   statusColor: '#FF505C',
-        // },
-        // {
-        //   id: 1,
-        //   name: '1305677',
-        //   phone: '13800138000',
-        //   time: '2025-04-03 10:00:00',
-        //   money: '100.00',
-        //   status: '已提现',
-        //   statusColor: '#FF505C',
-        // },
-        // {
-        //   id: 1,
-        //   name: '1305677',
-        //   phone: '13800138000',
-        //   time: '2025-04-03 10:00:00',
-        //   money: '100.00',
-        //   status: '已提现',
-        //   statusColor: '#FF505C',
-        // },
-        // {
-        //   id: 1,
-        //   name: '1305677',
-        //   phone: '13800138000',
-        //   time: '2025-04-03 10:00:00',
-        //   money: '100.00',
-        //   status: '已提现',
-        //   statusColor: '#FF505C',
-        // },
-        // {
-        //   id: 1,
-        //   name: '1305677',
-        //   phone: '13800138000',
-        //   time: '2025-04-03 10:00:00',
-        //   money: '100.00',
-        //   status: '已提现',
-        //   statusColor: '#FF505C',
-        // }
         ],
         total: 1,
       },{
@@ -203,45 +168,35 @@ export default {
         },
         data: [{
           id: 1,
-          name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '30.00',
-          statusColor: '#FF505C',
+          newPhone: '13800138000',
+          finishTime: '2025-04-03 10:00:00',
+          totalAmount: '100.00',
+          rakeBackAmount: '30.00',
         },{
           id: 1,
-          name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '30.00',
-          statusColor: '#FF505C',
+          newPhone: '13800138000',
+          finishTime: '2025-04-03 10:00:00',
+          totalAmount: '100.00',
+          rakeBackAmount: '30.00',
         },{
           id: 1,
-          name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '30.00',
-          statusColor: '#FF505C',
+          newPhone: '13800138000',
+          finishTime: '2025-04-03 10:00:00',
+          totalAmount: '100.00',
+          rakeBackAmount: '30.00',
         },{
           id: 1,
-          name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '30.00',
-          statusColor: '#FF505C',
+          newPhone: '13800138000',
+          finishTime: '2025-04-03 10:00:00',
+          totalAmount: '100.00',
+          rakeBackAmount: '30.00',
         },{
           id: 1,
-          name: '1305677',
-          phone: '13800138000',
-          time: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '30.00',
-          statusColor: '#FF505C',
-        },],
+          newPhone: '13800138000',
+          finishTime: '2025-04-03 10:00:00',
+          totalAmount: '100.00',
+          rakeBackAmount: '30.00',
+        }],
         total: 1,
       },{
         title: '提现记录',
@@ -249,11 +204,18 @@ export default {
           pageNum: 1,
           pageSize: 10,
         },
-        data: [],
+        data: [{
+          withdrawalTime: '2025-04-03 10:00:00',
+          withdrawalMoney: '100.00',
+        }],
         total: 0,
       }],
     }
   },
+   // 页面初始化后触发
+  async fetch() {
+    await this.getActivityData();
+  },
   computed: {
     // 是否为微信浏览器环境
     isWeChatBrowser() {
@@ -275,6 +237,56 @@ export default {
       this.tabs[active].query.pageNum = page;
       console.log('pageChangeHandle', page);
       // 发起请求
+    },
+    // 获取活动页上部分数据
+    async getActivityData() {
+      const res = await this.$axios.$get(
+        '/activity/v5/activity/inviteNewUser/getInviteNewUserPageData',
+      );
+      let {
+        registerCount, // 今日注册人数
+        nickname, // 用户昵称
+        withdrawalBalance, // 可提现余额
+        inviteBuyAmount, // 累计邀请金额
+        activityId, // 活动ID
+        accumulatedWithdrawal, // 累计提现金额
+      } = res.data;
+      this.registerCount = registerCount;
+      this.nickname = nickname;
+      this.withdrawalBalance = withdrawalBalance;
+      this.inviteBuyAmount = inviteBuyAmount;
+      this.activityId = activityId;
+      this.accumulatedWithdrawal = accumulatedWithdrawal;
+    },
+    // 获取活动页好友注册记录列表
+    async getInviteRecordList() {
+      const res = await this.$axios.$post(
+        '/activity/v5/activity/inviteNewUser/getInviteNewRegisterUserData',
+        { ...this.queryData, ...this.tabs[0].query }
+      );
+
+      this.tabs[0].data = res.data.list;
+      this.tabs[0].total = res.data.total;
+    },
+    // 获取活动页好友购买记录列表
+    async getInviteBuyRecordList() {
+      const res = await this.$axios.$post(
+        '/activity/v5/activity/inviteNewUser/getInviteNewUserBuyData',
+        { ...this.queryData, ...this.tabs[1].query }
+      );
+
+      this.tabs[1].data = res.data.list;
+      this.tabs[1].total = res.data.total;
+    },
+    // 获取活动页好友提现记录列表
+    async getInviteWithdrawalRecordList() {
+      const res = await this.$axios.$post(
+        '/activity/v5/activity/inviteNewUser/getInviteNewUserWithdrawalRecodeList',
+        {...this.queryData,...this.tabs[2].query }
+      );
+
+      this.tabs[2].data = res.data.list;
+      this.tabs[2].total = res.data.total;
     }
   }
 }
@@ -351,7 +363,6 @@ $-bg-yellow: rgb(255, 253, 241);
         width: 40px;
         height: 40px;
         border-radius: 50%;
-        background-color: #FF505C;
       }
 
       .userinfo-text{