DIY 首页可视化编辑__.template($("#tpl_diy_ctrl_type" + data.type).htm-程序员宅基地

技术标签: 可视化  

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&
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/GUYGF/article/details/79213259

智能推荐

React Native 学习笔记九(ScrollView的使用)_react native android scrollview 里面元素绝对布局-程序员宅基地

文章浏览阅读723次。关于scrollView和android 中的使用效果是一样的 被包裹的组件和布局 能够实现滚动效果 注意:该组件适用于zi组件比较少的滚动元素class helloReact1 extends Component { render() { return ( ScrollView> Text style=_react native android scrollview 里面元素绝对布局

WINDOWS将程序添加到右键菜单+图标_windows11 如何把程序加到右键菜单中-程序员宅基地

文章浏览阅读845次。问题使用解压版Notepad++,右键菜单栏中没有使用Notepad++打开。解决办法:1.win + R > regedit 打开注册表2. HKEY_CLASSES_ROOT*\shell,添加Notepad(自定义),默认值是右键菜单中显示名称,ICON为图标(没有需要新增)3. 在刚刚新建Notepad下新增项,command,默认值填写程序路径: F:\Program Files\Notepad++\notepad++.exe %1  其中%1表示要打开的文件参数4.结_windows11 如何把程序加到右键菜单中

linux+rv1126/imx6ull:opencv静态库交叉编译(手把手百分百成功)_linux交叉编译opencv-程序员宅基地

文章浏览阅读677次,点赞8次,收藏12次。1)官网自行下载2)国内镜像网站。_linux交叉编译opencv

Tangram商业版本预览(十): Tangram在.NET 2.0中的应用_tangram 环节信息表-程序员宅基地

文章浏览阅读300次。 Tangram商业版本预览(十): Tangram在.NET 2.0中的应用Tangram作为一个UI框架设计器,在.NET开发中有十分强大的应用,作为一个Form组织器,开发者可以将一组Form包容在Tangram框架之中,这一点使得应用软件变得十分灵活,在.NET开发环节集成Tangram,有如构造大厦的感觉。(处于设计阶段的两个.NET Form)(.NET Form作为一个分页) _tangram 环节信息表

协同过滤与推荐系统的道德与法律问题-程序员宅基地

文章浏览阅读577次,点赞24次,收藏19次。1.背景介绍协同过滤(Collaborative Filtering)是一种基于用户行为的推荐系统技术,它通过分析用户之间的相似性来为用户推荐他们可能感兴趣的内容。在现代互联网时代,推荐系统已经成为各种在线平台的核心功能,如电子商务网站、社交媒体网站、视频平台等。然而,随着推荐系统的普及和发展,它们面临着一系列道德和法律问题。在本文中,我们将探讨协同过滤与推荐系统的道德与法律问题,包括隐私...

语音质量指标Python(PESQ、STOI、SegSNR、LLR、WSS、CD、LSD、CSIG、CBAK、COVL)_python计算pesq-程序员宅基地

文章浏览阅读1.5w次,点赞56次,收藏152次。Speech#!/usr/bin/env python# -*- coding: utf-8 -*-'''@Time : 2020/9/13 16:53@Author : kingback@Site :@File : SEPM.py@Software: PyCharm'''import pysepmimport osimport numpy as npimport soundfile as sffrom tqdm import tqdm'''the i_python计算pesq

随便推点

Lintcode 最大子数组-程序员宅基地

文章浏览阅读210次。给定一个整数数组,找到一个具有最大和的子数组,返回其最大和。 注意事项子数组最少包含一个数您在真实的面试中是否遇到过这个题? Yes样例给出数组[−2,2,−3,4,−1,2,1,−5,3],符合要求的子数组为[4,−1,2,1],其最大和为6挑战 要求时间复杂度为O(n)c

TinUI发展历程-程序员宅基地

文章浏览阅读694次。TinUI发展笔记_tinui

pat.1078 字符串压缩与解压_本题要求实现一个字符串压缩的简单函数。压缩规则是:如果某个字符 x连续出现-程序员宅基地

文章浏览阅读118次。1078字符串压缩与解压(20分)文本压缩有很多种方法,这里我们只考虑最简单的一种:把由相同字符组成的一个连续的片段用这个字符和片段中含有这个字符的个数来表示。例如ccccc就用5c来表示。如果字符没有重复,就原样输出。例如aba压缩后仍然是aba。解压方法就是反过来,把形如5c这样的表示恢复为ccccc。本题需要你根据压缩或解压的要求,对给定字符串进行处理。..._本题要求实现一个字符串压缩的简单函数。压缩规则是:如果某个字符 x连续出现

beautifulsoup爬取网页中的表格_python爬取哔哩哔哩网页弹幕内容,并将爬取的内容以五角星的形式显示出来...-程序员宅基地

文章浏览阅读172次。转载:03 爬虫实例-获取网页弹幕内容思路:向哔哩哔哩网站发送请求请求成功后,解析爬取的弹幕内容保存到一个文件中读取文件并分析弹幕内容中词组或文字出现的频率将这些词组或文字组成五角星图形组成五角星图形后,以图片的形式输出使用到的类库,如果没有,需要下载,下载命令:pip 实现:import 知识点:request 向对方服务器发送请求BeautifulSoup 解析爬取的弹幕内容pandas 分析..._爬取的弹幕怎么看表格

python指数运算符,运算符 —— Python教程-程序员宅基地

文章浏览阅读2.7k次。本节教程讲解 Python 的运算法,例如算术、比较、赋值、逻辑、按位、身份(identity operator)和成员运算符。主要介绍语法和如何使用。每一个运算符都有代表的特定符号,并使用一个或多个操作数(变量)来执行特定的操作。例如:a | b or a & b。变量 a 和 b 是操作数,'|' 和 '&' 是运算符,'|' 运算符做二进制数的 OR 操作,'&' 运..._python指数运算符

原生JavaScript操作DOM标签的笔记_js 操作dom添加标签-程序员宅基地

文章浏览阅读818次,点赞20次,收藏22次。原生JavaScript操作DOM标签的笔记_js 操作dom添加标签

推荐文章

热门文章

相关标签