联调接口

package.json

@@ -51,6 +51,7 @@
     "vue-clipboard2": "^0.3.3",
     "vue-data-dict": "^1.0.6",
     "vue-lottie": "^0.2.1",
+    "vue-qr": "^4.0.9",
     "vue-server-renderer": "^2.7.8",
     "vue-template-compiler": "^2.7.8",
     "vuetify": "^2.6.1",

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

@@ -60,6 +60,10 @@ export default {
   }
 }
 
+.record-list{
+  min-height: 165px;
+}
+
 .record-item{
   display: flex;
   flex-wrap: nowrap;

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

@@ -48,6 +48,10 @@ export default {
   }
 }
 
+.record-list{
+  min-height: 165px;
+}
+
 .record-item{
   display: flex;
   flex-wrap: nowrap;

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

@@ -10,7 +10,7 @@
           <div class="userinfo-wrap pl-4 pr-4 pt-4 pb-4">
             <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">15312348305</div>
+              <div class="userinfo-name">{{ nickname }}</div>
               <div class="userinfo-describe">邀请您使用云手机</div>
             </div>
           </div>
@@ -20,7 +20,19 @@
         <div class="qrcode-container bg-whiter pl-6 pr-6 pt-6 pb-6">
           <div class="qrcode-img">
             <!-- <img class="qrcode" src="~assets/image/activity/invite-user/invite-new-user/qrcode.png" alt=""> -->
-             <div class="qrcode"></div>
+             <div class="qrcode">
+              <vue-qr
+                ref="qrcode"
+                :text="qrText"
+                :size="size"
+                :margin="10"
+                colorDark="#000"
+                colorLight="#fff"
+                :logoSrc="logoSrc"
+                :logoScale="0.2"
+                :dotScale="0.7"
+            />
+             </div>
           </div>
         </div>
 
@@ -42,8 +54,31 @@
 </template>
 
 <script>
+import vueQr from 'vue-qr/src/packages/vue-qr.vue';
+
 export default {
   name: 'SharePopup',
+  props: {
+    nickname: {
+      type: String,
+      default: ''
+    },
+    qrText: {
+      type: String,
+      default: ''
+    },
+    logoSrc: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: Number,
+      default: 190
+    },
+  },
+  components: {
+    vueQr
+  },
   data() {
     return {
       show: false,
@@ -56,15 +91,45 @@ export default {
     onClose() {
       this.show = false;
     },
-    async copyCode(text="复制成功") {
-      await this.$native.clipboard.writeText(text);
+    async copyCode() {
+      await this.$native.clipboard.writeText(this.qrText);
       this.$toast.success('复制成功');
       this.onClose();
     },
     async saveImg() {
-      
-      // this.$toast.success('保存成功');
-      this.onClose();
+      try {
+        const img = this.$refs.qrcode.$el;
+        const base64Data = img.src;
+        // 创建Blob对象
+        const byteString = atob(base64Data.split(',')[1]);
+        const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
+        const ab = new ArrayBuffer(byteString.length);
+        const ia = new Uint8Array(ab);
+        for (let i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([ab], { type: mimeString });
+
+        // 创建下载链接
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        // 设置下载的文件名
+        a.download = '1.png';
+        document.body.appendChild(a);
+        a.click();
+
+        // 清理
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+
+        this.$toast.success('保存成功');
+
+        this.onClose();
+      } catch (error) {
+        console.log(error)
+      }
     }
   },
 }

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

@@ -48,6 +48,10 @@ export default {
   }
 }
 
+.record-list{
+  min-height: 165px;
+}
+
 .record-item{
   display: flex;
   flex-wrap: nowrap;

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

@@ -67,7 +67,7 @@
       </div>
 
       <!-- 分享弹窗 -->
-      <SharePopup ref="sharePopup" />
+      <SharePopup ref="sharePopup" :qrText="qrText" :nickname="nickname" />
     </div>
     
   </layout>
@@ -88,6 +88,8 @@ import WithdrawalRecord from './components/WithdrawalRecord';
 import SharePopup from './components/SharePopup';
 import WxPopTpis from './components/WxPopTpis';
 
+const Authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyYW5kb20iOiI2ODk3NyIsImNsaWVudCI6IjEiLCJ1c2VyVHlwZSI6IjIiLCJtZXJjaGFudFNpZ24iOiJTWlgiLCJleHAiOjE3NDcwMzMyODgsInVzZXJuYW1lIjoiZHZBd1UxNjM0NjA5NTU3U1pYIn0.o7bIutx2e2WrdqIx6fG_WR57oSXZ5s5ewfB0QdAHOBU';
+
 export default {
   auth: false,
   name: 'OemInviteNewUser',
@@ -97,126 +99,66 @@ export default {
   components: { layout, layoutBack, RecordList, InvitePagination, BuyRecordList, WithdrawalRecord, SharePopup, WxPopTpis },
   data() {
     return {
+      qrText: '', // 生成二维码的文本
       registerCount: 0, // 今日注册人数
       nickname: '', // 用户昵称
       withdrawalBalance: 0, // 可提现余额
       inviteBuyAmount: 0, // 累计邀请金额
-      activityId: 1, // 活动ID
       accumulatedWithdrawal: 0, // 累计提现金额,
       // 查询参数
       queryData: {
-        phoneNumber: '', // 手机号
-        merchantSign: '', // 商户标识
-        userName: '', // 邀请人用户名
-        quiltUserName: '', // 被邀请人用户名
+        // phoneNumber: '', // 手机号
+        // merchantSign: '', // 商户标识
+        // userName: '', // 邀请人用户名
+        // quiltUserName: '', // 被邀请人用户名
         activityId: '', // 活动ID
-        toDay: '', // 今日日期
-        inviteUserName: '', // 邀请人名称
+        // toDay: '', // 今日日期
+        // inviteUserName: '', // 邀请人名称
       },
       activeTab: 0,
       tabs: [{
         title: '邀请记录',
+        requireMethod: 'getInviteRecordList', // 请求定义的方法key
         query: {
           pageNum: 1, // 页码
-          pageSize: 10, // 每页数量
-        },
-        data: [{
-          id: 1,
-          name: '1305677',
-          phoneNumber: '13800138000',
-          createTime: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '已提现',
-        },
-        {
-          id: 1,
-          name: '1305677',
-          phoneNumber: '13800138000',
-          createTime: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '已提现',
-        },
-        {
-          id: 1,
-          name: '1305677',
-          phoneNumber: '13800138000',
-          createTime: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '已提现',
+          pageSize: 5, // 每页数量
         },
-        {
-          id: 1,
-          name: '1305677',
-          phoneNumber: '13800138000',
-          createTime: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '已提现',
-        },
-        {
-          id: 1,
-          name: '1305677',
-          phoneNumber: '13800138000',
-          createTime: '2025-04-03 10:00:00',
-          money: '100.00',
-          status: '已提现',
-        },
-        ],
-        total: 1,
+        data: [],
+        total: 0,
       },{
         title: '购买记录',
+        requireMethod: 'getInviteBuyRecordList', // 请求定义的方法key
         query: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 5,
         },
-        data: [{
-          id: 1,
-          newPhone: '13800138000',
-          finishTime: '2025-04-03 10:00:00',
-          totalAmount: '100.00',
-          rakeBackAmount: '30.00',
-        },{
-          id: 1,
-          newPhone: '13800138000',
-          finishTime: '2025-04-03 10:00:00',
-          totalAmount: '100.00',
-          rakeBackAmount: '30.00',
-        },{
-          id: 1,
-          newPhone: '13800138000',
-          finishTime: '2025-04-03 10:00:00',
-          totalAmount: '100.00',
-          rakeBackAmount: '30.00',
-        },{
-          id: 1,
-          newPhone: '13800138000',
-          finishTime: '2025-04-03 10:00:00',
-          totalAmount: '100.00',
-          rakeBackAmount: '30.00',
-        },{
-          id: 1,
-          newPhone: '13800138000',
-          finishTime: '2025-04-03 10:00:00',
-          totalAmount: '100.00',
-          rakeBackAmount: '30.00',
-        }],
-        total: 1,
+        data: [],
+        total: 0,
       },{
         title: '提现记录',
+        requireMethod: 'getInviteBuyRecordList', // 请求定义的方法key
         query: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 5,
         },
-        data: [{
-          withdrawalTime: '2025-04-03 10:00:00',
-          withdrawalMoney: '100.00',
-        }],
+        data: [],
         total: 0,
       }],
     }
   },
-   // 页面初始化后触发
+  // 页面初始化后触发
   async fetch() {
+    // 获取参数的token值
+    let token = this.$route.query.token;
+    if(!token) {return this.$toast('用户信息获取失败')}
+
+    // token参数会自动被系统获取,请求接口自动带上token
+
     await this.getActivityData();
+    await this.getInviteRecordList();
+    await this.getInviteBuyRecordList();
+    await this.getInviteWithdrawalRecordList();
+    await this.getActivityRule(this.queryData.activityId);
   },
   computed: {
     // 是否为微信浏览器环境
@@ -227,7 +169,7 @@ export default {
   methods: {
     // nav right菜单点击事件
     onRightHandle() {
-      this.$router.push({ path: '/activity/invite-user/invite-new-user-rule' })
+      this.$router.push({ path: '/activity/invite-user/invite-new-user-rule', query: { activityId: this.queryData.activityId} })
     },
     // 分享按钮点击事件
     shareHandle() {
@@ -237,8 +179,9 @@ export default {
     pageChangeHandle(page) {
       let active =  this.activeTab;
       this.tabs[active].query.pageNum = page;
-      console.log('pageChangeHandle', page);
+
       // 发起请求
+      this[this.tabs[active].requireMethod]();
     },
     // 提现按钮点击
     withdrawalHandle() {
@@ -251,6 +194,7 @@ export default {
     async getActivityData() {
       const res = await this.$axios.$get(
         '/activity/v5/activity/inviteNewUser/getInviteNewUserPageData',
+        // { headers: { Authorization } }
       );
       let {
         registerCount, // 今日注册人数
@@ -260,42 +204,91 @@ export default {
         activityId, // 活动ID
         accumulatedWithdrawal, // 累计提现金额
       } = res.data;
+
+      // 页面展示数据
       this.registerCount = registerCount;
       this.nickname = nickname;
       this.withdrawalBalance = withdrawalBalance;
       this.inviteBuyAmount = inviteBuyAmount;
-      this.activityId = activityId;
       this.accumulatedWithdrawal = accumulatedWithdrawal;
+      // 查询参数
+      this.queryData.activityId = activityId;
     },
     // 获取活动页好友注册记录列表
     async getInviteRecordList() {
-      const res = await this.$axios.$post(
+      let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewRegisterUserData',
-        { ...this.queryData, ...this.tabs[0].query }
+        { ...this.queryData, ...this.tabs[0].query },
+        // { headers: { Authorization } }
       );
-
-      this.tabs[0].data = res.data.list;
-      this.tabs[0].total = res.data.total;
+      if(status === 0 && success) {
+        this.tabs[0].data = data.list;
+        this.tabs[0].total = data.total;
+      }
+      /*
+      友注册记录列表数据格式
+      {
+        id: 1,
+        name: '1305677',
+        phoneNumber: '13800138000',
+        createTime: '2025-04-03 10:00:00',
+        money: '100.00',
+        status: '已提现',
+      }
+      */
     },
     // 获取活动页好友购买记录列表
     async getInviteBuyRecordList() {
-      const res = await this.$axios.$post(
+      let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewUserBuyData',
-        { ...this.queryData, ...this.tabs[1].query }
+        { ...this.queryData, ...this.tabs[1].query },
+        // { headers: { Authorization } }
       );
-
-      this.tabs[1].data = res.data.list;
-      this.tabs[1].total = res.data.total;
+      if(status === 0 && success) {
+        this.tabs[1].data = data.list;
+        this.tabs[1].total = data.total;
+      }
+      /*
+      友购买记录列表数据格式
+      {
+        id: 1,
+        newPhone: '13800138000',
+        finishTime: '2025-04-03 10:00:00',
+        totalAmount: '100.00',
+        rakeBackAmount: '30.00',
+      }
+      */
     },
     // 获取活动页好友提现记录列表
     async getInviteWithdrawalRecordList() {
-      const res = await this.$axios.$post(
+      let {status, success, data} = await this.$axios.$post(
         '/activity/v5/activity/inviteNewUser/getInviteNewUserWithdrawalRecodeList',
-        {...this.queryData,...this.tabs[2].query }
+        {...this.queryData,...this.tabs[2].query },
+        // { headers: { Authorization } }
       );
 
-      this.tabs[2].data = res.data.list;
-      this.tabs[2].total = res.data.total;
+      if(status === 0 && success) {
+        this.tabs[2].data = data.list;
+        this.tabs[2].total = data.total;
+      }
+
+      /*
+      友提现记录列表数据格式
+      {
+        withdrawalTime: '2025-04-03 10:00:00',
+        withdrawalMoney: '100.00',
+      }
+      */
+    },
+    // 获取邀请url地址,用于生成二维码
+    async getActivityRule(id) {
+      let {status, success, data} = await this.$axios.$get('/activity/activity/basic/getDetailsById',{
+        params: { id }
+      });
+
+      if(status === 0 && success) {
+        this.qrText = data?.activityInviteNewUser?.jumpAddress;
+      }
     }
   }
 }