@10yun/cv-mobile-ui 0.5.63 → 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>