feat: 弹窗关闭逻辑优化

plugins/leave-source/.gitignore

@@ -1,11 +1,5 @@
 .DS_Store
 node_modules
-/mobile_web
-/jy_mobile
-/dist
-storybook-static
-/docs
-
 
 # local env files
 .env.local

plugins/leave-source/README.md

@@ -0,0 +1,131 @@
+# @jy/plugin-leave-source
+
+> 留资弹窗插件
+
+## 目录结构
+
+```
+├── README.md
+├── package.json
+├── public
+│   ├── favicon.ico
+│   └── index.html
+├── src
+│   ├── api
+│   ├── data // 静态数据
+│   ├── assets
+│   ├── components  // 项目公共组件
+│   ├── utils
+│   └── lib // 业务组件
+├── vite.config.js
+└── yarn.lock
+```
+
+## 引入方式
+
+1. web项目内通过package.json工作空间引入
+
+```
+"@jy/plugin-leave-source": "workspace:*"
+
+```
+
+2. jy项目通过build后放置/common-module/plugins/目录下引入
+
+```
+<script src="/common-module/plugins/js/leave-source-vue.umd.js"></script>
+leaveSourceVue.doLeave({
+  platform: utils.$env.platform, // 平台，必传。默认值pc，可选h5/app/wx。内部会根据此id渲染不同组件
+  source: 'member_freeuser', // 留资source，必传。用来查询留资数据和提交留资数据
+  source_desc: '付费产品落地页点击体验按钮', // 线索描述，必传。创建线索接口调用时必须要此参数
+})
+```
+
+3.其它项目通过install私有包引入
+
+```
+pnpm add @jy/plugin-leave-source@0.0.1
+
+import xxx from '@jy/plugin-leave-source'
+Vue.use(xxx)
+```
+
+### Example
+
+```
+<template>
+  <div>
+    <button @click="handle">手动实例触发</button>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    handle() {
+      doLeaveSource({
+        platform: utils.$env.platform, // 平台，必传。默认值pc，可选h5/app/wx。内部会根据此id渲染不同组件
+        source: 'member_freeuser', // 留资source，必传。用来查询留资数据和提交留资数据
+        source_desc: '付费产品落地页点击体验按钮', // 线索描述，必传。创建线索接口调用时必须要此参数
+      })
+    }
+  }
+}
+</script>
+```
+
+## Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### 配置package.json
+
+```
+指定打包路径
+"main": "./dist/leave-source-vue.umd.js",
+"module": "./src/entry.js",
+```
+
+### 配置私有库地址
+
+```
+pnpm set registry http://172.20.100.235:14873/
+```
+
+### 注册私有库
+
+```
+pnpm adduser --registry http://172.20.100.235:14873/
+```
+
+### 登录私有库
+
+```
+pnpm login --registry http://172.20.100.235:14873/
+```
+
+### 修改版本号
+
+```
+手动修改package.json版本号
+"version": "1.0.3",
+```
+
+### 发布私有库
+
+```
+pnpm publish --no-git-checks
+```

plugins/leave-source/package.json

@@ -3,6 +3,12 @@
   "version": "0.0.1",
   "private": false,
   "description": "留资弹窗插件",
