feat(邀请好友): 修改样式修复，小程序复制链接

components/activity/invite-user/box.vue

@@ -0,0 +1,76 @@
+<template lang="">
+  <div class="box">
+    <div class="box-header">
+      <div class="box-header-content">
+        <slot name="title"></slot>
+      </div>
+    </div>
+
+    <div class="box-main">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ActivityInviteUserBox',
+};
+</script>
+<style lang="scss">
+.box {
+  width: 373px;
+  box-sizing: border-box;
+  margin: auto;
+
+  // border-image-width: 200px;
+  // border-image-slice: 200%;
+  // border-width: 1px;
+  position: relative;
+  z-index: 0;
+
+  + .box {
+    margin-top: 30px;
+  }
+
+  .box-header {
+    // position: absolute;
+    position: relative;
+    // top: -30px;
+    z-index: 1;
+    // left: 141px;
+    // left: 0;
+    // right: 0;
+    margin-bottom: -34px;
+    // text-align: center;
+    // padding: 0 130px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .box-header-content {
+      color: #fff;
+      border-image-source: url('~/assets/image/activity/invite-user/box-title@2x.png');
+      border-image-slice: 0 140 fill;
+      border-width: 0 70px 0;
+      border-style: solid;
+      height: 38px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      // width: auto;
+    }
+  }
+
+  .box-main {
+    z-index: 0;
+    // padding: 30px 15px 20px;
+    border-image-source: url('~/assets/image/activity/invite-user/box-bg@2x.png');
+    border-image-slice: 50 60 80 fill;
+    border-image-width: 30px 30px 40px;
+    border-width: 50px 20px 40px;
+    border-style: solid;
+    // padding-top: 30px;
+  }
+}
+</style>

pages/activity/invite-user/index.vue

@@ -1,153 +1,135 @@
 <template>
   <v-container class="invite-user" fluid :class="`bg-${type}`">
-    <div class="box box1">
-      <div class="box-header">参与步骤</div>
-      <div class="box-main">
-        <v-img
-          v-if="type === 1"
-          class="cybz-content"
-          src="~/assets/image/activity/invite-user/cybz-content@2x.png"
-        />
-        <v-img
-          v-else-if="type === 2"
-          class="cybz-content"
-          src="~/assets/image/activity/invite-user/cybz-content-2@2x.png"
-        />
-        <div class="cybz-content-text">
-          <div class="cybz-content-text-item">分享好友</div>
-          <div class="cybz-content-text-item">邀请购买云机</div>
-          <div class="cybz-content-text-item">
-            <template v-if="type === 1">返星币换现金</template>
-            <template v-else-if="type === 2">返云手机时长</template>
-          </div>
+    <activity-invite-user-box class="box1">
+      <template #title>参与步骤</template>
+      <v-img
+        v-if="type === 1"
+        class="cybz-content"
+        src="~/assets/image/activity/invite-user/cybz-content@2x.png"
+      />
+      <v-img
+        v-else-if="type === 2"
+        class="cybz-content"
+        src="~/assets/image/activity/invite-user/cybz-content-2@2x.png"
+      />
+      <div class="cybz-content-text">
+        <div class="cybz-content-text-item">分享好友</div>
+        <div class="cybz-content-text-item">邀请购买云机</div>
+        <div class="cybz-content-text-item">
+          <template v-if="type === 1">返星币换现金</template>
+          <template v-else-if="type === 2">返云手机时长</template>
         </div>
-        <v-btn class="share-button" rounded @click="share()">
-          <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)"
-            >复制链接</template
-          >分享好友
-        </v-btn>
-        <!-- <button @click="share()">邀请</button> -->
       </div>
