bxs-tools-ui 3.2.0 → 3.3.0

package/packages/add-and-take/components/interest-items.less

@@ -0,0 +1,87 @@
+.bxt_aat_interest_items {
+  padding-top: 9px;
+  font-size: 13px;
+
+  & input {
+    border: none;
+    vertical-align: middle;
+    background: transparent;
+    appearance: none;
+  }
+
+  & .bxt_aatii_item {
+    display: flex;
+    margin-right: 10px;
+    margin-bottom: 9px;
+    border-radius: 6px;
+
+    & .bxt_aatii_item_left {
+      flex: 0 0 5em;
+      margin-top: 3px;
+      margin-right: 7px;
+      margin-bottom: 12px;
+      color: #999;
+      text-align: right;
+    }
+
+    & .bxt_aatii_item_right {
+      flex: 1;
+
+      & .bxt_aatii_item_right_options {
+        & > span {
+          display: inline-block;
+          width: 42%;
+          margin: 0 9px 9px 0;
+          padding: 3px 6px;
+          text-align: center;
+          border-radius: 50px;
+          background: rgba(0, 0, 0, 0.04);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        & > span.active {
+          color: #0a64fe;
+          font-weight: bold;
+          background: #e6effe;
+        }
+      }
+
+      & .bxt_aatii_item_right_custom {
+        position: relative;
+        margin-bottom: 9px;
+        padding: 12px;
+        background: #f4f8ff;
+        border-radius: 6px;
+
+        & .bxt_aatii_item_right_custom_input {
+          & input {
+            width: 110px;
+            padding: 3px 9px;
+            background: white;
+            margin-right: 6px;
+            border: 1px solid #e6e6e6;
+            border-radius: 50px;
+            vertical-align: middle;
+          }
+
+          & span {
+            vertical-align: middle;
+          }
+        }
+
+        & .bxt_aatii_item_right_custom_tips {
+          & span {
+            display: inline-block;
+            margin-top: 12px;
+            padding: 3px 9px;
+            border-radius: 50px;
+            color: #666;
+            border: 1px solid #d3d3d3;
+            background: #f5f5f5;
+          }
+        }
+      }
+    }
+  }
+}

package/packages/add-and-take/components/interest-items.vue

@@ -46,9 +46,10 @@
 </template>
 
 <script>
-import { get as _get, cloneDeep } from 'lodash';
-import { Toast } from 'vant';
-import { initInterestFormValues } from '../handler';
+import { get as _get, cloneDeep } from 'lodash'
+import { Toast } from 'vant'
+import { initInterestFormValues } from '../handler'
+import './interest-items.less'
 
 export default {
   props: {
@@ -79,58 +80,54 @@ export default {
       cpFormValue: cloneDeep(this.formValue),
       MAX_RATE_VALUE: 6,
       historyRateList: []
-    };
+    }
   },
   computed: {
     isShowBounsRate() {
-      return this.type !== 'reduceBaof' && this.scene === 3;
+      return this.type !== 'reduceBaof' && this.scene === 3
     },
     interestItems() {
-      const { isShowBounsRate, interestInitData, formValue, params, MAX_RATE_VALUE, historyRateList } = this;
+      const { isShowBounsRate, interestInitData, formValue, params, MAX_RATE_VALUE, historyRateList } = this
       if (!interestInitData) {
-        return [];
+        return []
       }
-      const _items = [];
-      const _bonusLength = _get(interestInitData, 'bonus.opts.length');
-      const _bonusRateData = _get(interestInitData, 'bonusRateData');
+      const _items = []
+      const _bonusLength = _get(interestInitData, 'bonus.opts.length')
+      const _bonusRateData = _get(interestInitData, 'bonusRateData')
       if (_bonusLength) {
-        const _bonusOptions = cloneDeep(_get(interestInitData, 'bonus.opts', []) || []);
+        const _bonusOptions = cloneDeep(_get(interestInitData, 'bonus.opts', []) || [])
         const _bonusItem = {
           key: 'bonus',
           stat: 'zjlqbfhqh',
           title: _get(interestInitData, 'bonus.title', ''),
           options: _bonusOptions
-        };
+        }
         if (isShowBounsRate && _bonusRateData) {
-          const _latestBonusRate =
-            _get(_bonusRateData, 'latestYearBonusRate') || _get(_bonusRateData, 'latestEndBonusRate');
-          const _highestBonusRate = Math.max(
-            _get(_bonusRateData, 'highestYearBonusRate') || 0,
-            _get(_bonusRateData, 'highestEndBonusRate') || 0
-          );
+          const _latestBonusRate = _get(_bonusRateData, 'latestYearBonusRate') || _get(_bonusRateData, 'latestEndBonusRate')
+          const _highestBonusRate = Math.max(_get(_bonusRateData, 'highestYearBonusRate') || 0, _get(_bonusRateData, 'highestEndBonusRate') || 0)
           if (_latestBonusRate) {
-            const _customBonusRate = _get(formValue, 'customBonusRate') || _latestBonusRate;
+            const _customBonusRate = _get(formValue, 'customBonusRate') || _latestBonusRate
             _bonusOptions.push({
               value: '_custom',
               description: `红利实现率${_customBonusRate ? ` ${_customBonusRate}%` : ''}`
-            });
-            _bonusItem.maxlength = 3;
-            _bonusItem.placeholder = `0 - ${_highestBonusRate}`;
-            _bonusItem.recommendValue = _latestBonusRate;
-            _bonusItem.maxValue = _highestBonusRate;
-            _bonusItem.tips = `以官网最近红利实现率${_latestBonusRate}%演示`;
+            })
+            _bonusItem.maxlength = 3
+            _bonusItem.placeholder = `0 - ${_highestBonusRate}`
+            _bonusItem.recommendValue = _latestBonusRate
+            _bonusItem.maxValue = _highestBonusRate
+            _bonusItem.tips = `以官网最近红利实现率${_latestBonusRate}%演示`
           }
         }
-        _items.push(_bonusItem);
+        _items.push(_bonusItem)
       }
 
