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

package/ui-cv/components/cv-filter-hm/cv-filter-hm.vue

@@ -1,8 +1,8 @@
 <template>
   <view class="cv-filter-hm" :class="{ setDropdownBottom: maskVisibility }" @touchmove.stop.prevent="discard" @tap.stop="discard">
-    <view class="nav" :class="{ 'z-index': isShowMask }">
+    <view class="filter-nav-box">
       <template v-for="(item, index) in menu" :key="index">
-        <view class="first-menu" :class="{ on: showPage == index }" @tap="togglePage(index)">
+        <view class="first-nav-item" :class="{ on: showPage == index }" @tap="togglePage(index)">
           <text class="name" :style="{ color: color }">{{ item.name }}</text>
           <!-- <cv-icons type="arrowUp" size="12" class="arrows" v-if="statusList[index].isActive" />
           <cv-icons type="arrowDown" size="12" class="arrows" v-if="!statusList[index].isActive" /> -->
@@ -10,9 +10,9 @@
         </view>
       </template>
     </view>
-    <view class="mask" :class="{ show: isShowMask, hide: maskVisibility != true }" @tap="togglePage(showPage)"></view>
+    <view class="filter-mask-box" :class="{ show: isShowMask, hide: maskVisibility != true }" @tap="togglePage(showPage)"></view>
     <template v-for="(page, page_index) in subData" :key="page_index">
-      <view class="sub-menu-class" :class="{ show: showPage == page_index, hide: pageState[page_index] != true }">
+      <view class="filter-main-box" :class="{ show: showPage == page_index, hide: pageState[page_index] != true }">
         <template v-if="page.type == 'hierarchy' && page.submenu.length > 0">
           <scroll-view
             class="sub-menu-list"
@@ -30,7 +30,7 @@
               >
                 <view class="menu-name">
                   <text>{{ sub.name }}</text>
-                  <text class="iconfont selected"></text>
+                  <cv-icons type="actionCheck" size="12" />
                 </view>
               </view>
             </template>
@@ -53,7 +53,7 @@
                     @tap="selectHierarchyMenu(page_index, activeMenuArr[page_index][0], second_index, null)"
                   >
                     <text>{{ sub_second.name }}</text>
-                    <text class="iconfont selected"></text>
+                    <cv-icons type="actionCheck" size="12" />
                   </view>
                   <view
                     class="more-sub-menu"
@@ -75,47 +75,35 @@
             </scroll-view>
           </template>
         </template>
-        <template v-if="page.type == 'filter'">
+        <template v-if="page.type == 'options'">
           <view class="filter">
-            <scroll-view class="menu-box" :scroll-y="true">
-              <view class="box" v-for="(box, box_index) in page.submenu" :key="box_index">
-                <view class="title">{{ box.name }}</view>
-                <view class="labels">
+            <scroll-view class="filter-group-wrap" :scroll-y="true">
+              <view class="filter-group-box" v-for="(gitem, gindex) in page.submenu" :key="gindex">
+                <view class="filter-group-title">{{ gitem.name }}</view>
+                <view class="filter-group-labels" v-if="gitem.type == 'filter'">
                   <view
-                    v-for="(label, label_index) in box.submenu"
-                    :key="label_index"
-                    @tap="selectFilterLabel(page_index, box_index, label_index)"
-                    :class="{ on: label.selected }"
+                    v-for="(labelItem, labelIdx) in gitem.options"
+                    :key="labelIdx"
+                    @tap="selectFilterLabel(page_index, gindex, labelIdx)"
+                    :class="{ on: labelItem.selected }"
                   >
-                    {{ label.name }}
+                    {{ labelItem.name }}
                   </view>
                 </view>
-              </view>
-            </scroll-view>
-            <view class="btn-box">
-              <view class="pub-btn_reset reset" @tap="resetFilterData(page_index)">重置</view>
-              <view class="pub-btn_submit submit" @tap="setFilterData(page_index)">确定</view>
-            </view>
-          </view>
-        </template>
-        <template v-if="page.type == 'radio'">
-          <view class="filter">
-            <scroll-view class="menu-box" :scroll-y="true">
-              <view class="box" v-for="(box, box_index) in page.submenu" :key="box_index">
-                <view class="title">{{ box.name }}</view>
-                <view class="labels">
+                <view class="filter-group-labels" v-if="gitem.type == 'radio'">
                   <view
-                    v-for="(label, label_index) in box.submenu"
-                    :key="label_index"
-                    @tap="selectRadioLabel(page_index, box_index, label_index)"
-                    :class="{ on: label.selected }"
+                    v-for="(labelItem, labelIdx) in gitem.options"
+                    :key="labelIdx"
+                    @tap="selectRadioLabel(page_index, gindex, labelIdx)"
+                    :class="{ on: labelItem.selected }"
                   >
