DIY 首页可视化编辑

DIY初始化（diy.init.js）：

$(function () {
    //添加一个模块
    $(".j-diy-addModule").click(function () {
        var type = $(this).data("type"); //获取模块类型
        var strUrl = window.location.toLocaleString().toLocaleLowerCase();//将当前地址转换为小写形式
        var clientName = "wapshop";
        //如果包含下面的字符，则clientName相应改变
        if (strUrl.replace("/vshop/", "").length < strUrl.length) {
            clientName = "vshop";
        } else if (strUrl.replace("/wapshop/", "").length < strUrl.length) {
            clientName = "wapshop";
        } else if (strUrl.replace("/alioh/", "").length < strUrl.length) {
            clientName = "alioh";
        }
        //默认数据
        var moduleData = {
            id: HiShop.DIY.getTimestamp(), //模块ID（获取当前时间戳）
            type: type, //模块类型
            draggable: true, //是否可拖动
            sort: 0, //排序
            content: null //模块内容
        };
        //根据模块类型设置默认值
        switch (type) {
            //富文本
            case 1:
                moduleData.ue = null;
                moduleData.content = {
                    fulltext: "<p>『富文本编辑器』</p>"
                };
                break;
                //标题
            case 2:
                moduleData.content = {
                    title: "标题名称",
                    subtitle: "『副标题』",
                    direction: "left",
                    space: 0,
                    style:0
                };
                break;
                //自定义模块
            case 3: break;
                //商品
            case 4:
                moduleData.content = {
                    layout: 1,
                    showPrice: true,
                    showIco: true,
                    showName: 1,
                    goodslist: []
                }
                break;
                //商品列表（分组标签）
            case 5:
                moduleData.content = {
                    layout: 1,
                    showPrice: true,//显示商品价格
                    showIco: true,//显示商品图标
                    showName: true,//显示商品名
                    group: null,
                    firstPriority: 1,//第一优先级
                    secondPriority: 3,//第二优先级
                    thirdPriority: 5,//第三优先级
                    goodsize: 6,//显示商品个数
                    goodslist: [
                        {
                            item_id: "1",
                            link: "#",
                            pic: "/Admin/shop/Public/images/diy/goodsView1.jpg",
                            price: "100.00",
                            title: "第一个商品"
                        },
                        {
                            item_id: "2",
                            link: "#",
                            pic: "/Admin/shop/Public/images/diy/goodsView2.jpg",
                            price: "200.00",
                            title: "第二个商品"
                        },
                        {
                            item_id: "3",
                            link: "#",
                            pic: "/Admin/shop/Public/images/diy/goodsView3.jpg",
                            price: "300.00",
                            title: "第三个商品"
                        },
                        {
                            item_id: "4",
                            link: "#",
                            pic: "/Admin/shop/Public/images/diy/goodsView4.jpg",
                            price: "400.00",
                            title: "第四个商品"
                        }
                    ]
                }
                break;
                //搜索
            case 6: break;
                //文本导航
            case 7:
                moduleData.content = {
                    dataset: [
                        {
                            linkType: 0,
                            link: "",
                            title: "",
                            showtitle: ""
                        }
                    ]
                }
                break;
                //图片导航
            case 8:
                moduleData.content = {
                    dataset: [
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            showtitle: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        },
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            showtitle: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        },
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            showtitle: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        },
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            showtitle: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        }
                    ]
                }
                break;
                //广告图片
            case 9:
                moduleData.content = {
                    showType: 1,//显示方式
                    space: 0,//留白
                    margin: 10,
                    dataset: []
                }
                break;
                //分割线
            case 10: break;
                //辅助空白
            case 11:
                moduleData.content = {
                    height: 10
                }
                break;
                // 顶部菜单
            case 12:
                moduleData.content = {
                    style: '0',//类型
                    marginstyle: '0',//边距
                    dataset: [
                        {
                            link: "/" + clientName + "/default.aspx",
                            linkType: 6,
                            showtitle: "首页",
                            title: "店铺主页",
                            pic: "/Admin/shop/Public/images/icon/style1/color0/icon_home.png",//小图标
                            bgColor: "#07a0e7",//背景颜色
                            cloPicker: '0',
                            fotColor: '#fff'//字体颜色
                        },
                        {
                            link: "/"+clientName+"/default.aspx",
                            linkType: 6,
                            showtitle: "新品",
                            title: "",
                            pic: "/Admin/shop/Public/images/icon/style1/color0/icon_newgoods.png",
                            bgColor: "#72c201",
                            cloPicker: '1',
                            fotColor: '#fff'
                        },
                        {
                            link: "/" + clientName + "/default.aspx",
                            linkType: 6,
                            showtitle: "热卖",
                            title: "",
                            pic: "/Admin/shop/Public/images/icon/style1/color0/icon_hotsale.png",
                            bgColor: "#ffa800",
                            cloPicker: '2',
                            fotColor: '#fff'
                        },
                        {
                            link: "/" + clientName + "/default.aspx",
                            linkType: 6,
                            showtitle: "会员主页",
                            title: "",
                            pic: "/Admin/shop/Public/images/icon/style1/color0/icon_user.png",
                            bgColor: "#d50303",
                            cloPicker: '3',
                            fotColor: '#fff'
                        }
                    ]
                }
                break;
                // 橱窗
            case 13:
                moduleData.content = {
                    layout: '1',
                    dataset: [
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        },
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        },
                        {
                            linkType: 0,
                            link: "#",
                            title: "导航名称",
                            pic: "/Admin/shop/Public/images/diy/waitupload.png"
                        }
                    ]
                }
                break;
                // 视频
            case 14:
                moduleData.content = {
                    website: ''
                }
                break;
                // 音频
            case 15:
                moduleData.content = {
                    direct: 0,
                    imgsrc: '',
                    audiosrc: ''
                }
                break;
                // 公告
            case 16:
                moduleData.content = {
                    linkType: 0,
                    title: "公告",
                    showtitle: "请填写内容，如果过长，将会滚动显示"
                }
                break;
        }
        //添加模块
        HiShop.DIY.add(moduleData, true);
    });
    //初始化布局拖动事件（拖放排序）
    $("#diy-phone .drag").sortable({
        revert: true,
        placeholder: "drag-highlight",//占位符
        stop: function (event, ui) {
            HiShop.DIY.repositionCtrl(ui.item, $(".diy-ctrl-item[data-origin='item']")); //重置ctrl的位置
        }
    }).disableSelection();
    //编辑页面标题
    $(".j-pagetitle").click(function () {
        $(".diy-ctrl-item[data-origin='pagetitle']").show().siblings(".diy-ctrl-item[data-origin='item']").hide();
    });
    //编辑页面标题同步到手机视图中
    $(".j-pagetitle-ipt").change(function () {
        $(".j-pagetitle").text($(this).val());
    });
});

