qimall/addons/GroupBuy/backend/views/default/diy-index.php

<script src="/resources/js/html2canvas.min.js"></script>
<script type="text/javascript" src="/resources/js/hotzone.js"></script>
<script>
   function getRandomId(list = []) {
      var initArr = [] // getInitArr(); // 拿到已有的id -- 一般不会冲突
      // 随机id不能和以前编辑冲突
      function generateId() {
         const s = [];
         const hexDigits = '0123456789abcdef';
         for (let i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
         }
         s[14] = '4';
         s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
         s[8] = s[13] = s[18] = s[23] = '-';
         const uuid = s.join('');
         if (initArr.some(str => (str === uuid))) { // 存在已有数据
            return generateId()
         }
         return uuid;
      }

      function getInitArr() {
         return list.map(item => {
            return item.id
         })
      }
      var id = generateId()
      return id
   }

   function deepClone(obj) {
      var o, i, j, k;
      if (typeof(obj) != "object" || obj === null) return obj;
      if (obj instanceof(Array)) {
         o = [];
         i = 0;
         j = obj.length;
         for (; i < j; i++) {
            if (typeof(obj[i]) == "object" && obj[i] != null) {
               o[i] = arguments.callee(obj[i]);
            } else {
               o[i] = obj[i];
            }
         }
      } else {
         o = {};
         for (i in obj) {
            if (typeof(obj[i]) == "object" && obj[i] != null) {
               o[i] = arguments.callee(obj[i]);
            } else {
               o[i] = obj[i];
            }
         }
      }
      return o;
   }

   function getObjValue(target = {}, keys = [], def) {
      let obj = deepClone(target)
      try {
         value = keys.reduce((prev, key) => {
            return prev[key]
         }, target)
      } catch (error) {
         value = def
      }
      return value || def
   }

   function deepEqual(x, y) {
      // 指向同一内存时
      if (x === y) {
         return true;
      } else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
         if (Object.keys(x).length !== Object.keys(y).length) {
            return false;
         }
         for (var prop in x) {
            if (y.hasOwnProperty(prop)) {
               if (!deepEqual(x[prop], y[prop])) return false;
            } else {
               return false;
            }
         }
         return true;
      } else {
         return false;
      }
   }
   var basicMixins = {
      data() {
         return {
            defaultForm: {
               // default_color: "transparer",
               colorInfos: ['底部背景'],
               sizeInfos: ['上边距', '下边距', '左右边距'],
               radiusInfos: ['上圆角', '下圆角'],
               defColor: "transparent",
               tabItem: null
            },
            result: {},
            searchIpts: {},
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
         }
      },
      created() {
         this.init()
      },
      // 这里是基础的修改 - 需要其他自行添加对应方法-数据
      methods: {
         init() {
            // 设置默认值
            this.result = deepClone(this.activeItem)
            this.searchIpts = this.result.computedStyle.searchIpts || {}
            // 描边颜色默认值
            let arr = ['computedStyle', 'tabItem']
            this.defaultForm.tabItem = getObjValue(this.result, arr, this.defaultForm.tabItem)

            // 选择颜色样式
            let arr1 = ['computedStyle', 'searchBox']
            var colorArr = [{
               name: '底部背景', //名字
               color: getObjValue(this.result, arr1, "transparent"), //颜色
               showAlpha: false, //是否开启透明度
            }, ]
            this.defaultForm.colorInfos = colorArr

            // 边距
            let arr2 = ['computedStyle', 'searchIpts', 'marginBottom']
            let arr3 = ['computedStyle', 'searchIpts', 'marginLeft']
            let arr4 = ['computedStyle', 'searchIpts', 'marginTop']
            var marginArr = [{
               name: '上边距', //名字
               value: parseFloat(getObjValue(this.result, arr4, 0)), //值
               unit: "px", //单位
               disabled: false, //是否禁用
               maxValue: 50,
            }, {
               name: '下边距', //名字
               value: parseFloat(getObjValue(this.result, arr2, 0)), //值
               unit: "px", //单位
               disabled: false, //是否禁用
               maxValue: 50,
            }, {
               name: '左右边距', //名字
               value: parseFloat(getObjValue(this.result, arr3, 0)), //值
               unit: "px", //单位
               disabled: false, //是否禁用
               maxValue: 20,
            }]
            this.defaultForm.sizeInfos = marginArr
            // 圆角
            let arr5 = ['computedStyle', 'searchIpts', 'border-top-left-radius']
            let arr6 = ['computedStyle', 'searchIpts', 'border-bottom-right-radius']
            var radiusArr = [{
               name: '上圆角', //名字
               value: parseFloat(getObjValue(this.result, arr5, 0)), //值
               unit: "px", //单位
               disabled: false, //是否禁用
               maxValue: 20,
            }, {
               name: '下圆角', //名字
               value: parseFloat(getObjValue(this.result, arr6, 0)), //值
               unit: "px", //单位
               disabled: false, //是否禁用
               maxValue: 20,
            }]
            this.defaultForm.radiusInfos = radiusArr

         },
         // 基础逻辑
         colorSelect(e) { // 样式
            console.log(e)
            let tabItem = this.defaultForm.tabItem || {}
            this.defaultForm.tabItem = Object.assign(tabItem, e.item)
            console.log(this.defaultForm.tabItem);
            this.updataResult(this.defaultForm.tabItem, 'tabItem')
         },
         sliderChange(arr, type, showUnit = true) { // 边距
            let top = arr[0] && (showUnit ? (arr[0].value + arr[0].unit) : arr[0].value)
            let bottom = arr[1] && (showUnit ? (arr[1].value + arr[1].unit) : arr[1].value)
            let lr = arr[2] && (showUnit ? (arr[2].value + arr[2].unit) : arr[2].value)
            const style = {
               marginTop: top,
               marginBottom: bottom,
               marginLeft: lr,
               marginRight: lr
            }

            this.searchIpts = Object.assign(this.searchIpts, style)
            this.updataResult(this.searchIpts, 'searchIpts')
         },
         RadiusChange(arr) {
            let top = arr[0].value + arr[0].unit
            let bottom = arr[1].value + arr[1].unit
            const style = {
               'border-top-left-radius': top,
               'border-top-right-radius': top,
               'border-bottom-right-radius': bottom,
               'border-bottom-left-radius': bottom
            }
            this.searchIpts = Object.assign(this.searchIpts, style)
            this.updataResult(this.searchIpts, 'searchIpts')
         },
         updateColor(e) { // 选择颜色
            this.result.computedStyle.searchBox = e[0].color
            this.$emit("update", this.result)
         },
         updataResult(style, name) {
            var result = deepClone(style)
            this.result.computedStyle[name] = result
            this.$emit("update", this.result)
         },
         iptSelect(e) {
            e.currentTarget.select();
         },
      }
   }

   //16进制颜色转化为RGB颜色
   function colorRgb(str) {
      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      var sColor = str.toLowerCase();
      if (sColor && reg.test(sColor)) {
         if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
               sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
         }
         //处理六位的颜色值
         var sColorChange = [];
         for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
         }
         return "rgb(" + sColorChange.join(",") + ")";
      } else {
         return sColor;
      }
   }
   //判断是否为亮色
   function getContrastYIQ(hexcolor) {
      var colorrgb = colorRgb(hexcolor);
      var colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      var red = colors[1];
      var green = colors[2];
      var blue = colors[3];
      var brightness;
      brightness = (red * 299) + (green * 587) + (blue * 114);
      brightness = brightness / 255000;
      if (brightness >= 0.5) {
         return "light";
      } else {
         return "dark";
      }
   }

   // 获取链接选择其他链接类型中文
   function getOtherUrlName(type) {
      let text = "";
      if (type == "call") {
         text = "拨打电话"
      } else if (type == "web") {
         text = "自定义链接"
      } else if (type == "applet") {
         text = "小程序"
      }
      return text;
   }

   // dom生成canvas
   // function domToCanvas(contain) {
   //    var canvas2 = document.createElement("canvas");
   //    var w = $(contain).outerWidth();
   //    var h = $(contain).outerHeight();

   //    //先放大2倍，后期缩小，处理模糊问题
   //    canvas2.width = w * 2;
   //    canvas2.height = h * 2;
   //    canvas2.style.width = w + "px";
   //    canvas2.style.height = h + "px";

   //    var context = canvas2.getContext("2d");
   //    // 进行缩放
   //    context.scale(2, 2);

   //    return new Promise((resolve, reject) => {
   //       html2canvas(document.querySelector(contain), {
   //          canvas: canvas2,
   //          allowTaint: true, //允许污染
   //          taintTest: true, //在渲染前测试图片
   //          useCORS: true //使用跨域
   //       }).then(function(canvas) {
   //          resolve(canvas)
   //       });
   //    })
   // }

   function getNavData() {
      const result = [{
         "id": getRandomId(),
         "data": {
            backSrc: "",
            contentType: "1",
            isShowName: "1",
            logoSrc: "",
            mainPage: { // 主页面设置
               defColor: "#fff",
               name: "拼团",
               type: "纯色",
               imgUrl: "resources/img/decorate/group-goods/group_bg.png"
            },
            name: "拼团",
            positionChoose: "1"
         },
         "computedStyle": {
            "mode": 1,
            "style": 1,
            "titleSwitch": true,
            "titleMode": 1,
            "imageUrl": [],
            "position": 1,
            "searchSwitch": true,
            "searchBgColor": "",
            "statusBarColor": "#DB0505",
            "defaultForm": {
               "defColor": "transparer"
            },
            "titleDistance": {
               "fontSize": 16,
               "height": 30,
               "width": 57,
               "marginLeft": 20
            },
            "statusBar": "2",
            "searchMarPad": {
               "marginLeft": 20,
               "paddingLeft": 14
            }
         },
         "permission": [],
         "funcListItem": {
            "type": "nav",
            "title": "顶部导航",
            "is_top": 1
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
      }, {
         "id": getRandomId(),
         "data": {
            buttonData: {
               typeIndex: 0,
               typeItem: null
            },
            buttonPointData: {
               open: true,
               pointIndex: 1,
               pointItem: {
                  label: "resources/img/decorate/point-two.png",
                  value: "two"
               },
               position: 1
            },
            carouselImgArr: [{
               hotZone: [{
                  heightPer: 0.3,
                  leftPer: 0,
                  topPer: 0,
                  url: "",
                  urlName: "",
                  urlType: "",
                  widthPer: 0.3
               }],
               imgUrl: "resources/img/decorate/group-goods/banner.png",
               url: "",
               urlName: "",
               urlType: "",
               visible: false
            }],
            spaceInfo: [{
                  disabled: false,
                  hidden: true,
                  maxValue: 20,
                  name: "图片间距",
                  unit: "px",
                  value: 5
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "上边距",
                  unit: "px",
                  value: 0,
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "下边距",
                  unit: "px",
                  value: 0
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "左右边距",
                  unit: "px",
                  value: 12
               }
            ]
         },
         "computedStyle": {
            "carouselImgArr": [],
            "spaceStyle": {
               marginBottom: "0px",
               marginLeft: "12px",
               marginRight: "12px",
               marginTop: "0px"
            },
            "searchIpts": {
               'border-bottom-left-radius': "10px",
               'border-bottom-right-radius': "10px",
               'border-top-left-radius': "10px",
               'border-top-right-radius': "10px"
            }
         },
         "permission": [],
         "funcListItem": {
            is_top: 0,
            title: "轮播广告",
            type: "carousel-img"
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
      }, {
         "id": getRandomId(),
         "data": {
            "buttonData": {
               "line_num": 1,
               "pattern": "fixed",
               "patternItem": null,
               "shape": "square",
               "single_line": 3,
               "style": 1,
               "type": 1,
            },
            "colorInfos": [{
                  color: "",
                  name: "底部背景",
                  showAlpha: false,
                  value: "transparent"
               },
               {
                  color: "",
                  name: "组件背景",
                  showAlpha: false,
                  value: "transparent"
               },
               {
                  color: "#333333",
                  name: "文字颜色",
                  showAlpha: false,
                  value: "#333333",
               }
            ],
            "iconList": [{
                  img: 'resources/img/decorate/group-goods/icon1.png',
                  icon: 'el-icon-setting',
                  is_show_tag: false,
                  tags: '热门',
                  tagsBgColor: '#f83287',
                  tagsTextColor: '#ffffff',
                  btnText: '三人团',
                  link_params: null,
               },
               {
                  img: 'resources/img/decorate/group-goods/icon2.png',
                  icon: 'el-icon-setting',
                  is_show_tag: false,
                  tags: '热门',
                  tagsBgColor: '#f83287',
                  tagsTextColor: '#ffffff',
                  btnText: '五人团',
                  link_params: null,
               },
               {
                  img: 'resources/img/decorate/group-goods/icon3.png',
                  icon: 'el-icon-setting',
                  is_show_tag: false,
                  tags: '热门',
                  tagsBgColor: '#f83287',
                  tagsTextColor: '#ffffff',
                  btnText: '十人团',
                  link_params: null,
               }
            ],
            "sizeInfos": [{
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "上边距",
                  unit: "px",
                  value: 8
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "下边距",
                  unit: "px",
                  value: 8
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "左右边距",
                  unit: "px",
                  value: 0
               }
            ]
         },
         "computedStyle": {
            "iptBg": "",
            "searchBox": "",
            "searchIpts": {
               "marginBottom": "8px",
               "marginLeft": "0px",
               "marginRight": "0px",
               "marginTop": "8px",
            },
            "textStyle": "#333333"
         },
         "permission": [],
         "funcListItem": {
            is_top: 0,
            title: "按钮组",
            type: "button-group"
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
      }, {
         "id": getRandomId(),
         "data": {
            colorInfos: [],
            sizeInfos: [],
            title: "商品拼团",
            titleRadio: 1,
            paddingBottom: 0,
            paddingTop: 10
         },
         "computedStyle": {
            aroundMargin: "0px",
            bgColor: "transparent",
            btnBackground: "#db0505",
            btnTextColor: "#fff",
            marginBottom: "0px",
            marginTop: "0px",
            spacing: "5px"
         },
         "permission": [],
         "funcListItem": {
            is_top: 0,
            title: "拼团",
            type: "group-goods"
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
      }]
      return result
   }

   function debounce(func, wait) {
      let timer;
      return function() {
         let context = this; // 注意 this 指向
         let args = arguments; // arguments中存着e

         if (timer) clearTimeout(timer);

         timer = setTimeout(() => {
            func.apply(this, args)
         }, wait)
      }
   }
</script>
<?php

use common\helpers\ComponentHelper;
use common\models\diy\DiyComponents;

$diyPath = __DIR__ . '/components/common';
$stylePath = __DIR__ . '/components/style-components';
$components = DiyComponents::getDir($diyPath, $diyPath);
$styleComponents = DiyComponents::getDir($stylePath, $stylePath);

ComponentHelper::loadComponentView('components/diy-preview', __DIR__);
ComponentHelper::loadComponentView('components/diy-style-preview', __DIR__);

foreach ($components as $item) {
   ComponentHelper::loadComponentView("components/common/{$item}", __DIR__);
}

foreach ($styleComponents as $item) {
   ComponentHelper::loadComponentView("components/style-components/{$item}", __DIR__);
}
?>
<div id="app">
   <div style="padding-bottom: 10px;padding-right: 20px;background: #F4F6F8;" @click="save" flex="main:right">
      <el-button type="primary">保存</el-button>
   </div>
   <div class="diy-contain flex" v-loading="loading">
      <diy-preview :active-index="activeIndex" :list="previewList" @select-item="selectItme" @change-move="changeMove"></diy-preview>
      <transition name="fade">
         <diy-style-preview :active-item="activeItem" :active-index="activeIndex" :permission="permission" @update="changeDiyItem" v-if="showUpdate"></diy-style-preview>
      </transition>
   </div>

   <!-- 预览弹窗 -->
   <el-dialog title="预览弹窗" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
      <div class="flex flex-x-center" style="height: 600px;overflow:auto">
         <img id="diy-test-preview" :src="previewSrc"></img>
      </div>
      <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
   </el-dialog>


</div>
<script>
   Vue.prototype.$capitals = []; // 用户信息对象

   Vue.prototype.$eventBus = new Vue();
   var PageShareData = {
      pageIndex: false // 点击页面设置标识 => nav/style
   }; // 全局共享数据 - 没有响应式
   new Vue({
      el: '#app',
      data() {
         return {
            capital: [],
            dialogFormVisible: false,
            /**
             * @descriptions 浮动（）、普通（）、置顶（isTop）、弹窗（alert）四种显示组件
             * @param {string} type // diy组件类型
             * @param {string} title // 二级标题 
             * @param {string} img // diy组件图片
             * @param {number} count // 可添加diy组件数量
             * @param {boolean} is_top // diy组件是否置顶组件 - 待添加 - 分添加等级 1 2 3 数字靠前权限越高
             * @param {object} permission // 组件的不可操作权限 {"is_delete": false,"is_drag": false,"disabled": true, // 禁用操作}
             */
            pageComponentsList: [],
            /**
             * @param {boolean} is_show_permission // 显示权限
             * @param {boolean} is_delete // 是否可删除 
             * @param {boolean} is_up // 是否可上移
             * @param {boolean} is_down // 是否可下移
             * @param {boolean} is_drag // 是否可拖拽
             * @param {boolean} is_copy // 是否可复制
             * @param {boolean} disabled // 全部禁用操作
             */
            previewList: [], // 预览数组对象
            activeIndex: -1, // 预览激活索引
            activeItem: null, // 预览激活对象
            type: "add", // add新增 - edit编辑
            test: ["a", "b", "c"],
            showUpdate: true,

            responentData: null, // 详情响应的总数据
            permission: [], // 权限数组

            isClickPage: false, // 是否点击分页设置
            loading: false, // 数据加载
            saveLoading: false, // 保存数据

            fields: {
               upload_type: 'images'
            },
            previewSrc: "",
         }
      },
      provide() {
         return {
            capitals: this.capital
         }
      },
      watch: {
         activeIndex() {
            this.showUpdate = false
            setTimeout(() => {
               this.showUpdate = true
            }, 0)
         },
      },
      created() {
         // console.log(this.dynamicImgSrc('/abc/ss'));
         // 添加不同的模板nav
         this.previewList.push(...getNavData())
         this.init()
         this.type = getQuery('id') ? "edit" : "add"
         const id = getQuery('id');
         this.detail(id)
      },
      methods: {
         savePreview() {
            this.activeIndex = -1
            this.activeItem = null
            this.$nextTick(() => {
               const contain = document.getElementById("diy-preview-contain");
               this.deepNode(contain);

               setTimeout(() => {
                  this.dialogFormVisible = true
                  html2canvas(contain, {
                     useCORS: true
                  }).then(canvas => {
                     const src = canvas.toDataURL("image/png")
                     this.upload(this.dataURLtoFile(src)).then(res => {
                        if (res.code == 0) {
                           this.previewSrc = res.data.url
                           this.save(false)
                        } else {
                           this.$message({
                              message: res.msg,
                              type: 'warning'
                           });
                        }
                     })
                  })
               }, 0)
            })
         },
         dataURLtoFile(dataurl) { // 生成Blob
            var arr = dataurl.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
            while (n--) {
               u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
               type: mime
            });
         },
         upload(file) {
            let formData = new FormData();
            const params = {
               upload_type: 'images'
            };
            params['r'] = 'common/file/upload';
            for (let i in this.fields) {
               formData.append(i, this.fields[i]);
            }
            formData.append('file', file, "image.png");
            return new Promise(successCallback => {
               this.$request({
                  headers: {
                     'Content-Type': 'multipart/form-data'
                  },
                  params: params,
                  method: 'post',
                  data: formData,
               }).then(e => {
                  successCallback(e.data)
               }).catch(e => {
                  file._complete = true;
               });
            })
         },
         deepNode(contain) {
            if (contain.tagName === "IMG") {
               contain.src = contain.src + '?t=' + Date.now()
               contain.setAttribute('crossorigin', 'anonymous')
            }

            if (contain.children && contain.children.length) {
               [].forEach.call(contain.children, (item => {
                  this.deepNode(item)
               }))
            }
         },
         pageSet() {
            PageShareData.pageIndex = true
            this.$eventBus.$emit("onPageClick")
            var index = 0;
            this.activeIndex = index
            this.activeItem = this.previewList[index]
            // this.changeDiyItem()
         },
         detail(id) {
            // 详情
            this.loading = true
            request({
               params: {
                  r: 'group-buy/default/diy-index'
               },
               method: 'get',
            }).then(res => {
               const {
                  data
               } = res.data
               if (res.data.code != 0) {
                  this.$message({
                     message: res.data.msg,
                     type: 'error'
                  });
                  return false
               }
               const previewList = JSON.parse(data.content)
               this.previewList = previewList
               // this.responentData = data;
               // if (id) {
               //    if (data.diypage.content) {
               //       const previewList = JSON.parse(data.diypage.content);
               //       console.log(previewList, '....................///previewList')
               //       // 兼容以前数据
               //       const memberInfo = this.addIsTop(previewList, "nav")
               //       this.previewList = this.addIsTop(memberInfo, "member-info")
               //    }
               // }
               // if (data.components && data.components.length) {
               //    this.pageComponentsList = data.components;
               //    Vue.prototype.$capitals = data.capital
               // }
               // this.permission = data.auth
            }).finally(res => {
               this.loading = false
            })
         },
         save: debounce(function(isLoading = true) {
               // 对接保存数据接口
               if (this.saveFlag) {
                  console.log("重复提交");
                  return
               }
               const title = this.previewList[0].data.name
               if (!title) {
                  this.$message({
                     message: '请输入标题',
                     type: 'warning'
                  });
                  return
               }
               isLoading && (this.saveLoading = true)
               this.saveFlag = true // 防止重复提交限制
               request({
                  params: {
                     r: '/group-buy/default/diy-index'
                  },
                  method: 'post',
                  data: {
                     // id: getQuery('id') || null,
                     // title,
                     content: JSON.stringify(this.previewList),
                     // cover: this.previewSrc
                  }
               }).then(res => {
                  if (res.data.code != 0) {
                     this.$message({
                        message: res.data.msg,
                        type: 'error'
                     });
                  } else {
                     this.$message({
                        message: res.data.msg,
                        type: 'success'
                     });
                  }
               }).finally(res => {
                  this.saveFlag = false
                  this.saveLoading = false
               })
            },
            400),
         init() {
            this.$eventBus.$on("diy-preview-copy", (item = {}) => {
               this.copy(item)
            })
            this.$eventBus.$on("diy-preview-operateFn", (item = {}) => {
               this.operateFn(item)
            })
            this.$eventBus.$on("diy-back-set", () => {
               this.updateView(null, -1)
            })
         },
         validateCount(e) {
            // 校验组件能添加几个
            var msg = "";
            var list = this.previewList.filter(item => {
               return item.funcListItem.type === e.type
            });
            if (e && e.count && list.length >= e.count) {
               msg = `该组件只能添加${e.count}个哦`
            }
            if (msg) {
               this.$message({
                  message: msg,
                  type: 'warning'
               });
            }
            return msg
         },
         setInitObj(data, e) {
            if (!e.permission) {
               return false
            }
            const target = typeof e.permission === "object" ? e.permission : JSON.parse(e.permission)
            for (const key in target) {
               data[key] = e.permission[key]
            }
         },
         onClick(e) {
            const flag = this.validateCount(e) // 校验组件可添加个数
            if (flag) return // 不通过

            var initObj = {
               id: getRandomId(this.previewList),
               data: {}, // 对应数据
               computedStyle: {}, // 对应组件样式-尺寸
               permission: [], // 展示权限列表 ==> 对应用户等级or其他
               funcListItem: e,
               isShow: true, // 前端是否显示
               is_show_permission: true, // 是否显示权限
            } // 创建的初始数据 
            this.setInitObj(initObj, e) // 设置可操作方法

            if (e.is_top) { // 置顶组件操作 - 不操作以前===>
               const index = this.previewList.findIndex(item => {
                  const e1 = item.funcListItem || {}
                  return e1.is_top === undefined || (e1.is_top >= e.is_top)
               })
               this.activeItem = initObj
               if (index < 0) {
                  this.previewList.push(initObj)
                  this.activeIndex = Math.max(0, this.previewList.length - 1)
               } else {
                  this.previewList.splice(index, 0, initObj)
                  this.activeIndex = index
               }
               return false
            }

            // if(this.isAlearComponents()){
            //     return false
            // }
            // 不置顶组件添加
            this.activeIndex = Math.max(this.getIsTopArrLength() - 1, this.activeIndex) // 限制普通组件到istop前面
            var length = this.previewList.length;
            var isLast = length - 1 === this.activeIndex;
            this.previewList = this.addIndexItem(this.previewList, initObj, this.activeIndex)

            if (length && (isLast || this.activeIndex == -1)) {
               // 有值是否最后一项
               this.activeIndex = length - 1
            }
            this.activeItem = initObj
            this.activeIndex += 1
         },
         getIsTopArrLength() {
            return this.previewList.filter(item => {
               const e1 = item.funcListItem || {}
               return e1.is_top
            }).length
         },
         changeDiyItem(item, index, params = {}) {
            var {
               type
            } = params
            var list = deepClone(this.previewList) // 克隆一下
            if (type !== "isShow") {
               // 显示问题  -- 样式组件不让修改
               item.isShow = list[this.activeIndex].isShow;
            }
            // 直接全部覆盖
            list[this.activeIndex] = deepClone(item)
            this.activeItem = deepClone(item)
            this.previewList = list
         },
         selectItme(item, index) {
            if (this.activeIndex == index) {
               this.activeIndex = -1
               this.activeItem = null
            } else {
               this.activeIndex = index
               this.activeItem = item
            }
            this.$forceUpdate()
         },
         pushItem(list = [], target = {}) {
            var result = deepClone(list)
            result.push(target)
            return result
         },
         /**
          * 两种形式，一种push，追加index
          */
         addIndexItem(list = [], target = {}, index) { // 往指定的index添加item
            var result = deepClone(list)
            if (this.activeIndex < 0) {
               result.push(target)
            } else {
               var handleArr = [deepClone(result[index]), target]
               result.splice(index, 1, ...handleArr)
            }
            return result
         },
         // 操作相关
         copy() {
            if (!this.activeItem || this.activeItem.disabled || this.activeItem.is_copy === false) {
               return
            }
            var item = deepClone(this.activeItem)
            item.id = getRandomId()
            this.previewList = this.addIndexItem(this.previewList, item, this.activeIndex)
         },
         /**
          * @params {string} obj.type up - down - show
          */
         operateFn(obj) {
            const methods = {
               show: 'showItem',
               up: 'upItem',
               down: 'downItem',
               delete: 'deleteItem'
            }
            this[methods[obj.type]](obj.index)
         },
         showItem(index) {
            var item = deepClone(this.activeItem);
            item.isShow = !item.isShow
            this.changeDiyItem(item, index, {
               type: "isShow"
            })
         },
         updateView(item, index) {
            this.activeItem = item
            this.activeIndex = index
         },
         deleteItem(index) {
            if (this.activeItem.disabled || this.activeItem.is_delete === false) {
               return false
            }

            this.previewList.splice(index, 1);
            // 删除后失去焦点
            this.activeIndex = -1;
            this.activeItem = null;
         },
         upItem(index) {
            const topArr = this.previewList.filter(item => {
               const e1 = item.funcListItem || {}
               return e1.is_top
            }) // 操作上限
            const topIndex = Math.max(0, topArr.length)
            if (index <= 0 || this.activeItem.disabled || this.activeItem.is_up === false) {
               return false
            } else if (index <= topIndex) {
               alert("不可以再操作了噢");
               return false
            }
            var previewList = deepClone(this.previewList);
            this.previewList = this.swapItems(previewList, index, index - 1);
            this.updateView(this.previewList[index - 1], index - 1);
         },
         downItem(index) {
            if (this.activeItem.disabled || this.activeItem.is_down === false) {
               return false
            } else if (index === this.previewList.length - 1) {
               alert("不可以再操作了噢");
               return false
            }
            var previewList = deepClone(this.previewList);
            this.previewList = this.swapItems(previewList, index, index + 1);
            this.updateView(this.previewList[index + 1], index + 1);
         },
         swapItems(arr, index1, index2) {
            var item = deepClone(arr[index1]);
            arr[index1] = arr[index2]
            arr[index2] = item
            return arr
         },
         changeMove(e) {
            const {
               newIndex,
               list
            } = e
            // 移动拖拽改变索引 
            this.previewList = deepClone(list);
            this.updateView(this.previewList[newIndex], newIndex);
         },
         // 更新主页面
         updateMainPage(item) {
            this.mainPage = deepClone(item);
         },
         // 处理兼容老数据
         addIsTop(list, type) {
            const obj = {
               ['nav']: 1,
               ['member-info']: 2
            }
            const top = obj[type]
            list.forEach(item => {
               if (item.funcListItem.type === type && !item.funcListItem.is_top) {
                  item.funcListItem.is_top = top
               }
            });
            return list
         }
      }
   })

   // 拦截页面卸载
   window.onbeforeunload = function(e) {
      var e = window.event || e;
      e.returnValue = ("确定离开当前页面吗？");
   }
</script>

<style>
   #app {
      display: flex;
      flex-direction: column;
      min-width: 1250px;
   }

   #diy-test-preview {
      margin: auto;
   }

   .diy-header-backs {
      cursor: pointer;
   }

   .fixed {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
   }

   .diy-header {
      height: 55px;
      background: #313131;
      opacity: 1;
      border-radius: 0px;
      justify-content: space-between;
      font-size: 13px;
      font-family: PingFang SC;
      /*font-weight: bold;*/
      color: #FFFFFF;
      padding: 0 30px;
   }

   .diy-contain {
      flex: 1;
      overflow: auto;
      background: #F4F6F8;
      justify-content: space-between;
   }

   .diy-func-list {
      box-sizing: border-box;
      width: 300px;
      background: #FFFFFF;
      border-radius: 0px;
   }

   .diy-preview {
      flex: 1;
      background: #F4F6F8;
      justify-content: space-around;
   }

   .fill-box {
      position: relative;
      width: 467px;
      height: 100%;
   }

   .flex {
      display: flex;
   }

   .flex-x-center {
      justify-content: center;
   }

   .flex-y-center {
      align-items: center;
   }

   /*  */
   .fade-enter-active,
   .fade-leave-active {
      transition: opacity 1s;
   }

   .fade-enter,
   .fade-leave-to {
      opacity: 0;
   }

   .diy-text-font {
      font-size: 13px;
      font-weight: 700;
      color: #999999;
   }

   .fill-border-top {
      border-top: 10px solid #F4F6F8;
   }

   .fill-border-bottom {
      border-bottom: 10px solid #F4F6F8;
   }

   /* 导航栏 */
   .custom-page {
      width: 181px;
      height: 60px;
      line-height: 60px;
      background: var(--diy-theme);
      font-weight: 700;
      border-radius: 0px;
      text-align: center;
   }

   .save {
      font-size: 24px;
      vertical-align: middle;
   }

   .save+span {
      vertical-align: middle;
   }

   .sava_btn .el-button--primary {
      background: var(--diy-theme);
      border-color: var(--diy-theme);
      padding: 8px 14px;
   }

   .diy_nav_right>div {
      padding: 8px 14px;
   }

   .diy_nav_right .sava_btn {
      padding: 0;
   }

   .page_set>i {
      font-size: 24px;
      vertical-align: middle;
   }

   .page_set>span {
      vertical-align: middle;
   }

   .xiaoshou {
      cursor: pointer;
   }

   :root {
      /* 主题色 */
      --diy-theme: #F10009;
      /* 主要字体颜色 */
      --diy-color: #F10009;
   }

   /* 修改ele默认样式 */
   /* slider组件 */
   .el-slider__bar {
      background-color: var(--diy-theme);
   }

   .el-slider__button {
      border-color: var(--diy-theme);
   }

   /* input组件 */
   .el-input .el-input__inner:focus {
      border: 1px solid var(--diy-theme);
   }

   /* textarea */
   .el-textarea .el-textarea__inner:focus {
      border: 1px solid var(--diy-theme);
   }

   /* radio单选组件 */
   .el-radio__input.is-checked+.el-radio__label {
      color: var(--diy-color);
   }

   .el-radio__input.is-checked .el-radio__inner {
      border-color: var(--diy-theme);
      background: var(--diy-theme);
   }

   .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      border-color: var(--diy-theme);
      box-shadow: -1px 0 0 0 var(--diy-theme);
   }

   /* 多选 */
   .el-checkbox__input.is-checked+.el-checkbox__label {
      color: var(--diy-color);
   }

   .el-checkbox__input.is-checked .el-checkbox__inner,
   .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: var(--diy-theme);
      background: var(--diy-theme);
   }
</style>