-      const _initFormValues = initInterestFormValues(params, interestInitData);
-      const _rateOptions = cloneDeep(_get(interestInitData, 'rate.opts', []) || []);
-      const _rateLength = _get(interestInitData, 'rate.opts.length');
-      const _customOption3 = _get(_rateOptions, '[3]');
+      const _initFormValues = initInterestFormValues(params, interestInitData)
+      const _rateOptions = cloneDeep(_get(interestInitData, 'rate.opts', []) || [])
+      const _rateLength = _get(interestInitData, 'rate.opts.length')
+      const _customOption3 = _get(_rateOptions, '[3]')
       if (_rateLength) {
-        const _lastHistoryRate = _get(historyRateList, `[${historyRateList.length - 1}].rate`);
-        const _customRate = _get(formValue, 'customRate') || _lastHistoryRate;
+        const _lastHistoryRate = _get(historyRateList, `[${historyRateList.length - 1}].rate`)
+        const _customRate = _get(formValue, 'customRate') || _lastHistoryRate
         const _rateItem = {
           key: 'rate',
           stat: 'zjlqblyqh',
@@ -141,111 +138,101 @@ export default {
           placeholder: `0.00 - ${MAX_RATE_VALUE.toFixed(2)}`,
           tips: _lastHistoryRate ? `以官网最近账户利率${_lastHistoryRate.toFixed(2)}%演示` : '',
           options: _rateOptions
-        };
+        }
 
-        const _isShowcustomRateOption = _get(_initFormValues, 'customRate') && _customOption3;
+        const _isShowcustomRateOption = _get(_initFormValues, 'customRate') && _customOption3
         if (_isShowcustomRateOption) {
-          _customOption3.value = '_custom';
-          _customOption3.description = _customOption3.description.replace(
-            /(\d|\.)+/,
-            !isNaN(Number(_customRate)) ? ` ${_customRate.toFixed(2)}` : ''
-          );
+          _customOption3.value = '_custom'
+          _customOption3.description = _customOption3.description.replace(/(\d|\.)+/, !isNaN(Number(_customRate)) ? ` ${_customRate.toFixed(2)}` : '')
         }
 
-        _items.push(_rateItem);
+        _items.push(_rateItem)
       }
