wl-design-mobile 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,6 @@
+# wl-design-mobile
+
+## Setup
+```
+npm i wl-design-mobile
+```

package/btn/lambo-big-button.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="btns">
-    <ul class="lambobigbutton-ul">
+    <ul class="big-btn-ul">
       <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading" :plain="plain"
-                  :type="type" class="LamboBigButton" size="large" @click="handleClick"> {{ title }}
-        <slot name="icon"></slot>
+                  :type="type" class="big-btn" size="large" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
       </van-button>
 
     </ul>
@@ -28,7 +28,7 @@ export default {
       type: Boolean,
       default: false
     },
-    title: {
+    text: {
       type: String,
       default: '大号按钮'
     },
@@ -68,19 +68,19 @@ export default {
 <style scoped>
 @import "../styles/index.less";
 
-.LamboBigButton {
+.big-btn {
   height: 38px;
   border-radius: 3px;
 }
 
 /*填充按钮primary类型按钮样式 */
-/deep/ .lambobigbutton-ul .van-button--primary {
+/deep/ .big-btn-ul .van-button--primary {
   background: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*填充按钮primary类型不可用按钮样式 */
-/deep/ .lambobigbutton-ul .van-button--disabled {
+/deep/ .big-btn-ul .van-button--disabled {
   cursor: not-allowed;
   opacity: 1;
   background-color: var(--scl-gray-6);
@@ -89,34 +89,34 @@ export default {
 }
 
 /*按钮文字样式*/
-/deep/ .lambobigbutton-ul .van-button__text {
+/deep/ .big-btn-ul .van-button__text {
   font-size: 14px;
   padding: 10px 0px;
   font-family: 微软雅黑, serif Regular;
 }
 
 /*线框按钮按钮样式*/
-/deep/ .lambobigbutton-ul .van-button--plain.van-button--info {
+/deep/ .big-btn-ul .van-button--plain.van-button--info {
   color: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*线框按钮不可用按钮样式*/
-/deep/ .lambobigbutton-ul .van-button--plain.van-button--info.van-button--disabled {
+/deep/ .big-btn-ul .van-button--plain.van-button--info.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-gray-6);
   background-color: #ffffff;
 }
 
 /*无框类型按钮样式 */
-/deep/ .lambobigbutton-ul .van-button--default {
+/deep/ .big-btn-ul .van-button--default {
   background: var(--scl-white-1);
   border: 1px solid var(--scl-white-1);
   color: var(--scl-blue);
 }
 
 /*无框按钮不可用按钮样式*/
-/deep/ .lambobigbutton-ul .van-button--default.van-button--disabled {
+/deep/ .big-btn-ul .van-button--default.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-white-1);
   background-color: var(--scl-white-1);

package/btn/lambo-medium-button.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="btns">
-    <ul class="lambomediumbutton-ul">
+    <ul class="mid-btn-ul">
       <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading" :plain="plain"
-                  :type="type" class="LamboMediumButton" size="normal" @click="handleClick"> {{ text }}
+                  :type="type" class="mid-btn" size="normal" @click="handleClick"> {{ text }}
+        <slot name="extend"></slot>
       </van-button>
     </ul>
   </div>
@@ -66,19 +67,19 @@ export default {
 <style scoped>
 @import "../styles/index.less";
 
-.LamboMediumButton {
+.mid-btn {
   height: 30px;
   border-radius: 3px;
 }
 
 /*填充按钮primary类型按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--primary {
+/deep/ .mid-btn-ul .van-button--primary {
   background: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*填充按钮primary类型不可用按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--disabled {
+/deep/ .mid-btn-ul .van-button--disabled {
   cursor: not-allowed;
   opacity: 1;
   background-color: var(--scl-gray-6);
@@ -87,34 +88,34 @@ export default {
 }
 
 /*按钮文字样式*/
-/deep/ .lambomediumbutton-ul .van-button__text {
-  font-size: 11px;
+/deep/ .mid-btn-ul .van-button__text {
+  font-size: 12px;
   padding: 10px 0px;
   font-family: 微软雅黑, serif Regular;
 }
 
 /*线框按钮按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info {
+/deep/ .mid-btn-ul .van-button--plain.van-button--info {
   color: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*线框按钮不可用按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info.van-button--disabled {
+/deep/ .mid-btn-ul .van-button--plain.van-button--info.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-gray-6);
   background-color: #ffffff;
 }
 
 /*无框类型按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--default {
+/deep/ .mid-btn-ul .van-button--default {
   background: var(--scl-white-1);
   border: 1px solid var(--scl-white-1);
   color: var(--scl-blue);
 }
 
 /*无框按钮不可用按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--default.van-button--disabled {
+/deep/ .mid-btn-ul .van-button--default.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-white-1);
   background-color: var(--scl-white-1);

package/btn/lambo-small-button.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="btns">
-    <ul class="lambomediumbutton-ul">
+    <ul class="small-button-ul">
       <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading" :plain="plain"
-                  :type="type" class="LamboMediumButton" size="small" @click="handleClick"> {{ text }}
+                  :type="type" class="small-button" size="small" @click="handleClick"> {{ text }}
       </van-button>
     </ul>
   </div>
@@ -66,19 +66,19 @@ export default {
 <style scoped>
 @import "../styles/index.less";
 
-.LamboMediumButton {
+.small-button {
   height: 27px;
   border-radius: 3px;
 }
 
 /*填充按钮primary类型按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--primary {
+/deep/ .small-button-ul .van-button--primary {
   background: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*填充按钮primary类型不可用按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--disabled {
+/deep/ .small-button-ul .van-button--disabled {
   cursor: not-allowed;
   opacity: 1;
   background-color: var(--scl-gray-6);
@@ -87,34 +87,34 @@ export default {
 }
 
 /*按钮文字样式*/
-/deep/ .lambomediumbutton-ul .van-button__text {
+/deep/ .small-button-ul .van-button__text {
   font-size: 11px;
   padding: 10px 0px;
   font-family: 微软雅黑, serif Regular;
 }
 
 /*线框按钮按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info {
+/deep/ .small-button-ul .van-button--plain.van-button--info {
   color: var(--scl-blue);
   border: 1px solid var(--scl-blue);
 }
 
 /*线框按钮不可用按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--plain.van-button--info.van-button--disabled {
+/deep/ .small-button-ul .van-button--plain.van-button--info.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-gray-6);
   background-color: #ffffff;
 }
 
 /*无框类型按钮样式 */
-/deep/ .lambomediumbutton-ul .van-button--default {
+/deep/ .small-button-ul .van-button--default {
   background: var(--scl-white-1);
   border: 1px solid var(--scl-white-1);
   color: var(--scl-blue);
 }
 
 /*无框按钮不可用按钮样式*/
-/deep/ .lambomediumbutton-ul .van-button--default.van-button--disabled {
+/deep/ .small-button-ul .van-button--default.van-button--disabled {
   color: #000000;
   border: 1px solid var(--scl-white-1);
   background-color: var(--scl-white-1);

package/detail/lambo-detail-grid.vue

@@ -25,6 +25,8 @@ export default {
     }
   },
   created() {
+  },
+  mounted() {
     console.log("LamboDetailGrid -- created -- data:", this.data)
     this.initData()
   },

package/detail/lambo-detail-row.vue

@@ -37,14 +37,16 @@ export default {
 }
 
 .detail-row-box {
-  height: 70px;
+  min-height: 60px;
+  height: auto;
   margin: 0 14px;
   padding: 12px 0;
   border-bottom: 1px solid var(--scl-white-2);
 }
 
 .detail-row-title {
-  height: 16px;
+  min-height: 16px;
+  height: auto;
   margin-bottom: 12px;
   font-size: 12px;
   font-family: Regular;
@@ -52,7 +54,8 @@ export default {
 }
 
 .detail-row-val {
-  height: 18px;
+  min-height: 18px;
+  height: auto;
   font-size: 14px;
   color: var(--scl-lucency-1);
 }

package/doc/img/styles/css/index.css

@@ -1,98 +1,98 @@
-.imgUplodaContainer {
-    padding: 12px 14px;
-    background: var(--scl-white-1);
-}
-
-.imgUplodaTitle {
-    /*margin-bottom: 18px;*/
-    display: flex;
-    justify-content: space-between;
-}
-
-.imgUplodaTitle p {
-    width: 100%;
-    color: var(--scl-gray-3);
-    font-size: 14px;
-    position: absolute;
-    top: -2px;
-}
-
-.imgUplodaTitle img {
-    width: 20px;
-    height: 20px;
-    display: block;
-}
-
-/*右上角上传按钮样式*/
-/deep/ .van-button--primary {
-    background: none;
-    border: none;
-    height: auto;
-}
-
-/*右上角上传按钮位置*/
-/deep/ .van-uploader__input-wrapper, .van-uploader {
-    width: 100%;
-    position: static;
-}
-
-/*上传按钮首次进页面控制图标大小*/
-/deep/ .van-icon__image {
-    width: 1em;
-}
-
-/*图片上传区域及右上角上传按钮*/
-/deep/ .setUploader {
-    position: relative;
-    margin-bottom: 10px;
-}
-
-/*图片整体位置*/
-/deep/ .van-uploader__wrapper {
-    margin-top: 30px;
-    display: grid;
-    justify-content: space-between;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 10px;
-}
-
-/*右上角上传按钮位置*/
-/deep/ .van-button--normal {
-    width: 20px;
-    position: absolute;
-    top: -1px;
-    right: -8px;
-}
-
-/*/deep/ .van-uploader__preview {*/
-/*    width: 23%;*/
-/*    height: auto;*/
-/*    padding-left: 8px;*/
-/*    margin: 8px 0 0 0;*/
-/*}*/
-
-/*预览图片样式*/
-/*/deep/ .van-uploader__preview-image {*/
-/*    display: block;*/
-/*    width: auto;*/
-/*    height: 100px;*/
-/*    overflow: hidden;*/
-/*    border: 1px solid #515a6e38;*/
-/*}*/
-
-/*控制上传功能覆盖区域*/
-/deep/ .van-uploader__input {
-    height: 20px;
-    width: 20px;
-    position: absolute;
-    left: 95%;
-}
-
-/deep/ .van-uploader__preview {
-    margin: 0;
-}
-
-/deep/ .van-uploader__preview-image {
-    width: auto;
-    height: 95px;
+.imgUplodaContainer {
+    padding: 12px 14px;
+    background: var(--scl-white-1);
+}
+
+.imgUplodaTitle {
+    /*margin-bottom: 18px;*/
+    display: flex;
+    justify-content: space-between;
+}
+
+.imgUplodaTitle p {
+    width: 100%;
+    color: var(--scl-gray-3);
+    font-size: 14px;
+    position: absolute;
+    top: -2px;
+}
+
+.imgUplodaTitle img {
+    width: 20px;
+    height: 20px;
+    display: block;
+}
+
+/*右上角上传按钮样式*/
+/deep/ .van-button--primary {
+    background: none;
+    border: none;
+    height: auto;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-uploader__input-wrapper, .van-uploader {
+    width: 100%;
+    position: static;
+}
+
+/*上传按钮首次进页面控制图标大小*/
+/deep/ .van-icon__image {
+    width: 1em;
+}
+
+/*图片上传区域及右上角上传按钮*/
+/deep/ .setUploader {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+/*图片整体位置*/
+/deep/ .van-uploader__wrapper {
+    margin-top: 30px;
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 10px;
+}
+
+/*右上角上传按钮位置*/
+/deep/ .van-button--normal {
+    width: 20px;
+    position: absolute;
+    top: -1px;
+    right: -8px;
+}
+
+/*/deep/ .van-uploader__preview {*/
+/*    width: 23%;*/
+/*    height: auto;*/
+/*    padding-left: 8px;*/
+/*    margin: 8px 0 0 0;*/
+/*}*/
+
+/*预览图片样式*/
+/*/deep/ .van-uploader__preview-image {*/
+/*    display: block;*/
+/*    width: auto;*/
+/*    height: 100px;*/
+/*    overflow: hidden;*/
+/*    border: 1px solid #515a6e38;*/
+/*}*/
+
+/*控制上传功能覆盖区域*/
+/deep/ .van-uploader__input {
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    left: 95%;
+}
+
+/deep/ .van-uploader__preview {
+    margin: 0;
+}
+
+/deep/ .van-uploader__preview-image {
+    width: auto;
+    height: 95px;
 }

package/edit/list/styles/css/index.css

@@ -1,39 +1,39 @@
-.coll-div {
-    margin-bottom: 8px;
-}
-
-.indicator-title {
-    display: flex;
-    align-items: center;
-    color: var(--scl-blue);
-    font-size: 14px;
-    font-family: 微软雅黑, serif Regular;
-}
-
-.indicator-title .color-line {
-    width: 3px;
-    height: 14px;
-    margin-right: 8px;
-}
-
-.coll-title-icon {
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-
-/* 覆盖折叠面板的标题的padding */
-/deep/ .van-cell {
-    padding: 12px 10px;
-}
-
-/* 覆盖去掉折叠面板的标题下面的线 */
-/deep/ .van-cell::after {
-    border: none;
-}
-
-/* 覆盖折叠面板的内容的padding */
-/deep/ .van-collapse-item__content {
-    padding: 0px 0px 0px 0px;
-}
-
+.coll-div {
+    margin-bottom: 8px;
+}
+
+.indicator-title {
+    display: flex;
+    align-items: center;
+    color: var(--scl-blue);
+    font-size: 14px;
+    font-family: 微软雅黑, serif Regular;
+}
+
+.indicator-title .color-line {
+    width: 3px;
+    height: 14px;
+    margin-right: 8px;
+}
+
+.coll-title-icon {
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+/* 覆盖折叠面板的标题的padding */
+/deep/ .van-cell {
+    padding: 12px 10px;
+}
+
+/* 覆盖去掉折叠面板的标题下面的线 */
+/deep/ .van-cell::after {
+    border: none;
+}
+
+/* 覆盖折叠面板的内容的padding */
+/deep/ .van-collapse-item__content {
+    padding: 0px 0px 0px 0px;
+}
+

package/edit/select/lambo-edit-multi-select.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
     <div>
-      <van-popup v-model:show="showBottom" :style="{ height: '33%' }" position="bottom">
+      <van-popup v-model="showBottom" :style="{ height: '33%' }" position="bottom">
         <van-checkbox-group v-model="selectItem.K">
           <div class="edit-top-div">
             <van-button class="edit-cancel-btn" size="normal" @click="cancel">取消</van-button>
@@ -137,6 +137,7 @@ export default {
     changeColor() {
       let searchRows = document.querySelectorAll('.edit-box')
       Array.from(searchRows).forEach(function (row, index) {
+        console.log(index)
         row.addEventListener('click', function () {
           Array.from(searchRows).forEach(function (row) {
             row.style.borderBottom = '1px solid var(--scl-white-2)'

package/edit/select/styles/css/index.css

@@ -1,124 +1,127 @@
-.edit-box {
-    min-height: 70px;
-    display: flex;
-    justify-content: space-between;
-    padding: 12px 14px;
-    border-bottom: 1px solid var(--scl-white-2);
-    background-color: var(--scl-white-1);
-}
-
-.edit-left-box {
-    width: 100%;
-}
-
-/* 覆盖value的padding */
-.edit-left-box /deep/ .van-cell {
-    padding: 0;
-}
-
-.edit-left-top {
-    display: flex;
-    align-items: center;
-    height: 16px;
-    margin-bottom: 12px
-}
-
-.edit-red-icon {
-    margin-right: 4px
-}
-
-.edit-title {
-    font-size: 12px;
-    font-family: Regular;
-    color: var(--scl-gray-2)
-}
-
-.edit-lambo-input {
-    border: none;
-    outline: none;
-    background: none;
-    height: 18px;
-    font-size: 14px;
-    color: var(--scl-gray-5);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 1;
-}
-
-.edit-lambo-input-textarea {
-    border: none;
-    outline: none;
-    background: none;
-    font-size: 14px;
-    color: var(--scl-gray-5);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex: 1;
-}
-
-.edit-right-icon {
-    display: flex;
-    align-items: center
-}
-
-
-.edit-top-div {
-    display: flex;
-    justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
-    width: 100%;
-    position: fixed;
-    z-index: 300;
-}
-
-.edit-cancel-btn {
-    border: none;
-    color: var(--scl-gray-3);
-}
-
-.edit-confirm-btn {
-    border: none;
-    color: var(--scl-blue);
-}
-
-.edit-select-title {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-radio-group {
-    position: relative;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell-group {
-    padding-top: 44px;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell:first-child {
-    padding-top: 10px;
-}
-
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar {
-    width: 6px;
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-thumb {
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(45, 140, 240, 0.6);
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(231, 242, 250, 0.4);
-}
+.edit-box {
+    min-height: 50px;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--scl-white-2);
+    background-color: var(--scl-white-1);
+}
+
+.edit-left-box {
+    width: 100%;
+}
+
+/* 覆盖value的padding */
+.edit-left-box /deep/ .van-cell {
+    padding: 0;
+}
+
+.edit-left-top {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    padding: 0 15px;
+    margin-bottom: 12px
+}
+
+.edit-red-icon {
+    margin-right: 4px
+}
+
+.edit-title {
+    font-size: 12px;
+    font-family: Regular;
+    color: var(--scl-gray-2)
+}
+
+.edit-lambo-input {
+    border: none;
+    outline: none;
+    background: none;
+    height: 18px;
+    font-size: 14px;
+    color: var(--scl-gray-5);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 1;
+    margin-right: 8px;
+}
+
+.edit-lambo-input-textarea {
+    border: none;
+    outline: none;
+    background: none;
+    font-size: 14px;
+    color: var(--scl-gray-5);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 1;
+}
+
+.edit-right-icon {
+    display: flex;
+    align-items: center
+}
+
+
+.edit-top-div {
+    display: flex;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    width: 100%;
+    position: fixed;
+    z-index: 300;
+}
+
+.edit-cancel-btn {
+    border: none;
+    color: var(--scl-gray-3);
+}
+
+.edit-confirm-btn {
+    border: none;
+    color: var(--scl-blue);
+}
+
+.edit-select-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-radio-group {
+    position: relative;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell-group {
+    padding-top: 44px;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell:first-child {
+    padding-top: 10px;
+}
+
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar {
+    width: 6px;
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-thumb {
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(45, 140, 240, 0.6);
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(231, 242, 250, 0.4);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "author": "finch",

package/search/lambo-list-filter.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="opt-btn">
+      <div>
+        <slot name="optBtn"></slot>
+      </div>
+      <div v-if="showFilter">
+        <lambo-icon-button :icon="'order.png'" @click="showOrderPop"></lambo-icon-button>
+        <lambo-icon-button :icon="'filter.png'" @click="showFilterPop"></lambo-icon-button>
+      </div>
+    </div>
+    <div v-if="showFilter">
+      <filtrate-row :name="'降序'"></filtrate-row>
+      <filtrate-row :name="'筛选范围'"></filtrate-row>
+    </div>
+    <van-popup
+        ref="orderPopup"
+        v-model="orderPop"
+        position="bottom"
+        round
+        @close="closeOrderPop"
+        class="van-popup">
+      <template v-slot:default>
+        <van-checkbox-group class="popup-item" v-model="orderChecked" shape="square">
+          <div class="opt-btn" v-for="(item) in orderColumns" :key="item.K">
+            <van-checkbox :name="item.K">{{item.V}}</van-checkbox>
+            <van-radio-group v-model="item.type" direction="horizontal">
+              <van-radio name="asc">升序</van-radio>
+              <van-radio name="desc">降序</van-radio>
+            </van-radio-group>
+          </div>
+        </van-checkbox-group>
+      </template>
+    </van-popup>
+    <van-popup
+        ref="filterPopup"
+        v-model="filterPop"
+        position="bottom"
+        round
+        @close="closeFilterPop"
+        class="van-popup">
+      <div class="popup-item">
+        <slot name="filter" ></slot>
+      </div>
+    </van-popup>
+  </div>
+</template>
+<script>
+import LamboIconButton from "@/components/lambo/btn/lambo-icon-button.vue";
+import FiltrateRow from "@/components/lambo/card-item/filtrate-row.vue";
+
+export default {
+  name: "LamboListFilter",
+  components: {
+    FiltrateRow,
+    LamboIconButton
+  },
+  props: {
+    showFilter: {
+      type: [Boolean, String],
+      default: true
+    },
+    orderColumns: {
+      type: Array,
+      default: () => ([
+        {
+          K: 'a',
+          V: '复选框 a'
+        },
+        {
+          K: 'b',
+          V: '复选框 b'
+        }
+      ])
+    }
+  },
+  data() {
+    return {
+      orderPop: false,
+      filterPop: false,
+      orderChecked: [],
+      orderData: []
+    }
+  },
+  methods: {
+    showOrderPop() {
+      this.orderPop = true
+    },
+    showFilterPop() {
+      this.filterPop = true
+    },
+    closeOrderPop() {
+      this.orderData = []
+      this.orderChecked.forEach((key) => {
+        const order = this.orderColumns.find(item => item.K === key)
+        const data = {
+          K: order.K,
+          type: order.type
+        }
+        this.orderData.push(data)
+      })
+      this.$emit('order-on-ok', this.orderData)
+    },
+    closeFilterPop() {
+    }
+  }
+}
+</script>
+<style scoped>
+.opt-btn {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.popup-item {
+  margin-top: 20px;
+  padding: 0 15px;
+}
+.van-popup {
+  min-height: 25%;
+  height: auto;
+}
+</style>

package/search/styles/css/index.css

@@ -1,126 +1,126 @@
-.search-top-pop {
-    min-height: 145px;
-    max-height: 320px;
-    background-color: var(--scl-white-1)
-}
-
-.search-body {
-    border-top: none;
-    min-height: 70px;
-    max-height: 245px;
-    overflow: auto;
-}
-
-.search-bottom-btn {
-    padding: 18px 14px 14px 14px;
-}
-
-
-/*日期选择*/
-.search-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
-    align-items: center;
-    align-content: center;
-    height: 70px;
-    padding: 18px 0;
-    margin: 0 14px;
-    border-bottom: 1px solid var(--scl-white-2);
-    border-top: none;
-}
-
-.search-input-title {
-    height: 16px;
-    font-size: 12px;
-    color: var(--scl-gray-2);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: 12px;
-    width: 76px;
-}
-
-.search-lambo-input {
-    border: none;
-    outline: none;
-    background: none;
-    height: 16px;
-    font-size: 12px;
-    color: var(--scl-gray-1);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: 8px;
-    flex: 1;
-}
-
-
-/*输入框*/
-
-.search-lambo-input .van-cell {
-    padding: 10px 0;
-}
-
-
-/*多选*/
-
-.search-top-div {
-    display: flex;
-    justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
-    width: 100%;
-    position: fixed;
-    z-index: 300;
-}
-
-.search-cancel-btn {
-    border: none;
-    color: var(--scl-gray-3);
-}
-
-.search-confirm-btn {
-    border: none;
-    color: var(--scl-blue);
-}
-
-.search-select-title {
-    font-size: 16px;
-    font-weight: bold;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-radio-group {
-    position: relative;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell-group {
-    padding-top: 44px;
-}
-
-/*修改单选多选的滚动条样式*/
-/deep/ .van-cell:first-child {
-    padding-top: 10px;
-}
-
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar {
-    width: 6px;
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-thumb {
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(45, 140, 240, 0.6);
-}
-
-/*滚动条样式*/
-/deep/ ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
-    border-radius: var(--ind-border-radius-xl);
-    background: rgba(231, 242, 250, 0.4);
+.search-top-pop {
+    min-height: 145px;
+    max-height: 320px;
+    background-color: var(--scl-white-1)
+}
+
+.search-body {
+    border-top: none;
+    min-height: 70px;
+    max-height: 245px;
+    overflow: auto;
+}
+
+.search-bottom-btn {
+    padding: 18px 14px 14px 14px;
+}
+
+
+/*日期选择*/
+.search-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    align-items: center;
+    align-content: center;
+    height: 70px;
+    padding: 18px 0;
+    margin: 0 14px;
+    border-bottom: 1px solid var(--scl-white-2);
+    border-top: none;
+}
+
+.search-input-title {
+    height: 16px;
+    font-size: 12px;
+    color: var(--scl-gray-2);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 12px;
+    width: 76px;
+}
+
+.search-lambo-input {
+    border: none;
+    outline: none;
+    background: none;
+    height: 16px;
+    font-size: 12px;
+    color: var(--scl-gray-1);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 8px;
+    flex: 1;
+}
+
+
+/*输入框*/
+
+.search-lambo-input .van-cell {
+    padding: 10px 0;
+}
+
+
+/*多选*/
+
+.search-top-div {
+    display: flex;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    width: 100%;
+    position: fixed;
+    z-index: 300;
+}
+
+.search-cancel-btn {
+    border: none;
+    color: var(--scl-gray-3);
+}
+
+.search-confirm-btn {
+    border: none;
+    color: var(--scl-blue);
+}
+
+.search-select-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-radio-group {
+    position: relative;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell-group {
+    padding-top: 44px;
+}
+
+/*修改单选多选的滚动条样式*/
+/deep/ .van-cell:first-child {
+    padding-top: 10px;
+}
+
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar {
+    width: 6px;
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-thumb {
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(45, 140, 240, 0.6);
+}
+
+/*滚动条样式*/
+/deep/ ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--ind-border-radius-xl);
+    background: rgba(231, 242, 250, 0.4);
 }

package/util/assist.js

@@ -1,43 +1,43 @@
-// 深拷贝
-export function deepCopy(data) {
-  let i;
-  const t = typeOf(data);
-  let o;
-
-  if (t === 'array') {
-    o = [];
-  } else if (t === 'object') {
-    o = {};
-  } else {
-    return data;
-  }
-
-  if (t === 'array') {
-    for (i = 0; i < data.length; i++) {
-      o.push(deepCopy(data[i]));
-    }
-  } else if (t === 'object') {
-    for (i in data) {
-      o[i] = deepCopy(data[i]);
-    }
-  }
-  return o;
-}
-
-// 判断对象类型
-export function typeOf(obj) {
-  const toString = Object.prototype.toString;
-  const map = {
-    '[object Boolean]': 'boolean',
-    '[object Number]': 'number',
-    '[object String]': 'string',
-    '[object Function]': 'function',
-    '[object Array]': 'array',
-    '[object Date]': 'date',
-    '[object RegExp]': 'regExp',
-    '[object Undefined]': 'undefined',
-    '[object Null]': 'null',
-    '[object Object]': 'object'
-  };
-  return map[toString.call(obj)];
-}
+// 深拷贝
+export function deepCopy(data) {
+  let i;
+  const t = typeOf(data);
+  let o;
+
+  if (t === 'array') {
+    o = [];
+  } else if (t === 'object') {
+    o = {};
+  } else {
+    return data;
+  }
+
+  if (t === 'array') {
+    for (i = 0; i < data.length; i++) {
+      o.push(deepCopy(data[i]));
+    }
+  } else if (t === 'object') {
+    for (i in data) {
+      o[i] = deepCopy(data[i]);
+    }
+  }
+  return o;
+}
+
+// 判断对象类型
+export function typeOf(obj) {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object'
+  };
+  return map[toString.call(obj)];
+}

package/util/bus.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
-
-const Bus = new Vue();
-export default Bus;
+import Vue from 'vue'
+
+const Bus = new Vue();
+export default Bus;