bxs-tools-ui 1.2.0 → 1.2.2

package/packages/components/form-item/age-birthday-item.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="bxt-item-age-birthday" @click="openPicker()">
-    <span
-      class="bxt-item-button bxt-item-button__birthday"
-      :data-stat-id="`${personData.key}_birthday`"
-      @click.stop="openPicker('birthday')"
-    >
-      <em :class="[birthdayData.value ? '' : 'disabled']">{{
-        birthdayData.value ? birthdayData.value : '生日(选填)'
-      }}</em>
-      <i class="iconfont icon-arrow_down"></i>
-    </span>
-    <span class="bxt-item-button bxt-item-button__age">
-      <em :class="[valueDesc ? '' : 'disabled']">{{ valueDesc || eleData.placeholder }}</em>
-      <i class="iconfont icon-arrow_down"></i>
-    </span>
+    <p class="bxt-item-age-birthday-wrapper">
+      <span
+        class="bxt-item__birthday"
+        :data-stat-id="`${personData.key}_birthday`"
+        @click.stop="openPicker('birthday')"
+      >
+        <em v-if="birthdayData.value">
+          {{ birthdayData.value }}
+        </em>
+        <em v-else>
+          <i>生日</i>
+          <i>(选填)</i>
+        </em>
+      </span>
+      <span class="bxt-item__age">
+        <em :class="[valueDesc ? '' : 'disabled']">
+          {{ valueDesc || eleData.placeholder }}
+        </em>
+      </span>
+    </p>
   </div>
 </template>
 <script lang="ts">
@@ -119,38 +125,61 @@ export default class BxtAgeBirthdayItem extends Vue {
 }
 </script>
 <style lang="postcss">
-@import 'base.css';
+@import 'color.css';
 
 .bxt-item-age-birthday {
-  & .bxt-item-button {
+  & .bxt-item-age-birthday-wrapper {
     position: relative;
     display: inline-block;
-    min-width: 60px;
-    height: 25px;
+    height: 27px;
     line-height: 25px;
-    padding: 0 24px 0 9px;
     text-align: center;
     border: 1px solid var(--color-text-disabled);
     border-radius: 100px;
     font-size: 13px;
     box-sizing: border-box;
 
-    &.bxt-item-button__age {
-      margin-left: 10px;
-    }
+    & .bxt-item__birthday,
+    & .bxt-item__age {
+      position: relative;
+      display: inline-block;
+      width: 100px;
+      text-align: center;
+      font-size: 13px;
+      box-sizing: border-box;
+
+      & em {
+        & i {
+          font-style: normal;
+        }
 
-    & em.disabled {
-      color: var(--color-text-disabled);
+        & i:nth-child(2) {
+          margin-left: 5px;
+          font-size: 12px;
+          color: var(--color-text-disabled);
+          transform: scale(0.8334);
+        }
+      }
+
+      & em.disabled {
+        color: var(--color-text-disabled);
+      }
     }
 
-    & i {
-      position: absolute;
-      top: 50%;
-      right: 9px;
-      transform: translateY(-50%) scale(0.8);
-      font-size: 12px;
-      color: inherit;
+    & .bxt-item__age {
+      width: 80px;
     }
   }
+
+  & .bxt-item-age-birthday-wrapper::after {
+    position: absolute;
+    left: 100px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 60%;
+    content: ' ';
+    border-left: 1px solid var(--color-text-disabled);
+  }
 }
 </style>

package/packages/components/form-item/select-item.vue

@@ -92,12 +92,16 @@ export default class BxtSelectItem extends Vue {
 }
 </script>
 <style lang="postcss">
+@import 'color.css';
+
 .bxt-item-select {
   & .bx-input {
     & .bx-input-value {
       & .bx-input-body {
         & .bx-input-control {
           text-align: right;
+          color: var(--color-text-primary) !important;
+          -webkit-text-fill-color: var(--color-text-primary) !important;
         }
       }
     }

package/packages/components/form-item/title-item.css

@@ -23,7 +23,7 @@
 		width: 18rem;
 		padding: 15px 0;
 		line-height: normal;
-		font-size: 15px;
+		font-size: 17px;
 		font-weight: bold;
 		vertical-align: middle;
 
@@ -32,11 +32,14 @@
 		}
 
 		& .bxt-title-code {
-			margin-right: 10px;
-			padding: 1px 4px;
+			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;
 		}
 
 		& .bxt-titile-content--disabled {

package/packages/product-info/index.css

@@ -35,6 +35,17 @@
 					& input {
 						text-align: right;
 					}
+
+					& .bx-input-icon {
+						& .bx-icon,
+						& .icon-edit2 {
+							color: var(--color-text-minor) !important;
+						}
+					}
+
+					& .bxt-titile-content {
+						font-size: 15px;
+					}
 				}
 			}
 
@@ -77,7 +88,9 @@
 						border-radius: 4px;
 						color: #ff703e;
 						border: 1px solid #ff703e;
-						font-size: 14px;
+						font-size: 12px;
+						transform: scale(0.8334);
+						transform-origin: left center;
 						vertical-align: middle;
 					}
 
@@ -103,6 +116,43 @@
 					}
 				}
 			}