-      return _items;
+      return _items
     }
   },
   methods: {
     onClickOptions(item, option) {
-      const { formValue } = this;
-      const oFormValue = cloneDeep(formValue);
-      formValue[item.key] = option.value;
-      const _recommendValue = _get(item, 'recommendValue');
+      const { formValue } = this
+      const oFormValue = cloneDeep(formValue)
+      formValue[item.key] = option.value
+      const _recommendValue = _get(item, 'recommendValue')
       if (option.value === '_custom') {
         if (item.key === 'bonus') {
           if (!formValue.customBonusRate && _recommendValue) {
-            formValue.customBonusRate = _recommendValue;
+            formValue.customBonusRate = _recommendValue
           }
         }
         if (item.key === 'rate') {
           if (!formValue.customRate && _recommendValue) {
-            formValue.customRate = _recommendValue;
+            formValue.customRate = _recommendValue
           }
         }
       }
-      this.$emit('change', formValue, oFormValue);
+      this.$emit('change', formValue, oFormValue)
     },
     onClickRecommendValue(item) {
-      const { formValue, historyRateList } = this;
-      const _recommendValue = _get(item, 'recommendValue');
+      const { formValue, historyRateList } = this
+      const _recommendValue = _get(item, 'recommendValue')
       if (_recommendValue) {
         if (item.key === 'bonus') {
-          formValue.customBonusRate = _recommendValue;
+          formValue.customBonusRate = _recommendValue
         }
         if (item.key === 'rate') {
-          const _lastHistoryRate = _get(historyRateList, `[${historyRateList.length - 1}].rate`);
-          formValue.customRate = _lastHistoryRate;
+          const _lastHistoryRate = _get(historyRateList, `[${historyRateList.length - 1}].rate`)
+          formValue.customRate = _lastHistoryRate
         }
       }
-      this.$emit('change', formValue);
+      this.$emit('change', formValue)
     },
     onInputItemValue(item) {
-      const { formValue } = this;
-      const _key = item.key === 'bonus' ? 'customBonusRate' : 'customRate';
+      const { formValue } = this
+      const _key = item.key === 'bonus' ? 'customBonusRate' : 'customRate'
       if (formValue[_key]) {
         if (item.key === 'bonus') {
           if (!/^\d{1,3}$/.test(formValue[_key])) {
-            formValue[_key] = null;
+            formValue[_key] = null
           }
         }
         if (item.key === 'rate') {
           if (!/^\d?\.?\d{0,2}$/.test(formValue[_key])) {
-            formValue[_key] = null;
+            formValue[_key] = null
           }
         }
       }
     },
     onChangeItemValue(item) {
-      const { cpFormValue } = this;
-      const _key = item.key === 'bonus' ? 'customBonusRate' : 'customRate';
+      const { cpFormValue } = this
+      const _key = item.key === 'bonus' ? 'customBonusRate' : 'customRate'
       if (item.maxValue && cpFormValue[_key] > item.maxValue) {
-        cpFormValue[_key] = item.maxValue;
+        cpFormValue[_key] = item.maxValue
       }
       return this.validate([item.key])
         .then(() => {
-          this.$emit('change', this.cpFormValue);
+          this.$emit('change', this.cpFormValue)
         })
         .catch(err => {
-          Toast(err);
-        });
+          Toast(err)
+        })
     },
     validate(keys) {
-      const { formValue, interestInitData, interestItems, MAX_RATE_VALUE } = this;
-      const _keys = keys || (interestItems || []).map(e => e.key);
-      const _bonusRateData = _get(interestInitData, 'bonusRateData');
-      const _highestBonusRate = Math.max(
-        _get(_bonusRateData, 'highestYearBonusRate') || 0,
-        _get(_bonusRateData, 'highestEndBonusRate') || 0
-      );
+      const { formValue, interestInitData, interestItems, MAX_RATE_VALUE } = this
+      const _keys = keys || (interestItems || []).map(e => e.key)
+      const _bonusRateData = _get(interestInitData, 'bonusRateData')
+      const _highestBonusRate = Math.max(_get(_bonusRateData, 'highestYearBonusRate') || 0, _get(_bonusRateData, 'highestEndBonusRate') || 0)
       for (const k in _keys) {
-        const _key = _keys[k];
+        const _key = _keys[k]
         if (formValue[_key] === '_custom') {
           if (_key === 'bonus' && formValue.customBonusRate && formValue.customBonusRate > _highestBonusRate) {
-            return Promise.reject(`红利实现率不能大于${_highestBonusRate}%`);
+            return Promise.reject(`红利实现率不能大于${_highestBonusRate}%`)
           }
           if (_key === 'rate' && formValue.customRate && formValue.customRate > MAX_RATE_VALUE) {
-            return Promise.reject(`账户利率不能大于${MAX_RATE_VALUE.toFixed(2)}%`);
+            return Promise.reject(`账户利率不能大于${MAX_RATE_VALUE.toFixed(2)}%`)
           }
         }
       }
-      return Promise.resolve(formValue);
+      return Promise.resolve(formValue)
     }
   }
