bxs-tools-ui 3.2.0 → 3.3.0

package/src/components/common/common-popup.vue

@@ -36,6 +36,8 @@
 </template>
 
 <script>
+import './common-popup.less'
+
 export default {
   name: 'CommonPopup',
   props: {
@@ -59,115 +61,29 @@ export default {
   computed: {
     visible: {
       get() {
-        return this.value;
+        return this.value
       },
       set(v) {
-        this.$emit('input', v);
+        this.$emit('input', v)
       }
     },
     styleHeight() {
-      const { height } = this;
-      return height ? (typeof height === 'number' ? `${height}px` : height) : '79.8%';
+      const { height } = this
+      return height ? (typeof height === 'number' ? `${height}px` : height) : '79.8%'
     }
   },
   methods: {
     cancel() {
-      this.visible = false;
-      this.$emit('cancel');
-      this.$emit('click-overlay');
+      this.visible = false
+      this.$emit('cancel')
+      this.$emit('click-overlay')
     },
     confirm() {
       if (this.confirmDisabled) {
-        return;
-      }
-      this.$emit('confirm');
-    }
-  }
-};
-</script>
-
-<style lang="css">
-@import 'base.css';
-@import 'apply';
-@import 'color.css';
-
-.bxt_common_popup {
-  display: flex;
-  flex-direction: column;
-
-  & .van-popup__close-icon {
-    position: absolute;
-    font-size: 22px;
-  }
-
-  & .bxt_common_popup_title {
-    padding: 11px 16px;
-    font-size: 16px;
-    color: var(--color-text-primary);
-    line-height: 24px;
-    font-weight: bold;
-    font-weight: 500;
-    text-align: center;
-
-    & > span {
-      @apply --noWrap;
-
-      width: 100%;
-      padding: 0 2em;
-      white-space: nowrap;
-      box-sizing: border-box;
-      vertical-align: middle;
-    }
-  }
-
-  & .bxt_common_popup_main {
-    position: relative;
-    flex: 1;
-    overflow: auto;
-    min-height: 0;
-    background: var(--color-bg-primary);
-  }
-
-  & .bxt_common_popup_footer {
-    @apply --safe-area-inset-bottom;
-
-    font-size: 14px;
-    line-height: 1.2;
-    text-align: center;
-    border-top: 1px solid var(--color-line-split);
-    background: var(--color-bg-minor);
-
-    & .bxt_common_popup_footer_wrapper {
-      display: flex;
-      padding: 7px 15px;
-
-      & > span {
-        flex: 1;
-        display: inline;
-        line-height: 100%;
-        padding: 10px 16px;
-        color: var(--color-text-primary);
-        background: white;
-        border: 1px solid var(--color-text-assist);
-        border-radius: 6px;
-      }
-
-      & > span:not(:last-child) {
-        margin-right: 9px;
-      }
-
-      & > span.primary {
-        color: white;
-        background: var(--color-primary);
-        border-color: var(--color-primary);
-      }
-
-      & > span.disabled {
-        color: white;
-        background: var(--color-text-patch);
-        border-color: var(--color-text-patch);
+        return
       }
+      this.$emit('confirm')
     }
   }
 }
-</style>
+</script>

package/src/components/common/common-radio.less

@@ -0,0 +1,75 @@
+.bxt_common_field_radio {
+  padding-top: 11px;
+  padding-bottom: 11px;
+
+  & .van-field__control--right {
+    & .bxt_common_form_radio.disabled {
+      & .bxt_common_form_radio_item {
+        padding-right: 0;
+      }
+    }
+  }
+
+  & .bxt_common_form_radio {
+    margin-right: -8px;
+    margin-bottom: -8px;
+    font-size: 13px;
+
+    & .bxt_common_form_radio_item {
+      display: inline-block;
+      min-width: 60px;
+      margin-bottom: 6px;
+      margin-right: 8px;
+      padding: 6px 9px;
+      text-align: center;
+      line-height: 13px;
+      font-weight: normal;
+      color: var(--bxt-text-patch);
+      border: 1px solid var(--bxt-bg-primary);
+      border-radius: 30px;
+      background: var(--bxt-bg-primary);
+      box-sizing: border-box;
+    }
+
+    & .bxt_common_form_radio_item.active {
+      font-weight: bold;
+      font-weight: 500;
+      border-color: var(--bxt-primary);
+      color: var(--bxt-primary);
+      background: rgba(2, 92, 234, 0.1);
+    }
+
+    & .bxt_common_form_radio_item.disabled {
+      color: var(--bxt-text-patch);
+    }
+
+    & .van-radio-group {
+      & .van-radio {
+        & .van-radio__icon {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  & .bxt_common_form_radio.disabled {
+    & .bxt_common_form_radio_item {
+      padding-right: 0;
+      padding-left: 0;
+      color: var(--bxt-text-assist);
+      border-color: transparent;
+    }
+
+    & .bxt_common_form_radio_item.active {
+      border-color: transparent;
+      color: var(--bxt-text-assist);
+      background: 0;
+    }
+  }
+}
+
+.bxt_common_field_radio.bxt_border {
+  & .bxt_common_form_radio {
+    margin-bottom: 0;
+  }
+}

package/src/components/common/common-radio.vue

@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import './common-radio.less'
+
 export default {
   name: 'CommonRadio',
   props: {
@@ -53,123 +55,43 @@ export default {
   computed: {
     cValue: {
       get() {
-        return this.value;
+        return this.value
       },
       set(v) {
-        this.$emit('input', v);
+        this.$emit('input', v)
       }
     },
     convertOptions() {
-      const { $attrs, options, value } = this;
+      const { $attrs, options, value } = this
       return (options || [])
         .map(o => ({
           value: [o.value, o.val].find(v => v !== undefined),
           name: o.name || o.desc
         }))
-        .filter(o => o.value === value || !$attrs.disabled);
+        .filter(o => o.value === value || !$attrs.disabled)
     },
     listeners() {
       // van-field 的 v-model，会将绑定的值自动转换为 string 类型
       // 所以不取 van-field 的 input 事件
-      const listeners = {};
+      const listeners = {}
       if (this.$listeners) {
         for (const k in this.$listeners) {
           if (k !== 'input') {
-            listeners[k] = this.$listeners[k];
+            listeners[k] = this.$listeners[k]
           }
         }
       }
-      return listeners;
+      return listeners
     }
   },
   methods: {
     onClickItem(option) {
-      const { $attrs } = this;
+      const { $attrs } = this
       if ($attrs.disabled || option.isDisabled) {
-        return;
-      }
-      this.$emit('input', option.value);
-    }
-  }
-};
-</script>
-
-<style lang="css">
-@import 'color.css';
-
-.bxt_common_field_radio {
-  padding-top: 11px;
-  padding-bottom: 11px;
-
-  & .van-field__control--right {
-    & .bxt_common_form_radio.disabled {
-      & .bxt_common_form_radio_item {
-        padding-right: 0;
+        return
       }
-    }
-  }
-
-  & .bxt_common_form_radio {
-    margin-right: -8px;
-    margin-bottom: -8px;
-    font-size: 13px;
-
-    & .bxt_common_form_radio_item {
-      display: inline-block;
-      min-width: 60px;
-      margin-bottom: 6px;
-      margin-right: 8px;
-      padding: 6px 9px;
-      text-align: center;
-      line-height: 13px;
-      font-weight: normal;
-      color: var(--color-text-patch);
-      border: 1px solid var(--color-bg-primary);
-      border-radius: 30px;
-      background: var(--color-bg-primary);
-      box-sizing: border-box;
-    }
-
-    & .bxt_common_form_radio_item.active {
-      font-weight: bold;
-      font-weight: 500;
-      border-color: var(--color-primary);
-      color: var(--color-primary);
-      background: rgba(2, 92, 234, 0.1);
-    }
-
-    & .bxt_common_form_radio_item.disabled {
-      color: var(--color-text-patch);
-    }
-
-    & .van-radio-group {
-      & .van-radio {
-        & .van-radio__icon {
-          font-size: 16px;
-        }
-      }
-    }
-  }
-
-  & .bxt_common_form_radio.disabled {
-    & .bxt_common_form_radio_item {
-      padding-right: 0;
-      padding-left: 0;
-      color: var(--color-text-assist);
-      border-color: transparent;
-    }
-
-    & .bxt_common_form_radio_item.active {
-      border-color: transparent;
-      color: var(--color-text-assist);
-      background: 0;
+      this.$emit('input', option.value)
     }
   }
 }
-
-.bxt_common_field_radio.bxt_border {
-  & .bxt_common_form_radio {
-    margin-bottom: 0;
-  }
-}
-</style>
+</script>

package/src/components/common/common-select.less

@@ -0,0 +1,13 @@
+.bxt_common_form_select {
+  font-size: 13px;
+
+  & .van-field::after {
+    display: block;
+  }
+}
+
+.bxt_common_form_select.with_note {
+  & .van-cell::after {
+    display: none;
+  }
+}

package/src/components/common/common-select.vue

@@ -21,7 +21,8 @@
 </template>
 
 <script>
-import { Toast } from 'vant';
+import { Toast } from 'vant'
+import './common-select.less'
 
 function initPickerConfig() {
   return {
@@ -29,7 +30,7 @@ function initPickerConfig() {
     title: '',
     columns: [],
     element: null
-  };
+  }
 }
 
 export default {
@@ -54,18 +55,18 @@ export default {
   data() {
     return {
       pickerConfig: initPickerConfig()
-    };
+    }
   },
   computed: {
     convertOptions() {
       return (this.options || []).map(o => ({
         value: [o.value, o.val].find(v => v !== undefined),
         name: o.name || o.desc
-      }));
+      }))
     },
     valueDesc() {
-      const option = this.convertOptions.find(o => o.value === this.value);
-      return option ? option.name : '';
+      const option = this.convertOptions.find(o => o.value === this.value)
+      return option ? option.name : ''
     }
   },
   watch: {
@@ -74,11 +75,11 @@ export default {
       deep: true,
       handler(list) {
         if (this.autoSelectFirstOption && list && list.length) {
-          const option = list.find(o => o.value == this.value);
-          const _value = list[0].value;
+          const option = list.find(o => o.value == this.value)
+          const _value = list[0].value
           if (!option && _value) {
-            this.$emit('input', _value);
-            this.$emit('change', _value);
+            this.$emit('input', _value)
+            this.$emit('change', _value)
           }
         }
       }
@@ -86,47 +87,29 @@ export default {
   },
   methods: {
     openPicker() {
-      const { $attrs, value, convertOptions } = this;
-      const { disabled, disabledMessage, placeholder } = $attrs;
+      const { $attrs, value, convertOptions } = this
+      const { disabled, disabledMessage, placeholder } = $attrs
       if (disabled) {
         if (disabledMessage) {
-          Toast(disabledMessage);
+          Toast(disabledMessage)
         }
-        return;
+        return
       }
       this.pickerConfig = {
         visible: true,
         title: placeholder,
         defaultIndex: convertOptions.findIndex(o => o.value == value),
         columns: convertOptions
-      };
+      }
     },
     onConfirmPicker(item) {
-      this.$emit('input', item.value);
-      this.$emit('change', item.value);
-      this.onCancelPicker();
+      this.$emit('input', item.value)
+      this.$emit('change', item.value)
+      this.onCancelPicker()
     },
     onCancelPicker() {
-      this.pickerConfig = initPickerConfig();
+      this.pickerConfig = initPickerConfig()
     }
   }
-};
-</script>
-
-<style lang="css">
-@import 'color.css';
-
-.bxt_common_form_select {
-  font-size: 13px;
-
-  & .van-field::after {
-    display: block;
-  }
-}
-
-.bxt_common_form_select.with_note {
-  & .van-cell::after {
-    display: none;
-  }
 }
-</style>
+</script>

package/src/components/common/common-title.less

@@ -0,0 +1,115 @@
+.bxt-item-title-wrapper {
+  width: 100%;
+}
+
+.bxt-item-title {
+  position: relative;
+  text-align: left;
+
+  &::before {
+    position: absolute;
+    left: -15px;
+    top: 9px;
+    display: block;
+    width: 4px;
+    height: 15px;
+    content: '';
+    background: var(--bxt-primary);
+  }
+
+  & .van-checkbox__icon--checked .van-icon {
+    background: var(--bxt-primary);
+    border-color: var(--bxt-primary);
+  }
+
+  & .bxt-item-title-label {
+    display: flex;
+    padding: 5px 0;
+    line-height: normal;
+    font-size: 17px;
+    font-weight: bold;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    & .bxt-item-title-label-item {
+      flex: 0 0 auto;
+    }
+
+    & .bxt-title-code {
+      margin-right: 5px;
+      padding: 0 2px;
+      border-radius: 0.25rem;
+      color: #ff703e;
+      border: 1px solid #ff703e;
+      font-size: 12px;
+      transform: scale(0.8334);
+      transform-origin: left center;
+      vertical-align: middle;
+    }
+
+    & .bxt-item-title-label-name {
+      flex: 1;
+
+      & span {
+        display: inline-block;
+        vertical-align: top;
+        white-space: normal;
+
+        &.bxt-title-content--disabled {
+          color: var(--bxt-text-assist);
+        }
+
+        &.bxt-title-persion-modify {
+          margin-left: 12px;
+          color: var(--bxt-primary);
+          font-weight: normal;
+          font-size: 14px;
+          vertical-align: middle;
+
+          & i.iconfont {
+            font-size: 12px;
+          }
+        }
+
+        &.bxt-title-huomian-tag {
+          margin-left: 5px;
+          color: #f90;
+          font-size: 14px;
+          line-height: normal;
+          vertical-align: middle;
+        }
+
+        &.bxt-title-status-tag {
+          margin-left: 5px;
+          padding: 0 4px;
+          color: #fff;
+          border: 1px solid rgb(158, 158, 158);
+          background-color: rgb(158, 158, 158);
+          border-radius: 2px;
+          font-size: 12px;
+          font-weight: normal;
+          line-height: normal;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+
+.bxt-item-label-note {
+  margin-bottom: 20px;
+  text-align: left;
+  color: #ccc;
+}
+
+.bxt-title-huomian-tips {
+  padding-bottom: 12px;
+  color: var(--bxt-text-minor);
+  font-size: 13px;
+  text-align: left;
+
+  & em {
+    font-style: normal;
+    color: var(--bxt-primary);
+  }
+}

package/src/components/common/common-title.vue

@@ -36,88 +36,88 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { Component, Model, Prop, Watch } from 'vue-property-decorator';
-import { convertEleOrderListToObj } from 'packages/bxs-utils/index';
-import './common-title.css';
+import Vue from 'vue'
+import { Component, Model, Prop, Watch } from 'vue-property-decorator'
+import { convertEleOrderListToObj } from 'packages/bxs-utils/index'
+import './common-title.less'
 
 @Component({
   name: 'BxtTitleItem'
 })
 export default class BxtTitleItem extends Vue {
-  currentValue: boolean = false;
+  currentValue: boolean = false
   @Model('input', {})
-  value!: boolean;
+  value!: boolean
 
   @Prop({
     default: () => ({})
   })
-  personData!: any;
+  personData!: any
 
   @Prop({
     default: false
   })
-  isShowCrmPerson!: boolean;
+  isShowCrmPerson!: boolean
 
   @Prop({
     default: ''
   })
-  label!: string;
+  label!: string
 
   @Prop({
     default: ''
   })
-  code!: string;
+  code!: string
 
   @Prop({
     default: ''
   })
-  huomianTag!: string;
+  huomianTag!: string
 
   @Prop({
     default: ''
   })
-  statusTag!: string;
+  statusTag!: string
 
   @Prop({
     default: ''
   })
-  huomianTips!: string;
+  huomianTips!: string
 
   @Prop({
     default: null
   })
-  disabled!: boolean;
+  disabled!: boolean
 
   @Prop({
     default: ''
   })
-  dataStatId!: string;
+  dataStatId!: string
 
   @Watch('value', {
     immediate: true,
     deep: true
   })
   watchValue(val: boolean) {
-    this.currentValue = val;
+    this.currentValue = val
   }
 
   get isShowCrmModifyButton() {
-    const { value, personData, isShowCrmPerson } = this;
-    const personInfo = convertEleOrderListToObj(personData);
-    return isShowCrmPerson && value && (personData.key === 'insuredInfo' || !personInfo.applicantAndInsuredSame);
+    const { value, personData, isShowCrmPerson } = this
+    const personInfo = convertEleOrderListToObj(personData)
+    return isShowCrmPerson && value && (personData.key === 'insuredInfo' || !personInfo.applicantAndInsuredSame)
   }
 
   created() {
-    this.currentValue = this.value;
+    this.currentValue = this.value
   }
   onchange() {
     if (this.disabled) {
-      return;
+      return
     }
-    this.currentValue = !this.currentValue;
-    this.$emit('input', this.currentValue);
-    this.$emit('change', this.currentValue);
+    this.currentValue = !this.currentValue
+    this.$emit('input', this.currentValue)
+    this.$emit('change', this.currentValue)
   }
 }
 </script>