+
+			& .bxt-ins-unit-tips {
+				display: inline-block;
+				position: absolute;
+				top: 60%;
+				right: 55px;
+				margin-top: 11px;
+				line-height: normal;
+
+				& em {
+					position: absolute;
+					top: -3px;
+					left: 50%;
+					display: inline-block;
+					width: 6px;
+					height: 6px;
+					background: #666;
+					transform: translateX(-50%) rotate(45deg);
+					content: ' ';
+				}
+
+				& span {
+					position: relative;
+					display: inline-block;
+					padding: 1px 12px;
+					line-height: normal;
+					background: #666;
+					color: #fff;
+					font-size: 12px;
+					border-radius: 4px;
+				}
+			}
+		}
+
+		& .bx-form-item__unit {
+			position: relative;
+			z-index: 1;
 		}
 
 		& .bxt-form-item-label-note {

package/packages/product-info/index.vue

@@ -31,6 +31,9 @@
           <template v-if="['cmCommonInput'].includes(ele.componentName)">
             <bxs-form-item
               v-show="isInsuranceChecked(ins) && !ele.isHide"
+              :class="{
+                'bx-form-item__unit': activeInputKey === ins.key + ele.key && numberUnitStr
+              }"
               :key="ins.key + ele.key"
               :prop="ele.key"
               :label="ele.labelName"
@@ -42,6 +45,7 @@
                 autosize
                 type="text"
                 border
+                autocomplete="off"
                 :placeholder="ele.placeholder"
                 v-model.number="ele.value"
                 :disabled="!!ele.isDisabled"
@@ -51,9 +55,21 @@
                   prefix: 'icon',
                   name: 'edit2 iconfont'
                 }"
+                @focus="
+                  activeInputKey = ins.key + ele.key;
+                  numberUnitStr = getAmountUnit(ele);
+                "
+                @blur="activeInputKey = ''"
+                @input="numberUnitStr = getAmountUnit(ele)"
                 @change="change({ insData: ins, eleData: ele, type: 'change' })"
                 @click-icon="onClickIcon(`id_${ins.key}_${ele.key}`)"
               />
+              <div v-if="activeInputKey === ins.key + ele.key && numberUnitStr" class="bxt-ins-unit-tips">
+                <em />
+                <span>
+                  {{ numberUnitStr }}
+                </span>
+              </div>
             </bxs-form-item>
           </template>
           <template v-if="['cmCommonRadioBtn'].includes(ele.componentName)">
@@ -142,7 +158,7 @@
                 :title="ele.label"
                 :options="ele.opts.filter(o => !o.isHide && !o.isDisabled && !o.isInvalid)"
                 :disabled="isDisabled(ele)"
-                right-icon="arrow-right"
+                :right-icon="isDisabled(ele) ? '' : 'arrow-right'"
                 @change="change({ insData: ins, eleData: ele, type: 'change' })"
               />
             </bxs-form-item>
@@ -178,6 +194,9 @@ import 'bxs-ui-vue/esm/index.css';
   }
 })
 export default class BxtProductInfo extends Vue {
+  activeInputKey = '';
+  numberUnitStr = '';
+
   @Prop({
     default: () => ({})
   })
@@ -344,6 +363,23 @@ export default class BxtProductInfo extends Vue {
     }
     return '当前投保人不能加该险种，<em>修改</em>投保人信息后选择';
   }
+  getAmountUnit(ele) {
+    let digits = isNaN(ele.value * 1) ? 0 : Math.floor(Math.log10(ele.value) + 1);
+    switch (digits) {
+      case 5:
+        return '万';
+      case 6:
+        return '十万';
+      case 7:
+        return '百万';
+      case 8:
+        return '千万';
+      case 9:
+        return '亿';
+      default:
+        return '';
+    }
+  }
   async validate() {
     let insKeys: any = this.filterInsuranceList.map(ins => ins.key);
     let validateInfo: any = [];