feat: leave-source-vue手机号区分

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

@@ -13,6 +13,7 @@ export function requestBehaviorClues(data = {}) {
         data: {
           name: '专属客服',
           remark: '专属客服',
+          phone: '18888888888',
           wxer: 'https://cdn-ali2.jianyu360.cn/qmxupload/2024/06/20/202406201338370067907a438.png'
         },
         message: 'success'

plugins/leave-source/src/assets/style/common.scss

@@ -1,16 +1,7 @@
 @import './_mixin';
 @import './_variables.scss';
 @import './layout.scss';
-@import './pic-icon.scss';
-
-html {
-  height: 100%;
-  // overflow-y: auto;
-}
-
-body {
-  background-color: #f2f2f4;
-}
+// @import './pic-icon.scss';
 
 .highlight-text {
   color: $color-text--highlight;
@@ -63,16 +54,6 @@ body {
   -webkit-box-orient: vertical;
 }
 
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 8px;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 3px;
-  background-color: #ececec;
-  opacity: 0.15;
-}
 .scrollbar {
   &::-webkit-scrollbar {
     /*滚动条整体样式*/
@@ -151,30 +132,6 @@ input[type='number'] {
   }
 }
 
-// 复选框类名
-.j-checkbox {
-  flex-shrink: 0;
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-  border-radius: 2px;
-  border: 1px solid #e0e0e0;
-  cursor: pointer;
-
-  &.checked {
-    border: 0;
-    background: url('../images/icon/icon-checked.png') no-repeat center
-      center;
-    background-size: 16px;
-
-    &[disabled] {
-      background: url('../images/icon/icon-checked.png') no-repeat;
-      background-size: 18px;
-    }
-  }
-}
-
 a {
   user-select: text !important;
 }

plugins/leave-source/src/assets/style/mobile.scss

@@ -0,0 +1,8 @@
+.safe-area-inside-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[class*='no-select'] {
+  user-select: none;
+}

plugins/leave-source/src/assets/style/pc.scss

@@ -0,0 +1,22 @@
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 3px;
+  background-color: #ececec;
+  opacity: 0.15;
+}
+.scrollbar {
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 3px;
+    background-color: #ececec;
+    opacity: 0.15;
+  }
+}

plugins/leave-source/src/components/common/index.js

