@10yun/cv-mobile-ui 0.5.61 → 0.5.63

package/ui-fireui/components/u-button/u-button.vue

@@ -1,34 +1,78 @@
 <template>
-  <button
-    class="up-btn"
+  <view
+    class="up-button__wrap"
     :class="[
-      plain ? 'up-' + type + '-outline' : 'up-btn-' + (type || 'primary'),
-      getDisabledClass(disabled, type, plain),
+      (width === '100%' || !width || width === true) && (!btnSize || btnSize === true) ? 'up-btn__flex-1' : '',
       getShapeClass(shape, plain),
-      getShadowClass(type, shadow, plain)
+      !disabled ? 'up-button__hover' : ''
     ]"
-    :hover-class="getHoverClass(disabled, type, plain)"
-    :style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx', margin: margin }"
-    :loading="loading"
-    :open-type="openType"
-    @getuserinfo="bindgetuserinfo"
-    :disabled="disabled"
-    @tap="handleClick"
+    :style="{ width: getWidth, height: getHeight, margin: margin }"
   >
-    <slot></slot>
-  </button>
+    <button
+      class="up-btn"
+      :class="[
+        plain ? 'up-' + type + '-outline' : 'up-btn-' + (type || 'primary'),
+        getDisabledClass(disabled, type, plain),
+        getShapeClass(shape, plain),
+        bold ? 'up-text-bold' : '',
+        link ? 'up-btn__link' : ''
+      ]"
+      :style="{
+        width: getWidth,
+        height: getHeight,
+        lineHeight: getHeight,
+        fontSize: getSize + 'rpx',
+        background: getBgColor(type, plain),
+        color: getColor(type, plain),
+        boxShadow: shadow ? getShadow(type, plain) : 'none'
+      }"
+      :loading="loading"
+      :form-type="formType"
+      :open-type="openType"
+      :app-parameter="appParameter"
+      @getuserinfo="bindgetuserinfo"
+      @getphonenumber="bindgetphonenumber"
+      @contact="bindcontact"
+      @error="binderror"
+      @chooseavatar="bindchooseavatar"
+      @launchapp="bindlaunchapp"
+      :disabled="disabled"
+      @tap="handleClick"
+    >
+      <slot></slot>
+    </button>
+    <view
+      class="up-button__border"
+      :class="[getShapeClass(shape, plain), getDisabledClass(disabled, type, plain)]"
+      :style="{ borderColor: getBgColor(type) }"
+      v-if="!link && plain"
+    ></view>
+  </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiButton',
+  name: 'tuiButton',
+  emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'chooseavatar', 'launchapp'],
+  // #ifdef MP-WEIXIN
+  behaviors: ['wx://form-field-button'],
+  // #endif
+  // #ifdef MP-BAIDU
+  behaviors: ['swan://form-field'],
+  // #endif
+  // #ifdef MP-QQ
+  behaviors: ['qq://form-field'],
+  // #endif
+  // #ifdef H5
+  behaviors: ['uni://form-field'],
+  // #endif
   props: {
-    //样式类型 primary, white, danger, warning, green,blue, gray，black,white2,
+    //样式类型 primary, white, danger, warning, green,blue, gray，black,brown,gray-primary,gray-danger,gray-warning,gray-green
     type: {
       type: String,
       default: 'primary'
     },
-    //是否加阴影
+    //是否加阴影 移除
     shadow: {
       type: Boolean,
       default: false
@@ -38,15 +82,24 @@ export default {
       type: String,
       default: '100%'
     },
-    //高度 rpx
+    // 高度 rpx
     height: {
       type: String,
-      default: '96rpx'
+      default: ''
     },
-    //字体大小 rpx
+    //medium 184*40 / small 120 40/ mini 58*32
+    btnSize: {
+      type: String,
+      default: ''
+    },
+    //字体大小，单位rpx
     size: {
-      type: Number,
-      default: 28
+      type: [Number, String],
+      default: 0
+    },
+    bold: {
+      type: Boolean,
+      default: false
     },
     margin: {
       type: String,
@@ -61,6 +114,11 @@ export default {
       type: Boolean,
       default: false
     },
+    //link样式，去掉边框，结合plain一起使用
+    link: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -74,18 +132,136 @@ export default {
       type: Boolean,
       default: false
     },
+    formType: {
+      type: String,
+      default: ''
+    },
     openType: {
       type: String,
       default: ''
     },
+    appParameter: {
+      type: String,
+      default: ''
+    },
     index: {
       type: [Number, String],
       default: 0
+    },
+    //是否需要阻止重复点击【默认200ms】
+    preventClick: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getWidth() {
+      //medium 184*40 / small 120 40/ mini 58*32
+      let width = this.width;
+      if (this.btnSize && this.btnSize !== true) {
+        width =
+          {
+            medium: '368rpx',
+            small: '240rpx',
+            mini: '116rpx'
+          }[this.btnSize] || this.width;
+      }
+      return width;
+    },
+    getHeight() {
+      //medium 184*40 / small 120 40/ mini 58*32
+      let height = this.height || (uni && uni.$tui && uni.$tui.tuiButton.height) || '96rpx';
+      if (this.btnSize && this.btnSize !== true) {
+        height =
+          {
+            medium: '80rpx',
+            small: '80rpx',
+            mini: '64rpx'
+          }[this.btnSize] || '96rpx';
+      }
+      return height;
+    },
+    getSize() {
+      return this.size || (uni && uni.$tui && uni.$tui.tuiButton.size) || 32;
     }
   },
+  data() {
+    return {
+      time: 0
+    };
+  },
   methods: {
+    hexToRGB(hex) {
+      if (hex.length === 4) {
+        let text = hex.substring(1, 4);
+        hex = '#' + text + text;
+      }
+      let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+      return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+          }
+        : {};
+    },
+    getColorByType(type, isText, plain) {
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = '';
+      const colors = {
+        primary: (global && global.primary) || '#5677fc',
+        white: '#fff',
+        danger: (global && global.danger) || '#EB0909',
+        warning: (global && global.warning) || '#ff7900',
+        green: (global && global.success) || '#07c160',
+        blue: (global && global.blue) || '#007aff',
+        gray: '#bfbfbf',
+        black: '#333333',
+        brown: '#ac9157',
+        'gray-primary': '#f2f2f2',
+        'gray-danger': '#f2f2f2',
+        'gray-warning': '#f2f2f2',
+        'gray-green': '#f2f2f2'
+      };
+      if (isText) {
+        if (type && ~type.indexOf('gray-')) {
+          const tp = type.replace('gray-', '');
+          color = colors[tp];
+        } else if (type === 'white') {
+          color = '#333';
+        } else {
+          if (plain) {
+            color = colors[type];
+          } else {
+            color = '#fff';
+          }
+        }
+      } else {
+        color = colors[type] || colors.primary;
+      }
+      return color;
+    },
+    getShadow(type, plain) {
+      const color = this.getColorByType(type);
+      if (plain || !color) return 'none';
+      const rgb = this.hexToRGB(color);
+      return `0 10rpx 14rpx 0 rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`;
+    },
+    getBgColor(type, plain) {
+      return plain ? 'transparent' : this.getColorByType(type);
+    },
+    getColor(type, plain) {
+      return this.getColorByType(type, true, plain);
+    },
     handleClick() {
-      if (this.disabled) return false;
+      if (this.disabled) return;
+      if (this.preventClick) {
+        if (new Date().getTime() - this.time <= 200) return;
+        this.time = new Date().getTime();
+        setTimeout(() => {
+          this.time = 0;
+        }, 200);
+      }
       this.$emit('click', {
         index: Number(this.index)
       });
@@ -93,16 +269,24 @@ export default {
     bindgetuserinfo({ detail = {} } = {}) {
       this.$emit('getuserinfo', detail);
     },
-    getShadowClass(type, shadow, plain) {
-      let className = '';
-      if (shadow && type != 'white' && !plain) {
-        className = 'up-shadow-' + type;
-      }
-      return className;
+    bindcontact({ detail = {} } = {}) {
+      this.$emit('contact', detail);
+    },
+    bindgetphonenumber({ detail = {} } = {}) {
+      this.$emit('getphonenumber', detail);
+    },
+    binderror({ detail = {} } = {}) {
+      this.$emit('error', detail);
+    },
+    bindchooseavatar({ detail = {} } = {}) {
+      this.$emit('chooseavatar', detail);
+    },
+    bindlaunchapp({ detail = {} } = {}) {
+      this.$emit('launchapp', detail);
     },
     getDisabledClass(disabled, type, plain) {
       let className = '';
-      if (disabled && type != 'white') {
+      if (disabled && type != 'white' && type.indexOf('-') == -1) {
         let classVal = this.disabledGray ? 'up-gray-disabled' : 'up-dark-disabled';
         className = plain ? 'up-dark-disabled-outline' : classVal;
       }
@@ -129,99 +313,47 @@ export default {
 </script>
 
 <style scoped>
-.up-btn-primary {
-  background: #5677fc !important;
-  color: #fff;
-}
-
-.up-shadow-primary {
-  box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
-}
-
-.up-btn-danger {
-  background: #eb0909 !important;
-  color: #fff;
-}
-
-.up-shadow-danger {
-  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
-}
-
-.up-btn-warning {
-  background: #fc872d !important;
-  color: #fff;
-}
-
-.up-shadow-warning {
-  box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
-}
-
-.up-btn-green {
-  background: #4fb49b !important;
-  color: #fff;
-}
-
-.up-shadow-green {
-  box-shadow: 0 10rpx 14rpx 0 rgba(53, 176, 106, 0.2);
-}
-
-.up-btn-blue {
-  background: #007aff !important;
-  color: #fff;
-}
-
-.up-shadow-blue {
-  box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
-}
-
-.up-btn-white {
-  background: #fff !important;
-  color: #333 !important;
-}
-
-.up-btn-gray {
-  background: #bfbfbf !important;
-  color: #fff !important;
-}
-
-.up-btn-black {
-  background: #262871 !important;
-  color: #999999 !important;
-}
-.up-btn-hgray {
-  background: #707070 !important;
-  color: #fff !important;
-}
-.up-shadow-gray {
-  box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
+.up-button__wrap {
+  position: relative;
 }
 
-.up-hover-gray {
-  background: #f7f7f9 !important;
+.up-button__hover:active::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 6rpx;
+  pointer-events: none;
 }
 
-.up-black-hover {
-  background: #555 !important;
-  color: #999999 !important;
-}
-.up-btn-hover {
-  background: #707070 !important;
-  color: #fff !important;
-}
 /* button start*/
 
 .up-btn {
   width: 100%;
   position: relative;
   border: 0 !important;
+  box-sizing: border-box;
   border-radius: 6rpx;
   padding-left: 0;
   padding-right: 0;
   overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .up-btn::after {
-  content: '';
+  border: 0;
+}
+
+.up-btn__flex-1 {
+  flex: 1;
+}
+
+.up-button__border {
   position: absolute;
   width: 200%;
   height: 200%;
@@ -231,18 +363,12 @@ export default {
   left: 0;
   top: 0;
   border-radius: 12rpx;
-  border: 0;
+  border: 1px solid transparent;
+  pointer-events: none;
 }
 
-.up-btn-white::after {
-  border: 1rpx solid #bfbfbf;
-}
-.up-btn-hgray::after {
-  border: 1rpx solid #707070;
-}
-.up-white-hover {
-  background: #e5e5e5 !important;
-  color: #2e2e2e !important;
+.up-text-bold {
+  font-weight: bold;
 }
 
 .up-dark-disabled {
@@ -260,165 +386,42 @@ export default {
   box-shadow: none;
 }
 
-.up-outline-hover {
-  opacity: 0.5;
-}
-
-.up-primary-hover {
-  background: #4a67d6 !important;
-  color: #e5e5e5 !important;
-}
-
-.up-primary-outline::after {
-  border: 1rpx solid #5677fc !important;
-}
-
-.up-primary-outline {
-  color: #5677fc !important;
-  background: transparent;
-}
-
-.up-danger-hover {
-  background: #c80808 !important;
-  color: #e5e5e5 !important;
-}
-
-.up-danger-outline {
-  color: #eb0909 !important;
-  background: transparent;
-}
-.up-hgray-outline {
-  color: #999999 !important;
-  background: transparent;
-}
-.up-hgray-outline::after {
-  border: 1rpx solid #999999 !important;
-}
-
-.up-warning-hover {
-  background: #d67326 !important;
-  color: #e5e5e5 !important;
-}
-
-.up-warning-outline {
-  color: #fc872d !important;
-  background: transparent;
-}
-
-.up-warning-outline::after {
-  border: 1px solid #fc872d !important;
-}
-.up-btn-outline::after {
-  border: 1px solid #fc872d !important;
-}
-.up-green-hover {
-  background: #4fb49b !important;
-  color: #e5e5e5 !important;
-}
-
-.up-green-outline {
-  color: #4fb49b !important;
-  background: transparent;
-}
-
-.up-green-outline::after {
-  border: 1rpx solid #4fb49b !important;
-}
-
-.up-blue-hover {
-  background: #0062cc !important;
-  color: #e5e5e5 !important;
-}
-
-.up-blue-outline {
-  color: #007aff !important;
-  background: transparent;
-}
-
-.up-blue-outline::after {
-  border: 1rpx solid #007aff !important;
-}
-
-/* #ifndef APP-NVUE */
-.up-btn-gradual {
-  background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
-  color: #fff !important;
-}
-
-.up-shadow-gradual {
-  box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
-}
-
-/* #endif */
-
-.up-gray-hover {
-  background: #a3a3a3 !important;
-  color: #898989;
-}
-
-/* #ifndef APP-NVUE */
-.up-gradual-hover {
-  background: linear-gradient(90deg, #d74620, #cd1225) !important;
-  color: #fff !important;
-}
-
-/* #endif */
-
-.up-gray-outline {
-  color: #999 !important;
-  background: transparent !important;
-}
-
-.up-white-outline {
-  color: #fff !important;
-  background: transparent !important;
-}
-
-.up-black-outline {
-  background: transparent !important;
-  color: #999999 !important;
-}
-.up-hgary-outline {
-  background: transparent !important;
-  color: #707070 !important;
-}
-
-.up-gray-outline::after {
-  border: 1rpx solid #ccc !important;
-}
-
-.up-white-outline::after {
-  border: 1px solid #fff !important;
-}
-
-.up-black-outline::after {
-  border: 1px solid #333 !important;
-}
-
 /*圆角 */
 
 .up-fillet {
-  border-radius: 50rpx;
+  border-radius: 220rpx !important;
 }
 
-.up-btn-white.up-fillet::after {
-  border-radius: 98rpx;
+.up-fillet::after {
+  border-radius: 220rpx !important;
+}
+
+.up-outline-fillet {
+  border-radius: 220rpx !important;
 }
 
 .up-outline-fillet::after {
-  border-radius: 98rpx;
+  border-radius: 220rpx !important;
 }
 
 /*平角*/
 .up-rightAngle {
-  border-radius: 0;
+  border-radius: 0 !important;
 }
 
-.up-btn-white.up-rightAngle::after {
-  border-radius: 0;
+.up-rightAngle::after {
+  border-radius: 0 !important;
+}
+
+.up-outline-rightAngle {
+  border-radius: 0 !important;
 }
 
 .up-outline-rightAngle::after {
-  border-radius: 0;
+  border-radius: 0 !important;
+}
+
+.up-btn__link::after {
+  border: 0 !important;
 }
 </style>