优化拉新分享弹窗布局

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

@@ -5,49 +5,28 @@
       :close-on-click-overlay="false"
     >
       <div class="share-wrap">
-        <div class="share-content bg-whiter pt-4 pb-4">
+        <div class="top-raduis bg-whiter">
           <!-- 用户信息 -->
-          <div class="userinfo-wrap pl-4 pr-4">
-            <!-- <img class="avatar mr-1" src="~assets/image/activity/invite-user/invite-new-user/avatar.png" alt=""> -->
-            <div class="avatar mr-1"></div>
+          <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-describe">邀请您使用双子星云手机</div>
-            </div>
-          </div>
-          <!-- 分割线 -->
-          <van-divider dashed />
-
-          <!-- 分享文案 -->
-          <div class="share-bright pl-4 pr-4">
-            <div class="share-describe mb-4">现在抢购即可享受活动价格</div>
-            <div class="bright-item">
-              <div class="bright-context">
-                <!-- <img class="bright-img mr-1" src="" alt=""> -->
-                <div class="bright-img mr-1"></div>
-                <div class="bright-main ml-1">
-                  <div class="bright-title">星曜云手机</div>
-                  <div class="title-text">邀请您使用双子星云手机</div>
-                </div>
-              </div>
-              <div class="badge">
-                <img src="~assets/image/activity/invite-user/invite-new-user/badge.png" alt="">
-              </div>
+              <div class="userinfo-describe">邀请您使用云手机</div>
             </div>
           </div>
         </div>
-        <!-- 不规则图背景 -->
-        <div class="share-irregular bg-whiter"></div>
+
         <!-- 二维码区域 -->
-        <div class="qrcode-wrap bg-whiter mb-6 pl-6 pr-6 pt-6 pb-6">
-          <div class="qrcode-img mr-4">
+        <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>
-          <div class="qrcode-describe">
-            <div class="qrcode-title">双子星云手机</div>
-            <div class="qrcode-text">使用微信扫码购买双子星云手机</div>
+             <div class="qrcode"></div>
           </div>
         </div>
+
+        <div class="arc tips-text bg-whiter">使用微信扫码注册云手机</div>
+        <div class="btm-raduis bg-whiter pt-6 mb-6"></div>
+
         <div class="share-btn-wrap">
           <div class="operate-wrap">
             <div class="copy-link" @click="copyCode">复制链接</div>
@@ -101,13 +80,52 @@ export default {
     width: 290px;
   }
 
-  .share-content{
+  .top-raduis{
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
   }
 
+  .btm-raduis{
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .arc{
+    overflow: hidden;
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    &::before,&::after{
+      content: "";
+      position: absolute;
+      display: block;
+      width: 22px;
+      height: 22px;
+      background-color: #171611;
+      border-radius: 50%;
+    }
+    &::before{
+        left: 0;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+    }
+    &::after{
+        right: 0;
+        -webkit-transform: translateX(50%);
+        transform: translateX(50%);
+    }
+  }
+
   .userinfo-wrap{
     display: flex;
+    background-image: url('~/assets/image/activity/invite-user/invite-new-user/share-popup-bg.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: padding-box;
 
     .avatar{
      flex: 0 0 40px;
@@ -129,84 +147,25 @@ export default {
     }
   }
 
-  .share-describe{
-    font-family: DingTalk, DingTalk;
-    font-size: 18px;
-    color: #0A132B;
-    line-height: 21px;
-  }
-
-  .bright-item{
+  .qrcode-container{
     display: flex;
+    justify-content: center;
+    align-items: center;
 
-    .bright-context{
-      flex: 1;
-      display: flex;
-
-      .bright-img{
-        flex: 0 0 40px;
-        width: 40px;
-        height: 40px;
-        background-color: red;
-      }
-
-      .bright-main{
-        .bright-title{
-          font-weight: 500;
-          font-size: 14px;
-          color: #0A132B;
-        }
-
-        .title-text{
-          font-weight: 400;
-          font-size: 12px;
-          color: #979797;
-        }
-      }
-    }
-
-
-    .badge{
-      flex: 0 0 36px;
-      width: 36px;
-      height: 36px;
+    .qrcode-img{
 
-      img{
-        width: 100%;
-        height: 100%;
+      .qrcode{
+        width: 190px;
+        height: 190px;
       }
     }
   }
 
-  .qrcode-wrap{
-    display: flex;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-
-    .qrcode-img{
-      flex: 0 0 56px;
-      width: 56px;
-      height: 56px;
-      background-color: red;
-    }
-
-    .qrcode-describe{
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-     .qrcode-title{
-        font-weight: 600;
-        font-size: 16px;
-        color: #3370FF;
-      }
-
-      .qrcode-text{
-        font-weight: 400;
-        font-size: 12px;
-        color: #666;
-      }
-    }
+  .tips-text{
+    font-weight: 600;
+    font-size: 16px;
+    color: #0A132B;
+    text-align: center;
   }
 
   .share-btn-wrap{

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

@@ -23,7 +23,7 @@
         </div>
         <div class="possess-warp mb-3">
           <div class="withdrawal-text">可提现<span class="withdrawal-money ml-2">¥{{ withdrawalBalance }}</span></div>
-          <div class="withdrawal-btn">提现</div>
+          <div class="withdrawal-btn" @click="withdrawalHandle">提现</div>
         </div>
         <div class="userinfo-detail">
           <div class="userinfo-detail-item pt-4 pr-3 pb-3 pl-3">
@@ -77,6 +77,8 @@
 /**
  * Date: 2025-4-3 oem商户拉新分佣活动
 */
+import { Dialog } from 'vant';
+
 import layoutBack from '@/components/layout';
 import layout from './components/layout';
 import RecordList from './components/RecordList';
@@ -238,6 +240,13 @@ export default {
       console.log('pageChangeHandle', page);
       // 发起请求
     },
+    // 提现按钮点击
+    withdrawalHandle() {
+      Dialog.alert({
+        message: '请到APP内-我的-联系客服提现',
+        confirmButtonColor: '#1A96D2',
+      });
+    },
     // 获取活动页上部分数据
     async getActivityData() {
       const res = await this.$axios.$get(