+  "exports": {
+    ".": {
+      "import": "./dist/leave-source-vue.mjs",
+      "require": "./dist/leave-source-vue.umd.js"
+    }
+  },
   "main": "./dist/leave-source-vue.umd.js",
   "module": "./src/entry.js",
   "files": [

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

@@ -2,32 +2,32 @@
 import request from './index'
 
 export function requestBehaviorClues(data = {}) {
-  // return new Promise((resolve) => {
-  //   request({
-  //     url: '/salesLeads/behaviorClues',
-  //     method: 'post',
-  //     data
-  //   }).finally(() => {
-  //     resolve({
-  //       error_code: 0,
-  //       data: {
-  //         name: '专属客服',
-  //         remark: '专属客服',
-  //         wxer: 'https://cdn-ali2.jianyu360.cn/qmxupload/2024/06/20/202406201338370067907a438.png'
-  //       },
-  //       message: 'success'
-  //     })
-  //   })
-  // })
-  return Promise.resolve({
-    error_code: 0,
-    data: {
-      name: '专属客服',
-      remark: '专属客服',
-      wxer: 'https://cdn-ali2.jianyu360.cn/qmxupload/2024/06/20/202406201338370067907a438.png'
-    },
-    message: 'success'
+  return new Promise((resolve) => {
+    request({
+      url: '/salesLeads/behaviorClues',
+      method: 'post',
+      data
+    }).finally(() => {
+      resolve({
+        error_code: 0,
+        data: {
+          name: '专属客服',
+          remark: '专属客服',
+          wxer: 'https://cdn-ali2.jianyu360.cn/qmxupload/2024/06/20/202406201338370067907a438.png'
+        },
+        message: 'success'
+      })
+    })
   })
+  // return Promise.resolve({
+  //   error_code: 0,
+  //   data: {
+  //     name: '专属客服',
+  //     remark: '专属客服',
+  //     wxer: 'https://cdn-ali2.jianyu360.cn/qmxupload/2024/06/20/202406201338370067907a438.png'
+  //   },
+  //   message: 'success'
+  // })
   // return request({
   //   url: '/salesLeads/behaviorClues',
   //   method: 'post',

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

@@ -82,6 +82,11 @@ export default {
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 999;
+  ::v-deep {
+    * {
+      box-sizing: border-box;
+    }
+  }
 }
 
 /* 遮罩淡入淡出 */

plugins/leave-source/src/entry.js

@@ -9,6 +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'
 
 function install(Vue) {
   // 注册全局组件

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

@@ -47,6 +47,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   height: 64px;
+  width: 100%;
   padding: 0 16px;
   .header-nav-title {
     font-size: 20px;

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

@@ -25,7 +25,7 @@ export default {
   props: {
     phone: {
       type: String,
-      default: '13283800000'
+      default: ''
     },
     qr: {
       type: String,

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

@@ -72,6 +72,11 @@ const {
   popupVisible: visible,
 })
 
+function successCheckDialogConfirm() {
+  dialogEvents.successConfirm()
+  updateVisible(false)
+}
+
 defineExpose({
   updateVisible
 })
@@ -127,7 +132,8 @@ export default {
       :confirm-button-text="successCheckDialog.confirmButtonText"
       :cancel-button-text="successCheckDialog.cancelButtonText"
       :content-text="successCheckDialog.contentText"
-      @confirm="dialogEvents.successConfirm"
+      @confirm="successCheckDialogConfirm"
+      @close="dialogEvents.successClose"
     />
     <!-- 修改手机号弹窗 -->
     <ChangePhoneDialog

plugins/leave-source/src/lib/mobile/style/dialog-layout.scss

@@ -1,6 +1,6 @@
 .dialog-content-bottom {
   width: 100%;
-  max-height: 70vh;
+  max-height: 72vh;
   border-radius: 12px 12px 0 0;
   background-color: #fff;
   overflow-y: auto;

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

@@ -47,6 +47,9 @@ export function usePreLeaveInfo(options = {}) {
   const staticInfo = computed(() => props.staticInfo)
   function updateVisible(e) {
     visible.value = e
+    if (e) {
+      createClueWhenOpen()
+    }
   }
   function close() {
     updateVisible(false)
@@ -59,24 +62,23 @@ export function usePreLeaveInfo(options = {}) {
       configInfo.isCurrentPhone = r.info.isCurrentPhone
     }
   })
-  watch(() => visible.value, async (val) => {
-    if (val) {
-      if (staticInfo.value) {
-        // 获取静态信息
-        const r = await useStaticInfoRequest()
-        if (r) {
-          Object.assign(configInfo, r)
-        }
+
+  async function createClueWhenOpen() {
+    if (staticInfo.value) {
+      // 获取静态信息
+      const r = await useStaticInfoRequest()
+      if (r) {
+        Object.assign(configInfo, r)
       }
-      else {
-        // 获取动态分配信息
-        const r = await useBehaviorCluesRequest(sourceDesc.value)
-        if (r) {
-          Object.assign(configInfo, r)
-        }
+    }
+    else {
+      // 获取动态分配信息
+      const r = await useBehaviorCluesRequest(sourceDesc.value)
+      if (r) {
+        Object.assign(configInfo, r)
       }
     }
-  })
+  }
 
   return {
     updateVisible,
@@ -102,7 +104,7 @@ export async function useContactMeLogic(options = {}) {
 }
 
 export function usePhoneCheck(options = {}) {
-  const { configInfo, props, popupVisible } = options
+  const { configInfo, props } = options
   const phone = ref(configInfo.phone)
   const source = computed(() => props.source)
 
@@ -135,6 +137,17 @@ export function usePhoneCheck(options = {}) {
     contentText: confirmContentText,
   })
 
+  function closeAllDialog() {
+    changePhoneDialog.show = false
+    confirmPhoneDialog.show = false
+    successCheckDialog.show = false
+  }
+  function showSuccessDialog() {
+    changePhoneDialog.show = false
+    confirmPhoneDialog.show = false
+    successCheckDialog.show = true
+  }
+
   const dialogEvents = {
     confirmPhoneConfirm() {
       doConfirmLeave()
@@ -146,6 +159,9 @@ export function usePhoneCheck(options = {}) {
     successConfirm() {
       successCheckDialog.show = false
     },
+    async successClose() {
+      closeAllDialog()
+    },
     phoneChangeConfirm() {
       doConfirmLeave()
     },
@@ -185,22 +201,14 @@ export function usePhoneCheck(options = {}) {
     }
 
     try {
-      await requestSubmitLeaveInfo(payload)
+      const res = await requestSubmitLeaveInfo(payload)
+      if (res && res.data) {
+        showSuccessDialog()
+      }
     }
     catch (error) {
       console.log(error)
     }
-    finally {
-      changePhoneDialog.show = false
-      confirmPhoneDialog.show = false
-      if (popupVisible) {
-        popupVisible.value = false
-      }
-      successCheckDialog.show = false
-      // 使用 nextTick 确保状态更新
-      await nextTick()
-      successCheckDialog.show = true
-    }
   }
 
   function contactMe() {
@@ -217,6 +225,8 @@ export function usePhoneCheck(options = {}) {
     changePhoneDialog,
     successCheckDialog,
     confirmPhoneDialog,
+    closeAllDialog,
+    showSuccessDialog,
     dialogEvents,
     contactMe
   }

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

@@ -87,7 +87,7 @@ export async function doLeave(options = {}) {
         }
       }
     }
-
+    console.log(instance, 'instance')
     instance.updateVisible(true)
     // 将组件的 DOM 添加到页面
     renderInstance(instance, el)

plugins/leave-source/vite.config.js

@@ -76,7 +76,6 @@ export default defineConfig(({ mode, command }) => {
     },
     server: {
       host: '0.0.0.0',
-      port: 8080,
       proxy: {
         '/jyapi': {
           target: 'https://jybx-webtest.jydev.jianyu360.com',