bxs-tools-ui 3.2.1 → 3.3.0

package/packages/product-info/readme.md

@@ -3,6 +3,7 @@
 计划书投保页的产品组件，基于服务端下发的 `mulInsOrderList` 动态渲染各险种的表单元素，支持元素值修改、险种联动逻辑处理与表单校验。
 
 > 数据来源：访问[计划书初始化 API](http://app.winbaoxian.cn/planBook/V2/getInitData?insuranceTypeId=6128) 查看示例数据，或参考 `demo/constant.js`。
+>
 > - `inputData`：`data → initData → inputData`
 > - `verifyData`：`data → verifyData`
 > - `groupKey`：`inputData → productGroupList → key`
@@ -39,33 +40,33 @@ export default {
 </template>
 
 <script>
-import { ProductInfo } from 'bxs-tools-ui';
-
-export default {
-  components: { ProductInfo },
-  methods: {
-    cgProduct(product, options, inst) {
-      if (options.type === 'change' && options.errorMsg) {
-        this.$nextTick(() => {
-          this.$toast(options.errorMsg);
-        });
+  import { ProductInfo } from 'bxs-tools-ui';
+
+  export default {
+    components: { ProductInfo },
+    methods: {
+      cgProduct(product, options, inst) {
+        if (options.type === 'change' && options.errorMsg) {
+          this.$nextTick(() => {
+            this.$toast(options.errorMsg);
+          });
+        }
+      },
+      openCrmPersonPopup() {
+        // 打开人员信息修改浮层（含 CRM 导入功能）
+      },
+      validate() {
+        this.$refs.productInfo
+          .validate()
+          .then(valid => {
+            // 校验通过
+          })
+          .catch(err => {
+            console.log(err);
+          });
       }
-    },
-    openCrmPersonPopup() {
-      // 打开人员信息修改浮层（含 CRM 导入功能）
-    },
-    validate() {
-      this.$refs.productInfo
-        .validate()
-        .then(valid => {
-          // 校验通过
-        })
-        .catch(err => {
-          console.log(err);
-        });
     }
-  }
-};
+  };
 </script>
 ```
 
@@ -73,75 +74,71 @@ export default {
 
 ### Attributes
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `input-data` | 必传，计划书初始化数据 | Object | `{}` |
-| `group-key` | 必传，产品组的 key | Number / String | `null` |
-| `product-key` | 必传，产品的 key | Number / String | `null` |
-| `verify-data` | 可选，计划书限制条件；不传则不执行产品逻辑处理函数 | Object | `{}` |
-| `show-recommend-value` | 可选，是否展示保额/保费推荐值 | Boolean | `true` |
-| `params` | 可选，其他参数，见 Params 对象 | Object | `{}` |
-
+| 参数                   | 说明                                               | 类型            | 默认值 |
+| ---------------------- | -------------------------------------------------- | --------------- | ------ |
+| `input-data`           | 必传，计划书初始化数据                             | Object          | `{}`   |
+| `group-key`            | 必传，产品组的 key                                 | Number / String | `null` |
+| `product-key`          | 必传，产品的 key                                   | Number / String | `null` |
+| `verify-data`          | 可选，计划书限制条件；不传则不执行产品逻辑处理函数 | Object          | `{}`   |
+| `show-recommend-value` | 可选，是否展示保额/保费推荐值                      | Boolean         | `true` |
+| `params`               | 可选，其他参数，见 Params 对象                     | Object          | `{}`   |
 
 #### Params 对象
 
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| `planbookId` | 计划书 ID，用于产品联动逻辑 | Number |
-| `publicPbUuid` | 公开计划书 uuid，传入后使用 public 接口重算 | String |
-| `allowCustomResult` | 是否显示「自定义保费/保额」开关 | Boolean |
-| `insuranceSaleStatus` | 险种停售状态映射：`{ [insuranceKey]: number }`；值为 `2` 时展示「停」标签 | Object |
-
+| 参数                  | 说明                                                                      | 类型    |
+| --------------------- | ------------------------------------------------------------------------- | ------- |
+| `planbookId`          | 计划书 ID，用于产品联动逻辑                                               | Number  |
+| `publicPbUuid`        | 公开计划书 uuid，传入后使用 public 接口重算                               | String  |
+| `allowCustomResult`   | 是否显示「自定义保费/保额」开关                                           | Boolean |
+| `insuranceSaleStatus` | 险种停售状态映射：`{ [insuranceKey]: number }`；值为 `2` 时展示「停」标签 | Object  |
 
 #### ProductData 对象（inputData 中的产品结构）
 
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| `key` | 必传，产品 ID | Number |
-| `mulInsOrderList` | 必传，险种列表，见 MulInsOrderList 数组 | Array |
-
+| 参数              | 说明                                    | 类型   |
+| ----------------- | --------------------------------------- | ------ |
+| `key`             | 必传，产品 ID                           | Number |
+| `mulInsOrderList` | 必传，险种列表，见 MulInsOrderList 数组 | Array  |
 
 #### MulInsOrderList 数组（单项）
 
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| `key` | 必传，险种 ID | Number |
-| `eleOrderList` | 必传，险种内元素列表，见 EleOrderList 数组 | Array |
-| `code` | 险种 code | String |
-| `isFollowing` | 是否去除与上一险种之间的间距 | Boolean |
-
+| 参数           | 说明                                       | 类型    |
+| -------------- | ------------------------------------------ | ------- |
+| `key`          | 必传，险种 ID                              | Number  |
+| `eleOrderList` | 必传，险种内元素列表，见 EleOrderList 数组 | Array   |
+| `code`         | 险种 code                                  | String  |
+| `isFollowing`  | 是否去除与上一险种之间的间距               | Boolean |
 
 #### EleOrderList 数组（单项）
 
-| 参数 | 说明 | 类型 |
-| --- | --- | --- |
-| `key` | 必传，元素 ID | String |
-| `value` | 必传，元素当前值 | String / Number |
-| `componentName` | 必传，对应渲染组件（`cmCommonTitle` / `cmCommonInput` / `cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect`） | String |
-| `labelName` | 必传，元素名称 | String |
-| `isDisabled` | 必传，是否不可修改 | Boolean |
-| `isHide` | 必传，是否隐藏 | Boolean |
-| `isIgnoreValidate` | 必传，是否忽略校验 | Boolean |
-| `common` | 是否为通用元素 | Boolean |
-| `opts` | 选项列表（`cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect` 适用） | Array |
-| `rules` | 校验规则，基于 [async-validator](https://github.com/yiminghe/async-validator#type) | Array |
-| `restrictions` | 当前元素的限制条件 | Array |
-| `placeholder` | 占位符（`cmCommonInput` 适用） | String |
+| 参数               | 说明                                                                                                              | 类型            |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------- | --------------- |
+| `key`              | 必传，元素 ID                                                                                                     | String          |
+| `value`            | 必传，元素当前值                                                                                                  | String / Number |
+| `componentName`    | 必传，对应渲染组件（`cmCommonTitle` / `cmCommonInput` / `cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect`） | String          |
+| `labelName`        | 必传，元素名称                                                                                                    | String          |
+| `isDisabled`       | 必传，是否不可修改                                                                                                | Boolean         |
+| `isHide`           | 必传，是否隐藏                                                                                                    | Boolean         |
+| `isIgnoreValidate` | 必传，是否忽略校验                                                                                                | Boolean         |
+| `common`           | 是否为通用元素                                                                                                    | Boolean         |
+| `opts`             | 选项列表（`cmCommonRadioBtn` / `cmCommonRadio` / `cmCommonSelect` 适用）                                          | Array           |
+| `rules`            | 校验规则，基于 [async-validator](https://github.com/yiminghe/async-validator#type)                                | Array           |
+| `restrictions`     | 当前元素的限制条件                                                                                                | Array           |
+| `placeholder`      | 占位符（`cmCommonInput` 适用）                                                                                    | String          |
 
 ---
 
 ### Methods
 
-| 方法名 | 说明 | 参数 |
-| --- | --- | --- |
-| `validate` | 表单校验，通过 `$refs` 调用，返回 Promise | — |
+| 方法名     | 说明                                      | 参数 |
+| ---------- | ----------------------------------------- | ---- |
+| `validate` | 表单校验，通过 `$refs` 调用，返回 Promise | —    |
 
 ---
 
 ### Events
 
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
-| `change` | 产品信息改变时触发 | `Function(product, options, inst)`；初始化时 `options` 为 `{ errorMsg }`；字段变更时 `options` 含 `{ type: 'change', insData: 险种, eleData: 元素, errorMsg }`；`inst` 为当前 Vue 实例 |
-| `openCrmPerson` | 点击豁免险标题提示信息时触发，用于打开人员信息修改浮层（含 CRM 导入功能）；不传该监听则豁免险中不显示相关提示 | — |
-| `reCalculate` | 险种存在 `revalidateFlag` 且外部监听了该事件时触发，用于外部执行重算并回调通知组件 | `Function(inputData, params, resolve, reject)` |
+| 事件名          | 说明                                                                                                          | 回调参数                                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `change`        | 产品信息改变时触发                                                                                            | `Function(product, options, inst)`；初始化时 `options` 为 `{ errorMsg }`；字段变更时 `options` 含 `{ type: 'change', insData: 险种, eleData: 元素, errorMsg }`；`inst` 为当前 Vue 实例 |
+| `openCrmPerson` | 点击豁免险标题提示信息时触发，用于打开人员信息修改浮层（含 CRM 导入功能）；不传该监听则豁免险中不显示相关提示 | —                                                                                                                                                                                      |
+| `reCalculate`   | 险种存在 `revalidateFlag` 且外部监听了该事件时触发，用于外部执行重算并回调通知组件                            | `Function(inputData, params, resolve, reject)`                                                                                                                                         |

package/packages/share-sheet/constant.js

@@ -1,7 +1,4 @@
-import Jax from '@bxs/jax';
-export const { isIos, isAndroid } = Jax.parseUaString();
-
-const oneDayMillisecond = 24 * 3600 * 1000;
+const oneDayMillisecond = 24 * 3600 * 1000
 
 export const EXPIRE_ENUM = [
   { value: 'NEVER', name: '永久有效', millisecond: 100 * 365 * oneDayMillisecond },
@@ -10,7 +7,7 @@ export const EXPIRE_ENUM = [
   { value: '7d', name: '7天有效', millisecond: 7 * oneDayMillisecond },
   { value: '15d', name: '15天有效', millisecond: 15 * oneDayMillisecond },
   { value: '30d', name: '30天有效', millisecond: 30 * oneDayMillisecond }
-];
+]
 
 export const ACTION_ENUM = [
   {
@@ -35,10 +32,8 @@ export const ACTION_ENUM = [
   },
   {
     action: 'system_share',
-    actionName: isIos ? '隐藏分享来源' : '复制链接',
-    actionIcon: isIos
-      ? 'https://media.winbaoxian.com/assets-uploader/base_ss_share_widget_wechat%402x-1774342740104.png'
-      : 'https://media.winbaoxian.com/assets-uploader/base_ss_share_widget_system_share%402x-1774344871114.png'
+    actionName: '系统分享',
+    actionIcon: 'https://media.winbaoxian.com/assets-uploader/base_ss_share_widget_system_share%402x-1774344871114.png'
   },
   {
     action: 'generatePoster',
@@ -110,6 +105,6 @@ export const ACTION_ENUM = [
     actionName: '反馈',
     actionIcon: 'https://media.winbaoxian.com/assets-uploader/base_ss_common_widget_feedback%402x(1)-1774409691136.png'
   }
-];
+]
 
-export const SHARE_ENUM = ['wechat_friends', 'wechat_timeline', 'qq_friends', 'shareMiniProgram', 'system_share'];
+export const SHARE_ENUM = ['wechat_friends', 'wechat_timeline', 'qq_friends', 'shareMiniProgram', 'system_share']

package/packages/share-sheet/demo/index.vue

@@ -20,17 +20,17 @@
   </div>
 </template>
 <script lang="ts">
-import vconsole from 'vconsole';
-import { Toast, Button } from 'vant';
-import ShareSheet from '../index.vue';
-new vconsole();
+import vconsole from 'vconsole'
+import { Toast, Button } from 'vant'
+import ShareSheet from '../index.vue'
+new vconsole()
 
 const shareInfo = () => ({
   title: '分享面板', // 分享标题、type=2时表示视频标题
   content: '分享内容的详细描述', // 分享内容的详细描述、type=2时表示视频描述
   imgUrl: 'https://img.winbaoxian.com/static/app-zx-rule-pdf/allrule/20250325182134792.png',
   shareUrl: location.href // 要分享的链接(一般为当前页面)、type=2时表示视频 url
-});
+})
 export default {
   components: {
     [Button.name]: Button,
@@ -61,24 +61,24 @@ export default {
         {
           action: 'wechat_timeline',
           ...shareInfo()
-        },
+        }
         // {
         //   action: 'qq_friends',
         //   ...shareInfo()
         // },
-        {
-          action: 'shareMiniProgram',
-          webPageUrl: 'https://www.winbaoxian.com/', // 兼容低版本的网页链接
-          userName: 'gh_db166d39960f', // 小程序原始id
-          path: '/pages/result/index?uuid=e21d73a0c20d4900a765237a4907a82b&theme=theme_pbhzczdlw&t=1', // 小程序页面路径
-          title: '买保险优选服务', // 小程序消息title
-          description: '小程序消息描述信息', // 小程序消息desc
-          imageUrl: 'https://img.winbaoxian.com/static/app-zx-rule-pdf/allrule/20250325182134792.png' // 小程序消息封面图片，小于128k
-        },
-        {
-          action: 'system_share',
-          ...shareInfo()
-        }
+        // {
+        //   action: 'shareMiniProgram',
+        //   webPageUrl: 'https://www.winbaoxian.com/', // 兼容低版本的网页链接
+        //   userName: 'gh_db166d39960f', // 小程序原始id
+        //   path: '/pages/result/index?uuid=e21d73a0c20d4900a765237a4907a82b&theme=theme_pbhzczdlw&t=1', // 小程序页面路径
+        //   title: '买保险优选服务', // 小程序消息title
+        //   description: '小程序消息描述信息', // 小程序消息desc
+        //   imageUrl: 'https://img.winbaoxian.com/static/app-zx-rule-pdf/allrule/20250325182134792.png' // 小程序消息封面图片，小于128k
+        // },
+        // {
+        //   action: 'system_share',
+        //   ...shareInfo()
+        // }
       ],
       featureActions: [
         {
@@ -113,19 +113,19 @@ export default {
           action: 'h5_feedback'
         }
       ]
-    };
+    }
   },
   created() {},
   methods: {
     onExpire(o) {
-      console.log(o);
+      console.log(o)
     },
     onAction(item) {
       if (item.customActionHandler) {
-        Toast('自定义行为');
+        Toast('自定义行为')
       }
-      console.log(item);
+      console.log(item)
     }
   }
-};
+}
 </script>

package/packages/share-sheet/handler.js

@@ -1,24 +1,24 @@
-import { cloneDeep } from 'lodash';
-import { EXPIRE_ENUM, SHARE_ENUM } from './constant';
+import { cloneDeep } from 'lodash'
+import { EXPIRE_ENUM, SHARE_ENUM } from './constant'
 
 export function getExpireTimestamp(value) {
-  const expireItem = EXPIRE_ENUM.filter(e => !['NEVER'].includes(e.value)).find(e => e.value === value);
-  const expireTimestamp = expireItem ? new Date().getTime() + expireItem.millisecond : null;
-  return expireTimestamp;
+  const expireItem = EXPIRE_ENUM.filter(e => !['NEVER'].includes(e.value)).find(e => e.value === value)
+  const expireTimestamp = expireItem ? new Date().getTime() + expireItem.millisecond : null
+  return expireTimestamp
 }
 
 export function shareHandler(item, expireValue) {
-  const shareItem = SHARE_ENUM.find(a => a === item.action);
-  const newItem = cloneDeep(item);
+  const shareItem = SHARE_ENUM.find(a => a === item.action)
+  const newItem = cloneDeep(item)
   if (expireValue) {
-    newItem.expireTimestamp = getExpireTimestamp(expireValue);
+    newItem.expireTimestamp = getExpireTimestamp(expireValue)
   }
   if (newItem.expireTimestamp && newItem.shareUrl) {
-    newItem.shareUrl = newItem.shareUrl + (newItem.shareUrl.includes('?') ? '&' : '?') + 'wy_expire=' + newItem.expireTimestamp;
+    newItem.shareUrl = newItem.shareUrl + (newItem.shareUrl.includes('?') ? '&' : '?') + 'wy_expire=' + newItem.expireTimestamp
   }
   if (shareItem) {
     if (newItem.customActionHandler) {
-      newItem.customActionHandler(newItem);
+      newItem.customActionHandler(newItem)
     } else {
       if (newItem.action === 'shareMiniProgram') {
         // https://docs.winbaoxian.cn/lib-app-webview-bridge1/#/api?id=%e8%b7%b3%e8%bd%ac-%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f-gotonativeview-shareminiprogram
@@ -33,7 +33,7 @@ export function shareHandler(item, expireValue) {
               description: newItem.description, // 小程序消息desc
               imageUrl: newItem.imageUrl // 小程序消息封面图片，小于128k
             }
-          });
+          })
         }
       } else {
         // https://docs.winbaoxian.cn/#/api?id=%e5%88%86%e4%ba%ab%e5%8a%9f%e8%83%bd-app_share
@@ -47,13 +47,13 @@ export function shareHandler(item, expireValue) {
             introduction: newItem.introduction, // 分享弹框的头部文案
             shareChannel: [newItem.action], // qq_friends wechat_timeline wechat_friends system_share(保险师6.6.0开始支持);
             type: newItem.type // 【3.11.0 支持】type=2代表分享的是视频、type=2时, 所需参数有: title、content、shareUrl、imgUrl【优先级低于小程序分享】
-          });
+          })
         }
       }
     }
   }
   if (!shareItem && !newItem.customActionHandler) {
-    console.error('未定义分享行为：', newItem.action);
+    console.error('未定义分享行为：', newItem.action)
   }
-  return newItem;
+  return newItem
 }

package/packages/share-sheet/index.less

@@ -0,0 +1,201 @@
+@import (reference) 'variables.less';
+
+.bxt-share-sheet {
+  color: #333;
+  background-color: transparent;
+
+  & .bxt-share-container {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  & .bxt-share-image {
+    padding: 30px 40px;
+
+    & img {
+      width: 100%;
+    }
+  }
+
+  & .bxt-share-content {
+    background: white;
+  }
+
+  & .bxt-expire {
+    padding: 15px 15px 15px 21px;
+
+    & .bxt-title {
+      display: flex;
+
+      & .bxt-tx {
+        font-size: 14px;
+        font-weight: bold;
+        font-weight: 500;
+        line-height: 17px;
+      }
+
+      & .bxt-description {
+        margin-left: 18px;
+        font-size: 13px;
+        line-height: 16px;
+        color: #666;
+
+        & .van-icon {
+          font-size: 15px;
+          color: #b5b5b5;
+          vertical-align: middle;
+        }
+
+        & span {
+          margin-left: 3px;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    & .van-radio-group {
+      margin-top: 6px;
+
+      & .van-radio {
+        flex: 0 0 32%;
+        margin-top: 12px;
+        margin-right: 0;
+
+        & .van-radio__icon {
+          font-size: 15px;
+          line-height: 20px;
+          color: var(--bxt-primary);
+          vertical-align: middle;
+        }
+
+        & .van-radio__label {
+          margin-left: 6px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  & .bxt-explain {
+    font-size: 13px;
+    line-height: 19px;
+    color: #666;
+  }
+
+
+  & .bxt-explain-title {
+    padding: 15px 21px;
+  }
+
+  & .bxt-explain-text {
+    padding: 12px 15px;
+
+    & .bxt-explain-text-content {
+      width: 100%;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  & .bxt-explain-text--copy {
+    padding: 12px 15px;
+
+    & .bxt-explain-text-wrapper {
+      padding: 12px 15px;
+      background: #f5f5f5;
+      border-radius: 6px;
+    }
+  }
+
+  & .bxt-share {
+    & .bxt-share-wrapper {
+      display: flex;
+      justify-content: flex-start;
+      padding: 20px 15px;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      & figure {
+        flex: 0 0 25%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        & .bxt-empty-image {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 50px;
+          height: 50px;
+          background: #f3f7f9;
+          border-radius: 50px;
+          overflow: hidden;
+
+          & img {
+            display: block;
+            width: 100%;
+            margin: 0 auto;
+          }
+        }
+
+        & figcaption {
+          width: 100%;
+          height: 15px;
+          margin-top: 5px;
+          font-size: 12px;
+          line-height: 15px;
+          white-space: nowrap;
+          color: #666;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    & .bxt-share-wrapper.more {
+      & figure {
+        flex: 0 0 23%;
+      }
+    }
+  }
+
+  & .bxt-fooer {
+    .bxt-safe-area-inset-bottom();
+
+    padding: 16px 15px;
+    font-size: 15px;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  & .bxt-bottom-border {
+    position: relative;
+    overflow: hidden;
+  }
+
+  & .bxt-bottom-border::before {
+    position: absolute;
+    bottom: 0;
+    left: 15px;
+    width: 200%;
+    border-bottom: 1px solid #e5e5e5;
+    content: '';
+    transform: scale(0.5);
+    transform-origin: left center;
+  }
+}