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

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

@@ -6,28 +6,50 @@
       :class="[direction === 'row' ? 'up-step-horizontal' : 'up-step-vertical']"
       v-for="(item, index) in items"
       :key="index"
+      @tap.stop="handleClick(index)"
     >
-      <view class="up-step-item-ico" :style="{ width: direction === 'column' ? '36rpx' : '100%' }">
+      <view
+        class="up-step-item-ico"
+        :class="[direction === 'column' ? 'up-step-column_ico' : 'up-step-row_ico']"
+        :style="{ width: direction === 'column' ? '36rpx' : '100%' }"
+      >
         <view
+          v-if="!item.name && !item.icon"
           class="up-step-ico"
-          :class="[direction === 'column' ? 'up-step-column_ico' : 'up-step-row_ico']"
           :style="{
             width: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
             height: type == 2 || activeSteps === index ? '36rpx' : '16rpx',
-            backgroundColor: index <= activeSteps ? activeColor : type == 2 ? '#fff' : deactiveColor,
-            borderColor: index <= activeSteps ? activeColor : deactiveColor
+            backgroundColor: index <= activeSteps ? getActiveColor : type == 2 ? '#fff' : deactiveColor,
+            borderColor: index <= activeSteps ? getActiveColor : deactiveColor
           }"
         >
-          <!-- <icon type="success_no_circle" :size="12"  color="#fff"></icon> -->
           <text v-if="activeSteps !== index" :style="{ color: index <= activeSteps ? '#fff' : '' }">
             {{ type == 1 ? '' : index + 1 }}
           </text>
           <up-icon name="check" :size="16" color="#fff" v-if="activeSteps === index"></up-icon>
         </view>
+        <view class="up-step-custom" :style="{ backgroundColor: backgroundColor }" v-if="item.name || item.icon">
+          <up-icon
+            :name="item.name"
+            :size="item.size || 20"
+            :color="index <= activeSteps ? getActiveColor : deactiveColor"
+            v-if="item.name"
+          ></up-icon>
+          <image
+            :src="index <= activeSteps ? item.activeIcon : item.icon"
+            class="up-step-img"
+            mode="widthFix"
+            v-if="!item.name"
+          ></image>
+        </view>
         <view
           class="up-step-line"
-          :class="['up-step-' + direction + '_line']"
-          :style="{ backgroundColor: index <= activeSteps - 1 ? activeColor : deactiveColor }"
+          :class="['up-step-' + direction + '_line', direction == 'column' && (item.name || item.icon) ? 'up-custom-left' : '']"
+          :style="{
+            borderColor: index <= activeSteps - 1 ? getActiveColor : deactiveColor,
+            borderRightStyle: direction == 'column' ? lineStyle : '',
+            borderTopStyle: direction == 'column' ? '' : lineStyle
+          }"
           v-if="index != items.length - 1"
         ></view>
       </view>
@@ -35,19 +57,19 @@
         <view
           class="up-step-item-title"
           :style="{
-            color: index <= activeSteps ? activeColor : deactiveColor,
+            color: index <= activeSteps ? getActiveColor : deactiveColor,
             fontSize: titleSize + 'rpx',
             lineHeight: titleSize + 'rpx',
             fontWeight: bold ? 'bold' : 'normal'
           }"
         >
-          {{ item.title }}
+          {{ item[titleField] }}
         </view>
         <view
           class="up-step-item-content"
-          :style="{ color: index <= activeSteps ? activeColor : deactiveColor, fontSize: descSize + 'rpx' }"
+          :style="{ color: index <= activeSteps ? getActiveColor : deactiveColor, fontSize: descSize + 'rpx' }"
         >
-          {{ item.desc }}
+          {{ item[descrField] }}
         </view>
       </view>
     </view>
