refactor(pc): 优化拟在建详情和搜索列表 BI 离站配置

- 更新 icon 样式，使用 background 替代 background-image
- 添加拟在建详情和搜索列表 BI 的离站配置
- 优化内容卡片和对话框组件，支持自定义关闭按钮
- 调整底部图标样式，使对齐更居中
- 修复电话确认对话框显示逻辑

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

plugins/leave-source/src/assets/style/pic-icon.scss

@@ -15,39 +15,39 @@
 
 // 选择器前的 checkbox，需要添加 j-icon 基类
 .icon-fast {
-  background-image: url(../images/icon-fast.png);
+  background: url(../images/icon-fast.png) no-repeat;
   background-size: contain;
 }
 .icon-unique {
-  background-image: url(../images/icon-unique.png);
+  background: url(../images/icon-unique.png) no-repeat;
   background-size: contain;
 }
 .icon-advantage {
-  background-image: url(../images/icon-advantage.png);
+  background: url(../images/icon-advantage.png) no-repeat;
   background-size: contain;
 }
 .icon-customer-service {
-  background-image: url(../images/icon-customer.png);
+  background: url(../images/icon-customer.png) no-repeat;
   background-size: contain;
 }
 .icon-precise {
-  background-image: url(../images/icon-precise.png);
+  background: url(../images/icon-precise.png) no-repeat;
   background-size: contain;
 }
 .icon-support {
-  background-image: url(../images/icon-support.png);
+  background: url(../images/icon-support.png) no-repeat;
   background-size: contain;
 }
 
 .icon-pc-close {
-  background-image: url(../images/icon-close.png);
+  background: url(../images/icon-close.png) no-repeat;
   background-size: contain;
 }
 .icon-mobile-close {
-  background-image: url(../images/icon-mobile-close.png);
+  background: url(../images/icon-mobile-close.png) no-repeat;
   background-size: contain;
 }
 .icon-mobile-phone {
-  background-image: url(../images/icon-mobile-phone.png);
+  background: url(../images/icon-mobile-phone.png) no-repeat;
   background-size: contain;
 }

plugins/leave-source/src/data/index.js

@@ -1,4 +1,12 @@
 export const sourceMap = {
+  nzj_detail_bi: {
+    desc: '拟在建详情BI',
+    clue: '拟在建详情BI（非留资）'
+  },
+  nzj_search_bi: {
+    desc: '拟在建搜索列表BI',
+    clue: '拟在建搜索列表BI（非留资）'
+  },
   member_freeuser: {
     desc: '大会员落地页-免费体验1',
     clue: '大会员落地页-免费体验1（非留资）'

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

@@ -1,6 +1,6 @@
 <template>
   <div class="content-card" :class="setClass">
-    <span v-if="showCloseIcon" class="j-icon icon-pc-close" @click="closeIconClick" />
+    <span v-if="showClose" class="j-icon icon-pc-close" @click="closeIconClick" />
     <ContractCard v-if="type === '1'" :phone="phone" :user-phone="userPhone" :wxer="wxer" @contactMeEvent="contactMeEvent" />
     <ContractCardQrcode v-else :wxer="wxer" :show-text="showText" class="qrcode-module" />
     <LeaveCommon :class="{ 'samll-footer': type === '2' }" />
@@ -33,8 +33,8 @@ export default {
       default: true
     },
     showCloseIcon: {
-      type: Boolean,
-      default: true
+      type: String || Boolean,
+      default: 'true' || true
     },
     wxer: {
       type: String,
@@ -53,6 +53,19 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      showClose: true,
+    }
+  },
+  watch: {
+    showCloseIcon(val) {
+      if (typeof val === 'string') {
+        val = JSON.parse(val)
+      }
+      this.showClose = val
+    }
+  },
   methods: {
     contactMeEvent(phone) {
       this.$emit('contactMeEvent', phone)
@@ -138,7 +151,18 @@ export default {
     }
   }
   &.newUserSale {
-
+    .leave-common-footer {
+      .j-icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+    .qr-code-container {
+      padding: 0;
+      .qr-code {
+        padding-left: 0;
+      }
+    }
   }
 }
 </style>

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

@@ -66,6 +66,7 @@ export default {
     .leave-common-footer-item {
       display: flex;
       justify-content: center;
+      align-items: center;
       margin-bottom: 16px;
       .leave-common-footer-item-icon {
         img {

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

@@ -27,6 +27,10 @@ const props = defineProps({
     type: String,
     default: '联系专属客服，申请免费体验'
   },
+  showCloseIcon: {
+    type: String || Boolean,
+    default: 'true' || true,
+  },
   type: {
     type: String,
     default: '1'
@@ -98,6 +102,7 @@ export default {
       :show-text="config.props.showText"
       :wxer="configInfo.wxer"
       :phone="configInfo.phone"
+      :show-close-icon="props.showCloseIcon"
       :user-phone="configInfo?.userPhone || ''"
       :set-class="config.props.setClass"
       @contactMeEvent="contactMeEvent"
@@ -135,7 +140,7 @@ export default {
 .pc-leave-dialog {
   ::v-deep {
     .overlay-content {
-      margin: 300px auto;
+      margin: 8% auto;
       width: 732px;
       // background: #fff;
       border-radius: 8px;

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

@@ -163,7 +163,7 @@ export function useContactMeLogic(options = {}) {
       doConfirmLeave()
     },
     phoneChangeCancel() {
-      confirmPhoneDialog.show = true
+      confirmPhoneDialog.show = false
       changePhoneDialog.show = false
     },
   }

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

@@ -10,7 +10,7 @@ const instanceMap = {
   'app': null,
   'h5': null,
   'pc': null,
-  'pc-leave-content-card': null,
+  'pc-leave-popover': null,
   'phone-confirm': null,
 }
 
@@ -69,7 +69,6 @@ export async function doLeave(options = {}) {
     platform = 'pc',
     props,
   } = options
-
   if (!source) {
     return console.error('source必传')
   }
@@ -113,7 +112,8 @@ export function renderComponent(el, componentId, options = {}) {
     if (props) {
       for (const key in props) {
         if (props[key]) {
-          instance[key] = props[key]
+          // instance[key] = props[key]
+          instance.$set(instance, key, props[key])
         }
       }
     }