-};
+}
 </script>
-
-<style>
-@import './interest-items.css';
-</style>

package/packages/add-and-take/components/interest-table.less

@@ -0,0 +1,111 @@
+.bxt_aat_interest_table {
+  position: relative;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    height: calc(59px + env(safe-area-inset-bottom));
+  }
+
+  & table {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 12px;
+    color: var(--bxt-text-primary);
+    text-align: left;
+
+    & tr {
+      & td {
+        padding: 6px 4px;
+        border-top: 1px solid var(--bxt-line-split);
+        border-left: 1px solid var(--bxt-line-split);
+        box-sizing: content-box;
+        white-space: nowrap;
+
+        & .bxt_aatit_purpose,
+        & .bxt_aatit_purpose2 {
+          display: inline-block;
+          margin-left: 2px;
+          padding: 2px 2px;
+          line-height: 100%;
+          color: var(--bxt-primary);
+          border-radius: 2px;
+          background: rgba(10, 100, 254, 0.1);
+          transform: scale(0.8333);
+          transform-origin: left center;
+          white-space: nowrap;
+        }
+      }
+
+      & td:nth-child(1),
+      & td:nth-child(2) {
+        width: 1.8em;
+        color: var(--bxt-text-patch);
+        text-align: center;
+      }
+
+      & td:nth-child(3),
+      & td:nth-child(4) {
+        width: 5.5em;
+      }
+
+      & td:last-child {
+        border-right: 1px solid var(--bxt-line-split);
+      }
+
+      & td.edit {
+        color: var(--bxt-primary);
+        text-decoration: underline;
+      }
+
+      & td.disabled {
+        color: var(--bxt-text-disabled);
+        text-decoration: none;
+      }
+
+      & td.year {
+        position: sticky;
+        left: 0;
+        z-index: 1;
+        will-change: scroll-position;
+        background: white;
+      }
+
+      & td.age {
+        position: sticky;
+        left: calc(2em + 8px);
+        z-index: 1;
+        will-change: scroll-position;
+        background: white;
+      }
+    }
+
+    & tr:first-child {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      will-change: scroll-position;
+
+      & td {
+        font-weight: bold;
+        text-align: center;
+        background-color: #f2f3f5;
+        border: 0;
+        white-space: normal;
+      }
+    }
+
+    & tr:last-child {
+      & td {
+        border-bottom: 1px solid var(--bxt-line-split);
+      }
+    }
+  }
+}

package/packages/add-and-take/components/interest-table.vue

@@ -69,10 +69,10 @@
 </template>
 
 <script>
