qimall/addons/ScoreMall/backend/views/diy/index.php

<script src="/resources/js/html2canvas.min.js"></script>
<!-- 装修所需的数据 -->
<script type="text/javascript" src="/resources/js/diy-util.js"></script>
<script type="text/javascript" src="/resources/js/hotzone.js"></script>
<script>
   function getNavData() {
      const result = [{
         // 顶部导航
         "id": getRandomId(),
         "data": {
            backSrc: "",
            contentType: "1",
            isShowName: "1",
            logoSrc: "",
            mainPage: { // 主页面设置
               defColor: "#fff",
               name: "积分商城",
               type: "纯色",
               imgUrl: ""
            },
            name: "积分商城",
            positionChoose: "1",
            hideSearch: false,
         },
         "computedStyle": {
            "mode": 1,
            "style": 1,
            "titleSwitch": true,
            "titleMode": 1,
            "imageUrl": [],
            "position": 1,
            "searchSwitch": true,
            "searchBgColor": "",
            "statusBarColor": "#FFF",
            "defaultForm": {
               "defColor": "transparer"
            },
            "titleDistance": {
               "fontSize": 16,
               "height": 30,
               "width": 57,
               "marginLeft": 20
            },
            "statusBar": "1",
            "searchMarPad": {
               "marginLeft": 20,
               "paddingLeft": 14
            }
         },
         "funcListItem": {
            "type": "nav",
            "title": "顶部导航",
            "is_top": 1
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
         "is_delete": false,
         "is_up": false,
         "is_down": false,
         "is_copy": false
      }, {
         // 轮播图
         "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: [],
               imgUrl: "resources/img/decorate/default_img.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": {
            "searchBox": "",
            "spaceStyle": {
               marginBottom: "0px",
               marginLeft: "12px",
               marginRight: "12px",
               marginTop: "0px",
               height: '160px',
            },
            "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,
         "is_delete": false,
         "is_up": false,
         "is_down": false,
         "is_copy": false
      }, {
         // 按钮组
         "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/default_btn1.png',
                   icon: 'el-icon-setting',
                   is_show_tag: true,
                   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
               }
            ],
            defaultTabs: [{name: 'marketing',children:['score_mall_cate']}],
         },
         "computedStyle": {
            "iptBg": "",
            "searchBox": "",
            "searchIpts": {
               "marginBottom": "8px",
               "marginLeft": "0px",
               "marginRight": "0px",
               "marginTop": "8px",
            },
            "textStyle": "#333333"
         },
         "permission": [],
         "funcListItem": {
            is_top: 0,
            title: "按钮组",
            type: "button-group"
         },
         "isShow": false,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
         "is_delete": false,
         "is_up": false,
         "is_down": false,
         "is_copy": false
      }, {
         // 积分商品列表
         "id": getRandomId(),
         "data": {
            listType: 1,
            listShow: true,
            dataType: 0,
            colorInfos: [
               {
                   name: "底部颜色", //名字
                   color: "", //颜色
                   showAlpha: false, //是否开启透明度
                   value: "", //展示的值
               },
               {
                   name: "组件颜色", //名字
                   color: "#FFFFFF", //颜色
                   showAlpha: false, //是否开启透明度
                   value: "#FFFFFF", //展示的值
               }

            ],
            sizeInfos: [
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 20,
                  name: "图片间距",
                  unit: "px",
                  value: 12,
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "上边距",
                  unit: "px",
                  value: 7,
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "下边距",
                  unit: "px",
                  value: 12,
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 50,
                  name: "左右边距",
                  unit: "px",
                  value: 12,
               },
               {
                  disabled: false,
                  hidden: false,
                  maxValue: 20,
                  name: "内边距",
                  unit: "px",
                  value: 0,
               },
            ],
         },
         "computedStyle": {
            searchBox: "",
            iptBg: "#FFFFFF",
            btnBackground: "#db0505",
            btnTextColor: "#fff",
            sizeInfos: {
               marginBottom: "12px",
               marginTop: "7px",
               aroundMargin: "12px",
               spacing: "12px",
               padding: "0px",
            },
         },
         "permission": [],
         "funcListItem": {
            is_top: 0,
            title: "商品列表",
            type: "score-list"
         },
         "isShow": true,
         "is_show_permission": false,
         "is_drag": false,
         "disabled": true,
         "is_delete": false,
         "is_up": false,
         "is_down": false,
         "is_copy": false
      }]
      return result
   }
</script>
<?php

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

$diyPath = Yii::$app->viewPath . '/components/common/diy/common';
$stylePath = Yii::$app->viewPath . '/components/common/diy/style-components';
$components = DiyComponents::getDir($diyPath, $diyPath);
$styleComponents = DiyComponents::getDir($stylePath, $stylePath);

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


ComponentHelper::loadComponentView('style', AddonHelper::getAddonRootPath('ScoreMall') . 'backend/views/components/diy/score-list');
ComponentHelper::loadComponentView('preview', AddonHelper::getAddonRootPath('ScoreMall') . 'backend/views/components/diy/score-list');
// ComponentHelper::loadComponentView("components/score-list/style",  __DIR__);
// ComponentHelper::loadComponentView("components/score-list/style", __DIR__);

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

foreach ($styleComponents as $item) {
    ComponentHelper::loadComponentView("diy/style-components/{$item}");
}
$currentRoute = Yii::$app->controller->route;
?>
<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.detail()
      },
      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() {
            // 详情
            this.loading = true
            request({
               params: {
                  r: 'score-mall/diy/index'
               },
               method: 'get',
            }).then(res => {
               if(res.data.code == 0){
                  const previewList = JSON.parse(res.data.data.content)
                  if(!previewList.length) return
                  this.previewList = previewList
               } else {
                  this.$message({
                     message: res.data.msg,
                     type: 'error'
                  });
               }
               /* 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 */
            }).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: 'score-mall/diy/index'
               },
               method: 'post',
               data: {
                  content: JSON.stringify(this.previewList),
               }
            }).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
         },
         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) {
            console.info(item);
            if (this.activeIndex == index) {
               this.activeIndex = -1
               this.activeItem = null
            } else {
               this.activeIndex = index
               this.activeItem = item
            }
            console.info();
            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: 60px;
      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: 354px;
      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>