wl-design-mobile 0.0.8 → 0.1.0

package/btn/components/lambo-info-btn.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="info-btn-div">
+    <div class="info-btn-div" >
       <van-button :disabled="disabled" :icon="icon" :icon-position="position" :loading="loading"
                   :type="'info'" :class="dynamicClass" size="normal" @click="handleClick"> {{ text }}
         <slot name="extend"></slot>
@@ -99,6 +99,13 @@ export default {
   border-radius: 3px;
 }
 
+.info-btn-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
 /* type[info] disable[true] plain[false] */
 /deep/ .info-btn-div .van-button--info {
   background-color: transparent;

package/btn/lambo-btn-group.vue

@@ -32,7 +32,7 @@ export default {
   display: flex;
   padding: 0 14px;
   background-color: var(--scl-white-1);
-  border-bottom: 1px solid  rgba(229, 229, 229, 1.5);
+  border-bottom: 1px solid var(--scl-white-2);
 }
 
 .button-group /deep/ .btn-sel {

package/btn/lambo-btn-split-line.vue

@@ -32,6 +32,7 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 .line-div {
   height: 12px;
   width: 1px;

package/btn/lambo-extend-btn.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="btn-sel">
+  <div class="btn-sel" ref="btnSel">
     <lambo-btn :type="type" :text="text" :size="size" :position="position" :disabled="disabled" :icon="icon"
-               :loading="loading"
-               :class="dynamicClass" @click="onClick"></lambo-btn>
-    <ul v-show="show" class="extend-ul">
+               :loading="loading" :class="dynamicClass" @click="onClick"></lambo-btn>
+    <ul v-show="show" class="extend-ul" @click="toggleClick">
       <slot></slot>
     </ul>
   </div>
@@ -53,6 +52,21 @@ export default {
     onClick() {
       this.show = !this.show;
     },
+    handleClickOutside(event) {
+      const btnSel = this.$refs.btnSel;
+      if (btnSel && !btnSel.contains(event.target)) {
+        this.show = false;
+      }
+    },
+    toggleClick() {
+      this.show = !this.show;
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside);
   },
   computed: {
     dynamicClass() {

package/btn/lambo-icon-btn.vue

@@ -1,12 +1,18 @@
 <template>
-  <van-button :icon="loadIcon" class="btn-icon" :loading="loading" :disabled="disabled" @click="handleClick"></van-button>
+  <div class="icon-btn-div">
+    <van-button :icon="loadIcon" :class="dynamicClass" :loading="loading" :disabled="disabled"
+                @click="handleClick"></van-button>
+  </div>
 </template>
 <script>
 
 export default {
   name: "LamboIconBtn",
   props: {
-    icon: String,
+    icon: {
+      type: String,
+      required: true
+    },
     loading: {
       type: Boolean,
       default: false
@@ -15,9 +21,15 @@ export default {
       type: Boolean,
       default: false
     },
+    border: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
-    return {}
+    return {
+
+    }
   },
   methods: {
     handleClick(event) {
@@ -26,9 +38,18 @@ export default {
   },
   computed: {
     loadIcon() {
-      // vite的写法，而且需要用相对路径
-      // return new URL('../../../assets/icon/' + this.icon, import.meta.url).href
       return require('../assets/icon/' + this.icon)
+    },
+    dynamicClass() {
+      if (this.border === true) {
+        return {
+          "btn-icon-border": true
+        }
+      } else {
+        return {
+          "btn-icon-border0": true
+        }
+      }
     }
   }
 }
@@ -36,7 +57,7 @@ export default {
 <style scoped>
 @import "../styles/index.less";
 
-.btn-icon {
+.btn-icon-border {
   border: 1px solid #e5e5e5;
   width: 40px;
   height: 30px;
@@ -44,7 +65,17 @@ export default {
   font-size: 12px;
   border-radius: 3px;
 }
-/deep/ .van-icon__image {
+
+.btn-icon-border0 {
+  border: none;
+  width: 40px;
+  height: 30px;
+  background-color: transparent;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+/deep/ .icon-btn-div .van-icon__image {
   width: 1em;
 }
 </style>

package/collapse/lambo-collapse.vue

@@ -8,8 +8,14 @@
             {{ title }}
           </div>
         </div>
+        <div slot="value" class="coll-title-icon">
+          <slot name="right-value">
+          </slot>
+        </div>
         <div slot="right-icon" class="coll-title-icon">
-          <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play" />
+          <slot name="right-icon">
+            <van-icon :color="'#0070D2'" class="van-icon van-cell__right-icon" name="play" />
+          </slot>
         </div>
         <slot></slot>
       </van-collapse-item>
@@ -65,7 +71,7 @@ export default {
 
 /* 覆盖折叠面板的标题的padding */
 /deep/ .van-cell {
-  padding: 12px 10px;
+  padding: 10px 14px 10px 10px;
 }
 
 /* 覆盖去掉折叠面板的标题下面的线 */
@@ -73,6 +79,13 @@ export default {
   border: none;
 }
 
+/deep/ .van-cell__title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: center;
+}
+
 /* 覆盖折叠面板的内容的padding */
 /deep/ .van-collapse-item__content {
   padding: 0px 0px 0px 0px;

package/doc/file/compoents/lambo-file-list.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div v-for="(item, index) in data" :key="index">
+      <lambo-file-row v-if="item && item.fileId" :file-id="item.fileId" :file-name="item.fileName" :if-delete="ifDelete" @on-delete="handleDelet($event, index)"></lambo-file-row>
+    </div>
+  </div>
+</template>
+<script>
+import LamboFileRow from "../../../doc/file/compoents/lambo-file-row.vue";
+
+export default {
+  name: 'LamboFileList',
+  components: {LamboFileRow},
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    handleDelet(item, index) {
+      console.log("lambo-file-list item:", item)
+      console.log("lambo-file-list index:", index)
+      this.data.splice(index, 1)
+      this.$emit("on-delete", {...item, index: index});
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

package/doc/file/compoents/lambo-file-row.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="file-container">
+    <div class="title-div">
+      <img :src="loadIcon" class="file-type-icon"/>
+      <p class="file-name">{{ fileName }}</p>
+    </div>
+    <div class="btn-div" v-if="ifDelete">
+      <van-icon name="cross" @click="deleteDoc"/>
+    </div>
+  </div>
+</template>
+<script>
+import excelIcon from "../../../assets/img/doc/excel.png";
+import mp3Icon from "../../../assets/img/doc/mp3.png";
+import otherIcon from "../../../assets/img/doc/other.png";
+import pdfIcon from "../../../assets/img/doc/pdf.png";
+import pptIcon from "../../../assets/img/doc/ppt.png";
+import txtIcon from "../../../assets/img/doc/txt.png";
+import videoIcon from "../../../assets/img/doc/video.png";
+import wordIcon from "../../../assets/img/doc/word.png";
+import zipIcon from "../../../assets/img/doc/zip.png";
+import photoIcon from "../../../assets/img/doc/photo.png";
+
+export default {
+  name: 'LamboFileRow',
+  components: {},
+  props: {
+    fileId: {
+      type: String,
+      required: true
+    },
+    fileName: {
+      type: String,
+      default: ''
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    loadIcon() {
+      return this.getFileIcon(this.fileName)
+    }
+  },
+  methods: {
+    deleteDoc() {
+      this.$emit("on-delete", {fileId: this.fileId, fileName: this.fileName});
+    },
+    getFileIcon(fileName) {
+      let suffix = ''
+      if (fileName.indexOf(".") > -1) {
+        suffix = fileName.split('.')[1]
+      }
+      let icon = otherIcon
+      switch (suffix) {
+        case 'mp4':
+        case 'm3u8':
+        case 'rmvb':
+        case 'avi':
+        case 'swf':
+        case '3gp':
+        case 'mkv':
+        case 'flv':
+          icon = videoIcon;
+          break;
+        case 'mp3':
+        case 'wav':
+        case 'wma':
+        case 'ogg':
+        case 'aac':
+        case 'flac':
+          icon = mp3Icon;
+          break;
+        case 'doc':
+        case 'pages':
+        case 'epub':
+        case 'docx':
+          icon = wordIcon;
+          break;
+        case 'pdf':
+          icon = pdfIcon;
+          break;
+        case 'txt':
+          icon = txtIcon;
+          break;
+        case 'numbers':
+        case 'csv':
+        case 'xls':
+        case 'xlsx':
+          icon = excelIcon;
+          break;
+        case 'keynote':
+        case 'ppt':
+        case 'pptx':
+          icon = pptIcon;
+          break;
+        case 'zip':
+          icon = zipIcon;
+          break;
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'tiff':
+        case 'tif':
+        case 'psd':
+        case 'webp':
+        case 'svg':
+        case 'raw':
+          icon = photoIcon;
+          break;
+        default:
+          icon = otherIcon;
+          break;
+      }
+      return icon;
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+<style scoped>
+.file-container {
+  margin: 0px 14px 5px 14px;
+  background-color: var(--scl-white-7);
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 10px;
+  border-radius: 3px;
+}
+
+.title-div {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+}
+
+.btn-div {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+}
+
+.file-type-icon {
+  width: 17px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+.file-name {
+  font-size: 14px;
+}
+</style>

package/doc/file/lambo-file-upload-collapse.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <lambo-collapse :title="title">
+      <template #right-icon>
+        <van-uploader v-model="fileArr" :show-upload="false" :preview-image="false" accept="*" :after-read="afterRead"
+                      @click-upload.stop="handleStopUploaderClick">
+          <lambo-icon-btn :icon="'fileImg.png'" :border="false"></lambo-icon-btn>
+        </van-uploader>
+      </template>
+      内容。。。。
+    </lambo-collapse>
+  </div>
+</template>
+<script>
+import LamboCollapse from "../../collapse/lambo-collapse.vue";
+import LamboBtn from "../../btn/lambo-btn.vue";
+import LamboIconBtn from "../../btn/lambo-icon-btn.vue";
+
+export default {
+  name: "LamboFileUploadCollapse",
+  components: {LamboIconBtn, LamboBtn, LamboCollapse},
+  props: {
+    title: {
+      type: String,
+      default: "文件上传"
+    }
+  },
+  data() {
+    return {
+      fileArr: []
+    }
+  },
+  methods: {
+    handleStopUploaderClick() {
+      console.log('handleStopUploaderClick click stop!');
+    },
+    upload() {
+
+    },
+    afterRead(files, detail) {
+      console.log(files, detail)
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+
+</style>

package/doc/file/lambo-file-upload.vue

@@ -2,7 +2,6 @@
   <div>
     <div class="fileUplodaContainer">
       <div class="setUploader">
-        <div class="fileUplodaTitle"><p>{{ title }}</p></div>
         <van-uploader v-model="fileList" :after-read="afterRead" :before-read="beforeRead" accept="*">
           <van-button :icon="fileImg" type="primary"></van-button>
         </van-uploader>

package/doc/img/lambo-img-upload.vue

@@ -1,12 +1,9 @@
 <template>
   <div>
-    <div class="imgUplodaContainer">
-      <div class="setUploader">
-        <div class="imgUplodaTitle"><p>{{ title }}</p></div>
-        <van-uploader v-model="fileList" :after-read="afterRead" :before-read="beforeRead" accept="image/*">
-          <van-button :icon="uploadImg" type="primary"></van-button>
-        </van-uploader>
-      </div>
+    <div class="img-upload-container">
+      <van-uploader v-model="fileList" :after-read="afterRead" :before-read="beforeRead" accept="image/*"/>
+        <van-button class="img-upload-btn" icon="upgrade" type="default"></van-button>
+
     </div>
   </div>
 </template>
@@ -106,4 +103,18 @@ export default {
 <style scoped>
 @import "../../styles/index.less";
 @import './styles/css/index.css';
+
+.img-upload-btn {
+  height: 80px;
+  width: 80px;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  background-color: var(--scl-white-4);
+}
+/*!*无框类型按钮样式 *!
+/deep/ .img-upload-container .van-button--default {
+  background-color: var(--scl-white-4);
+  border: none;
+}*/
+
 </style>

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

@@ -1,53 +1,32 @@
-.imgUplodaContainer {
-    padding: 12px 14px;
-    background: var(--scl-white-1);
+.img-upload-container {
+    padding: 0px 14px 12px 14px;
 }
 
-.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;
@@ -56,7 +35,7 @@
     gap: 10px;
 }
 
-/*右上角上传按钮位置*/
+!*右上角上传按钮位置*!
 /deep/ .van-button--normal {
     width: 20px;
     position: absolute;
@@ -64,23 +43,7 @@
     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;
@@ -95,4 +58,4 @@
 /deep/ .van-uploader__preview-image {
     width: auto;
     height: 95px;
-}
+}*/

package/edit/select/lambo-edit-date-range.vue

@@ -131,5 +131,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

package/edit/select/lambo-edit-date-time.vue

@@ -101,5 +101,10 @@ export default {
 }
 </script>
 <style scoped>
-@import "styles/css/index.css";
+@import "../../styles/index.less";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

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

@@ -104,5 +104,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

package/edit/select/lambo-edit-input-textarea.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="edit-box" @click="changeColor">
     <div class="edit-left-box">
-      <div class="edit-left-top">
+      <div v-if="title" class="edit-left-top">
         <div v-if="required" class="edit-red-icon">
           <lambo-required-red-star :required="required"></lambo-required-red-star>
         </div>
         <div class="edit-title">{{ title }}</div>
       </div>
       <van-field v-model="innerValue" :autosize="true" :clearable="true" :maxlength="maxlength"
-                 :placeholder="placeholder" :show-word-limit="showWordLimit" :type="type"
-                 class="edit-lambo-input-textarea" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
+                 :placeholder="placeholder" :type="type" class="edit-lambo-input-textarea" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
     </div>
     <div v-if="icon" class="edit-right-icon">
       <lambo-vector-icon :icon="icon"></lambo-vector-icon>
@@ -45,16 +44,12 @@ export default {
     },
     title: {
       type: String,
-      default: false,
+      default: '',
     },
     value: {
       type: String,
       default: '',
     },
-    showWordLimit: {
-      type: Boolean,
-      default: false,
-    },
     icon: {
       type: String,
       default: "",
@@ -88,5 +83,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

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

@@ -8,8 +8,7 @@
         <div class="edit-title">{{ title }}</div>
       </div>
       <van-field v-model="innerValue" :clearable="true" :maxlength="maxlength" :placeholder="placeholder"
-                 class="edit-lambo-input" :show-word-limit="showWordLimit"
-                 :type="type" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
+                 class="edit-lambo-input" :type="type" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
     </div>
     <div class="edit-right-icon" v-if="icon">
       <lambo-vector-icon :icon="icon"></lambo-vector-icon>
@@ -51,10 +50,6 @@ export default {
       type: String,
       default: '',
     },
-    showWordLimit: {
-      type: Boolean,
-      default: false,
-    },
     icon: {
       type: String,
       default: "",
@@ -88,5 +83,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

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

@@ -6,10 +6,10 @@
           <div class="edit-red-icon" v-if="required">
             <lambo-required-red-star :required="required"></lambo-required-red-star>
           </div>
-          <div class="edit-title">{{ title }}222</div>
+          <div class="edit-title">{{ title }}</div>
         </div>
         <van-field v-model="valName" :placeholder="placeholder" class="edit-lambo-input"
-                   clear-trigger="focus"></van-field>
+                   :readonly="true" clear-trigger="focus"></van-field>
       </div>
       <div class="edit-right-icon" v-if="icon">
         <lambo-vector-icon :icon="icon" @click="onOpen"></lambo-vector-icon>
@@ -156,5 +156,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

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

@@ -149,5 +149,9 @@ export default {
 </script>
 <style scoped>
 @import "../../styles/index.less";
-@import "styles/css/index.css";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
 </style>

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

@@ -10,19 +10,14 @@
 
 .edit-left-box {
     width: 100%;
-}
-
-/* 覆盖value的padding */
-.edit-left-box /deep/ .van-cell {
-    padding: 0;
+    padding: 0px 0px 0px 14px;
 }
 
 .edit-left-top {
     display: flex;
     align-items: center;
     height: 16px;
-    padding: 0 15px;
-    margin-bottom: 12px
+    margin-bottom: 10px
 }
 
 .edit-red-icon {
@@ -46,7 +41,6 @@
     justify-content: flex-start;
     align-items: center;
     flex: 1;
-    margin-right: 8px;
 }
 
 .edit-lambo-input-textarea {
@@ -63,10 +57,10 @@
 
 .edit-right-icon {
     display: flex;
-    align-items: center
+    align-items: center;
+    margin-right: 14px;
 }
 
-
 .edit-top-div {
     display: flex;
     justify-content: space-between;
@@ -102,11 +96,12 @@
     padding-top: 44px;
 }
 
-/*修改单选多选的滚动条样式*/
+/*
+!*修改单选多选的滚动条样式*!
 /deep/ .van-cell:first-child {
     padding-top: 10px;
 }
-
+*/
 
 /*滚动条样式*/
 /deep/ ::-webkit-scrollbar {

package/list/lambo-table-list.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="container">
+    <div class="table-head">
+      <div class="table-cell" :style="{'--width': item.width + 'px' || 'auto'}" v-for="(item,index) in columns" :key="index" >{{ item.title }}</div>
+    </div>
+    <van-list
+        ref="vanList1"
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+        offset="10"
+    >
+      <div class="table-row" v-for="(item,index) in list" :key="index">
+        <template v-for="column in columns">
+          <div v-if="column.type === 'index'" v-bind:key="column.key" class="table-cell table-cell-list" :style="{'--width': column.width + 'px' || 'auto'}">{{index + 1}}</div>
+          <div v-else class="table-cell table-cell-list" v-bind:key="column.key" :style="{'--width': column.width + 'px' || 'auto'}">{{item[column.key]}} </div>
+        </template>
+      </div>
+    </van-list>
+  </div>
+</template>
+<script>
+import {axios} from "../util/axios/index"
+import {Toast} from "vant"
+
+export default {
+  name: "LamboTableList",
+  components: {},
+  props: {
+    heightRatio: {
+      type: Number,
+      default: 0.5,
+    },
+    url: {
+      type: String
+    },
+    searchParams: {
+      type: Object
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      finished: true,
+      finishedTxt: "",
+      pageNum: 1, // 当前页数
+      pageSize: 10, // 每页数据条数
+      listHeight: '100vh', // 默认列表高度为视口高度的80%
+      refreshing: false,
+      offset: 0,
+      limit: 10,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getListHeight();
+  },
+  watch: {
+    searchParams: {
+      handler: function (val, oldVal) {
+        console.log("searchParams -- val,oldVal:", {val, oldVal})
+        console.log("searchParams -- val===oldVal:", val === oldVal)
+        //查询时重置页码
+        this.pageNum = 1
+        this.offset = 0
+        this.limit = 10
+        this.list = []
+
+        this.onLoad()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    onLoad() {
+      if (this.refreshing) {
+        this.list = [];
+        this.refreshing = false;
+      }
+
+      let params = {offset: this.offset, limit: this.limit, ...this.searchParams}
+      axios.get(this.url, {params}).then(res => {
+        console.log("lambo-init-table-list -- onLoad -- loadData:", res)
+        if (res && res.code === 1) {
+          let pageData = res.data
+
+          if (pageData && pageData.rows.length > 0) {
+            for (let item of pageData.rows) {
+              if (this.list.length < pageData.total) {
+                this.list.push(item)
+                this.finished = false
+              } else {
+                this.finished = true // 数据加载完毕
+              }
+            }
+            this.offset = this.pageNum * 10
+            this.pageNum++;
+            this.finishedTxt = "没有更多了"
+          } else {
+            this.finished = true; // 数据加载完毕
+          }
+          this.loading = false; // 加载状态结束
+        } else {
+          console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]数据失败", res)
+          Toast.fail("查询[" + this.title + "]数据失败:" + res.data || '')
+        }
+      }).catch(err => {
+        console.error("lambo-init-list -- onLoad -- 查询[" + this.title + "]异常:", err)
+        Toast.fail("查询[" + this.url + "]数据异常")
+      })
+    },
+    getListHeight() {
+      const windowHeight = window.innerHeight;
+      this.listHeight = `${windowHeight * this.heightRatio}px`;
+    },
+    onRefresh() {
+      console.log("lambo-init-list -- onRefresh")
+
+      this.finished = false
+      this.pageNum = 1
+      this.offset = 0
+      this.limit = 10
+
+      this.loading = true
+      this.onLoad()
+    }
+  },
+  beforeDestroy() {
+    this.pageNum = 1
+    this.offset = 0
+    this.limit = 10
+    this.list = []
+  },
+};
+</script>
+<style scoped>
+:root {
+  --width: auto
+}
+
+.container {
+  background: var(--scl-white-1);
+}
+
+.table-head {
+  display: flex;
+  margin-bottom: 5px;
+  color: var(--scl-blue);
+}
+
+.table-row {
+  display: flex;
+}
+
+.table-cell {
+  flex: 0 0 var(--width);
+  text-align: center;
+  padding: 5px;
+  min-width: 0;
+  word-wrap: break-word;
+}
+
+.table-cell-list {
+  font-size: var(--ind-font-size-sm);
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wl-design-mobile",
-  "version": "0.0.8",
-  "description": "",
+  "version": "0.1.0",
+  "description": "0.0.9",
   "main": "index.js",
   "author": "finch",
   "license": "ISC",

package/styles/base.less

@@ -26,6 +26,7 @@
   --scl-white-4: #F5F5F5FF;
   --scl-white-5: #EDEDEDFF;
   --scl-white-6: #D7D7D7;
+  --scl-white-7: #F2F2F2;
 
   --scl-gray-1: #333333;
   --scl-gray-2: #666666;

package/styles/components/search.less

@@ -5,7 +5,7 @@
   margin-left: 1%;
   font-size: 14px;
   color: var(--scl-white-1);
-  border-radius: 6px;
+  border-radius: 3px;
   background-color: var(--scl-blue);
   border: none;
 }
@@ -22,7 +22,7 @@
   margin-right: 1%;
   font-size: 14px;
   color: var(--scl-blue);
-  border-radius: 6px;
+  border-radius: 3px;
   background-color: var(--scl-white-4);
   border: 1px solid var(--scl-blue);
 }

package/tag/lambo-tag.vue

@@ -3,7 +3,6 @@
     <van-tag :class="tagClass">{{ title }}</van-tag>
   </div>
 </template>
-
 <script>
 export default {
   name: "LamboTag",
@@ -19,7 +18,6 @@ export default {
   }
 }
 </script>
-
 <style scoped>
 
-</style>
+</style>

package/title/lambo-title1.vue

@@ -32,11 +32,11 @@ export default {
     },
     marginBottom: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     border: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   data() {
@@ -123,7 +123,7 @@ export default {
 /* 控制 .opt-btn-div 内的元素的右边距为 6px */
 .opt-btn-div > * {
   margin-right: 6px;
-  border-radius: 6px;
+  border-radius: 3px;
 }
 
 /* 控制 .opt-btn-div 内的最后一个元素的右边距为 0px */