bxs-tools-ui 3.2.0 → 3.3.0

package/packages/add-and-take/readme.md

@@ -64,55 +64,55 @@ export default {
 </template>
 
 <script>
-import { AddAndTake } from 'bxs-tools-ui';
-
-export default {
-  components: { AddAndTake },
-  data() {
-    return {
-      takePopupConfig: {
-        visible: true,
-        title: '弹层标题',
-        type: 'reduceBaof',
-        submoduleName: 'Table',
-        scene: 0,
-        groupKey: 'allMainInsData',
-        productKey: 1800,
-        insuranceKey: 17588,
-        resultUuid: null,
-        inputData: null,
-        insuredAge: 30,
-        accountData: null,
-        accountInsuranceId: null,
-        reduceBaofData: null,
-        reduceBaofData2: null,
-        reduceBaofInsuranceId: 17588,
-        interestData: {
-          bonus: 'low',
-          rate: null,
-          takeType: 'account',
-          customRate: 0.047
+  import { AddAndTake } from 'bxs-tools-ui';
+
+  export default {
+    components: { AddAndTake },
+    data() {
+      return {
+        takePopupConfig: {
+          visible: true,
+          title: '弹层标题',
+          type: 'reduceBaof',
+          submoduleName: 'Table',
+          scene: 0,
+          groupKey: 'allMainInsData',
+          productKey: 1800,
+          insuranceKey: 17588,
+          resultUuid: null,
+          inputData: null,
+          insuredAge: 30,
+          accountData: null,
+          accountInsuranceId: null,
+          reduceBaofData: null,
+          reduceBaofData2: null,
+          reduceBaofInsuranceId: 17588,
+          interestData: {
+            bonus: 'low',
+            rate: null,
+            takeType: 'account',
+            customRate: 0.047
+          }
         }
-      }
-    };
-  },
-  methods: {
-    addAndTakeConfirm(data) {
-      const { type, accountData, accountInsuranceId, reduceBaofData, reduceBaofData2, reduceBaofInsuranceId, interestData } = data;
-      console.log(data);
+      };
     },
-    closeAddAndTake() {
-      const { $refs, takePopupConfig } = this;
-      if (!takePopupConfig.visible) {
-        const refAddAndTake = $refs.AddAndTake;
-        if (refAddAndTake && refAddAndTake.subName === 'Form') {
-          refAddAndTake.goToTable();
-          takePopupConfig.visible = true;
+    methods: {
+      addAndTakeConfirm(data) {
+        const { type, accountData, accountInsuranceId, reduceBaofData, reduceBaofData2, reduceBaofInsuranceId, interestData } = data;
+        console.log(data);
+      },
+      closeAddAndTake() {
+        const { $refs, takePopupConfig } = this;
+        if (!takePopupConfig.visible) {
+          const refAddAndTake = $refs.AddAndTake;
+          if (refAddAndTake && refAddAndTake.subName === 'Form') {
+            refAddAndTake.goToTable();
+            takePopupConfig.visible = true;
+          }
         }
       }
     }
-  }
-};
+  };
 </script>
 ```
 
@@ -122,28 +122,27 @@ export default {
 
 #### 根级 props
 
-| 参数 | 说明 | 类型 | 默认值 | 备注 |
-| --- | --- | --- | --- | --- |
-| `type` | 可选，追加领取的类型 | String | `addAndTake` | `addAndTake` 追加领取 / `add` 追加 / `take` 领取 / `reduceBaof` 减保领取 |
-| `groupKey` | 必传，产品组的 key | Number / String | — | — |
-| `productKey` | 必传，产品的 key | Number / String | — | — |
-| `insuredAge` | 必传，被保人年龄 | Number | — | — |
-| `scene` | 可选，所在场景 | Number | `0` | `0` 投保页 / `1` 结果页 / `2` 计划书对比 / `3` 利益对比 / `4` 保司投保页 / `5` 险种对比（利益对比2024） |
-| `submoduleName` | 可选，当前展示的子模块（`.sync`） | String | `Table` | `Table` 利益表格 / `Form` 追加领取表单 |
-| `resultUuid` | 可选，计划书结果页的 uuid | String | — | 传入后可不传 `inputData` |
-| `inputData` | 可选，计划书投保页数据结构 | Object | — | 不传 `resultUuid` 时需传入；见 InputData 对象 |
-| `periodNum` | 可选，险种交费期间 | Number | `0` | — |
-| `accountData` | 可选，追加领取的数据 | Object | — | 见 AccountData 对象 |
-| `accountInsuranceId` | 可选，追加领取险种的 key | Number | — | — |
-| `reduceBaofData` | 可选，减保领取的数据 | Object | — | 见 ReduceBaofData 对象 |
-| `reduceBaofData2` | 可选，双减保领取的数据 | Object | — | 见 ReduceBaofData 对象 |
-| `reduceBaofInsuranceId` | 可选，减保领取险种的 key | Number | — | — |
-| `interestData` | 可选，利益数据 | Object | — | 见 InterestData 对象 |
-| `footer` | 可选，是否显示底部按钮 | Boolean | `true` | — |
+| 参数                    | 说明                              | 类型            | 默认值       | 备注                                                                                                     |
+| ----------------------- | --------------------------------- | --------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
+| `type`                  | 可选，追加领取的类型              | String          | `addAndTake` | `addAndTake` 追加领取 / `add` 追加 / `take` 领取 / `reduceBaof` 减保领取                                 |
+| `groupKey`              | 必传，产品组的 key                | Number / String | —            | —                                                                                                        |
+| `productKey`            | 必传，产品的 key                  | Number / String | —            | —                                                                                                        |
+| `insuredAge`            | 必传，被保人年龄                  | Number          | —            | —                                                                                                        |
+| `scene`                 | 可选，所在场景                    | Number          | `0`          | `0` 投保页 / `1` 结果页 / `2` 计划书对比 / `3` 利益对比 / `4` 保司投保页 / `5` 险种对比（利益对比 2024） |
+| `submoduleName`         | 可选，当前展示的子模块（`.sync`） | String          | `Table`      | `Table` 利益表格 / `Form` 追加领取表单                                                                   |
+| `resultUuid`            | 可选，计划书结果页的 uuid         | String          | —            | 传入后可不传 `inputData`                                                                                 |
+| `inputData`             | 可选，计划书投保页数据结构        | Object          | —            | 不传 `resultUuid` 时需传入；见 InputData 对象                                                            |
+| `periodNum`             | 可选，险种交费期间                | Number          | `0`          | —                                                                                                        |
+| `accountData`           | 可选，追加领取的数据              | Object          | —            | 见 AccountData 对象                                                                                      |
+| `accountInsuranceId`    | 可选，追加领取险种的 key          | Number          | —            | —                                                                                                        |
+| `reduceBaofData`        | 可选，减保领取的数据              | Object          | —            | 见 ReduceBaofData 对象                                                                                   |
+| `reduceBaofData2`       | 可选，双减保领取的数据            | Object          | —            | 见 ReduceBaofData 对象                                                                                   |
+| `reduceBaofInsuranceId` | 可选，减保领取险种的 key          | Number          | —            | —                                                                                                        |
+| `interestData`          | 可选，利益数据                    | Object          | —            | 见 InterestData 对象                                                                                     |
+| `footer`                | 可选，是否显示底部按钮            | Boolean         | `true`       | —                                                                                                        |
 
 > `accountData` / `accountInsuranceId` 对应追加领取，`reduceBaofData` / `reduceBaofInsuranceId` 对应减保领取。产品下同时存在两者时，需全部传入。
 
-
 #### InputData 对象
 
 ```json
@@ -184,7 +183,6 @@ export default {
 }
 ```
 
-
 #### AccountData 对象
 
 ```json
@@ -194,15 +192,11 @@ export default {
   "addAndTakeData": [
     {
       "key": "add",
-      "adjustData": [
-        [1, 6, 1]
-      ]
+      "adjustData": [[1, 6, 1]]
     },
     {
       "key": "take",
-      "adjustData": [
-        [3, 3, 2, ""]
-      ]
+      "adjustData": [[3, 3, 2, ""]]
     }
   ]
 }
@@ -211,7 +205,6 @@ export default {
 > `accountPart`：`addAndTake` 追加领取 / `add` 追加 / `take` 领取 / `reduceBaof` 减额领取
 > `adjustData` 行格式：`[开始年度, 结束年度, 金额]`（追加）；`[开始年度, 结束年度, 金额, 用途]`（领取）
 
-
 #### ReduceBaofData 对象
 
 ```json
@@ -220,52 +213,48 @@ export default {
   "addAndTakeData": [
     {
       "key": "take",
-      "adjustData": [
-        [3, 3, 2, ""]
-      ]
+      "adjustData": [[3, 3, 2, ""]]
     }
   ]
 }
 ```
 
-
 #### InterestData 对象
 
-| 参数 | 说明 | 类型 | 备注 |
-| --- | --- | --- | --- |
-| `takeType` | 领取方式 | String | — |
-| `bonus` | 分红值 | String | — |
-| `rate` | 账户利率值 | Number | — |
-| `customRate` | 自定义利率 | Number | — |
+| 参数            | 说明           | 类型   | 备注                                |
+| --------------- | -------------- | ------ | ----------------------------------- |
+| `takeType`      | 领取方式       | String | —                                   |
+| `bonus`         | 分红值         | String | —                                   |
+| `rate`          | 账户利率值     | Number | —                                   |
+| `customRate`    | 自定义利率     | Number | —                                   |
 | `yearBonusRate` | 现金分红实现率 | Number | 仅 `scene` 为 `3`（利益对比）时有效 |
-| `endBonusRate` | 终了分红实现率 | Number | 仅 `scene` 为 `3`（利益对比）时有效 |
+| `endBonusRate`  | 终了分红实现率 | Number | 仅 `scene` 为 `3`（利益对比）时有效 |
 
 ---
 
 ### Methods
 
-| 方法名 | 说明 | 参数 |
-| --- | --- | --- |
-| `goToTable` | 从 Form 子模块返回 Table 子模块 | — |
-| `confirm` | 自动触发 Table / Form 的确定事件；当前为 Table 时返回追加领取数据（Promise） | — |
+| 方法名      | 说明                                                                         | 参数 |
+| ----------- | ---------------------------------------------------------------------------- | ---- |
+| `goToTable` | 从 Form 子模块返回 Table 子模块                                              | —    |
+| `confirm`   | 自动触发 Table / Form 的确定事件；当前为 Table 时返回追加领取数据（Promise） | —    |
 
 ---
 
 ### Events
 
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
+| 事件名    | 说明                                                            | 回调参数                                          |
+| --------- | --------------------------------------------------------------- | ------------------------------------------------- |
 | `confirm` | 确定事件；`footer` 为 `true` 时，Table 子模块底部确定按钮的回调 | `Function(data, 模块实例)`，data 见 Response 对象 |
 
-
 #### Response 对象
 
-| 参数 | 说明 | 类型 | 备注 |
-| --- | --- | --- | --- |
-| `type` | 追加领取的数据类型 | String | `addAndTake` / `add` / `take` / `reduceBaof` |
-| `accountData` | 追加领取的数据 | Object | 见 AccountData 对象 |
-| `accountInsuranceId` | 追加领取险种的 key | Number | — |
-| `reduceBaofData` | 减保领取的数据 | Object | 见 ReduceBaofData 对象 |
-| `reduceBaofData2` | 双减保领取的数据 | Object | 见 ReduceBaofData 对象 |
-| `reduceBaofInsuranceId` | 减保领取险种的 key | Number | — |
-| `interestData` | 利益数据 | Object | 见 InterestData 对象 |
+| 参数                    | 说明               | 类型   | 备注                                         |
+| ----------------------- | ------------------ | ------ | -------------------------------------------- |
+| `type`                  | 追加领取的数据类型 | String | `addAndTake` / `add` / `take` / `reduceBaof` |
+| `accountData`           | 追加领取的数据     | Object | 见 AccountData 对象                          |
+| `accountInsuranceId`    | 追加领取险种的 key | Number | —                                            |
+| `reduceBaofData`        | 减保领取的数据     | Object | 见 ReduceBaofData 对象                       |
+| `reduceBaofData2`       | 双减保领取的数据   | Object | 见 ReduceBaofData 对象                       |
+| `reduceBaofInsuranceId` | 减保领取险种的 key | Number | —                                            |
+| `interestData`          | 利益数据           | Object | 见 InterestData 对象                         |

package/packages/adjust-baoe/demo/index.vue

@@ -59,13 +59,13 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import QS from 'qs';
-import { PLANBOOK_API_HOSTNAME } from '@src/js/variables.js';
-import { Component } from 'vue-property-decorator';
-import { initPageData, setPageDataBaseOnResult } from 'packages/planbook-input/helper.js';
-import CommonPopup from '@src/components/common/common-popup.vue';
-import AdjustBaoe from '../index.vue';
+import Vue from 'vue'
+import QS from 'qs'
+import { getPlanbookInitData } from '../../../src/api/planbook.js'
+import { Component } from 'vue-property-decorator'
+import { initPageData } from 'packages/planbook-input/helper.js'
+import CommonPopup from '../../../src/components/common/common-popup.vue'
+import AdjustBaoe from '../index.vue'
 
 @Component({
   components: {
@@ -75,68 +75,58 @@ import AdjustBaoe from '../index.vue';
 })
 export default class AdjustBaoeDemo extends Vue {
   get inputData() {
-    return this.planbookData && this.planbookData.initData && this.planbookData.initData.inputData;
+    return this.planbookData && this.planbookData.initData && this.planbookData.initData.inputData
   }
   get groupData() {
-    return this.inputData && this.inputData.productGroupList[0];
+    return this.inputData && this.inputData.productGroupList[0]
   }
   get productData() {
-    return this.groupData && this.groupData.prodOrderList[0];
+    return this.groupData && this.groupData.prodOrderList[0]
   }
 
-  URL_PARAM: any = this.getUrlParam();
-  tab = 1;
-  submoduleName1 = 'Table';
-  submoduleName2 = 'Table';
-  isShowAdjustBaoe = false;
-  planbookData: any = null;
+  URL_PARAM: any = this.getUrlParam()
+  tab = 1
+  submoduleName1 = 'Table'
+  submoduleName2 = 'Table'
+  isShowAdjustBaoe = false
+  planbookData: any = null
 
   created() {
-    this.getPlanbookData();
+    this.getPlanbookData()
   }
   getUrlParam() {
-    return QS.parse(`${location.href.split('?')[1]}`) || {};
+    return QS.parse(`${location.href.split('?')[1]}`) || {}
   }
   getPlanbookData() {
-    fetch(
-      `${PLANBOOK_API_HOSTNAME}/planBook/V2/getInitData?${QS.stringify({
-        insuranceTypeId: this.URL_PARAM.planbookId * 1 || 3933
-      })}`,
-      {
-        credentials: 'include'
-      }
-    )
-      .then(response => response.json())
-      .then(async ({ success, data }: any) => {
-        if (!success || !data) {
-          return;
-        }
-        await initPageData(data);
-        setPageDataBaseOnResult(data);
-        this.planbookData = data;
-        document.title = `DEMO：${this.planbookData.title}`;
+    getPlanbookInitData({
+      insuranceTypeId: this.URL_PARAM.planbookId * 1 || 3933
+    })
+      .then(async (data: any) => {
+        await initPageData(data)
+        this.planbookData = data
+        document.title = `DEMO：${this.planbookData.title}`
       })
       .catch(error => {
-        console.log(error);
-      });
+        console.log(error)
+      })
   }
   onClickPopupConfirm(data) {
-    this.productData.adjustBaoeData = data;
-    this.isShowAdjustBaoe = false;
-    console.log(data);
-    this.$toast('调整保额成功');
+    this.productData.adjustBaoeData = data
+    this.isShowAdjustBaoe = false
+    console.log(data)
+    this.$toast('调整保额成功')
   }
   onClickNormalConfirm() {
-    const { productData } = this;
-    const refAdjustBaoe: any = this.$refs.AdjustBaoe2;
+    const { productData } = this
+    const refAdjustBaoe: any = this.$refs.AdjustBaoe2
     refAdjustBaoe
       .confirm()
       .then(data => {
-        productData.adjustBaoeData = data;
-        console.log(data);
-        this.$toast('调整保额成功');
+        productData.adjustBaoeData = data
+        console.log(data)
+        this.$toast('调整保额成功')
       })
-      .catch(() => {});
+      .catch(() => {})
   }
 }
 </script>

package/packages/adjust-baoe/index.less

@@ -0,0 +1,125 @@
+@import (reference) 'variables.less';
+@import 'color.less';
+
+.bxt-adjust-baoe {
+  font-size: 14px;
+  padding: 9px;
+  background: var(--bxt-bg-primary);
+  text-align: left;
+
+  &.bxt-adjust-baoe--footer {
+    .bxt-safe-area-inset-bottom();
+
+    padding-bottom: 64px;
+  }
+
+  & .bxt-ade-table {
+    padding: 15px;
+    background: #fff;
+    border-radius: 6px;
+
+    & .bxt-ade-table-content {
+      margin-top: 6px;
+      width: 100%;
+      color: var(--bxt-text-primary);
+      text-align: center;
+
+      & tr {
+        & td {
+          position: relative;
+          color: var(--bxt-text-patch);
+          text-align: center;
+          padding: 10px 8px 8px;
+
+          & em {
+            font-style: normal;
+          }
+
+          & em.active {
+            color: var(--bxt-primary);
+          }
+        }
+
+        &:nth-child(2n + 1) {
+          & td {
+            background: var(--bxt-bg-minor);
+          }
+        }
+      }
+    }
+  }
+
+  & .bxt-ade-form {
+    padding-bottom: 9px;
+    background: white;
+    border-radius: 6px;
+    overflow: hidden;
+
+    & .bxt-ade-form-items {
+      & .bxt-ade-field-head {
+        padding: 5px 16px;
+        background-color: #f8f8f8;
+        text-align: center;
+      }
+
+      & .bxt-ade-field-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & span {
+          flex: 0 0 3em;
+        }
+
+        & span:not(:first-child) {
+          flex: 0 0 6em;
+        }
+      }
+    }
+  }
+
+  & .bxt-ade-tips {
+    line-height: 145%;
+    font-size: 12px;
+    color: var(--bxt-text-patch);
+  }
+
+  & .bxt-ade-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 7px 15px;
+    box-sizing: border-box;
+    border-top: 1px solid var(--bxt-line-split);
+    background: var(--bxt-bg-minor);
+
+    .bxt-safe-area-inset-bottom();
+
+    & .bxt-ade-footer-wrapper {
+      display: flex;
+
+      & span {
+        flex: 4;
+        margin-right: 9px;
+        padding: 9px 0;
+        border: 1px solid var(--bxt-line-split);
+        border-radius: 6px;
+        background: white;
+        text-align: center;
+
+        &:first-child {
+          flex: 2;
+        }
+
+        &:last-child {
+          flex: 3;
+          margin-right: 0;
+          color: white;
+          border: 1px solid var(--bxt-primary);
+          background: var(--bxt-primary);
+        }
+      }
+    }
+  }
+}