qimall/backend/modules/mall/views/goods-template/diy.php

<script src="/resources/js/html2canvas.min.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');
                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) {
        try {
            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";
            }
        } catch (e) {
            return "light";
        }
    }

    // 获取链接选择其他链接类型中文
    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": {
                "logoSrc": "",
                "backSrc": "",
                "isShowName": "1",
                "isShowSearch": "0",
                "mainPage": { // 主页面设置
                    "defColor": "#fff",
                    "imageUrl": [],
                    "name": "标题",
                    "type": "纯色"
                },
                "positionChoose": "1",
                "name": "商品详情"
            },
            "computedStyle": {
                "mode": 1,
                "style": 1,
                "titleSwitch": true,
                "titleMode": 1,
                "imageUrl": [],
                "position": 1,
                "searchSwitch": true,
                "searchBgColor": "",
                "defaultForm": {
                    "defColor": "transparer"
                },
                "titleDistance": {
                    "fontSize": 16,
                    "height": 30,
                    "width": 57,
                    "marginLeft": 20
                },
                "statusBar": "1",
                "searchMarPad": {
                    "marginLeft": 20,
                    "paddingLeft": 14
                }
            },
            "permission": [],
            "funcListItem": {
                "type": "nav",
                "title": "顶部导航",
                "is_top": 1
            },
            "isShow": true,
            "is_show_permission": false,
            "is_drag": false,
            "disabled": true,
        }
        return result
    }

    function getGoodsParse() {
        const result = {
            "id": getRandomId(),
            "data": {
                "sizeInfos": [{
                        "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": 20,
                        "name": "左右边距",
                        "unit": "px",
                        "value": 0
                    }
                ]
            },
            "computedStyle": {
                "aroundMargin": "0px",
                "marginBottom": "0px",
                "marginTop": "0px"
            },
            "permission": [],
            "funcListItem": {
                "count": 1,
                "img": "resources/img/decorate/func/goods-info.png",
                "type": "goods-parse",
                "title": "商品详情",
                "permission": {
                    "is_copy": false,
                    "is_delete": false,
                    "is_show": false
                }
            },
            "isShow": true,
            "is_copy": false,
            "is_delete": false,
            "is_show": false,
            "is_show_permission": true,
            "visible": false,
        }
        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 = 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-func-list');
ComponentHelper::loadComponentView('diy/diy-preview');
ComponentHelper::loadComponentView('diy/diy-style-preview');
ComponentHelper::loadComponentView('diy/popup-advertisement');

if (!empty($addons_components)) {
    // 组件ID
    $view_arr = ['preview', 'style'];
    foreach ($addons_components as $item) {
        $basc_path = Yii::getAlias('@addons') . "/{$item['source']}/backend/views/components/diy/{$item['code']}";
        // 加载组件
        foreach ($view_arr as $view) {
            // 文件
            $file_path = $basc_path . DIRECTORY_SEPARATOR . $view . '.php';
            if (is_file($file_path)) {
                ComponentHelper::loadComponentView($view, $basc_path);
            }
        }
    }
}

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" class="fixed">
    <div class="diy-header flex">
        <div class="flex flex-y-center">
            <div @click="goBack" class="diy-header-backs">
                <i class="el-icon-arrow-left"></i>
                <span>返回</span>
            </div>
            <div class="custom-page" style="margin-left:70px;">自定义页面装修</div>

            <div class="temp-select" v-if="pageType == 2">
                <el-select size="small" v-model="cate_id" placeholder="请选择">
                    <el-option v-for="item in cate_arr" :key="item.label" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <div class="cate">所属分类：</div>
            </div>
        </div>
        <div class="flex flex-y-center diy_nav_right">
            <div class="page_set xiaoshou" @click="pageSet">
                <i class="el-icon-setting "></i>
                <span>页面设置</span>
            </div>
            <!-- <div class="save_as_template xiaoshou" @click="popupVisible = true">
                另存为模板
            </div> -->
            <div class="save_preview xiaoshou" @click="savePreview">
                保存并预览
            </div>
            <div style=" margin: -5px 0" class="sava_btn">
                <el-button type="primary" size="mini" @click="save" :loading="saveLoading">
                    <i class="el-icon-s-promotion save"></i>
                    <span>保存设置</span>
                </el-button>
            </div>
        </div>
    </div>
    <div class="diy-contain flex" v-loading="loading">
        <div class="diy-func-list">
            <diy-func-list @end="onEnd" :test-data="onClick" :list="pageComponentsList" @add-prev-item="onClick"></diy-func-list>
        </div>
        <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 :close-on-click-modal="false" title="弹窗广告设置" :width="'634px'" append-to-body :visible.sync="popupVisible">
        <popup-advertisement :data="initAlearData" @change="onAlertChange"></popup-advertisement>
        <span slot="footer" class="dialog-footer">
            <el-button @click="popupVisible = false">取 消</el-button>
            <el-button type="primary" @click="popupVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog :close-on-click-modal="false" title="预览弹窗" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
        <div v-loading="previewloading" 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.$vailComm = false; // 是否开启校验组件
    Vue.prototype.$capitals = []; // 用户信息对象 - member-info
    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: [{
                        title: '一级标题', // 一级标题
                        list: [{
                                type: 'search', // diy组件类型
                                title: '搜索', // 二级标题 
                                img: 'resources/img/decorate/func/search.png',
                            }, {
                                type: 'button-group', // diy组件类型
                                title: '按钮组', // 二级标题 
                                img: 'resources/img/decorate/func/button-group.png',
                            }, {
                                type: 'placard', // diy组件类型
                                title: '公告', // 二级标题 
                                img: 'resources/img/decorate/func/placard.png',
                            }, {
                                type: 'video', // diy组件类型
                                title: '视频', // 二级标题 
                                img: 'resources/img/decorate/func/video.png',
                            },
                            {
                                type: 'graphic-details', // diy组件类型
                                title: '图文详情', // 二级标题 
                                img: 'resources/img/decorate/func/graphic-details.png',
                            },
                            {
                                type: 'auxiliary-blank', // diy组件类型
                                title: '辅助空白', // 二级标题 
                                img: 'resources/img/decorate/func/auxiliary-blank.png',
                            },
                            {
                                type: 'auxiliary-line', // diy组件类型
                                title: '辅助线', // 二级标题 
                                img: 'resources/img/decorate/func/auxiliary-line.png',
                            },
                            {
                                type: "title-block",
                                title: "标签栏",
                                img: 'resources/img/decorate/func/title-block.png',
                            },
                            {
                                type: 'rubik-cube', // diy组件类型
                                title: '魔方', // 二级标题 
                                img: 'resources/img/decorate/func/rubik-cube.png',
                            },
                            {
                                type: 'img-ad', // diy组件类型
                                title: '图片广告', // 二级标题 
                                img: 'resources/img/decorate/func/img-ad.png',
                            },
                            {
                                type: 'micro-theme', // diy组件类型
                                title: '微主题', // 二级标题 
                                img: 'resources/img/decorate/func/micro-theme.png',
                            },
                            {
                                type: 'carousel-img', // diy组件类型
                                title: '轮播广告', // 二级标题 
                                img: 'resources/img/decorate/func/carousel-img.png',
                            },
                            {
                                type: 'graphic-details', // diy组件类型
                                title: '模板', // 二级标题 
                                img: 'resources/img/decorate/func/search.png',
                            },
                            {
                                type: 'goods-info', // diy组件类型
                                title: '商品信息', // 二级标题 
                                count: 1,
                                is_top: 2,
                                img: 'resources/img/decorate/func/goods-info.png',
                                permission: {
                                    "is_drag": false,
                                    "is_up": false,
                                    "is_down": false,
                                    "is_copy": false
                                } // 禁用操作
                            },
                            {
                                type: 'goods-comment', // diy组件类型
                                title: '商品评价', // 二级标题 
                                img: 'resources/img/decorate/func/goods-comment.png'
                            }
                        ]
                    }, {
                        title: '二级标题', // 一级标题
                        list: [{
                                type: 'commodity-strategy-group', // diy组件类型
                                title: '商品组', // 二级标题 
                                img: 'resources/img/decorate/func/commodity-group.png',
                            },
                            {
                                type: 'order-broadcast', // diy组件类型
                                title: '订单播报', // 二级标题 
                                img: 'resources/img/decorate/func/order-broadcast.png',
                                count: 1,
                            },
                            {
                                type: 'commodity-group-tab', // diy组件类型
                                title: '选项卡', // 二级标题 
                                img: 'resources/img/decorate/func/commodity-group-tab.png',
                            },
                            /* {
                                type: 'goods-comment', // diy组件类型
                                title: '商品评论', // 二级标题 
                                img: '', // icon图片
                            }, */
                        ]
                    }, {
                        title: '营销类', // 一级标题
                        list: [{
                                type: 'merchant-info', // diy组件类型
                                title: '商户信息', // 二级标题 
                                img: 'resources/img/decorate/func/merchant-info.png',
                            },
                            {
                                type: 'member-info', // diy组件类型
                                title: '会员信息', // 二级标题 
                                img: 'resources/img/decorate/func/member-info.png',
                                count: 1,
                                is_top: 2,
                                permission: {
                                    "is_drag": false,
                                    "is_up": false,
                                    "is_down": false,
                                    "is_copy": false
                                } // 禁用操作
                            },
                            {
                                type: 'order-icon-group', // diy组件类型
                                title: '订单图标组', // 二级标题 
                                img: 'resources/img/decorate/func/order-icon-group.png',
                                count: 1,
                            },
                            {
                                type: 'commonly-icon-group', // diy组件类型
                                title: '常用图标组', // 二级标题 
                                img: 'resources/img/decorate/func/commonly-icon-group.png',
                            },
                            {
                                type: 'group-goods', // diy组件类型
                                title: '拼团', // 二级标题 
                                img: 'resources/img/decorate/func/commonly-icon-group.png',
                            },
                            {
                                type: 'notes-articles', // diy组件类型
                                title: '运营笔记', // 二级标题
                                img: 'resources/img/decorate/func/commonly-icon-group.png',
                            },
                        ]
                    },
                    {
                        title: '其他', // 一级标题
                        list: [{
                            type: 'position', // diy组件类型
                            title: '定位', // 二级标题 
                            img: 'resources/img/decorate/func/merchant-info.png',
                        }, {
                            type: 'follow-official', // diy组件类型
                            title: '关注公众号', // 二级标题 
                            img: 'resources/img/decorate/func/follow-official.png',
                        }, {
                            type: 'popup-advertisement', // diy组件类型
                            title: '弹窗广告', // 二级标题
                            img: 'resources/img/decorate/func/popup-advertisement.png'
                        }, {
                            type: 'smart-form', // diy组件类型
                            title: '表单', // 二级标题 
                            img: "<?= Yii::getAlias('@attachurl') ?>/static/addons/smartform/smartform.png"
                        }
                        ]
                    }
                ],
                /**
                 * @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, // 保存数据
                previewloading: false, // 预览

                fields: {
                    upload_type: 'images'
                },
                previewSrc: "",

                popupVisible: false,
                initAlearData: null,

                currentRoute: "<?= $currentRoute; ?>",
                pageType: 1, // 1 普通页面，2 模板市场
                cate_arr: [],
                cate_id: ''
            }
        },
        watch: {
            activeIndex() {
                this.showUpdate = false
                setTimeout(() => {
                    this.showUpdate = true
                }, 0)
            },
        },
        created() {
            // 添加不同的模板nav
            this.previewList.push(getNavData())
            this.init()
            // this.initPageType()
            this.type = getQuery('id') ? "edit" : "add"
            const id = getQuery('id')
            this.detail(id)
        },
        methods: {
            initPageType() {
                const obj = {
                    'admin/template/edit': 2
                }
                let type = obj[this.currentRoute] || 1
                this.pageType = type
            },
            initAlertComData(list) {
                const item = list.find(item => {
                    return item.funcListItem.type === "popup-advertisement"
                })
                item && (this.initAlearData = deepClone(item.data))
            },
            onAlertChange(data) {
                const index = this.previewList.findIndex(item => {
                    return item.funcListItem.type === "popup-advertisement"
                })
                let item = this.previewList[index]
                item.data = data
                this.previewList[index] = item
            },
            savePreview() {
                this.activeIndex = -1
                this.activeItem = null
                this.previewloading = true
                console.log(this.previewloading, "======>  this.previewloading ");
                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, 'preview')
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }).finally(res => {
                                this.previewloading = false
                            })
                        })
                    }, 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: this.currentRoute,
                        id
                    },
                    method: 'get',
                }).then(res => {
                    const {
                        data
                    } = res.data
                    if (res.data.code != 0) {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                        return false
                    }

                    this.responentData = data;

                    if (data.diypage.content) {
                        const previewList = JSON.parse(data.diypage.content);
                        // 兼容以前数据
                        const memberInfo = this.addIsTop(previewList, "nav")
                        this.previewList = this.addIsTop(memberInfo, "member-info")
                        this.initAlertComData(this.previewList)
                    }

                    if (data.components && data.components.length) {
                        this.pageComponentsList = data.components;
                        Vue.prototype.$capitals = data.capital
                    }
                    this.permission = data.auth

                    // 模板市场分类
                    // if (this.pageType == 2) {
                    //     let obj = res.data.data
                    //     for (const key in obj.cate_arr) {
                    //         let value = obj.cate_arr[key]
                    //         this.cate_arr.push({
                    //             value: key * 1,
                    //             label: value
                    //         })
                    //     }
                    //     this.cate_id = obj.diypage.cate_id
                    // }
                }).finally(res => {
                    this.loading = false
                })
            },
            updateTips() { // 对应组件上绑定该事件
                Vue.prototype.$vailComm = true
                this.$eventBus.$emit("updateTips")
            },
            CommVail() { // 组件校验目前只是单个nav 
                const item = this.previewList[0]
                const title = item.data.name
                const type = item.data.contentType
                if ((type != 2) && !title) {
                    // 目前只是标题校验后续需要，在拓展出来
                    if (this.activeIndex != 0) {
                        const index = 0
                        this.selectItme(this.previewList[index], index)
                    }
                    this.$nextTick(() => {
                        this.updateTips()
                    })
                    return '请输入标题'
                }
            },
            /**
             * @params { string } type // save(保存) preview(预览)
             */
            save: debounce(function(isLoading = true, type = 'save') {
                    // 对接保存数据接口
                    if (this.saveFlag) {
                        console.log("重复提交");
                        return
                    }
                    const item = this.previewList[0]
                    const title = item.data.name
                    let msg = this.CommVail()
                    if (msg) {
                        this.$message({
                            message: msg,
                            type: 'warning'
                        });
                        return msg
                    }
                    this.saveFlag = true // 防止重复提交限制
                    isLoading && (this.saveLoading = true)

                    let data = {
                        id: getQuery('id') || null,
                        title,
                        content: JSON.stringify(this.previewList),
                        cover: this.previewSrc,
                    }
                    if (this.cate_id) {
                        data.cate_id = this.cate_id
                    }
                    request({
                        params: {
                            r: this.currentRoute
                        },
                        method: 'post',
                        data
                    }).then(res => {
                        if (res.data.code != 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });

                            if (type === 'save') {
                                this.leavePage(res.data.data);
                                // let urlObJ = {
                                //     1: 'mall/diy/index',
                                //     2: 'admin/template/mall',
                                // }

                                // navigateTo({
                                //     r: urlObJ[this.pageType]
                                // })
                            }
                        }
                    }).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]
                }
            },
            isAlearComponents(e) {
                const isAlertArr = ['popup-advertisement'] // 弹窗组件
                return isAlertArr.some(item => {
                    return item === e.type
                })
            },
            handleAlertComponent(initObj) {
                if (!this.previewList.some(item => {
                        return this.isAlearComponents(item.funcListItem)
                    })) { // 判断是否有alert组件 - 只能单个
                    console.log("添加特殊组件");
                    this.previewList.push(initObj)
                }
                this.popupVisible = true
            },
            onEnd(e, index) { // 左侧拖拽结束手动添加进去
                this.activeIndex = index - 1
                console.log(this.activeIndex, "=======> activeIndex");
                this.onClick(e)
            },
            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.type === "popup-advertisement") {
                    this.handleAlertComponent(initObj) // 单独处理全局弹窗组件
                    return false
                }

                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
                }

                // 不置顶组件添加
                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
            },
            leavePage(data) {
                window.parent.postMessage(JSON.stringify(data), '*');
            },
            goBack() {
                this.leavePage({});
            }
        }
    })

    // 拦截页面卸载
    // 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;
    }

    .temp-select {
        position: relative;
        margin-left: 20px;
    }

    .temp-select .cate {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 6px;
        color: #fff;
        display: inline-block;
        font-size: inherit;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        pointer-events: none;
        font-weight: 400;
    }

    .temp-select .el-input__inner {
        background: hsla(0, 0%, 100%, .2);
        color: #FFFFFF;
    }

    .temp-select .el-input.is-focus .el-input__inner,
    .temp-select .el-input .el-input__inner:focus,
    .temp-select .el-input__inner {
        border-color: transparent !important;
        border: none;
        text-indent: 54px;
    }

    .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: 18px;
        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>