DIY核心（diy.core.js）

$(function () {
    HiShop.DIY = HiShop.DIY ? HiShop.DIY : {}; //DIY 命名空间
    HiShop.DIY.Unit = HiShop.DIY.Unit ? HiShop.DIY.Unit : {}; //unit
    HiShop.DIY.PModules = HiShop.DIY.PModules ? HiShop.DIY.PModules : []; //页面模块
    HiShop.DIY.LModules = HiShop.DIY.LModules ? HiShop.DIY.LModules : []; //自定义模块列表
    var $diy_contain = $("#diy-contain"), //Diy 内容显示区域
        $diy_ctrl = $("#diy-ctrl"); //Diy 控制器显示区域
    //DIY常量
    HiShop.DIY.constant = {
        diyoffset: $(".diy").offset()
    };
    //获取当前时间戳
    HiShop.DIY.getTimestamp = function () {
        var date = new Date();
        return "" + date.getFullYear() + parseInt(date.getMonth() + 1) + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();
    };
    /*
     * 添加模块
     * @param type 模块类型
     * @param data 模块数据
     * @param showctrl 是否添加完后立即显示控制内容
     */
    HiShop.DIY.add = function (data, showctrl) {
        //添加手机内容
        var html_con = _.template($("#tpl_diy_con_type" + data.type).html(), data), //内容
            html_conitem = _.template($("#tpl_diy_conitem").html(), {
                html: html_con
            }), //diy通用外层容器
            $render_conitem = $(html_conitem); //渲染模板

        data.dom_conitem = $render_conitem; //缓存手机内容dom
        
        var $actionPanel = $render_conitem.find(".diy-conitem-action"),//手机内容
            $btn_edit = $actionPanel.find(".j-edit"),//编辑
            $btn_del = $actionPanel.find(".j-del");//删除

        //绑定编辑模块事件
        $actionPanel.click(function () {
            //移除N个selected属性，增加当前选择的selected属性
            $(".diy-conitem-action").removeClass("selected");
            $(this).addClass("selected");
            HiShop.DIY.edit(data);
        });
        //是否插入可拖拽区域
        var dragPanel = "";
        //只有可拖拽的模块才可以被删除
        if (data.draggable) {
            //绑定删除模块事件
            $btn_del.click(function () {
                HiShop.DIY.del(data);
                return false;
            });
            dragPanel = ".drag";
        } else {
            $btn_del.remove();
            dragPanel = ".nodrag";
        }
        $diy_contain.find(dragPanel).append($render_conitem); //插入文档
        //是否添加完后立即显示控制内容
        showctrl = showctrl ? showctrl : false;
        if (showctrl) {
            $actionPanel.click(); //触发一次编辑事件
        }
        //根据是否可拖动插入不同的缓存数组
        if (data.draggable) {
            HiShop.DIY.LModules.push(data);
        } else {
            HiShop.DIY.PModules.push(data);
        }
        return false;
    };
    /*
     * 编辑模块
     * @param data 模块数据
     */
    HiShop.DIY.edit = function (data) {
        //移除之前的模块控制内容
        $diy_ctrl.find(".diy-ctrl-item[data-origin='item']").remove();
        //渲染模板
        var html_ctrl_panel = $("#tpl_diy_ctrl").html(),
            html_ctrl_con = _.template($("#tpl_diy_ctrl_type" + data.type).html(), data),
            html_ctrl = _.template(html_ctrl_panel, { html: html_ctrl_con }),
            $render_ctrl = $(html_ctrl);
        $diy_ctrl.append($render_ctrl); //插入dom
        HiShop.DIY.repositionCtrl(data.dom_conitem, $render_ctrl); //设置控制内容的位置      
        HiShop.DIY.bindEvents($render_ctrl, data); //绑定各种事件
        $render_ctrl.show().siblings(".diy-ctrl-item").hide(); //显示控制内容，并隐藏其它
        return false;
    };
    /*
     * 重设控制内容的位置
     * @param conitem 手机视图dom对象
     * @param ctrl 控制内容dom对象
     */
    HiShop.DIY.repositionCtrl = function (conitem, ctrl) {
        var top_conitem = conitem.offset().top,
            curPosTop = top_conitem - HiShop.DIY.constant.diyoffset.top;

        ctrl.css("marginTop", curPosTop);//设置位置

        $("html,body").animate({ scrollTop: curPosTop }, 300);//滚动页面
    };
    /*
     * 删除模块
     * @param data 模块数据
     */
    HiShop.DIY.del = function (data) {
        if (!data) return;
        //提示删除
        $.jBox.show({
            title: "提示",         
            content: _.template($("#tpl_jbox_simple").html(), {               
                content: "删除后将不可恢复，是否继续？"
            }),
            btnOK: {
                onBtnClick: function (jbox) {
                    $.jBox.close(jbox);
                    //从缓存数组中删除
                    var lists = HiShop.DIY.LModules,
                        lists_len = HiShop.DIY.LModules.length;

                    for (var i = 0; i < lists_len; i++) {
                        if (lists[i].id == data.id) {
                            lists.splice(i, 1);//删除（i：位置；1：数量）
                            break;
                        }
                    }
                    //从文档中删除
                    data.dom_conitem.remove();
                    $diy_ctrl.find(".diy-ctrl-item[data-origin='item']").remove();
                }
            }
        });
        return false;
    };
    /*
     * 绑定ctrl事件
     * @param ctrldom 空中内容dom
     * @param data 模块数据
     */
    HiShop.DIY.bindEvents = function (ctrldom, data) {
        //根据不同类型模块绑定相应事件
        // switch (data.type) {
        //     case 1:HiShop.DIY.Unit.event_type1(ctrldom, data);break;//富文本
        //     case 2:HiShop.DIY.Unit.event_type2(ctrldom, data);break;//标题
        //     case 3:HiShop.DIY.Unit.event_type3(ctrldom, data);break;//自定义模块
        //     case 4:HiShop.DIY.Unit.event_type4(ctrldom, data);break;//商品
        //     case 5:HiShop.DIY.Unit.event_type5(ctrldom, data);break;//商品列表（分组标签）
        //     // case 6:HiShop.DIY.Unit.event_type6(ctrldom, data);break;//商品搜索
        //     case 7:HiShop.DIY.Unit.event_type7(ctrldom, data);break;//文本导航
        //     case 8:HiShop.DIY.Unit.event_type8(ctrldom, data);break;//图片导航
        //     case 9:HiShop.DIY.Unit.event_type9(ctrldom, data);break;//图片广告
        //     // case 10:HiShop.DIY.Unit.event_type10(ctrldom, data);break;//分割线
        //     case 11:HiShop.DIY.Unit.event_type11(ctrldom, data);break;//辅助空白
        // }
        if (data.type == 6 || data.type == 10) return;
        HiShop.DIY.Unit["event_type" + data.type](ctrldom, data);
    };
    /*
     * 重新计算装修模块的排序
     */
    HiShop.DIY.reCalcPModulesSort = function () {
        _.each(HiShop.DIY.LModules, function (module, index) {
            module.sort = module.dom_conitem.index();
        });
    };
    /*
     * 获取装修数据
     */
    HiShop.DIY.Unit.getData = function () {
        HiShop.DIY.reCalcPModulesSort(); //重新计算模块的排序
        //数据格式
        var data = {
            page: {}, //页面信息
            PModules: {}, //页面模块
            LModules: {} //装修模块
        };
        data.page.title = $(".j-pagetitle-ipt").val(); //获取页面标题数据
        data.page.subtitle = $(".j-pagesubtitle-ipt").val(); //获取页面副标题数据
        data.page.view_pic = $(".j-view_pic-ipt").prop('src');//获取页面图片数据
        data.page.praise_num = $(".j-pagepraisenum").val();
        data.PModules = HiShop.DIY.PModules; //获取页面模块数据      
        data.page.goto_time = $('.j-gototime-ipt').val(); // 获取时间
        //缓存排序后的自定义模块数组
        var newsortarr = [];
        //重排序
        for (var i = 0; i < HiShop.DIY.LModules.length; i++) {
            var tmp = HiShop.DIY.LModules[i];
            if (tmp != '') {
                newsortarr[tmp.sort] = tmp;
            }
        }
        data.LModules = newsortarr;
        //移除数据里的dom参数和ue参数
        var tmp = $.extend(true, {}, data);
        _.each(tmp.LModules, function (item) {
            if (item.type == 5) {
                item.dom_conitem = HiShop.Base64.encode(HiShop.Base64.utf16to8(HiShop.Config.HiTempLatePath.GroupGoodTemp + item.content.layout + HiShop.Config.HiTempLatePath.TemplateExt));
            }
            else if (item.type == 9){
                item.dom_conitem = HiShop.Base64.encode(HiShop.Base64.utf16to8(_.template($("#tpl_diy_con_type" + item.type+"Phone").html(), item)));
            }
            else {
                item.dom_conitem = HiShop.Base64.encode(HiShop.Base64.utf16to8(_.template($("#tpl_diy_con_type" + item.type).html(), item)));
            }           
            item.dom_ctrl = null;
            item.ue = null;
        });
        _.each(tmp.PModules, function (item) {
            var head = $("#tpl_diy_con_type" + item.type).html();
            if (item.type == 9) {
                head = $("#tpl_diy_con_type" + item.type+"Phone").html();
            } else if (item.type == "Header_style11" || item.type == "Header_style14") {
                head = $("#tpl_diy_con_type" + item.type + "Phone").html();
            }
            item.dom_conitem = HiShop.Base64.encode(HiShop.Base64.utf16to8(_.template(head, item) + HiShop.DIY.Unit.HStyleAddJs(item.content.bg)));                       
            item.dom_ctrl = null;
            item.ue = null;
        });
        return tmp;
    }
    HiShop.DIY.Unit.HStyleAddJs = function (bg)
    {
        html = "  <script src=\"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\" type=\"text/javascript\"></script>\n\
                  \<script type=\"text/javascript\">\n\
                    $(function () {\n\
                        $('html').css({\n\
                            'height':'100%',\n\
                            'width':'100%'\n\
                        })\n\
                        $('body').css({\n\
                            'height':'100%',\n\
                            'width':'100%',\n\
                            'background':'url(" + bg + ") no-repeat',\n\
                            'backgroundSize':'cover'\n\
                        })\n\
                    })\n\
                </script>";
        return html;
    }
    HiShop.DIY.Unit.html_encode = function (str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, "&");
        s = s.replace(/</g, "<");
        s = s.replace(/>/g, ">");
        s = s.replace(/ /g, " ");
        s = s.replace(/\'/g, "'");
        s = s.replace(/\"/g, """);
        return s;
    }
    HiShop.DIY.Unit.html_decode = function (str) {
        var s = "";

        if (str.length == 0) return "";
        s = str.replace(/&/g, "&");
        s = s.replace(/</g, "<");
        s = s.replace(/>/g, ">");
        s = s.replace(/ /g, " ");
        s = s.replace(/'/g, "\'");
        s = s.replace(/"/g, "\"");
        return s;
    }
});

模板主体（ShopTempEdit.aspx）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShopTempEdit.aspx.cs" Inherits="Hidistro.UI.Web.Admin.vshop.ShopTempEditNew" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>编辑店铺主页 - 微商城</title>
    <link rel="stylesheet" href="/Admin/shop/Public/css/dist/component-min.css" />
    <link rel="stylesheet" href="/Admin/shop/Public/plugins/jbox/jbox-min.css" />
    <!-- diy css start-->
    <link rel="stylesheet" href="/Admin/shop/PublicMob/css/style.css" />
    <link rel="stylesheet" href="/Admin/shop/Public/plugins/diy/diy-min.css" />
    <link rel="stylesheet" href="/Utility/Ueditor/plugins/uploadify/uploadify-min.css" />
    <link rel="stylesheet" href="/Admin/shop/Public/plugins/colorpicker/colorpicker.css" />
    <!-- diy css end-->
    <link rel="stylesheet" href="/Admin/shop/Public/plugins/colorpicker/colorpicker.css" />
    <link rel="stylesheet" href="/Templates/common/style/head.css" />
    <link rel="stylesheet" href="/Admin/shop/Public/css/dist/home/Shop/edit_homepage.css" />
    <link href="/Utility/iconfont/iconfont.css" rel="Stylesheet" />
    <script type="text/javascript" src="../../Utility/jquery-1.8.3.min.js"></script>
    <script src="/Utility/nicescroll/jquery.nicescroll.js" type="text/javascript"></script>


</head>
<body>
    <form id="thisForm" runat="server">
        <script>
            $(function () {
                var a = $(window).height();
                $('body').css("height", a);
            })

      
        </script>
        <input type="hidden" id="pageclient" value="vshop" />
        <div class="container" style="margin: 0px 0 0 0px; padding: 0px 230px 0 0; width: 100%;">
            <div class="inner clearfix" style="margin: 0px; border: none;">
                <!-- end content-left -->
                <div class="content-right fl" style="border: none; width: 100%; height: 100%;">
                    <div class="page-top">
                        <div class="page-header">
                            <h2>编辑店铺主页</h2>
                            <span style="float: right; color: #aaa; line-height: 26px;">(请使用IE10以上版本或者google浏览器进行模板编辑)</span>
                        </div>
                    </div>
                    <input type="hidden" name="content" value="{"page":{"title":"店铺首页"},"PModules":[{"id":1,"type":"Header_style1","draggable":false,"sort":0,"content":{"bg":"/PublicMob/images/indexbg/01.jpg","photo":"/PublicMob/images/header2.jpg"},"dom_conitem":null,"dom_ctrl":null,"ue":null}],"LModules":[{"id":9,"type":6,"draggable":true,"sort":0,"content":{"layout":1,"showPrice":true,"showIco":true,"showName":true,"goodslist":[]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":10,"type":4,"draggable":true,"sort":1,"content":{"layout":"1","showPrice":true,"showIco":true,"showName":true,"goodslist":[]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":11,"type":4,"draggable":true,"sort":2,"content":{"layout":1,"showPrice":true,"showIco":true,"showName":true,"goodslist":[]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010122837","type":2,"draggable":true,"sort":3,"content":{"title":"标题名称","subtitle":"『副标题』","direction":"left","space":0},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010129469","type":2,"draggable":true,"sort":4,"content":{"title":"标题名称","subtitle":"『副标题』","direction":"left","space":0},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010130861","type":3,"draggable":true,"sort":5,"content":null,"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010131229","type":4,"draggable":true,"sort":6,"content":{"layout":1,"showPrice":true,"showIco":true,"showName":1,"goodslist":[]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010131701","type":5,"draggable":true,"sort":7,"content":{"layout":1,"showPrice":true,"showIco":true,"showName":true,"group":null,"goodsize":6,"goodslist":[{"item_id":"1","link":"#","pic":"/Public/images/diy/goodsView1.jpg","price":"100.00","title":"第一个商品"},{"item_id":"2","link":"#","pic":"/Public/images/diy/goodsView2.jpg","price":"200.00","title":"第二个商品"},{"item_id":"3","link":"#","pic":"/Public/images/diy/goodsView3.jpg","price":"300.00","title":"第三个商品"},{"item_id":"4","link":"#","pic":"/Public/images/diy/goodsView4.jpg","price":"400.00","title":"第四个商品"}]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010132197","type":6,"draggable":true,"sort":8,"content":null,"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010132518","type":7,"draggable":true,"sort":9,"content":{"dataset":[{"linkType":0,"link":"","title":"","showtitle":""}]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010132816","type":14,"draggable":true,"sort":10,"content":{"website":""},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010133150","type":13,"draggable":true,"sort":11,"content":{"layout":"1","dataset":[{"linkType":0,"link":"#","title":"导航名称","pic":"/Public/images/diy/waitupload.png"},{"linkType":0,"link":"#","title":"导航名称","pic":"/Public/images/diy/waitupload.png"},{"linkType":0,"link":"#","title":"导航名称","pic":"/Public/images/diy/waitupload.png"}]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010133669","type":12,"draggable":true,"sort":12,"content":{"style":"0","marginstyle":"0","dataset":[{"link":"/Shop/index","linkType":6,"showtitle":"首页","title":"店铺主页","pic":"/PublicMob/images/ind3_1.png","bgColor":"#07a0e7","cloPicker":"0","fotColor":"#fff"},{"link":"/Shop/index","linkType":6,"showtitle":"新品","title":"","pic":"/PublicMob/images/ind3_2.png","bgColor":"#72c201","cloPicker":"1","fotColor":"#fff"},{"link":"/Shop/index","linkType":6,"showtitle":"热卖","title":"店铺主页","pic":"/PublicMob/images/ind3_3.png","bgColor":"#ffa800","cloPicker":"2","fotColor":"#fff"},{"link":"/Shop/index","linkType":6,"showtitle":"推荐","title":"","pic":"/PublicMob/images/ind3_4.png","bgColor":"#d50303","cloPicker":"3","fotColor":"#fff"}]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010133985","type":11,"draggable":true,"sort":13,"content":{"height":10},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010134412","type":10,"draggable":true,"sort":14,"content":null,"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010134700","type":3,"draggable":true,"sort":15,"content":null,"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"20158101013522","type":2,"draggable":true,"sort":16,"content":{"title":"标题名称","subtitle":"『副标题』","direction":"left","space":0},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010135317","type":9,"draggable":true,"sort":17,"content":{"showType":1,"space":0,"margin":10,"dataset":[]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010135628","type":8,"draggable":true,"sort":18,"content":{"dataset":[{"linkType":0,"link":"#","title":"导航名称","showtitle":"导航名称","pic":"/Public/images/diy/waitupload.png"},{"linkType":0,"link":"#","title":"导航名称","showtitle":"导航名称","pic":"/Public/images/diy/waitupload.png"},{"linkType":0,"link":"#","title":"导航名称","showtitle":"导航名称","pic":"/Public/images/diy/waitupload.png"},{"linkType":0,"link":"#","title":"导航名称","showtitle":"导航名称","pic":"/Public/images/diy/waitupload.png"}]},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010135911","type":1,"draggable":true,"sort":19,"content":{"fulltext":"&lt;p&gt;『富文本编辑器』&lt;/p&gt;"},"ue":null,"dom_conitem":null,"dom_ctrl":null},{"id":"201581010136588","type":15,"draggable":true,"sort":20,"content":{"direct":0,"imgsrc":"","audiosrc":""},"dom_conitem":null,"dom_ctrl":null,"ue":null},{"id":"201581010104110","type":2,"draggable":true,"sort":21,"content":{"title":"标题名称","subtitle":"『副标题』","direction":"left","space":0},"dom_conitem":null,"dom_ctrl":null,"ue":null}]}" id="j-initdata">
                    <input type="hidden" name="template_id" value='default' runat="server" id="j_pageID">

                    <div class="diy clearfix div_center">
                        <div class="diy-actions" style="display:none">
                                <div class="diy-actions-title">添加模块</div>
                                <div class="diy-actions-addModules clearfix">
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="1">
                                            <b>富文本
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="2">
                                            <b>标题</b>
                                        </a>
                                    </div>
                                    <div class="tab" style="display: none;">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="3">自定义<br />
                                            模块
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="4">
                                            <b>商品</b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="5">
                                            <b>商品<br />
                                                列表
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="6">
                                            <b>商品<br />
                                                搜索
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="7">
                                            <b>文本<br />
                                                导航
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="8">
                                            <b>图片<br />
                                                导航
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="9">
                                            <b>图片<br />
                                                广告
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="10">
                                            <b>分割线</b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="11">
                                            <b>辅助<br />
                                                空白
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="12">
                                            <b>顶部<br />
                                                菜单
                                            </b>
                                        </a>
                                    </div>
                                    <div class="tab">
                                        <a href="javascript:;" class="j-diy-addModule" data-type="13">
                                            <b>橱窗</b>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        <div class="diy-phone-outbox clearfix">
                            <div id="diy-phone">
                                <div class="diy-phone-header">
                                    <i class="diy-phone-receiver"></i>
                                    <div class="diy-phone-title j-pagetitle">店铺主页</div>
                                </div>
                                <!--内容显示区域-->
                                <div class="diy-phone-contain" id="diy-contain">
                                    <div class="nodrag"></div>
                                    <div class="drag"></div>
                                </div>
                                <i class="diy-phone-footer"></i>
                            </div>
                            
                        </div>
                        <!--控制器显示区域-->
                        <div id="diy-ctrl">
                            <div class="diy-ctrl-item" data-origin="pagetitle" style="margin-top: 85px;">
                                <div class="formitems">
                                    <label class="fi-name">页面标题：</label>
                                    <div class="form-controls">
                                        <input type="text" class="input j-pagetitle-ipt" value="店铺主页">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="diy-actions-submit">
                            <a href="javascript:;" class="btn btn-primary" id="j-savePage">保存</a>
<%--                            <a href="javascript:;" class="btn btn-success" id="j-saveAndPrvPage">保存并预览</a>
                            <a href="javascript:;" class="btn btn-danger" id="j-resetToInit">还原到初始模板</a>--%>
                            <a href="javascript:scroll(0,0)" id="j-gotop" class="gotop" title="回到顶部"></a>
                        </div>
                    </div>
                </div>

                <!-- end content-right -->
            </div>
        </div>

        <!-- end container -->
        <!--gonggao-->
        <div class="footer">&copy; 2015 商城软件 , Inc. All rights reserved.</div>
        <!-- end footer -->

        <!-- end gotop -->

        <script type="text/j-template" id="tpl_tooltips">
        <div class="tooltips" style="display:none;">
            <span class="tooltips-arrow tooltips-arrow-<#= placement #>"><em>◆</em><i>◆</i></span>
            <#= content #>
        </div>
        </script>
        <!-- end tooltips -->

        <script type="text/j-template" id="tpl_hint">
        <div class="hint hint-<#= type #>"><#= content #></div>
        </script>
        <!-- end hint -->

        <script type="text/j-template" id="tpl_jbox_simple">
        <div class="mgt30"><#= content #></div>
        </script>
        <!-- end tpl_jbox_simple -->

        <script type="text/j-template" id="tpl_qrcode">
        <div id="qrcode">
            <img src="<#= src #>">
            <a href="javascript:;" class="qrcode-btn j-closeQrcode"><i class="gicon-remove white"></i></a>
        </div>
        </script>
        <!-- end qrcode -->

        <script type="text/j-template" id="tpl_verify_set">

        <div class="tabs clearfix mgt15" id="verify-set-tabs">
            <a href="javascript:;" class="tabs_a fl active">店铺信息设置</a>
            <a href="javascript:;" class="tabs_a fl">微信设置</a>
            <a href="javascript:;" class="tabs_a fl">提成设置</a>
        </div>
        <form action="" method="post" id='form-set'>

            <!-- 店铺信息 -->
            <div class="panel-single panel-single-light mgt20 verify-set-div ">
                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>店铺名称：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="title" value="测试">
                        <span class="fi-help-text"></span>
                    </div>
                </div>
                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>联系人：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="contact_name" value="CJZhao">
                        <span class="fi-help-text"></span>
                    </div>
                </div>
                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>联系电话：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="contact_phone" value="13467648802">
                        <span class="fi-help-text"></span>
                    </div>
                </div>
                <div class="formitems">
                    <label class="fi-name">店铺简介：</label>
                    <div class="form-controls">
                        <textarea class="textarea" name="description"></textarea>
                        <span class="fi-help-text"></span>
                    </div>
                </div>
            </div>
            <!-- 微信 -->
            <div class="panel-single panel-single-light mgt20 verify-set-div hide">
                <div class="alert alert-info">开通微信营销需要绑定微信公众帐号，不知道怎么绑定请参考 <a href="/PubMarketing/setting_guide" target="_blank" class="a_hover">开通指引</a></div>

                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>名称：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="pub_name" value="">
                        <span class="fi-help-text"></span>
                    </div>
                </div>
                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>原始ID：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="source_id" value="">
                        <span class="fi-help-text"></span>
                    </div>
                </div>

                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>微信号：</label>
                    <div class="form-controls">
                        <input type="text" class="input" name="pub_account" value="">
                        <span class="fi-help-text"></span>
                    </div>
                </div>
                <div class="formitems" style="margin-top:30px;">
                    <label class="fi-name">回调URL：</label>
                    <div class="form-controls pdt5">
                        <div class="fl" style="width:355px;">http://m.wxfenxiao.com/Wxapi/index.html?id=2009670</div>
                        <a href="javascript:;" class="btn btn-small j-copy" data-copy="http://m.wxfenxiao.com/Wxapi/index.html?id=2009670">复制</a>
                    </div>
                </div>
                <div class="formitems">
                    <label class="fi-name">Token：</label>
                    <div class="form-controls pdt5">
                        <div class="fl" style="width:355px;">addfad0ee2b25b5cc4a7f1e0e0138cc8</div>
                        <a href="javascript:;" class="btn btn-small j-copy" data-copy="addfad0ee2b25b5cc4a7f1e0e0138cc8">复制</a>
                    </div>
                </div>
                <div class="formitems mgt5">
                    <label class="fi-name"><span class="colorRed">*</span>AppId：</label>
                    <div class="form-controls">
                        <input type="text" class="input xlarge" value="" name="app_id">
                        <span class="fi-help-text"><a href="https://mp.weixin.qq.com/" target="_blank">点击获取</a>(开发者中心)</span>
                    </div>
                </div>

                <div class="formitems">
                    <label class="fi-name"><span class="colorRed">*</span>Secret：</label>
                    <div class="form-controls">
                        <input type="text" class="input xlarge" name="app_secret" value="">
                        <span class="fi-help-text"><a href="https://mp.weixin.qq.com/" target="_blank">点击获取</a>(开发者中心)</span>
                    </div>
                </div>

            </div>
            <!-- 提成 -->
            <div class="panel-single panel-single-light mgt20 verify-set-div hide">
                <div class="formitems">
                    <label class="fi-name" style="width: 121px;"><span class="colorRed">*</span>直属上级提成比例：</label>
                    <div class="form-controls">
                        <input type="text" class="input mini j-pid" name="directly_online_ratio" value="0">
                        <span class="fi-help-text">购买者直属上级会员的提成比例</span>
                    </div>
                </div>

                <div class="formitems">
                    <label class="fi-name" style&