-                    {{ label.name }}
+                    {{ labelItem.name }}
                   </view>
                 </view>
               </view>
+              <view style="height: 60px"></view>
             </scroll-view>
-            <view class="btn-box">
+            <view class="filter-btns-box">
               <view class="reset" @tap="resetFilterData(page_index)">重置</view>
               <view class="submit" @tap="setFilterData(page_index)">确定</view>
             </view>
@@ -300,6 +288,11 @@ export default {
       this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
       this.$forceUpdate();
     },
+    // selectGroupLabel(type,page_index, box_index, label_index){
+    //   if(type=='filter'){
+
+    //   }
+    // },
     //选中筛选类label-UI状态
     selectFilterLabel(page_index, box_index, label_index) {
       let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
@@ -556,77 +549,71 @@ export default {
 </script>
 <style>
 .cv-filter-hm {
-  flex-shrink: 0;
   width: 100%;
-  position: inherit;
-  z-index: 997;
   flex-wrap: nowrap;
   display: flex;
   flex-direction: row;
-  top: var(--window-top);
-  left: 0;
+  flex-direction: column;
   overflow-y: hidden;
 }
-.cv-filter-hm.setDropdownBottom {
+
+.filter-mask-box {
+  z-index: 998;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.15s linear;
 }
-.cv-filter-hm view {
-  display: flex;
-  flex-wrap: nowrap;
+.filter-mask-box.show {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.filter-mask-box.hide {
+  display: none;
+}
+
+.cv-filter-hm.setDropdownBottom {
+  bottom: 0;
 }
 .region {
   flex: 1;
   height: 44px;
 }
 
-.pub-btn_submit {
-  width: 320rpx;
-  height: 80rpx;
-  border-radius: 14rpx;
-  font-size: 30rpx;
+/**
+ * 导航
+ */
+.filter-nav-box {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  background-image: linear-gradient(to right, #ffab00, #ff6400);
-}
-.pub-btn_reset {
-  width: 320rpx;
-  height: 80rpx;
-  border-radius: 14rpx;
-  font-size: 30rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: solid 2rpx #ff6400;
-  color: #ff6400;
-  background: #fff;
-}
-
-.nav {
+  flex-direction: row;
+  flex-wrap: nowrap;
   width: 100%;
   height: 44px;
   border-bottom: solid 1rpx #eee;
-  z-index: 12;
+  z-index: 999;
   background-color: #ffffff;
-  flex-direction: row;
 }
-.nav .first-menu {
-  width: 100%;
-  font-size: 13px;
-  color: #757575;
+.first-nav-item {
+  display: flex;
   flex-direction: row;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  font-size: 13px;
+  color: #757575;
+
   transition: color 0.2s linear;
 }
-.nav .first-menu.on {
+.first-nav-item.on {
   color: #409eff;
 }
-.nav .first-menu.on .iconfont {
+.first-nav-item.on .cv-icon {
   color: #409eff;
 }
-.nav .first-menu .name {
+.first-nav-item .name {
   height: 100%;
   font-size: 12px;
   height: 20px;
@@ -636,54 +623,63 @@ export default {
   overflow: hidden;
   margin-right: 5px;
 }
-.nav .first-menu .iconfont {
-  width: 13px;
-  height: 13px;
+.first-nav-item .cv-icon {
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 13px;
+  height: 13px;
   transition:
     transform 0.2s linear,
     color 0.2s linear;
 }
-.sub-menu-class {
+/**
+ * 主要
+ */
+.filter-main-box {
+  display: flex;
+  flex-wrap: nowrap;
   width: 100%;
   position: absolute;
   left: 0;
   transform: translate3d(0, -100%, 0);
   max-height: 345px;
   background-color: #ffffff;
-  z-index: 11;
+  z-index: 999;
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   flex-direction: row;
   transition: transform 0.15s linear;
 }
-.sub-menu-class.hide {
+.filter-main-box.hide {
   display: none;
 }
 
-.sub-menu-class.show {
+.filter-main-box.show {
   transform: translate3d(0, calc(44px + 1rpx), 0);
 }
 .sub-menu-list {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 345px;
-  flex-direction: column;
 }
 .sub-menu-list .sub-menu {
+  display: flex;
+  flex-direction: column;
   min-height: 44px;
   font-size: 13px;
-  flex-direction: column;
   padding-right: 15px;
 }
 .sub-menu-list .sub-menu > .menu-name {
-  font-size: 12px;
-  height: 44px;
+  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  font-size: 12px;
+  height: 44px;
 }
-.sub-menu-list .sub-menu > .menu-name > .iconfont {
+.sub-menu-list .sub-menu > .menu-name > .cv-icons {
   display: none;
   font-size: 18px;
   color: #409eff;
@@ -714,7 +710,7 @@ export default {
 }
 .sub-menu-list.alone .sub-menu.on > .menu-name {
 }
-.sub-menu-list.alone .sub-menu.on > .menu-name > .iconfont {
+.sub-menu-list.alone .sub-menu.on > .menu-name > .cv-icons {
   display: block;
 }
 .sub-menu-list.not-first {
@@ -728,7 +724,7 @@ export default {
 .sub-menu-list.not-first .sub-menu > .menu-name {
   height: calc(44px - 1rpx);
 }
-.sub-menu-list.not-first .sub-menu > .menu-name > .iconfont {
+.sub-menu-list.not-first .sub-menu > .menu-name > .cv-icons {
   display: none;
   font-size: 18px;
   color: #409eff;
@@ -738,10 +734,11 @@ export default {
 }
 .sub-menu-list.not-first .sub-menu.on > .menu-name {
 }
-.sub-menu-list.not-first .sub-menu.on > .menu-name > .iconfont {
+.sub-menu-list.not-first .sub-menu.on > .menu-name > .cv-icons {
   display: block;
 }
 .sub-menu-list.not-first .sub-menu .more-sub-menu {
+  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-bottom: 9px;
@@ -767,45 +764,54 @@ export default {
   border-color: #f6c8ac;
   color: #409eff;
 }
-.sub-menu-list.not-first .sub-menu .more-sub-menu > text .iconfont {
+.sub-menu-list.not-first .sub-menu .more-sub-menu > text .cv-icons {
   color: #9b9b9b;
 }
 
 .filter {
-  width: 100%;
-  height: 100%;
-  max-height: 345px;
   display: flex;
+  flex-wrap: nowrap;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-}
-.filter .menu-box {
-  width: 349px;
+  width: 100%;
   height: 100%;
-  max-height: calc(345px - 75px);
+  max-height: 80%;
+}
+.filter-group-wrap {
+  /* max-height: calc(345px - 75px);
   flex-shrink: 1;
+  height: calc(100% - 75px); */
+  height: 100%;
+  padding: 0 15px;
 }
-.filter .menu-box .box {
+.filter-group-box {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
   width: 100%;
   margin-top: 16px;
-  flex-direction: column;
 }
-.filter .menu-box .box .title {
+.filter-group-title {
   width: 100%;
   font-size: 12px;
   color: #888;
 }
-.filter .menu-box .box .labels {
-  flex-direction: row;
+.filter-group-labels {
+  display: flex;
   flex-wrap: wrap;
+  flex-direction: row;
 }
-.filter .menu-box .box .labels .on {
+.filter-group-labels .on {
   border-color: #409eff;
   background-color: #409eff;
   color: #fff;
 }
-.filter .menu-box .box .labels > view {
+.filter-group-labels > view {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
   width: 148rpx;
   height: 30px;
   border: solid 1rpx #adadad;
@@ -814,82 +820,43 @@ export default {
   margin-right: 12px;
   margin-top: 8px;
   font-size: 12px;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
 }
-.filter .menu-box .box .labels > view:nth-child(4n) {
+.filter-group-labels > view:nth-child(4n) {
   margin-right: 0;
 }
-.filter .btn-box {
+/** 按钮 */
+.filter-btns-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
   flex-shrink: 0;
-  width: 349px;
-  height: 75px;
-  flex-direction: row !important;
   align-items: center;
   justify-content: space-between;
+  height: 60px;
+  width: 100%;
+  padding: 0 15px;
+  border-top: 1px solid #dedede;
 }
-.filter .btn-box > view {
+.filter-btns-box > view {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
   font-size: 12px;
   padding: 5px 10px;
   margin: 0px 5px;
-  border-radius: 3px;
-  width: 320rpx;
   height: 40px;
   border-radius: 40px;
-  border: solid 1rpx #409eff;
-  align-items: center;
-  justify-content: center;
 }
-.filter .btn-box .reset {
-  border: solid 2rpx #ec652b;
+.filter-btns-box .reset {
+  border: solid 2rpx #ff6400;
   color: #ff6400;
-  color: #409eff;
+  background: #fff;
 }
-.filter .btn-box .submit {
+.filter-btns-box .submit {
   color: #fff;
   background-color: #409eff;
   background-image: linear-gradient(to right, #ffab00, #ff6400);
 }
-
-.mask {
-  z-index: 10;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
-  transition: background-color 0.15s linear;
-}
-.mask.show {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.nav.z-index {
-  z-index: 0;
-}
-.mask.hide {
-  display: none;
-}
-/* 字体图标 
-	@font-face {
-		font-family: "HM-FD-font";
-		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
-	}
-	.iconfont {
-		font-family: "HM-FD-font" !important;
-		font-size: 13px;
-		font-style: normal;
-		color: #757575;
-		&.triangle {
-			&:before {
-				content: "\e65a";
-			}
-		}
-		&.selected {
-			&:before {
-				content: "\e607";
-			}
-		}
-	}*/
 </style>

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

@@ -1,6 +1,10 @@
 <template>
   <view @touchmove.stop.prevent>
-    <view class="up-actionsheet" :class="{ 'up-actionsheet-show': show, 'up-actionsheet-radius': radius }">
+    <view
+      class="up-actionsheet"
+      :class="{ 'up-actionsheet-show': show, 'up-actionsheet-radius': radius }"
+      :style="{ zIndex: getZIndex }"
+    >
       <view class="up-actionsheet-tips" :style="{ fontSize: size + 'rpx', color: color }" v-if="tips">
         {{ tips }}
       </view>
@@ -12,10 +16,10 @@
             hover-class="up-actionsheet-hover"
             :hover-stay-time="150"
             :data-index="index"
-            :style="{ color: item.color || '#2B2B2B' }"
+            :style="{ color: item.color || textColor }"
             @tap="handleClickItem"
           >
-            {{ item.text }}
+            {{ item[textField] }}
           </view>
         </block>
       </view>
@@ -29,19 +33,20 @@
         取消
       </view>
     </view>
-    <view class="up-actionsheet-mask" :class="{ 'up-mask-show': show }" @tap="handleClickMask"></view>
+    <view
+      class="up-actionsheet-mask"
+      :class="{ 'up-mask-show': show }"
+      :style="{ background: maskColor, zIndex: zIndex }"
+      @tap="handleClickMask"
+    ></view>
   </view>
 </template>
 
 <script>
 export default {
-  name: 'fuiActionsheet',
+  name: 'tuiActionsheet',
+  emits: ['click', 'cancel'],
   props: {
-    //点击遮罩 是否可关闭
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
     //显示操作菜单
     show: {
       type: Boolean,
@@ -50,7 +55,7 @@ export default {
     //菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
     itemList: {
       type: Array,
-      default: () => {
+      default: function () {
         return [
           {
             text: '确定',
@@ -59,6 +64,24 @@ export default {
         ];
       }
     },
+    textField: {
+      type: String,
+      default: 'text'
+    },
+    textColor: {
+      type: String,
+      default: '#2B2B2B'
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    //v2.1.0
+    maskColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.6)'
+    },
     //提示文字
     tips: {
       type: String,
@@ -83,6 +106,15 @@ export default {
     isCancel: {
       type: Boolean,
       default: true
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 998
+    }
+  },
+  computed: {
+    getZIndex() {
+      return Number(this.zIndex) + 2;
     }
   },
   methods: {
@@ -92,9 +124,10 @@ export default {
     },
     handleClickItem(e) {
       if (!this.show) return;
-      const dataset = e.currentTarget.dataset;
+      const index = Number(e.currentTarget.dataset.index);
       this.$emit('click', {
-        index: Number(dataset.index)
+        index: index,
+        ...this.itemList[index]
       });
     },
     handleClickCancel() {
@@ -111,7 +144,6 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 9999;
   visibility: hidden;
   transform: translate3d(0, 100%, 0);
   transform-origin: center;
@@ -188,8 +220,6 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 9996;
   transition: all 0.3s ease-in-out;
   opacity: 0;
   visibility: hidden;

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

@@ -6,7 +6,7 @@
       </view>
       <view
         class="up-alert-btn"
-        :style="{ color: btnColor }"
+        :style="{ color: getColor }"
         hover-class="up-alert-btn-hover"
         :hover-stay-time="150"
         @tap.stop="handleClick"
@@ -20,7 +20,8 @@
 
 <script>
 export default {
-  name: 'fuiAlert',
+  name: 'tuiAlert',
+  emits: ['click', 'cancel'],
   props: {
     //控制显示
     show: {
@@ -40,7 +41,7 @@ export default {
     //按钮字体颜色
     btnColor: {
       type: String,
-      default: '#EB0909'
+      default: ''
     },
     btnText: {
       type: String,
@@ -52,6 +53,11 @@ export default {
       default: false
     }
   },
+  computed: {
+    getColor() {
+      return this.btnColor || (uni && uni.$tui && uni.$tui.color.danger) || '#EB0909';
+    }
+  },
   methods: {
     handleClick(e) {
       if (!this.show) return;
@@ -77,7 +83,7 @@ export default {
   opacity: 0;
   border-radius: 6rpx;
   overflow: hidden;
-  z-index: 99998;
+  z-index: 1001;
 }
 
 .up-alert-show {
@@ -92,7 +98,7 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 99996;
+  z-index: 999;
   transition: all 0.3s ease-in-out;
   opacity: 0;
   visibility: hidden;