feat(邀请好友活动): 激活码列表

modules/postcss-px-to-viewport.js

@@ -1,5 +1,6 @@
 export default function () {
   this.nuxt.hook('build:before', (nuxt, buildOptions) => {
+    // console.log("🚀 ~ file: postcss-px-to-viewport.js ~ line 3 ~ this.nuxt.hook ~ buildOptions", buildOptions)
     // buildOptions.postcss.plugins;
     // console.log(
     //   '🚀 ~ file: postcss-px-to-viewport.js ~ line 9 ~ this.nuxt.hook ~ buildOptions.postcss.plugins',

package.json

@@ -60,7 +60,7 @@
     "@nuxtjs/style-resources": "^1.2.1",
     "@nuxtjs/stylelint-module": "^4.1.0",
     "@nuxtjs/vuetify": "^1.12.3",
-    "@unocss/nuxt": "^0.39.0",
+    "@unocss/nuxt": "^0.43",
     "@vue/runtime-dom": "^3.2.37",
     "babel-plugin-import": "^1.13.5",
     "eslint": "^8.4.1",
@@ -70,8 +70,11 @@
     "less": "^4.1.3",
     "less-loader": "^7.3.0",
     "lqip-loader": "^2.2.1",
+    "postcss": "^8",
     "postcss-html": "^1.3.0",
+    "postcss-loader": "^4",
     "postcss-px-to-viewport": "^1.1.1",
+    "postcss-px-to-viewport-8-plugin": "^1.1.5",
     "prettier": "^2.5.1",
     "stylelint": "^14.1.0",
     "stylelint-config-prettier": "^9.0.3",

pages/activity/invite-user/index.vue

@@ -52,10 +52,54 @@
         </div>
       </div>
     </div>
-    <!-- <div class="box box3">
-      <div class="box-header">返利套餐</div>
-      <div class="box-main"></div>
-    </div> -->
+
+    <div v-if="type === 2" class="box box3">
+      <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-list">
+          <div
+            v-for="(item, index) in 10"
+            :key="index"
+            class="code-item"
+          ></div>
+        </div> -->
+      </div>
+    </div>
     <div class="box box4">
       <div class="box-header">活动规则</div>
       <!-- eslint-disable-next-line vue/no-v-html -->
@@ -180,8 +224,11 @@ export default {
         }
         case 2: {
           return [
-            { label: '今日获取的激活码', value: this.data.todayIncomeStarCoin },
-            { label: '总激活码', value: this.data.totalIncomeStarCoin },
+            {
+              label: '今日获取的激活码',
+              value: this.data.todayIncomeActivationCode,
+            },
+            { label: '总激活码', value: this.data.totalIncomeActivationCode },
             {
               label: '今日购买订单数',
               value: this.data.todayBuyOrderSuccessCount,
@@ -260,7 +307,7 @@ export default {
       const res = await this.$axios.$get(
         '/activity/v1/inviteUser/orderRelation/myActivationCode',
       );
-      this.myActivationCode = res.data;
+      this.myActivationCode = res.data.list;
     },
     async share() {
       // console.log(this);
@@ -314,6 +361,10 @@ export default {
           .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
       }
     },
+    async copyCode(item) {
+      await clipboard.writeText(item.activationCode);
+      this.$toast.success('复制成功');
+    },
   },
 };
 </script>
@@ -436,10 +487,28 @@ export default {
   }
 }
 
-.box4 {
+.box3 {
   .box-main {
     // padding-left: 20px;
     // padding-top: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+.code-table {
+  // width: 100%;
+  tr {
+    height: 30px;
+    color: #666;
+  }
+  td {
+    height: 30px;
+    color: #333;
+  }
+  .copy-btn {
+    min-width: 0 !important;
+    height: auto !important;
+    padding: 0 !important;
   }
 }
 </style>