@@ -19,7 +19,7 @@ const footerDataConfig = {
     {
       icon: 'icon-customer',
       title: '人工',
-      subtitle: '1V1功能使用培训'
+      subtitle: ' 1V1功能使用培训'
     },
     {
       icon: 'icon-support',

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

@@ -81,11 +81,13 @@ export default {
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
+  z-index: 9999;
   ::v-deep {
     * {
       box-sizing: border-box;
     }
+
+    @import '../../assets/style/common.scss';
   }
 }
 

plugins/leave-source/src/components/toast/Toast.vue

@@ -10,7 +10,7 @@
   left: 50%;
   top: 50%;
   background: rgba(0, 0, 0, 0.65);
-  padding: 16px 32px;
+  padding: 12px 8px;
   border-radius: 8px;
   transform: translate(-50%, -50%);
   color: #fff;

plugins/leave-source/src/entry.js

@@ -9,7 +9,7 @@ import registryToast from './components/toast/index'
 import PCContentStatic from './lib/pc/content-static.vue'
 import { doLeave, renderComponent } from './utils/leave'
 import { sourceMap } from './data'
-import './assets/style/common.scss'
+import './assets/style/pic-icon.scss'
 
 function install(Vue) {
   // 注册全局组件

plugins/leave-source/src/example.vue

@@ -80,7 +80,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #171826;
   width: 100%;
-  height: 100vh;
+  height: 90vh;
   position: relative;
 }
 .btn {

plugins/leave-source/src/index.js

@@ -1,11 +0,0 @@
-import PCContentCard from './lib/pc/components/content-card.vue'
-import PCLeaveDialog from './lib/pc/content-dialog.vue'
-import MobileLeavePopup from './lib/mobile/content-popup.vue'
-import registryToast from './components/toast/index'
-
-export default {
-  registryToast,
-  PCContentCard,
-  PCLeaveDialog,
-  MobileLeavePopup,
-}

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

@@ -2,6 +2,7 @@
   <div class="mobile-content-card">
     <ContentInfo
       :phone="phone"
+      :user-phone="userPhone"
       :qr="qr"
       :platform="platform"
       :use-customer3="useCustomer3"
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: ''
     },
+    userPhone: {
+      type: String,
+      default: ''
+    },
     qr: {
       type: String,
       default: ''

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

@@ -34,7 +34,7 @@
           <span v-else class="step-item-content">
             <span class="step-left-text">客服主动联系您：</span>
             <div class="step-right-content">
-              <InputPhone :init-phone="phone" @contact="contactMe" />
+              <InputPhone :init-phone="userPhone" @contact="contactMe" />
             </div>
           </span>
         </div>
@@ -59,6 +59,10 @@ export default {
       type: String,
       default: ''
     },
+    userPhone: {
+      type: String,
+      default: ''
+    },
     qr: {
       type: String,
       default: ''

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

@@ -74,6 +74,8 @@ export default {
         }
       }
       .leave-common-footer-item-title {
+        display: flex;
+        align-items: center;
         margin-left: 8px;
         font-size: 12px;
         color: #1d1d1d;

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

@@ -96,7 +96,7 @@ export default {
     @update:visible="updateVisible"
     @close="close"
   >
-    <div class="mobile-leave-dialog-content" :class="{ 'dialog-content-center': center, 'dialog-content-bottom': !center }">
+    <div class="mobile-leave-dialog-content" :class="{ 'dialog-content-center': center, 'dialog-content-bottom safe-area-inside-bottom': !center }">
       <CenterLayout v-if="center" @closeIconClick="close">
         <MobileCenterCard
           :qr="configInfo.wxer"
@@ -108,6 +108,7 @@ export default {
         <MobileContentCard
           :qr="configInfo.wxer"
           :phone="configInfo.phone"
+          :user-phone="configInfo.userPhone"
           :platform="platform"
           :use-customer3="useCustomer3"
           :is-current-phone="configInfo.isCurrentPhone"
@@ -151,10 +152,7 @@ export default {
 $main: #2cb7ca;
 
 ::v-deep {
-  ::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 2px;
-  }
+  @import '../../assets/style/mobile.scss';
 
   .highlight-text {
     color: $main;

plugins/leave-source/src/lib/pc/content-dialog.vue

@@ -128,6 +128,8 @@ export default {
       // background: #fff;
       border-radius: 8px;
     }
+
+    @import '../../assets/style/pc.scss';
   }
   &-2 {
     ::v-deep {

plugins/leave-source/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import example from './example.vue'
 import Toast from './components/toast/index'
 import './assets/style/common.scss'
+import './assets/style/pic-icon.scss'
 
 Vue.use(Toast)
 

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

@@ -38,7 +38,8 @@ export function usePreLeaveInfo(options = {}) {
     name: '',
     remark: '',
     wxer: '',
-    phone: '',
+    phone: '', // 客服手机号
+    userPhone: '', // 用户留资手机号
     isCurrentPhone: true,
   })
 
@@ -58,7 +59,7 @@ export function usePreLeaveInfo(options = {}) {
   watch(() => source.value, async (val) => {
     const r = await useLeaveInfoRequest({ source: val })
     if (r.info) {
-      configInfo.phone = r.info.phone
+      configInfo.userPhone = r.info.phone
       configInfo.isCurrentPhone = r.info.isCurrentPhone
     }
   })
@@ -91,13 +92,13 @@ export function usePreLeaveInfo(options = {}) {
 // 与我联系-判断逻辑
 export function useContactMeLogic(options = {}) {
   const { configInfo, props } = options
-  const phone = ref(configInfo.phone)
+  const userPhone = ref(configInfo.userPhone)
   const source = computed(() => props.source)
 
   const isLoginPhone = computed(() => configInfo.isCurrentPhone || false)
 
-  watch(() => configInfo.phone, (val) => {
-    phone.value = val
+  watch(() => configInfo.userPhone, (val) => {
+    userPhone.value = val
   })
 
   const changePhoneDialog = reactive({
@@ -113,7 +114,7 @@ export function useContactMeLogic(options = {}) {
   })
 
   const confirmContentText = computed(() => {
-    return `专属客服将致电 <span class="highlight-text">${phone.value}</span>，<br />请核对联系电话是否准确`
+    return `专属客服将致电 <span class="highlight-text">${userPhone.value}</span>，<br />请核对联系电话是否准确`
   })
   const confirmPhoneDialog = reactive({
     show: false,
@@ -167,7 +168,7 @@ export function useContactMeLogic(options = {}) {
       return changePhoneDialog.phoneNumber
     }
     else {
-      return phone.value
+      return userPhone.value
     }
   })
 
@@ -207,7 +208,7 @@ export function useContactMeLogic(options = {}) {
   }
 
   return {
-    phone,
+    userPhone,
     changePhoneDialog,
     successCheckDialog,
     confirmPhoneDialog,

plugins/leave-source/vite.config.js

@@ -28,6 +28,8 @@ export default defineConfig(({ mode, command }) => {
     build: {
       sourcemap: true,
       emptyOutDir: true,
+      // 如果你想强制所有图片都转为Base64，可以将limit设为无穷大
+      assetsInlineLimit: Infinity,
       lib: {
         entry: './src/entry.js', // 入口文件
         name: 'leaveSourceVue', // 库的全局变量名