-      <!-- <div class="h-40">13</div> -->
-    </div>
-    <div class="box box2">
-      <div class="box-header">收益明细</div>
-      <div class="box-main">
-        <div class="grid grid-cols-2 gap-x-4 gap-y-8">
-          <div
-            v-for="(item, index) in dataList"
-            :key="index"
-            :class="{
-              'col-span-2': index === 6,
-            }"
-          >
-            <div class="label text-sm">
-              <span>{{ item.label }}</span>
-            </div>
-            <div class="value text-2xl font-bold">
-              <span>{{ item.value | formatNumber }}</span>
-            </div>
+      <v-btn class="share-button" rounded @click="share()">
+        <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)"
+          >复制链接</template
+        >分享好友
+      </v-btn>
+      <!-- <button @click="share()">邀请</button> -->
+    </activity-invite-user-box>
+    <activity-invite-user-box class="ox box2">
+      <template #title>收益明细</template>
+      <div class="grid grid-cols-2 gap-x-4 gap-y-8">
+        <div
+          v-for="(item, index) in dataList"
+          :key="index"
+          :class="{
+            'col-span-2': index === 6,
+          }"
+        >
+          <div class="label text-sm">
+            <span>{{ item.label }}</span>
+          </div>
+          <div class="value text-2xl font-bold">
+            <span>{{ item.value | formatNumber }}</span>
           </div>
         </div>
       </div>
-    </div>
-
-    <div v-if="type === 2" class="box box3">
-      <div class="box-header">激活码明细</div>
-      <div class="box-main">
-        <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
+    </activity-invite-user-box>
+
+    <activity-invite-user-box v-if="type === 2" class="box3">
+      <template #title>激活码明细</template>
+
+      <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
                     >
-                    <span v-else>未使用</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              v-if="myActivationCode.length"
-              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>
+                </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-if="myActivationCode.length"
+            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 class="code-list">
+      </div>
+      <!-- <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>
+    </activity-invite-user-box>
+    <activity-invite-user-box class="box4">
+      <template #title>活动规则</template>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="box-main text-sm" v-html="activityRules">
-        <!-- <p>1、传播过程中有任何疑问，可直接咨询客服</p>
-        <p>
-          2、用户可以通过分享页面或者套餐给想要分享的人，被分享人购买云机套餐后，分享人可获得套餐对应的星币
-        </p>
-        <p>
-          3、星币为双子星云手机平台唯一认可代币，仅能通过充值、赠送和分享获得，其它渠道途径非法获取的星币，不受平台认可
-        </p>
-        <p>4、星币可在双子星购买任一等价值套餐</p>
-        <p>
-          5、请勿利用双子星传播或扩散任何有关于政治、情色等任何违法的信息，一经发现，取消资格，如果触犯任何法律相关问题，平台不负任何责任
-        </p> -->
-      </div>
-    </div>
+      <div class="text-sm" v-html="activityRules"></div>
+    </activity-invite-user-box>
     <!-- <div class="">invite-user</div> -->
 
     <!-- <button>刷新数据</button> -->
@@ -306,15 +288,8 @@ export default {
     type() {
       return this.data.type;
     },
-    shareInfo() {
-      if (this.$userAgent.isMiniProgram) {
-        return {
-          title: '双子星APP',
-          path: '/pages/home/home',
-          imgUrl: location.origin + require('~/assets/image/logo.png'),
-        };
-      }
-      const url =
+    shareUrl() {
+      return (
         location.origin +
         this.$router.resolve({
           path: '/activity/invite-user/register',
@@ -323,11 +298,21 @@ export default {
             activityId: this.data.activityId,
             type: this.type,
           },
-        }).href;
+        }).href
+      );
+    },
+    shareInfo() {
+      if (this.$userAgent.isMiniProgram) {
+        return {
+          title: '双子星APP',
+          path: '/pages/home/home',
+          imgUrl: location.origin + require('~/assets/image/logo.png'),
+        };
+      }
       return {
         title: '双子星APP',
         desc: '分享好友购买云机套餐,返星币换现金',
-        link: url,
+        link: this.shareUrl,
         imgUrl: location.origin + require('~/assets/image/logo.png'),
       };
     },
@@ -411,9 +396,7 @@ export default {
       } else {
         // 浏览器环境
 
-        await this.$native.clipboard.writeText(
-          `${this.shareInfo.link} 双子星云手机`,
-        );
+        await this.$native.clipboard.writeText(`${this.shareUrl} 双子星云手机`);
         // throw new Error('1231');
         this.$toast.success('链接复制成功');
       }
@@ -474,48 +457,71 @@ export default {
   }
 }
 
