轮播图组件

zhangzzzz
1 parent b2500839
Showing 5 changed files with 324 additions and 109 deletions
src/views/bigscreenDesigner/designer/components/customUploadMulti.vue
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
src/views/bigscreenDesigner/designer/tools/configure/widget-slider.js
src/views/bigscreenDesigner/designer/tools/main.js
src/views/bigscreenDesigner/designer/widget/widgetSlider.vue
+<template>
+  <div>
+    <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput">
+      <template slot="append">
+        <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i>
+      </template>
+    </el-input>
+
+
+    <!-- 弹窗 -->
+    <el-dialog title="图库" :visible.sync="dialogVisible" top="1vh">
+      <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button>
+      <input type="file" class="file" ref="files" @change="getImages" />
+      <div class="title">可选列表</div>
+      <div class="image-list">
+        <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy
+          @click="imageClickHander(item)"></el-image>
+      </div>
+      <div class="title">已选列表</div>
+      <div class="image-selected-list">
+        <template v-for="item in selectedFileList">
+          <el-image class="image" :key="item.fileId" :src="item.urlPath"></el-image>
+          <i class="close el-icon-delete" @click="deleteFileHandler(item)"></i>
+        </template>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
+
+
+  </div>
+</template>
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import { getFielList } from "@/api/file"
+export default {
+  name: 'custom-upload-new',
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    value: {
+      type: "",
+      default: ""
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false, // 弹窗状态
+      requestUrl: process.env.BASE_API + "/file/upload",
+      headers: {
+        Authorization: getToken()
+      },
+      fileList: [], // 图片列表
+      selectedFileList: [], // 选中的图片列表
+      uploadImgUrl: ""
+    };
+  },
+  created() {
+    this.uploadImgUrl = this.value;
+    this.getFielList();
+  },
+  methods: {
+    // 获取图片列表
+    async getFielList() {
+      const rs = await getFielList();
+      if (rs.code === 200 || rs.code === "200") {
+        let fileList = rs.data;
+        fileList.reverse();
+        this.fileList = fileList;
+      }
+    },
+    uploadHandler() {
+      this.$refs.files.click();
+    },
+    getImages(el) {
+      const file = el.target.files[0];
+      const type = file.type.split("/")[0];
+      if (type === "image") {
+        this.upload(file);
+      } else {
+        this.$message.warning("只能上传图片格式")
+      }
+    },
+    // 图片上传
+    upload(file) {
+      let that = this;
+      let formdata = new FormData();
+      formdata.append("file", file);
+      axios
+        .post(this.requestUrl, formdata, {
+          headers: that.headers
+        })
+        .then(response => {
+          let res = response.data;
+          if (res.code === "200") {
+            this.getFielList();
+          }
+        });
+    },
+    // 文本框url改变
+    changeInput() {
+      this.$emit("input", this.uploadImgUrl);
+      this.$emit("change", this.uploadImgUrl);
+    },
+    // 图片点击事件
+    imageClickHander(item) {
+      if (!this.selectedFileList.includes(item)) {
+        this.selectedFileList.push(item);
+      }
+    },
+    // 删除已选图片
+    deleteFileHandler(item) {
+      this.selectedFileList = this.selectedFileList.filter(value => {
+        return value.fileId !== item.fileId;
+      });
+    },
+    // 确定按钮
+    confirm() {
+      const urlList = this.selectedFileList.map(item => {return item.urlPath});
+      const urlPath = urlList.toString();
+      this.$emit("input", urlPath);
+      this.$emit("change", urlPath);
+      this.dialogVisible = false;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.file {
+  display: none;
+}
+
+/deep/.el-input-group__append,
+/deep/.el-input-group__prepend {
+  padding: 0 10px !important;
+  overflow: hidden;
+}
+
+.iconfont {
+  cursor: pointer;
+  font-size: 12px;
+}
+
+
+/deep/ .el-dialog .el-dialog__header,
+/deep/ .el-dialog__body,
+/deep/.el-dialog__footer {
+  background: #1b1e25;
+}
+
+.image-list {
+  margin-top: 20px;
+  height: 40vh;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 8px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    background: #535353;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    /*滚动条里面轨道*/
+    border-radius: 10px;
+    background: #1b1e25;
+  }
+
+  .image {
+    width: 20%;
+    padding: 0 0.5px 0 0.5px;
+    min-height: 90px;
+
+    /deep/ .el-image__error {
+      width: 100%;
+      height: 100%;
+      min-height: 90px;
+    }
+  }
+}
+
+.image-selected-list {
+  @extend .image-list;
+  height: 20vh;
+  position: relative;
+
+  .close {
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+}
+
+.title {
+  color: #909399;
+}
+</style>
@@ -66,6 +66,11 @@
               @change="changed($event, item.name)">
             </CustomUploadNew>
+            <CustomUploadMulti v-if="item.type == 'custom-upload-multi'"
+              v-model="formData[item.name]"
+              @change="changed($event, item.name)">
+            </CustomUploadMulti>
+
             <customUpload
               v-if="item.type == 'custom-upload'"
               v-model="formData[item.name]"
@@ -283,6 +288,7 @@ import customColorComponents from &quot;./customColorComponents&quot;;
 import dynamicAddTable from "./dynamicAddTable.vue";
 import customUpload from "./customUpload.vue";
 import CustomUploadNew from "./customUploadNew";
+import CustomUploadMulti from "./customUploadMulti";
 export default {
   name: "DynamicForm",
   components: {
@@ -292,7 +298,8 @@ export default {
     customColorComponents,
     dynamicAddTable,
     customUpload,
-    CustomUploadNew
+    CustomUploadNew,
+    CustomUploadMulti
   },
   model: {
     prop: "value",
@@ -20,6 +20,7 @@ export const widgetSliders =  {
           name: 'layerName',
           required: false,
           placeholder: '',
+          value: '轮播图片'
         },
         {
           type: 'el-switch',
@@ -34,6 +35,23 @@ export const widgetSliders =  {
           name: 'tabDirection',
           required: false,
           placeholder: '',
+          selectOptions: [
+            {code: 'horizontal', name: '横向'},
+            {code: 'vertical', name: '竖向'},
+          ],
+          value: 'horizontal'
+        },
+        {
+          type: 'el-select',
+          label: '类型',
+          name: 'tabType',
+          required: false,
+          placeholder: '',
+          selectOptions: [
+            {code: '', name: '普通'},
+            {code: 'card', name: '立体'},
+          ],
+          value: ''
         },
         {
           type: 'el-select',
@@ -41,6 +59,11 @@ export const widgetSliders =  {
           name: 'tabSelector',
           required: false,
           placeholder: '',
+          selectOptions: [
+            {code: '', name: '显示'},
+            {code: 'none', name: '不显示'},
+          ],
+          value: ''
         },
         {
           type: 'el-input-number',
@@ -48,6 +71,15 @@ export const widgetSliders =  {
           name: 'tabTime',
           required: false,
           placeholder: '',
+          value: 3000
+        },
+        {
+          type: 'custom-upload-multi',
+          label: '图片地址',
+          name: 'imageAdress',
+          required: false,
+          placeholder: '',
+          value: '',
         },
       ],
       // 数据
@@ -60,6 +92,7 @@ export const widgetSliders =  {
           name: 'left',
           required: true,
           placeholder: '',
+          value: 0,
         },
         {
           type: 'el-input-number',
@@ -67,6 +100,7 @@ export const widgetSliders =  {
           name: 'top',
           required: true,
           placeholder: '',
+          value: 0,
         },
         {
           type: 'el-input-number',
@@ -74,6 +108,7 @@ export const widgetSliders =  {
           name: 'width',
           required: true,
           placeholder: '该容器在1920px大屏中的宽度',
+          value: 1000,
         },
         {
           type: 'el-input-number',
@@ -81,6 +116,7 @@ export const widgetSliders =  {
           name: 'height',
           required: true,
           placeholder: '该容器在1080px大屏中的高度',
+          value: 600,
         },
       ],
     }
@@ -47,7 +47,7 @@ export const widgetTool = [
   widgetHref,
   widgetTime,
   widgetImage,
-  //  widgetSliders,//待开发 轮播图，目前是单传图片 需要多传图片
+  widgetSliders,//待开发 轮播图，目前是单传图片 需要多传图片
   widgetVideo,
   widgetTable,
   widgetIframe,
 <template>
-  <superslide :options="options" class="slideBox">
-    <!-- slides -->
-    <div class="bd">
-      <ul>
-        <li>
-          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=717294809,2494697366&fm=26&gp=0.jpg" alt="">
-        </li>
-        <li>
-          <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2090090414,3038344648&fm=26&gp=0.jpg" alt="">
-        </li>
-      </ul>
-    </div>
-    <!-- Optional controls slots -->
-    <!-- slot="titCell" -->
-    <div slot="titCell" class="hd">
-      <ul>
-        <li class="on">1</li>
-        <li class="">2</li>
-        <li class="">3</li>
-      </ul>
-    </div>
-    <!-- slot="prev" -->
-    <a slot="prev" class="prev" href="javascript:void(0)" />
-    <!-- slot="next" -->
-    <a slot="next" class="next" href="javascript:void(0)" />
-    <!-- slot="pageStateCell" -->
-    <span slot="pageStateCell" class="pageState" />
-  </superslide>
+  <div :style="style">
+    <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
+      :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
+      :type="carouselStyle.type" :key="carouselKey">
+      <el-carousel-item v-for="(src, index) in carouselStyle.imageList" :key="index">
+        <img class="carousel-img" :src="src" alt="" />
+      </el-carousel-item>
+    </el-carousel>
+
+  </div>
 </template>
 <script>
 export default {
   name: 'WidgetSlider',
   components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
   data() {
     return {
-      options: {
-        mainCell: '.bd ul',
-        autoPlay: true,
-        effect: 'leftLoop',
-      },
+      options: {},
+      carouselKey: 0, // 重新渲染组件用
+    };
+  },
+  computed: {
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    style() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        background: this.transStyle.background,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px",
+      };
+    },
+    carouselStyle() {
+      return {
+        imageList: this.transStyle.imageAdress.split(','),
+        direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
+        indicatorPosition: this.transStyle.tabSelector,
+        interval: this.transStyle.tabTime,
+        type: this.transStyle.tabType
+      }
     }
   },
-  mounted() {},
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+      },
+      deep: true
+    },
+    carouselStyle: {
+      handler(newValue, oldValue) {
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+          this.carouselKey++;
+        }
+      },
+    },
+  },
+  created() {
+    this.options = this.value;
+  },
+  mounted() { },
   methods: {},
 }
 </script>
 <style scoped lang="scss">
-.slideBox {
-  width: 450px;
-  height: 230px;
-  overflow: hidden;
-  position: relative;
-}
-.slideBox .hd {
-  height: 15px;
-  overflow: hidden;
-  position: absolute;
-  right: 5px;
-  bottom: 5px;
-  z-index: 1;
-}
-.slideBox .hd ul {
+.carousel {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  zoom: 1;
-  float: left;
-}
-.slideBox .hd ul li {
-  float: left;
-  margin-right: 2px;
-  width: 15px;
-  height: 15px;
-  line-height: 14px;
-  text-align: center;
-  background: #fff;
-  cursor: pointer;
-}
-.slideBox .hd ul li.on {
-  background: #f00;
-  color: #fff;
 }
-.slideBox .bd {
-  position: relative;
+
+.carousel-img {
+  width: 100%;
   height: 100%;
-  z-index: 0;
-}
-.slideBox .bd li {
-  zoom: 1;
-  vertical-align: middle;
-}
-.slideBox .bd img {
-  width: 450px;
-  height: 230px;
-  display: block;
+  object-fit: contain;
 }
-/* 下面是前/后按钮代码，如果不需要删除即可 */
-.slideBox .prev,
-.slideBox .next {
-  position: absolute;
-  left: 3%;
-  top: 50%;
-  margin-top: -25px;
-  display: block;
-  width: 32px;
-  height: 40px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAAAgCAMAAADE+3+QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkYyNjE4RUVDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkYyNjE4RUZDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjI2MThFQ0NGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjI2MThFRENGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmLDzTcAAAAJUExURcHBwf///////wCiYf4AAAADdFJOU///ANfKDUEAAACjSURBVHja5JnRDUQhDMNM9h/6STfCgeKPsIBjhGgpnHPy7wLyYLUicC5IPJGtJfi5ngsSL1Q7AYgsW8QTV7YJJ6psFU1M2S6YiLJlLPFk21CiydaRaOT+7mKxhYOERDcuCBy+cheiJHBqHEYGqZzPug6d4aG7aajmDPUSQz3iUO8/9KYbeqsPzWCGZmtDM9OhWfjSH8fY31UuSMkT2UqET4ABAHo9NyVXKF5RAAAAAElFTkSuQmCC) -110px
-    5px no-repeat;
-  filter: alpha(opacity=50);
-  opacity: 0.5;
-}
-.slideBox .next {
-  left: auto;
-  right: 3%;
-  background-position: 8px 5px;
-}
-.slideBox .prev:hover,
-.slideBox .next:hover {
-  filter: alpha(opacity=100);
-  opacity: 1;
-}
-.slideBox .prevStop {
-  display: none;
-}
-.slideBox .nextStop {
-  display: none;
+
+/deep/ .el-carousel__mask {
+  background: transparent;
 }
 </style>