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

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码

OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版

关于美国计算机奥赛USACO,你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型(1)_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型

HTML+CSS大作业 环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计 网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现,SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文