feat: leave-source包移动端组件样式调整

plugins/leave-source/src/components/dialog/AnimatedOverlay.vue

@@ -41,6 +41,10 @@ export default {
       type: String,
       default: ''
     },
+    getContainer: {
+      type: String,
+      default: ''
+    },
     contentClass: {
       type: String,
       default: ''
@@ -61,7 +65,19 @@ export default {
       }
     }
   },
+  mounted() {
+    this.changeContainer()
+  },
+  beforeDestroy() {
+    this.$el.remove()
+  },
   methods: {
+    changeContainer() {
+      if (this.getContainer) {
+        const container = document.querySelector(this.getContainer)
+        container.append(this.$el)
+      }
+    },
     clickOverlay() {
       this.syncVisible(false)
     },

plugins/leave-source/src/lib/mobile/components/CenterLayout.vue

@@ -34,5 +34,10 @@ export default {
     right: 8px;
     z-index: 2;
   }
+
+  .j-footer {
+    height: unset;
+    box-shadow: none;
+  }
 }
 </style>

plugins/leave-source/src/lib/mobile/components/QrCode.vue

@@ -107,7 +107,7 @@ export default {
   width: 100%;
 }
 .qr-bottom-container {
-  margin-top: 4px;
+  margin-top: 8px;
 }
 .wx-bottom-text {
   color: #171826;
@@ -115,11 +115,14 @@ export default {
 }
 
 .app-bottom-button {
+  height: 46px;
   .button-main-text {
     font-size: 15px;
+    line-height: 22px;
   }
   .button-sub-text {
     font-size: 11px;
+    line-height: 16px;
   }
 }
 </style>

plugins/leave-source/src/lib/mobile/components/QrContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="qr-container">
+  <div class="qr-container" :class="{ 'qr-center': center }">
     <p class="qr-title">
       添加客服，立享1V1管家式服务
     </p>
@@ -19,6 +19,10 @@ export default {
   },
   props: {
     platform: String,
+    center: {
+      type: Boolean,
+      default: false
+    },
     qr: {
       type: String,
       default: ''
@@ -33,7 +37,20 @@ export default {
   flex-direction: column;
   align-items: center;
   padding-bottom: 20px;
+
+  .qr-title {
+    color: #171826;
+    font-size: 18px;
+    line-height: 30px;
+    margin-bottom: 8px;
+  }
+
+  &.qr-center {
+    padding: 24px 28px;
+  }
+
 }
+
 ::v-deep {
   .qr-code {
     margin: 0 auto;

plugins/leave-source/src/lib/mobile/components/center-card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-content-card">
-    <QrContainer :qr="qr" :platform="platform" />
+    <QrContainer :qr="qr" :platform="platform" center />
     <FooterCard column />
   </div>
 </template>
@@ -17,6 +17,10 @@ export default {
   },
   props: {
     platform: String,
+    phone: {
+      type: String,
+      default: ''
+    },
     qr: {
       type: String,
       default: ''

plugins/leave-source/src/lib/mobile/components/footer.vue

@@ -67,21 +67,21 @@ export default {
       display: flex;
       justify-content: center;
       margin-bottom: 10px;
-      .leave-common-footer-item-icon {
-        img {
-          width: 16px;
-          height: 16px;
-        }
+    }
+    .leave-common-footer-item-icon {
+      img {
+        width: 16px;
+        height: 16px;
       }
-      .leave-common-footer-item-title {
-        display: flex;
-        align-items: center;
-        margin-left: 8px;
-        font-size: 12px;
-        color: #1d1d1d;
-        .text {
-          font-weight: bold;
-        }
+    }
+    .leave-common-footer-item-title {
+      display: flex;
+      align-items: center;
+      margin-left: 8px;
+      font-size: 12px;
+      color: #1d1d1d;
+      .text {
+        font-weight: bold;
       }
     }
   }
@@ -92,6 +92,7 @@ export default {
     }
     .leave-common-footer-item-title {
       display: flex;
+      align-items: flex-start;
       flex-direction: column;
     }
     .subtext {

plugins/leave-source/src/lib/mobile/content-popup.vue

@@ -17,7 +17,6 @@ const props = defineProps({
   source: {
     type: String,
     default: '',
-    required: true,
   },
   sourceDesc: {
     type: String,
@@ -33,6 +32,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  getContainer: {
+    type: String,
+    default: ''
+  },
   useCustomer3: {
     type: Boolean,
     default: false,
@@ -59,8 +62,6 @@ const {
   props
 })
 
-console.log(configInfo)
-
 const {
   contactMe,
   changePhoneDialog,
@@ -94,6 +95,7 @@ export default {
     class="mobile-leave-dialog"
     :visible="visible"
     :content-transition-name="contentTransitionName"
+    :get-container="getContainer"
     @update:visible="updateVisible"
     @close="close"
   >

plugins/leave-source/src/utils/hooks.js

@@ -60,10 +60,12 @@ export function usePreLeaveInfo(options = {}) {
   }
 
   watch(() => source.value, async (val) => {
-    const r = await useLeaveInfoRequest({ source: val })
-    if (r.info) {
-      configInfo.userPhone = r.info.phone
-      configInfo.isCurrentPhone = r.info.isCurrentPhone
+    if (source) {
+      const r = await useLeaveInfoRequest({ source: val })
+      if (r.info) {
+        configInfo.userPhone = r.info.phone
+        configInfo.isCurrentPhone = r.info.isCurrentPhone
+      }
     }
   })
 

plugins/leave-source/src/utils/leave.js

@@ -93,6 +93,7 @@ export async function doLeave(options = {}) {
     instance.updateVisible(true)
     // 将组件的 DOM 添加到页面
     renderInstance(instance, el)
+    return instance
   }
 }
 
@@ -119,5 +120,6 @@ export function renderComponent(el, componentId, options = {}) {
 
     // 将组件的 DOM 添加到页面
     renderInstance(instance, el)
+    return instance
   }
 }