bxs-tools-ui 2.0.7 → 3.0.0-1

package/{packages/components/common-popup/index.vue → src/components/common/common-popup.vue}

@@ -2,24 +2,24 @@
   <van-popup
     v-model="visible"
     v-bind="$attrs"
-    class="common_popup"
+    class="bxt_common_popup"
     :style="{
-      height: '79.8%'
+      height: styleHeight
     }"
     v-on="$listeners"
   >
-    <header class="common_popup_title">
+    <header class="bxt_common_popup_title">
       <slot v-if="$slots.title" name="title" />
       <span v-else>
         {{ title }}
       </span>
     </header>
-    <div class="common_popup_main">
+    <div class="bxt_common_popup_main">
       <slot />
     </div>
-    <footer v-if="showFooter" class="common_popup_footer">
+    <footer v-if="showFooter" class="bxt_common_popup_footer">
       <slot v-if="$slots.footer" name="footer" />
-      <div v-else class="common_popup_footer_wrapper">
+      <div v-else class="bxt_common_popup_footer_wrapper">
         <span v-if="showCancel" @click="cancel">取消</span>
         <span
           class="primary"
@@ -37,12 +37,14 @@
 
 <script>
 export default {
+  name: 'CommonPopup',
   props: {
     value: Boolean,
     title: String,
+    height: [Number, String],
     confirmText: {
       type: String,
-      default: '提交'
+      default: '确定'
     },
     confirmDisabled: Boolean,
     showFooter: {
@@ -62,11 +64,16 @@ export default {
       set(v) {
         this.$emit('input', v);
       }
+    },
+    styleHeight() {
+      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');
     },
     confirm() {
@@ -79,17 +86,24 @@ export default {
 };
 </script>
 
-<style>
+<style lang="css">
 @import 'base.css';
+@import 'apply';
 @import 'color.css';
 
-.common_popup {
+.bxt_common_popup {
   display: flex;
   flex-direction: column;
 
-  & .common_popup_title {
+  & .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;
@@ -102,43 +116,44 @@ export default {
       padding: 0 2em;
       white-space: nowrap;
       box-sizing: border-box;
+      vertical-align: middle;
     }
   }
 
-  & .common_popup_main {
+  & .bxt_common_popup_main {
     position: relative;
     flex: 1;
     overflow: auto;
     min-height: 0;
+    background: var(--color-bg-primary);
   }
 
-  & .common_popup_footer {
+  & .bxt_common_popup_footer {
     @apply --safe-area-inset-bottom;
 
-    position: relative;
-    font-size: 16px;
-    line-height: 16px;
-    font-weight: bold;
-    font-weight: 500;
+    font-size: 14px;
+    line-height: 1.2;
     text-align: center;
-    box-shadow: 0 -6px 15px 0 rgba(0, 0, 0, 0.05);
+    border-top: 1px solid var(--color-line-split);
+    background: var(--color-bg-minor);
 
-    & .common_popup_footer_wrapper {
+    & .bxt_common_popup_footer_wrapper {
       display: flex;
-      padding: 8px 16px;
+      padding: 7px 15px;
 
       & > span {
         flex: 1;
         display: inline;
-        padding: 15px 16px;
+        line-height: 100%;
+        padding: 10px 16px;
         color: var(--color-text-primary);
         background: white;
-        border: 1px solid #dcdee0;
+        border: 1px solid var(--color-text-assist);
         border-radius: 6px;
       }
 
       & > span:not(:last-child) {
-        margin-right: 15px;
+        margin-right: 9px;
       }
 
       & > span.primary {
@@ -149,8 +164,8 @@ export default {
 
       & > span.disabled {
         color: white;
-        background: var(--color-text-assist);
-        border-color: var(--color-text-assist);
+        background: var(--color-text-patch);
+        border-color: var(--color-text-patch);
       }
     }
   }

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

@@ -0,0 +1,175 @@
+<template>
+  <van-field :value="value" :class="['bxt_common_field_radio', border ? '' : 'bxt_border']" v-bind="$attrs" autocomplete="off" v-on="listeners">
+    <template #input>
+      <div
+        class="bxt_common_form_radio"
+        :class="{
+          disabled: $attrs.disabled
+        }"
+      >
+        <template v-if="border">
+          <span
+            v-for="option in convertOptions"
+            :key="option.value"
+            class="bxt_common_form_radio_item"
+            :class="{
+              disabled: option.isDisabled,
+              active: option.value === value
+            }"
+            :data-stat-id="dataStatId"
+            @click="onClickItem(option)"
+          >
+            {{ option.name }}
+          </span>
+        </template>
+        <van-radio-group v-else v-model="cValue" direction="horizontal" input-align="right" :disabled="$attrs.disabled">
+          <van-radio v-for="option in convertOptions" :key="option.value" :name="option.value" :disabled="option.isDisabled">
+            {{ option.name }}
+          </van-radio>
+        </van-radio-group>
+      </div>
+    </template>
+  </van-field>
+</template>
+
+<script>
+export default {
+  name: 'CommonRadio',
+  props: {
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    border: Boolean,
+    options: {
+      type: Array,
+      default: () => []
+    },
+    dataStatId: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    cValue: {
+      get() {
+        return this.value;
+      },
+      set(v) {
+        this.$emit('input', v);
+      }
+    },
+    convertOptions() {
+      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);
+    },
+    listeners() {
+      // van-field 的 v-model，会将绑定的值自动转换为 string 类型
+      // 所以不取 van-field 的 input 事件
+      const listeners = {};
+      if (this.$listeners) {
+        for (const k in this.$listeners) {
+          if (k !== 'input') {
+            listeners[k] = this.$listeners[k];
+          }
+        }
+      }
+      return listeners;
+    }
+  },
+  methods: {
+    onClickItem(option) {
+      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;
+      }
+    }
+  }
+
+  & .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;
+    }
+  }
+}
+
+.bxt_common_field_radio.bxt_border {
+  & .bxt_common_form_radio {
+    margin-bottom: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="bxt_common_form_select"
+    :class="{
+      disabled: $attrs.disabled
+    }"
+  >
+    <van-field v-model="valueDesc" v-bind="$attrs" readonly autocomplete="off" v-on="$listeners" :data-stat-id="dataStatId" @click="openPicker" />
+    <van-popup v-model="pickerConfig.visible" round position="bottom" get-container="body">
+      <van-picker
+        :title="pickerConfig.title"
+        :columns="pickerConfig.columns"
+        :default-index="pickerConfig.defaultIndex"
+        value-key="name"
+        show-toolbar
+        @cancel="onCancelPicker"
+        @confirm="onConfirmPicker"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+
+function initPickerConfig() {
+  return {
+    visible: false,
+    title: '',
+    columns: [],
+    element: null
+  };
+}
+
+export default {
+  props: {
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    autoSelectFirstOption: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    dataStatId: {
+      type: String,
+      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 : '';
+    }
+  },
+  watch: {
+    convertOptions: {
+      immediate: true,
+      deep: true,
+      handler(list) {
+        if (this.autoSelectFirstOption && list && list.length) {
+          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);
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    openPicker() {
+      const { $attrs, value, convertOptions } = this;
+      const { disabled, disabledMessage, placeholder } = $attrs;
+      if (disabled) {
+        if (disabledMessage) {
+          Toast(disabledMessage);
+        }
+        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();
+    },
+    onCancelPicker() {
+      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>

package/{packages/components/form-item/title-item.css → src/components/common/common-title.css}

@@ -1,4 +1,8 @@
-@import 'base.css';
+@import 'color.css';
+
+.bxt-item-title-wrapper {
+	width: 100%;
+}
 
 .bxt-item-title {
 	position: relative;
@@ -7,8 +11,7 @@
 	&::before {
 		position: absolute;
 		left: -15px;
-		top: 50%;
-		transform: translateY(-50%);
+		top: 9px;
 		display: block;
 		width: 4px;
 		height: 15px;
@@ -16,9 +19,14 @@
 		background: var(--color-primary);
 	}
 
+	& .van-checkbox__icon--checked .van-icon {
+		background: var(--color-primary);
+		border-color: var(--color-primary);
+	}
+
 	& .bxt-item-title-label {
 		display: flex;
-		padding: 15px 0;
+		padding: 5px 0;
 		line-height: normal;
 		font-size: 17px;
 		font-weight: bold;
@@ -38,7 +46,7 @@
 			font-size: 12px;
 			transform: scale(0.8334);
 			transform-origin: left center;
-			vertical-align: 1px;
+			vertical-align: middle;
 		}
 
 		& .bxt-item-title-label-name {

package/{packages/components/form-item/title-item.vue → src/components/common/common-title.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bxt-item-title-wrapper">
     <div class="bxt-item-title">
       <div class="bxt-item-title-label">
         <div v-if="code" class="bxt-item-title-label-item">
@@ -16,12 +16,7 @@
             }"
             >{{ label }}</span
           >
-          <span
-            v-if="isShowCrmModifyButton"
-            class="bxt-title-persion-modify"
-            :data-stat-id="dataStatId"
-            @click="$emit('modify')"
-          >
+          <span v-if="isShowCrmModifyButton" class="bxt-title-persion-modify" :data-stat-id="dataStatId" @click="$emit('modify')">
             修改
             <i class="iconfont icon-arrows_right"></i>
           </span>
@@ -30,12 +25,7 @@
           </span>
         </div>
         <div v-if="!(currentValue && disabled)" class="bxt-item-title-label-item">
-          <bxs-checkbox
-            class="bxt-item-title-checkbox"
-            :value="currentValue"
-            :disabled="disabled"
-            @click.native="onchange"
-          />
+          <van-checkbox class="bxt-item-title-checkbox" :value="currentValue" :disabled="disabled" @click.native="onchange" />
         </div>
       </div>
     </div>
@@ -45,13 +35,11 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Component, Model, Prop, Watch } from 'vue-property-decorator';
-import { Checkbox } from 'bxs-ui-vue';
 import { convertEleOrderListToObj } from 'packages/bxs-utils/index';
+import './common-title.css';
+
 @Component({
-  name: 'BxtTitleItem',
-  components: {
-    [Checkbox.name]: Checkbox
-  }
+  name: 'BxtTitleItem'
 })
 export default class BxtTitleItem extends Vue {
   currentValue: boolean = false;
@@ -125,6 +113,3 @@ export default class BxtTitleItem extends Vue {
   }
 }
 </script>
-<style lang="postcss">
-@import 'title-item.css';
-</style>

package/src/js/request.js

@@ -13,11 +13,11 @@ const service = axios.create({
 
 let loadingTimer = null;
 const loading = show => {
-  if (window.appBridge && appBridge.showLoading) {
+  if (window.appBridge && window.appBridge.showLoading) {
     if (show) {
-      appBridge.showLoading();
+      window.appBridge.showLoading();
     } else {
-      appBridge.hideLoading();
+      window.appBridge.hideLoading();
     }
   }
 };

package/src/style/apply.css

@@ -0,0 +1,25 @@
+:root {
+	--zIndex: 100;
+	--noWrap: {
+		display: inline-block;
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	--vertical-center: {
+		position: absolute;
+		top: 50%;
+		right: 0;
+		transform: translateY(-50%);
+	}
+	--safe-area-inset-bottom: {
+		&::after {
+			display: block;
+			height: constant(safe-area-inset-bottom);
+			height: env(safe-area-inset-bottom);
+			content: '';
+		}
+	}
+}

package/src/style/base.css

@@ -1,5 +1,3 @@
-@import "./color.css";
-
 * {
 	padding: 0;
 	margin: 0;
@@ -36,29 +34,3 @@ header,
 footer {
 	display: block;
 }
-
-:root {
-	--zIndex: 100;
-	--noWrap: {
-		display: inline-block;
-		width: 100%;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	--vertical-center: {
-		position: absolute;
-		top: 50%;
-		right: 0;
-		transform: translateY(-50%);
-	}
-	--safe-area-inset-bottom: {
-		&::after {
-			display: block;
-			height: constant(safe-area-inset-bottom);
-			height: env(safe-area-inset-bottom);
-			content: '';
-		}
-	}
-}