@@ -57,7 +79,8 @@
 <script>
 //如果自定义传入图标内容，则需要拆分组件
 export default {
-  name: 'fuiSteps',
+  name: 'tuiSteps',
+  emits: ['click'],
   props: {
     // 1-默认步骤 2-数字步骤
     type: {
@@ -76,7 +99,7 @@ export default {
     // 激活状态成功颜色
     activeColor: {
       type: String,
-      default: '#5677fc'
+      default: ''
     },
     // 未激活状态颜色
     deactiveColor: {
@@ -103,21 +126,55 @@ export default {
       type: Number,
       default: -1
     },
+    //线条样式 同border线条样式
+    lineStyle: {
+      type: String,
+      default: 'solid'
+    },
     /**
-			 * [{
-					title: "标题",
-					desc: "描述"
-				}]
-			 * */
+				 * [{
+						title: "标题",
+						desc: "描述",
+						name:"字体图标 thorui icon内",
+						size:字体图标大小，单位px
+						icon:"图片图标",
+						activeIcon:"已完成步骤显示图片图标"
+					}]
+				 * */
     items: {
       type: Array,
       default() {
         return [];
       }
+    },
+    titleField: {
+      type: String,
+      default: 'title'
+    },
+    descrField: {
+      type: String,
+      default: 'desc'
+    },
+    //自定义item内容时背景色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    }
+  },
+  computed: {
+    getActiveColor() {
+      return this.activeColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
     }
   },
   data() {
     return {};
+  },
+  methods: {
+    handleClick(index) {
+      this.$emit('click', {
+        index: index
+      });
+    }
   }
 };
 </script>
@@ -134,24 +191,24 @@ export default {
 }
 
 .up-step-ico {
-  border-radius: 40rpx;
+  border-radius: 50%;
   position: relative;
   z-index: 3;
   margin: 0 auto;
   border-width: 1rpx;
   border-style: solid;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .up-step-row_ico {
-  top: 50%;
-  transform: translateY(-50%);
+  align-items: center;
 }
 
 .up-step-column_ico {
-  top: 0;
+  align-items: flex-start;
 }
 
 .up-step-line {
@@ -159,7 +216,10 @@ export default {
   left: 50%;
   top: 20rpx;
   width: 100%;
-  height: 1rpx;
+  height: 0rpx;
+  border-top-width: 1px;
+  z-index: 2;
+  transform: translateY(-50%) translateZ(0);
 }
 
 .up-step-row_item_main {
@@ -174,8 +234,24 @@ export default {
 
 .up-step-item-ico {
   height: 36rpx;
-  line-height: 36rpx;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.up-step-custom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 40rpx;
+  position: relative;
+  z-index: 4;
+  margin: 0 auto;
+}
+
+.up-step-img {
+  width: 40rpx;
+  height: 40rpx;
 }
 
 .up-step-item-main {
@@ -201,6 +277,7 @@ export default {
 .up-step-column_item_main {
   margin-top: 0;
   padding-left: 20rpx;
+  max-width: 80%;
 }
 
 .up-step-column_line {
@@ -209,6 +286,12 @@ export default {
   top: 0;
   left: 18rpx;
   margin: 0;
-  width: 1rpx;
+  width: 0rpx;
+  border-right-width: 1px;
+  transform: none !important;
+}
+
+.up-custom-left {
+  left: 20rpx !important;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
-  <view class="up-sticky-class">
+  <view class="up-sticky-class" :id="tui_Id">
     <!--sticky 容器-->
-    <view :style="{ height: stickyHeight, backgroundColor: backgroundColor }" v-if="isFixed"></view>
+    <view :style="{ height: stickyHeight, background: backgroundColor }" v-if="isFixed"></view>
     <view :class="{ 'up-sticky-fixed': isFixed }" :style="{ top: isFixed ? stickyTop + 'px' : 'auto' }">
       <slot name="header"></slot>
     </view>
@@ -13,7 +13,8 @@
 
 <script>
 export default {
-  name: 'fuiSticky',
+  name: 'tuiSticky',
+  emits: ['sticky', 'change'],
   props: {
     scrollTop: {
       type: Number
@@ -81,17 +82,21 @@ export default {
     this.initialize = this.recalc;
   },
   mounted() {
-    setTimeout(() => {
-      this.updateScrollChange();
-    }, 20);
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.updateScrollChange();
+      }, 50);
+    });
   },
   data() {
+    const Id = `tui_${Math.ceil(Math.random() * 10e5).toString(36)}`;
     return {
       timer: null,
       top: 0,
       height: 0,
       isFixed: false,
-      initialize: 0 //重新初始化
+      initialize: 0, //重新初始化
+      tui_Id: Id
     };
   },
   methods: {
@@ -123,21 +128,30 @@ export default {
         this.timer = null;
       }
       this.timer = setTimeout(() => {
-        const className = '.up-sticky-class';
-        const query = uni.createSelectorQuery().in(this);
-        query
-          .select(className)
-          .boundingClientRect((res) => {
-            if (res) {
-              this.top = res.top + (this.scrollTop || 0);
-              this.height = res.height;
-              callback && callback();
-              this.$emit('change', {
-                index: Number(this.index),
-                top: this.top
-              });
+        const selectId = `#${this.tui_Id}`;
+        uni
+          .createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select(selectId)
+          .fields(
+            {
+              size: true,
+              rect: true
+            },
+            (res) => {
+              if (res) {
+                this.top = res.top + (this.scrollTop || 0);
+                this.height = res.height;
+                callback && callback();
+                this.$emit('change', {
+                  index: Number(this.index),
+                  top: this.top
+                });
+              }
             }
-          })
+          )
           .exec();
       }, 0);
     }

package/ui-fireui/components/u-sticky-wxs/u-sticky-wxs.vue

@@ -23,7 +23,8 @@
 <script src="./up-sticky.wxs" module="parse" lang="wxs"></script>
 <script>
 export default {
-  name: 'fuiStickyWxs',
+  name: 'tuiStickyWxs',
+  emits: ['prop', 'change'],
   props: {
     scrollTop: {
       type: [Number, String],
@@ -79,9 +80,11 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
-      this.updateScrollChange();
-    }, 20);
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.updateScrollChange();
+      }, 50);
+    });
   },
   data() {
     return {

package/ui-fireui/components/u-sticky-wxs/u-sticky.wxs

@@ -1,46 +1,49 @@
-var stickyChange = function (scrollTop, oldScrollTop, ownerInstance, ins) {
-if(!oldScrollTop) return false;
+var isH5 = false;
+if (typeof window === 'object') isH5 = true;
+var stickyChange = function(scrollTop, oldScrollTop, ownerInstance, ins) {
+if (!oldScrollTop && scrollTop === 0) return false;
 var dataset = ins.getDataset()
-var top =+dataset.top;
-var height = + dataset.height;
+var top = +dataset.top;
+var height = +dataset.height;
 var stickyTop = +dataset.stickytop;
-var isNativeHeader=dataset.isnativeheader;
+var isNativeHeader = dataset.isnativeheader;
 var isFixed = false;
-var distance=stickyTop
-// #ifdef H5
-if (isNativeHeader) {
+var distance = stickyTop
+if (isNativeHeader && isH5) {
 distance = distance - 44
 distance = distance
 < 0 ? 0 : distance
-  }
-  // #endif
-  if (dataset.container) {
-    isFixed = (scrollTop + distance>= top && scrollTop + distance
+	}
+	if (dataset.container) {
+		isFixed = (scrollTop + distance>= top && scrollTop + distance
 < top + height) ? true : false
-  } else {
-    isFixed = scrollTop + distance >= top ? true : false
-  }
-  if (isFixed) {
-    ownerInstance.selectComponent('.up-sticky-bar').setStyle({
-      "top": stickyTop + 'px'
-    }).addClass('up-sticky-fixed')
-    ownerInstance.selectComponent('.up-sticky-seat').setStyle({
-      "display": 'block'
-    })
-  } else {
-    ownerInstance.selectComponent('.up-sticky-bar').setStyle({
-      "top": 'auto'
-    }).removeClass('up-sticky-fixed')
-    ownerInstance.selectComponent('.up-sticky-seat').setStyle({
-      "display": 'none'
-    })
-  }
-  ownerInstance.triggerEvent("sticky", {
-    isFixed: isFixed,
-    index: parseInt(dataset.index)
-  })
+	} else {
+		isFixed = scrollTop + distance >= top ? true : false
+	}
+	var tsb = ownerInstance.selectComponent('.up-sticky-bar')
+	var tss = ownerInstance.selectComponent('.up-sticky-seat')
+	if (!tsb || !tss) return;
+	if (isFixed) {
+		tsb.setStyle({
+			"top": stickyTop + 'px'
+		}).addClass('up-sticky-fixed')
+		tss.setStyle({
+			"display": 'block'
+		})
+	} else {
+		tsb.setStyle({
+			"top": 'auto'
+		}).removeClass('up-sticky-fixed')
+		tss.setStyle({
+			"display": 'none'
+		})
+	}
+	ownerInstance.triggerEvent("sticky", [{
+		isFixed: isFixed,
+		index: parseInt(dataset.index)
+	}])
 }
 
-export default {
-  stickyChange: stickyChange
+module.exports = {
+	stickyChange: stickyChange
 }

package/ui-fireui/components/u-swipe-action/u-swipe-action.vue

@@ -1,14 +1,19 @@
 <template>
-  <view class="up-swipeout-wrap" :class="swipeoutClass">
+  <view class="up-swipeout-wrap" :style="{ backgroundColor: backgroundColor }">
     <view
       class="up-swipeout-item"
       :class="[isShowBtn ? 'swipe-action-show' : '']"
-      @touchstart="handlerTouchstart"
-      @touchmove="handlerTouchmove"
-      @touchend="handlerTouchend"
       :style="{ transform: 'translate(' + position.pageX + 'px,0)' }"
     >
-      <view class="up-swipeout-content">
+      <view
+        class="up-swipeout-content"
+        @touchstart="handlerTouchstart"
+        @touchmove="handlerTouchmove"
+        @touchend="handlerTouchend"
+        @mousedown="handlerTouchstart"
+        @mousemove="handlerTouchmove"
+        @mouseup="handlerTouchend"
+      >
         <slot name="content"></slot>
       </view>
       <view class="up-swipeout-button-right-group" v-if="actions.length > 0" @touchend.stop="loop">
@@ -16,12 +21,20 @@
           class="up-swipeout-button-right-item"
           v-for="(item, index) in actions"
           :key="index"
-          :style="{ backgroundColor: item.background || '#f7f7f7', color: item.color, width: item.width + 'px' }"
+          :style="{
+            backgroundColor: item.background || '#f7f7f7',
+            color: item.color || color,
+            width: (item.width || width) + 'px'
+          }"
           :data-index="index"
           @tap="handlerButton"
         >
-          <image :src="item.icon" v-if="item.icon" :style="{ width: px(item.imgWidth), height: px(item.imgHeight) }"></image>
-          <text :style="{ fontSize: px(item.fontsize) }">{{ item.name }}</text>
+          <image
+            :src="item[iconField]"
+            v-if="item[iconField]"
+            :style="{ width: px(item.imgWidth || 48), height: px(item.imgHeight || 48) }"
+          ></image>
+          <text :style="{ fontSize: px(item.fontsize || 32) }">{{ item[nameField] }}</text>
         </view>
       </view>
       <!--actions长度设置为0，可直接传按钮进来-->
@@ -40,13 +53,14 @@
       class="swipe-action_mask"
       @tap.stop="closeButtonGroup"
       @touchstart.stop.prevent="closeButtonGroup"
-    />
+    ></view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiSwipeAction',
+  name: 'tuiSwipeAction',
+  emits: ['click'],
   props: {
     // name: '删除',
     // color: '#fff',
@@ -60,9 +74,21 @@ export default {
         return [];
       }
     },
-    swipeoutClass: {
+    nameField: {
       type: String,
-      default: ''
+      default: 'name'
+    },
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    iconField: {
+      type: String,
+      default: 'icon'
+    },
+    width: {
+      type: [String, Number],
+      default: 70
     },
     //点击按钮时是否自动关闭
     closable: {
@@ -93,6 +119,11 @@ export default {
     open: {
       type: Boolean,
       default: false
+    },
+    //背景色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
     }
   },
   watch: {
@@ -117,7 +148,8 @@ export default {
         pageX: 0,
         pageY: 0
       },
-      isShowBtn: false
+      isShowBtn: false,
+      move: false
     };
   },
   mounted() {
@@ -144,7 +176,16 @@ export default {
     },
     handlerTouchstart(event) {
       if (this.forbid) return;
-      const touches = event.touches ? event.touches[0] : {};
+      let touches = event.touches;
+      if (touches && touches.length > 1) return;
+      this.move = true;
+      touches = touches ? event.touches[0] : {};
+      if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+        touches = {
+          pageX: event.pageX,
+          pageY: event.pageY
+        };
+      }
       const tStart = this.tStart;
       if (touches) {
         for (let i in tStart) {
@@ -166,9 +207,15 @@ export default {
       this.position = spacing;
     },
     handlerTouchmove(event) {
-      if (this.forbid) return;
+      if (this.forbid || !this.move) return;
       const start = this.tStart;
-      const touches = event.touches ? event.touches[0] : {};
+      let touches = event.touches ? event.touches[0] : {};
+      if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+        touches = {
+          pageX: event.pageX,
+          pageY: event.pageY
+        };
+      }
       if (touches) {
         const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
         if (direction === 'Left' && Math.abs(this.position.pageX) !== this.limitMove) {
@@ -177,9 +224,16 @@ export default {
       }
     },
     handlerTouchend(event) {
-      if (this.forbid) return;
+      if (this.forbid || !this.move) return;
+      this.move = false;
       const start = this.tStart;
-      const touches = event.changedTouches ? event.changedTouches[0] : {};
+      let touches = event.changedTouches ? event.changedTouches[0] : {};
+      if (!touches || (touches.pageX === undefined && touches.pageY === undefined)) {
+        touches = {
+          pageX: event.pageX,
+          pageY: event.pageY
+        };
+      }
       if (touches) {
         const direction = this.swipeDirection(start.pageX, touches.pageX, start.pageY, touches.pageY);
         const spacing = {
@@ -192,6 +246,9 @@ export default {
         } else {
           spacing.pageX = 0;
         }
+        if (spacing.pageX == 0) {
+          this.isShowBtn = false;
+        }
         this.position = spacing;
       }
     },
@@ -245,7 +302,6 @@ export default {
 
 <style scoped>
 .up-swipeout-wrap {
-  background-color: #fff;
   position: relative;
   overflow: hidden;
 }
@@ -261,6 +317,7 @@ export default {
   box-sizing: border-box;
   transition: transform 0.2s ease;
   font-size: 14px;
+  cursor: pointer;
 }
 
 .up-swipeout-content {