-.box {
-  width: 373px;
-  box-sizing: border-box;
-  margin: auto;
-  border-image-source: url('~/assets/image/activity/invite-user/box@2x.png');
-  border-image-slice: 38 * 2 20 * 2 30 * 2 fill;
-
-  // border-image-width: 200px;
-  // border-image-slice: 200%;
-  border-width: 38px 15px 15px;
-  // border-width: 1px;
-  border-style: solid;
-  position: relative;
-
-  + .box {
-    margin-top: 30px;
-  }
-
-  .box-header {
-    position: absolute;
-    top: -30px;
-    // left: 141px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    padding: 0 130px;
-    color: #fff;
-  }
-
-  .box-main {
-    padding: 30px 15px 20px;
-  }
-}
+// .box {
+//   width: 373px;
+//   box-sizing: border-box;
+//   margin: auto;
+
+//   // border-image-width: 200px;
+//   // border-image-slice: 200%;
+//   // border-width: 1px;
+//   position: relative;
+//   z-index: 0;
+
+//   + .box {
+//     margin-top: 30px;
+//   }
+
+//   .box-header {
+//     // position: absolute;
+//     position: relative;
+//     // top: -30px;
+//     z-index: 1;
+//     // left: 141px;
+//     // left: 0;
+//     // right: 0;
+//     margin-bottom: -34px;
+//     // text-align: center;
+//     // padding: 0 130px;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     flex-direction: column;
+//     .box-header-content {
+//       color: #fff;
+//       border-image-source: url('~/assets/image/activity/invite-user/box-title@2x.png');
+//       border-image-slice: 0 140 fill;
+//       border-width: 0 70px 0;
+//       border-style: solid;
+//       height: 38px;
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       flex-direction: column;
+//       // width: auto;
+//     }
+//   }
+
+//   .box-main {
+//     z-index: 0;
+//     // padding: 30px 15px 20px;
+//     border-image-source: url('~/assets/image/activity/invite-user/box-bg@2x.png');
+//     border-image-slice: 50 60 80 fill;
+//     border-image-width: 30px 30px 40px;
+//     border-width: 50px 20px 40px;
+//     border-style: solid;
+//     // padding-top: 30px;
+//   }
+// }
 
 .box1 {
   margin-top: 275px;
 
-  .box-main {
-    // padding: 30px 15px 20px;
-    padding-left: 0;
-    padding-right: 0;
-  }
+  // ::v-deep .box-main {
+  //   // padding: 30px 15px 20px;
+  //   padding-left: 0;
+  //   padding-right: 0;
+  // }
 
   .cybz-content {
     width: 305px;
@@ -569,14 +575,14 @@ export default {
     // font-size: 24px;
   }
 
-  .box-main {
+  ::v-deep .box-main {
     padding-left: 20px;
     padding-right: 20px;
   }
 }
 
 .box3 {
-  .box-main {
+  ::v-deep .box-main {
     // padding-left: 20px;
     // padding-top: 0;
     padding-left: 10px;

pages/activity/invite-user/register.vue

@@ -1,80 +1,78 @@
 <template>
   <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
-    <div class="box box1">
-      <div class="box-header">快速注册</div>
-      <div class="box-main">
-        <validation-observer ref="observer" slim>
-          <v-form @submit.prevent="submit()">
-            <validation-provider
-              v-slot="{ errors }"
-              ref="providerPhome"
-              name="手机号码"
-              rules="phone"
-              slim
+    <activity-invite-user-box class="box1">
+      <template #title>快速注册</template>
+      <validation-observer ref="observer" slim>
+        <v-form @submit.prevent="submit()">
+          <validation-provider
+            v-slot="{ errors }"
+            ref="providerPhome"
+            name="手机号码"
+            rules="phone"
+            slim
+          >
+            <v-text-field
+              v-model="form.phone"
+              v-mask="$mask.phone"
+              label=""
+              name="phone"
+              required
+              :error-messages="errors"
+              placeholder="请输入11位手机号"
+              solo
+              type="tel"
+              flat
+              maxlength="11"
+            />
+          </validation-provider>
+          <validation-provider
+            v-slot="{ errors }"
+            name="短信验证码"
+            rules="code"
+            slim
+          >
+            <v-text-field
+              v-model="form.code"
+              v-mask="'######'"
+              label=""
+              :error-messages="errors"
+              name="code"
+              maxlength="6"
+              required
+              placeholder="请输入验证码"
+              solo
+              flat
+              type="tel"
             >
-              <v-text-field
-                v-model="form.phone"
-                v-mask="$mask.phone"
-                label=""
-                name="phone"
-                required
-                :error-messages="errors"
-                placeholder="请输入11位手机号"
-                solo
-                type="tel"
-                flat
-                maxlength="11"
-              />
-            </validation-provider>
-            <validation-provider
-              v-slot="{ errors }"
-              name="短信验证码"
-              rules="code"
-              slim
+              <template #append>
+                <v-btn
+                  :loading="codeSending"
+                  :disabled="codeTime > 0"
+                  small
+                  depressed
+                  color="#8027E5"
+                  plain
+                  class="text-base"
+                  @click="sendSmsCode()"
+                >
+                  <template v-if="codeTime > 0">{{ codeTime }}s</template>
+                  <template v-else>发送验证码</template>
+                </v-btn>
+              </template>
+            </v-text-field>
+          </validation-provider>
+          <div class="submit-btn-box">
+            <v-btn
+              type="submit"
+              :loading="submitting"
+              class="submit-btn"
+              rounded
+              >注册并下载APP</v-btn
             >
-              <v-text-field
-                v-model="form.code"
-                v-mask="'######'"
-                label=""
-                :error-messages="errors"
-                name="code"
-                maxlength="6"
-                required
-                placeholder="请输入验证码"
-                solo
-                flat
-                type="tel"
-              >
-                <template #append>
-                  <v-btn
-                    :loading="codeSending"
-                    :disabled="codeTime > 0"
-                    small
-                    depressed
-                    color="#8027E5"
-                    plain
-                    class="text-base"
-                    @click="sendSmsCode()"
-                  >
-                    <template v-if="codeTime > 0">{{ codeTime }}s</template>
-                    <template v-else>发送验证码</template>
-                  </v-btn>
-                </template>
-              </v-text-field>
-            </validation-provider>
-            <div class="submit-btn-box">
-              <v-btn
-                type="submit"
-                :loading="submitting"
-                class="submit-btn"
-                rounded
-                >注册并下载APP</v-btn
-              >
-            </div>
-          </v-form>
-        </validation-observer>
-      </div>
-    </div>
+          </div>
+        </v-form>
+      </validation-observer>
+    </activity-invite-user-box>
   </v-container>
 </template>
 
@@ -173,36 +171,36 @@ export default {
     background-image: url('~/assets/image/activity/invite-user/bg-2@2x.png');
   }
 }
-.box {
-  width: 373px;
-  box-sizing: border-box;
-  margin: auto;
-  border-image-source: url('~/assets/image/activity/invite-user/box@2x.png');
-  border-image-slice: 38 * 2 20 * 2 30 * 2 fill;
+// .box {
+//   width: 373px;
+//   box-sizing: border-box;
+//   margin: auto;
+//   // border-image-source: url('~/assets/image/activity/invite-user/box@2x.png');
+//   border-image-slice: 38 * 2 20 * 2 30 * 2 fill;
 
-  // border-image-width: 200px;
-  // border-image-slice: 200%;
-  border-width: 38px 15px 15px;
-  // border-width: 1px;
-  border-style: solid;
-  position: relative;
-  + .box {
-    margin-top: 30px;
-  }
-  .box-header {
-    position: absolute;
-    top: -30px;
-    // left: 141px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    padding: 0 130px;
-    color: #fff;
-  }
-  .box-main {
-    padding: 30px 15px 20px;
-  }
-}
+//   // border-image-width: 200px;
+//   // border-image-slice: 200%;
+//   border-width: 38px 15px 15px;
+//   // border-width: 1px;
+//   border-style: solid;
+//   position: relative;
+//   + .box {
+//     margin-top: 30px;
+//   }
+//   .box-header {
+//     position: absolute;
+//     top: -30px;
+//     // left: 141px;
+//     left: 0;
+//     right: 0;
+//     text-align: center;
+//     padding: 0 130px;
+//     color: #fff;
+//   }
+//   .box-main {
+//     padding: 30px 15px 20px;
+//   }
+// }
 .box1 {
   margin-top: 275px;
 }