-import { get as _get, cloneDeep } from 'lodash';
-import { formatNumberToThousand } from 'packages/bxs-utils/planbook/index';
-import { calcColumnsWidth } from '../handler';
-import './interest-table.css';
+import { get as _get, cloneDeep } from 'lodash'
+import { formatNumberToThousand } from 'packages/bxs-utils/planbook/index'
+import { calcColumnsWidth } from '../handler'
+import './interest-table.less'
 
 export default {
   props: {
@@ -92,65 +92,65 @@ export default {
   },
   computed: {
     detailData() {
-      const self = this;
-      const { type, addAndTakeDetailData } = self;
-      const detailKeys = type === 'reduceBaof' ? ['draw_max'] : ['take_max'];
-      const detailData = cloneDeep(addAndTakeDetailData || []).filter(d => !detailKeys.includes(d.key));
+      const self = this
+      const { type, addAndTakeDetailData } = self
+      const detailKeys = type === 'reduceBaof' ? ['draw_max'] : ['take_max']
+      const detailData = cloneDeep(addAndTakeDetailData || []).filter(d => !detailKeys.includes(d.key))
       detailData.forEach(d => {
-        d.values = d.values && d.values.map(v => (v ? Math.round(v) : v));
-      });
-      return detailData;
+        d.values = d.values && d.values.map(v => (v ? Math.round(v) : v))
+      })
+      return detailData
     },
     addAndTakeTable() {
-      const { insuredAge, interestInitData, detailData } = this;
+      const { insuredAge, interestInitData, detailData } = this
       if (!interestInitData || !detailData.length) {
-        return [];
+        return []
       }
 
       const tableHeaderData = {
         year: '年度',
         age: '年龄'
-      };
+      }
       detailData.forEach((d, i) => {
         // 为解决接口返回的数组中key相同的问题
         if (!['add', 'take', 'draw_value', 'draw_value2'].includes(d.key)) {
-          d.uniKey = `${d.key}_${i}`;
+          d.uniKey = `${d.key}_${i}`
         }
-        tableHeaderData[d.uniKey || d.key] = (d.name || '').replace(/([(（](.*)[)）])$/, '<br/>$1');
-      });
+        tableHeaderData[d.uniKey || d.key] = (d.name || '').replace(/([(（](.*)[)）])$/, '<br/>$1')
+      })
 
-      const { startPolicyNo, startIndex, reduceIndex } = interestInitData;
-      const maxlength = detailData.reduce((a, b) => Math.max(a, b.values ? b.values.length : 0), 0);
-      let tableData = [];
+      const { startPolicyNo, startIndex, reduceIndex } = interestInitData
+      const maxlength = detailData.reduce((a, b) => Math.max(a, b.values ? b.values.length : 0), 0)
+      let tableData = []
       for (let i = 0; i < maxlength; i++) {
         const record = {
           year: i + (startPolicyNo || 1), // 年度
           age: insuredAge + (startIndex || 0) + i + 1 // 年龄
-        };
+        }
         detailData.map(item => {
           if (item.values) {
-            record[item.uniKey || item.key] = formatNumberToThousand(item.values[i] || 0);
+            record[item.uniKey || item.key] = formatNumberToThousand(item.values[i] || 0)
           }
           if (item.details) {
             if (item.key === 'draw_value2') {
-              record.purpose2 = item.details[i] || '';
+              record.purpose2 = item.details[i] || ''
             } else {
-              record.purpose = item.details[i] || '';
+              record.purpose = item.details[i] || ''
             }
           }
-        });
-        tableData.push(record);
+        })
+        tableData.push(record)
       }
 
       if (reduceIndex) {
-        tableData = tableData.filter(e => e.year > reduceIndex);
+        tableData = tableData.filter(e => e.year > reduceIndex)
       }
-      tableData.unshift(tableHeaderData);
-      return tableData;
+      tableData.unshift(tableHeaderData)
+      return tableData
     },
     columnWidthObj() {
-      return calcColumnsWidth(this.addAndTakeTable);
+      return calcColumnsWidth(this.addAndTakeTable)
     }
   }
-};
+}
 </script>

package/packages/add-and-take/constant.ts

@@ -14,5 +14,5 @@ export const PURPOSE_OPTIONS = [
   { val: '应急金', desc: '应急金' },
   { val: '旅游金', desc: '旅游金' },
   { val: '投资金', desc: '投资金' },
-  { val: '', desc: '自定义' },
-]
+  { val: '', desc: '自定义' }
+]