@10yun/cv-mobile-ui 0.5.62 → 0.5.64

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

@@ -1,7 +1,15 @@
 <template>
   <view
-    :class="[dot ? 'up-badge-dot' : 'up-badge', 'up-' + type, !dot ? 'up-badge-scale' : '']"
-    :style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin }"
+    :class="[dot ? 'up-badge-dot' : 'up-badge', !dot ? 'up-badge-scale' : '']"
+    :style="{
+      top: top,
+      right: right,
+      position: absolute ? 'absolute' : 'static',
+      transform: getStyle,
+      margin: margin,
+      background: getBackground,
+      color: getColor
+    }"
     @tap="handleClick"
   >
     <slot></slot>
@@ -10,7 +18,8 @@
 
 <script>
 export default {
-  name: 'fuiBadge',
+  name: 'tuiBadge',
+  emits: ['click'],
   props: {
     //primary,warning,green,danger,white，black，gray,white_red
     type: {
@@ -53,6 +62,46 @@ export default {
   computed: {
     getStyle() {
       return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
+    },
+    getBackground() {
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = {
+        primary: (global && global.primary) || '#5677fc',
+        green: (global && global.success) || '#07c160',
+        warning: (global && global.warning) || '#ff7900',
+        danger: (global && global.danger) || '#EB0909',
+        white: '#fff',
+        black: '#000',
+        gray: '#ededed',
+        red: (global && global.pink) || '#f74d54',
+        pink: (global && global.pink) || '#f74d54',
+        white_red: '#fff',
+        white_primary: '#fff',
+        white_green: '#fff',
+        white_warning: '#fff',
+        white_pink: '#fff'
+      }[this.type];
+      return color;
+    },
+    getColor() {
+      const global = uni && uni.$tui && uni.$tui.color;
+      let color = {
+        primary: '#fff',
+        green: '#fff',
+        warning: '#fff',
+        danger: '#fff',
+        white: '#333',
+        black: '#fff',
+        gray: '#999',
+        red: '#fff',
+        pink: (global && global.pink) || '#f74d54',
+        white_red: (global && global.danger) || '#EB0909',
+        white_primary: (global && global.primary) || '#5677fc',
+        white_green: (global && global.success) || '#07c160',
+        white_warning: (global && global.warning) || '#ff7900',
+        white_pink: (global && global.pink) || '#f74d54'
+      }[this.type];
+      return color;
     }
   },
   methods: {
@@ -64,71 +113,6 @@ export default {
 </script>
 
 <style scoped>
-/* color start*/
-
-.up-primary {
-  background-color: #5677fc;
-  color: #fff;
-}
-
-.up-danger {
-  background-color: #ed3f14;
-  color: #fff;
-}
-
-.up-red {
-  background-color: #f74d54;
-  color: #fff;
-}
-
-.up-warning {
-  background-color: #ff7900;
-  color: #fff;
-}
-
-.up-green {
-  background-color: #19be6b;
-  color: #fff;
-}
-
-.up-white {
-  background-color: #fff;
-  color: #333;
-}
-
-.up-white_red {
-  background-color: #fff;
-  color: #f74d54;
-}
-
-.up-white_primary {
-  background-color: #fff;
-  color: #5677fc;
-}
-
-.up-white_green {
-  background-color: #fff;
-  color: #19be6b;
-}
-
-.up-white_warning {
-  background-color: #fff;
-  color: #ff7900;
-}
-
-.up-black {
-  background-color: #000;
-  color: #fff;
-}
-
-.up-gray {
-  background-color: #ededed;
-  color: #999;
-}
-
-/* color end*/
-
-/* badge start*/
 
 .up-badge-dot {
   height: 8px;
@@ -154,5 +138,4 @@ export default {
   transform-origin: center center;
 }
 
-/* badge end*/
 </style>

package/ui-fireui/components/u-bottom-navigation/u-bottom-navigation.vue

@@ -1,23 +1,26 @@
 <template>
   <view @touchmove.stop.prevent="stop">
-    <view class="up-bottom-navigation" :class="{ 'up-navigation-fixed': isFixed, 'up-remove-splitLine': unlined }">
+    <view
+      class="up-bottom-navigation"
+      :style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
+      :class="{ 'up-navigation-fixed': isFixed, 'up-remove-splitLine': unlined }"
+    >
       <view
         class="up-navigation-item"
         :class="{ 'up-item-after_height': splitLineScale, 'up-last-item': index == itemList.length - 1 }"
-        :style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
         v-for="(item, index) in itemList"
         :key="index"
       >
         <view class="up-item-inner" @tap="menuClick(index, item.parameter, item.type)">
           <image
-            :src="current | getIcon(index, item)"
+            :src="getIcon(current, index, item)"
             class="up-navigation-img"
             v-if="item.iconPath || (current == index && item.selectedIconPath && item.type == 1)"
           ></image>
           <text
             class="up-navigation-text"
             :style="{
-              color: isDarkMode ? '#fff' : current == index && item.type == 1 ? selectedColor : item.color || color,
+              color: isDarkMode ? '#fff' : current == index && item.type == 1 ? getSelectColor : item.color || color,
               fontWeight: current == index && bold && item.type == 1 ? 'bold' : 'normal',
               fontSize: fontSize
             }"
@@ -38,7 +41,7 @@
             :hover-stay-time="150"
             v-for="(subItem, subIndex) in item.itemList || []"
             :key="subIndex"
-            @tap="subMenuClick(index, item.type, subIndex, subItem.parameter)"
+            @tap="subMenuClick(index, item.type, subIndex, subItem.parameter || '')"
           >
             <text
               class="up-ellipsis"
@@ -57,7 +60,8 @@
 
 <script>
 export default {
-  name: 'fuiBottomNavigation',
+  name: 'tuiBottomNavigation',
+  emits: ['click'],
   props: {
     //当前索引
     current: {
@@ -90,7 +94,7 @@ export default {
 					}
 				]
 			}
-		 * 
+		 *
 		 * */
     itemList: {
       type: Array,
@@ -106,7 +110,7 @@ export default {
     //选中颜色
     selectedColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     fontSize: {
       type: String,
@@ -163,13 +167,24 @@ export default {
       default: false
     }
   },
-
   data() {
     return {
       showMenuIndex: -1 //显示的菜单index
     };
   },
+  computed: {
+    getSelectColor() {
+      return this.selectedColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    }
+  },
   methods: {
+    getIcon: function (current, index, item) {
+      let url = item.iconPath;
+      if (item.type == 1) {
+        url = current == index ? item.selectedIconPath || item.iconPath : item.iconPath;
+      }
+      return url;
+    },
     stop() {
       return false;
     },
@@ -199,13 +214,6 @@ export default {
         subIndex: subIndex,
         parameter: parameter || ''
       });
-    },
-    getIcon(current, index, item) {
-      let url = item.iconPath;
-      if (item.type == 1) {
-        url = current == index ? item.selectedIconPath || item.iconPath : item.iconPath;
-      }
-      return url;
     }
   }
 };
@@ -226,19 +234,20 @@ export default {
   position: fixed !important;
   left: 0;
   bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
 }
 
 .up-bottom-navigation::after {
   content: '';
   width: 100%;
-  border-top: 1rpx solid #bfbfbf;
+  border-top: 1px solid #bfbfbf;
   position: absolute;
   top: 0;
   left: 0;
   transform: scaleY(0.5) translateZ(0);
   transform-origin: 0 0;
-    transform-origin: 0 100%;
   z-index: 1000;
 }
 .up-remove-splitLine::before {
@@ -250,7 +259,6 @@ export default {
   height: 100rpx;
   position: relative;
   box-sizing: border-box;
-  position: relative;
 }
 
 .up-item-inner {
@@ -266,7 +274,7 @@ export default {
   height: 100%;
   content: '';
   position: absolute;
-  border-right: 1rpx solid #bfbfbf;
+  border-right: 1px solid #bfbfbf;
   transform: scaleX(0.5) translateZ(0);
   right: 0;
   top: 0;

package/ui-fireui/components/u-bottom-popup/u-bottom-popup.vue

@@ -2,19 +2,30 @@
   <view @touchmove.stop.prevent>
     <view
       class="up-popup-class up-bottom-popup"
-      :class="{ 'up-popup-show': show, 'up-popup-radius': radius }"
-         :class2="{ 'up-hidden': !show, 'up-popup-show': show, 'up-popup-radius': radius }"
-      :style="{ backgroundColor: backgroundColor, height: height ? height + 'rpx' : 'auto' }"
+      :class="{ 'up-popup-show': show, 'up-popup-radius': radius, 'up-bp__safearea': isSafeArea }"
+      :style="{
+        background: backgroundColor,
+        height: height ? height + 'rpx' : 'auto',
+        zIndex: zIndex,
+        transform: `translate3d(0, ${show ? translateY : '100%'}, 0)`
+      }"
     >
       <slot></slot>
     </view>
-    <view class="up-popup-mask" :class="[show ? 'up-mask-show' : '']" v-if="mask" @tap="handleClose"></view>
+    <view
+      class="up-popup-mask"
+      :class="[show ? 'up-mask-show' : '']"
+      :style="{ zIndex: maskZIndex }"
+      v-if="mask"
+      @tap="handleClose"
+    ></view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiBottomPopup',
+  name: 'tuiBottomPopup',
+  emits: ['close'],
   props: {
     //是否需要mask
     mask: {
@@ -40,6 +51,24 @@ export default {
     radius: {
       type: Boolean,
       default: true
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 997
+    },
+    maskZIndex: {
+      type: [Number, String],
+      default: 996
+    },
+    //弹层显示时，垂直方向移动的距离
+    translateY: {
+      type: String,
+      default: '0'
+    },
+    //是否需要判断底部安全区域（主要针对iphonex以上机型）
+    isSafeArea: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -60,25 +89,26 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 997;
-  /* visibility: hidden; */
   opacity: 0;
   transform: translate3d(0, 100%, 0);
   transform-origin: center;
   transition: all 0.3s ease-in-out;
   min-height: 20rpx;
 }
+
+.up-bp__safearea {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 .up-popup-radius {
   border-top-left-radius: 24rpx;
   border-top-right-radius: 24rpx;
-  padding-bottom: env(safe-area-inset-bottom);
   overflow: hidden;
 }
 
 .up-popup-show {
-  transform: translate3d(0, 0, 0);
   opacity: 1;
-  /* visibility: visible; */
+  /* transform: translate3d(0, 0, 0); */
 }
 
 .up-popup-mask {
@@ -88,7 +118,6 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
-  z-index: 996;
   transition: all 0.3s ease-in-out;
   opacity: 0;
   visibility: hidden;

package/ui-fireui/components/u-bubble-popup/u-bubble-popup.vue

@@ -64,7 +64,7 @@
         }"
         v-if="direction == 'right'"
       ></view>
-      <slot />
+      <slot></slot>
     </view>
     <view
       @touchmove.stop.prevent="stop"
@@ -78,7 +78,8 @@
 </template>
 <script>
 export default {
-  name: 'fuiBubblePopup',
+  name: 'tuiBubblePopup',
+  emits: ['close'],
   props: {
     //宽度
     width: {
@@ -118,7 +119,6 @@ export default {
     //背景颜色
     backgroundColor: {
       type: String,
-      // 5c8dff
       default: '#4c4c4c'
     },
     //字体颜色
@@ -212,9 +212,6 @@ export default {
   height: 0;
   border-style: solid;
   z-index: 997;
-  border: 16rpx solid;
-
-
 }
 
 .up-popup-mask {