wl-design-mobile 0.0.9 → 0.1.1

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-icon-btn.vue

@@ -1,12 +1,20 @@
 <template>
-  <van-button :icon="loadIcon" class="btn-icon" :loading="loading" :disabled="disabled" @click="handleClick"></van-button>
+  <div>
+    <div class="icon-btn-div">
+      <van-button :icon="loadIcon" :class="dynamicClass" :loading="loading" :disabled="disabled"
+                  @click="handleClick"></van-button>
+    </div>
+  </div>
 </template>
 <script>
 
 export default {
   name: "LamboIconBtn",
   props: {
-    icon: String,
+    icon: {
+      type: String,
+      required: true
+    },
     loading: {
       type: Boolean,
       default: false
@@ -15,9 +23,15 @@ export default {
       type: Boolean,
       default: false
     },
+    border: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
-    return {}
+    return {
+
+    }
   },
   methods: {
     handleClick(event) {
@@ -26,9 +40,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 +59,7 @@ export default {
 <style scoped>
 @import "../styles/index.less";
 
-.btn-icon {
+.btn-icon-border {
   border: 1px solid #e5e5e5;
   width: 40px;
   height: 30px;
@@ -44,7 +67,16 @@ 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;
+}
+
+/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,42 @@
+<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="handleDelete($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: {
+    handleDelete(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,164 @@
+<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 = ''
+      let splitArr = fileName.split('.')
+      if(splitArr && splitArr.length > 0){
+        suffix = splitArr[splitArr.length - 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;
+    },
+  }
+}
+</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,106 @@
+<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="'upload.png'" :border="false"></lambo-icon-btn>
+        </van-uploader>
+      </template>
+      <lambo-file-list :if-delete="ifDelete" :data.sync="data" @on-delete="handleDelete($event)"></lambo-file-list>
+    </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";
+import {axios} from "../../util/axios";
+import {fileUploadUrl} from "../../api/doc";
+import {Toast} from "vant";
+import LamboFileList from "../../doc/file/compoents/lambo-file-list.vue";
+
+export default {
+  name: "LamboFileUploadCollapse",
+  components: {LamboFileList, LamboIconBtn, LamboBtn, LamboCollapse},
+  props: {
+    title: {
+      type: String,
+      default: "文件上传"
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      fileArr: []
+    }
+  },
+  methods: {
+    handleStopUploaderClick() {
+      console.log('handleStopUploaderClick click stop!');
+    },
+    afterRead(fileObj, detail) {
+      console.log(fileObj, detail)
+      let file = fileObj.file;
+
+/*       //测试使用代码
+      let item = {
+        fileId: "123",
+        fileName: file.name,
+        fileSuffix: ""
+      }
+      this.data.push(item)
+      Toast.success('上传文件成功');
+      this.$emit("on-success", this.fileList)*/
+
+      let formData = new FormData();
+      formData.append('file', file);
+      axios.post(fileUploadUrl, formData, {}).then(res => {
+        console.log("上传路径:" + fileUploadUrl + ",上传结果:" + res)
+        if (res && res.code == "1") {
+          let fileData = res.data;
+          if (fileData && fileData.length > 0) {
+            let resFile = fileData[0]
+            if (resFile && resFile.fileId) {
+              let item = {
+                fileId: resFile.fileId,
+                fileName: resFile.fileName || file.name,
+              }
+              this.data.push(item)
+              Toast.success(file.name + '上传成功');
+              this.$emit("on-success", this.data)
+            } else {
+              Toast.fail("文件"+ file.name + "为空，上传失败")
+              this.$emit("on-failed", null);
+            }
+          } else {
+            Toast.fail("文件"+ file.name + "为空，上传失败")
+            this.$emit("on-failed", null);
+          }
+        } else {
+          Toast.fail("文件"+ file.name + "上传失败，请联系管理员")
+          this.$emit("on-failed", null);
+        }
+      }).catch((e) => {
+        Toast.fail("文件"+ file.name + "上传异常!");
+        console.error("文件上传异常:", e)
+      })
+    },
+    handleDelete(obj) {
+      console.log("lambo-file-upload-collapse fileId:", obj.fileId)
+      console.log("lambo-file-upload-collapse fileName:", obj.fileName)
+      console.log("lambo-file-upload-collapse index:", obj.index)
+      this.$emit("on-delete", obj);
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/doc/file/styles/css/index.css

@@ -1,118 +0,0 @@
-.fileUplodaContainer {
-    padding: 12px 14px;
-    background: var(--scl-white-1);
-}
-
-.fileUplodaTitle {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.fileUplodaTitle p {
-    width: 100%;
-    color: var(--scl-gray-3);
-    font-size: 14px;
-    position: absolute;
-    top: -2px;
-}
-
-.fileUplodaTitle 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-button--normal {
-    width: 20px;
-    position: absolute;
-    top: -1px;
-    right: -8px;
-}
-
-/*文件列表整体位置*/
-/deep/ .van-uploader__wrapper {
-    margin-top: 20px;
-}
-
-/*文件预览框样式*/
-/deep/ .van-uploader__file {
-    width: 101%;
-    height: 38px;
-    background-color: #F2F2F2;
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 5px;
-    align-items: stretch;
-    align-content: space-around;
-    flex-direction: row;
-}
-
-/*文件名样式*/
-/deep/ .van-uploader__file-name {
-    width: 92%;
-    margin-top: 1px;
-    text-align: left;
-    font-size: 14px;
-}
-
-/*文件类型icon样式*/
-/deep/ .van-uploader__file-icon {
-    width: 17px;
-    height: 20px;
-}
-
-/*控制多文件换行样式*/
-/deep/ .van-uploader__preview {
-    width: 100%;
-    margin: 0 0 10px 0;
-}
-
-/*覆盖旧删除按钮样式*/
-/deep/ .van-uploader__preview-delete {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0)
-}
-
-/*新删除按钮图标样式*/
-/deep/ .van-uploader__preview-delete-icon {
-    top: 6px;
-    right: 4px;
-    color: var(--scl-gray-2);
-    font-size: 28px;
-}
-
-/*控制上传功能覆盖区域*/
-/deep/ .van-uploader__input {
-    height: 25px;
-    width: 25px;
-    position: absolute;
-    left: 95%;
-}

package/doc/img/comonents/lambo-img-grid.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="img-grid-container">
+      <van-grid :border="false" :column-num="5" :gutter="0">
+        <van-grid-item v-for="(item, index) in data" :key="index" @click="imgMore(item)">
+          <div class="img-cell-div">
+            <van-image :src="item.src"/>
+            <span v-if="ifDelete" class="remove-x" @click.stop="deleteImg(item, index)">×</span>
+          </div>
+        </van-grid-item>
+      </van-grid>
+    </div>
+  </div>
+
+</template>
+<script>
+import {ImagePreview, Toast} from 'vant';
+
+export default {
+  components: {
+
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    ifDelete: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: String,
+      default: "10rem"
+    },
+    height: {
+      type: String,
+      default: "10rem"
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    deleteImg(item, index) {
+      console.log("lambo-img-grid deleteImg item:", item)
+      console.log("lambo-img-grid deleteImg index:", index)
+      this.data.splice(index, 1)
+      this.$emit("on-delete", {...item, index: index});
+    },
+    imgMore(item) {
+      console.log("imgMore:", item)
+      if (item && item.src) {
+        ImagePreview([
+          item.src
+        ])
+      } else {
+        Toast.fail("图片资源无效，无法预览")
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.img-grid-container {
+  margin: 0px 14px 10px 14px;
+}
+
+/deep/ .img-grid-container .van-grid-item__content {
+  padding: 0px 5px 5px 0px;
+}
+
+.img-cell-div {
+  width: 68px;
+  height: 68px;
+  position: relative;
+  display: inline-block;
+  border-radius: 3px;
+}
+
+.remove-x {
+  position: absolute;
+  top: -2px; /* 图标距离顶部的距离 */
+  right: -2px; /* 图标距离右侧的距离 */
+  background: rgb(204, 204, 204, 0.5); /* 半透明背景色 */
+  color: white;
+  border: none;
+  border-radius: 50%; /* 圆形图标 */
+  width: 16px; /* 图标宽度 */
+  height: 16px; /* 图标高度 */
+  text-align: center;
+  line-height: 16px; /* 垂直居中 */
+  cursor: pointer;
+  font-size: 12px; /* 图标大小 */
+  z-index: 50; /* 确保图标在图片之上 */
+}
+
+.remove-x:hover {
+  background: rgb(204, 204, 204, 1); /* 半透明背景色 */
+}
+</style>