feat(邀请好友活动): 激活码分页

pages/activity/invite-user/index.vue

@@ -54,43 +54,74 @@
     </div>
 
     <div v-if="type === 2" class="box box3">
-      <div class="box-header">收益明细</div>
+      <div class="box-header">激活码明细</div>
       <div class="box-main">
-        <table class="w-full code-table">
-          <thead class="text-left text-sm whitespace-nowrap break-normal">
-            <tr>
-              <th class="w-120px">获得的时间</th>
-              <th>激活码编号</th>
-              <th class="w-60px">使用状态</th>
-            </tr>
-          </thead>
-          <tbody class="text-xs">
-            <tr v-for="(item, index) in myActivationCode" :key="index">
-              <td class="whitespace-nowrap break-normal">
-                {{ item.createTime }}
-              </td>
-              <td class="whitespace-nowrap break-normal">
-                <div class="flex">
-                  <span>{{ item.activationCode }} </span
-                  ><span class="ml-auto">|</span><v-btn
-                    text
-                    small
-                    color="#991AD2"
-                    class="copy-btn"
-                    @click="copyCode(item)"
-                    >复制</v-btn
-                  >
-                </div>
-              </td>
-              <td class="whitespace-nowrap break-normal text-right">
-                <span v-if="item.activationUse" style="color: #dd1b0d"
-                  >已使用</span
-                >
-                <span v-else>未使用</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="code-table">
+          <div class="table-header">
+            <table class="w-full">
+              <colgroup>
+                <col class="time-col" />
+                <col class="code-col" />
+                <col class="status-col" />
+              </colgroup>
+              <thead class="text-left text-sm whitespace-nowrap break-normal">
+                <tr>
+                  <th class="">获得的时间</th>
+                  <th>激活码编号</th>
+                  <th class="">使用状态</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div class="table-body">
+            <table class="w-full">
+              <colgroup>
+                <col class="time-col" />
+                <col class="code-col" />
+                <col class="status-col" />
+              </colgroup>
+              <tbody class="text-xs">
+                <tr v-for="(item, index) in myActivationCode" :key="index">
+                  <td class="whitespace-nowrap break-normal">
+                    {{ item.createTime | formatDate('MM月DD日 HH:mm:ss') }}
+                  </td>
+                  <td class="whitespace-nowrap break-normal">
+                    <div class="flex">
+                      <span class=" font-mono "
+                        >{{ item.activationCode | activationCodeMask }} </span
+                      ><span class="mx-1">|</span
+                      ><v-btn
+                        text
+                        small
+                        color="#991AD2"
+                        class="copy-btn"
+                        @click="copyCode(item)"
+                        >复制</v-btn
+                      >
+                    </div>
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-right">
+                    <span v-if="item.activationUse" style="color: #dd1b0d"
+                      >已使用</span
+                    >
+                    <span v-else>未使用</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div
+              v-intersect.quiet="codeLoadMoreIntersect"
+              class="flex item-center justify-center"
+            >
+              <!-- <v-progress-circular indeterminate  ></v-progress-circular> -->
+              <v-btn :loading="codeIsLoading" text small>
+                <template v-if="codeIsLoading">加载中</template>
+                <template v-else-if="codeHasMore">加载更多</template>
+                <template v-else>没有更多</template>
+              </v-btn>
+            </div>
+          </div>
+        </div>
         <!-- <div class="code-list">
           <div
             v-for="(item, index) in 10"
@@ -147,7 +178,11 @@ import * as clipboard from 'clipboard-polyfill/text';
 export default {
   // auth: false,
   name: 'InviteUser',
-  filters: {},
+  filters: {
+    activationCodeMask(value) {
+      return value.replace(/(?<=^.{4})(.*)(?=.{4}$)/, '***');
+    },
+  },
   // async asyncData({ $axios }) {
   //   // 页面初始化前触发
   //   const res = await $axios.$get(
@@ -175,6 +210,13 @@ export default {
       },
       activityRules: '',
       myActivationCode: [],
+      myCodeFrom: {
+        actibityId: null,
+        pageNum: 1,
+        pageSize: 8,
+      },
+      codeTotal: -1,
+      codeIsLoading: false,
     };
   },
   async fetch() {
@@ -184,7 +226,7 @@ export default {
       this.$native.setShareInfo(this.shareInfo);
       await Promise.all([
         this.getActivityRules(),
-        this.type === 2 && this.getMyActivationCode(),
+        this.type === 2 && this.getMyActivationCode(this.myCodeFrom),
       ]);
     } catch (error) {
       this.$toast.error(error.message);
@@ -200,6 +242,12 @@ export default {
     // },
   },
   computed: {
+    codeHasMore() {
+      return (
+        this.codeTotal < 0 ||
+        this.myCodeFrom.pageNum * this.myCodeFrom.pageSize < this.codeTotal
+      );
+    },
     dataList() {
       switch (this.type) {
         case 1: {
@@ -302,12 +350,33 @@ export default {
       );
       // res.data.type = 2;
       this.data = res.data;
+      this.myCodeFrom.actibityId = res.data.activityId;
     },
-    async getMyActivationCode() {
-      const res = await this.$axios.$get(
-        '/activity/v1/inviteUser/orderRelation/myActivationCode',
-      );
-      this.myActivationCode = res.data.list;
+    async getMyActivationCode(params) {
+      try {
+        this.codeIsLoading = true;
+
+        const res = await this.$axios.$get(
+          '/activity/v1/inviteUser/orderRelation/myActivationCode',
+          {
+            params,
+          },
+        );
+        this.codeTotal = res.data.total;
+
+        this.myActivationCode.push(
+          ...(res.data.list ?? []),
+          // ...Array.from({ length: 8 }).fill({
+          //   createTime: '2022-08-01 14:33:11',
+          //   activationCode: 'XXXXXXXXXXXXXXXXXXX',
+          //   activationUse: 1,
+          // }),
+        );
+
+        this.myCodeFrom = params;
+      } finally {
+        this.codeIsLoading = false;
+      }
     },
     async share() {
       // console.log(this);
@@ -365,6 +434,14 @@ export default {
       await clipboard.writeText(item.activationCode);
       this.$toast.success('复制成功');
     },
+    codeLoadMoreIntersect(event) {
+      if (event[0].isIntersecting && this.codeHasMore && !this.codeIsLoading) {
+        this.getMyActivationCode({
+          ...this.myCodeFrom,
+          pageNum: this.myCodeFrom.pageNum + 1,
+        });
+      }
+    },
   },
 };
 </script>
@@ -496,6 +573,17 @@ export default {
   }
 }
 .code-table {
+  .table-body {
+    max-height: 30px * 8;
+    overflow-y: auto;
+  }
+  .time-col {
+    width: 120px;
+  }
+  .status-col {
+    width: 60px;
+  }
+
   // width: 100%;
   tr {
     height: 30px;
@@ -505,6 +593,11 @@ export default {
     height: 30px;
     color: #333;
   }
+  // tbody {
+  //   // max-height: 200px;
+  //   // overflow-y: auto;
+  //   // display: block;
+  // }
   .copy-btn {
     min-width: 0 !important;
     height: auto !important;

pages/customer-service.vue

@@ -3,7 +3,6 @@
 </template>
 <script>
 export default {
-  auth: false,
   head() {
     return {
       script: [