qimall/backend/web/resources/js/diy-util.js

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;
    }
 }


 //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;
 }


 var basicMixins = {
    data() {
       return {
          defaultForm: {
             default_color: "transparer",
             colorInfos: ['底部背景'],
             sizeInfos: ['上边距', '下边距', '左右边距'],
             radiusInfos: ['上圆角', '下圆角'],
             defColor: "transparent",
             tabItem: null
          },
          result: {},
          searchIpts: {},
         //  diy_img_prefix: _diy_img_prefix,
       }
    },
    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();
       },
    }
 }


 // 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 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)
    }
 }