pc-template.html 8.31 KB
<!-- PC模板渲染 -->
<script type="text/template" id="pc-template">
    <div class="pc-template">
        <!-- 1150区域 -->
        [[each data as item index]]
        <!-- 店招 -->
        [[if item.moduleType == 'ShopBanner']]
            [[if item.moduleData]]
            <div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
                <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
            </div>
            [[else]]
            <div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
                <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            </div>
            [[/if]]
        [[/if]]
        <!-- 导航 -->
        [[if item.moduleType == 'ShopNavbar']]
            <div class="pc-shop-navbar modular-editor" non-delete="true" non-added="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
                <ul>
                    <li><a href="javascript:;">店铺首页</a></li>
                    <li><a href="javascript:;">全部商品</a></li>
                    <li><a href="javascript:;">人气单品</a></li>
                    <li><a href="javascript:;">新品上架</a></li>
                    [[if item.moduleData]]
                    [[each item.moduleData.data as data _index]]
                    <li><a href="javascript:;">[[data.text]]</a></li>
                    [[/each]]
                    [[/if]]
                </ul>
            </div>
        [[/if]]
        [[/each]]

        <!-- 160区域 -->
        <div class="left-area">
            <!-- 可拖拽区域 -->
            <div id="pc-dragable-160" data-style-area="1">
                [[each data as item index]]
                <!-- 品类导航 -->
                [[if item.moduleType == 'ProductSort']]
                <div class="modular-editor product-sort" non-editor="true" data-type="ProductSort" data-title="添加品类导航模块" data-index="[[index]]">
                    <img src="/static/assets/images/decorator/product-sort.png" alt="#">
                </div>
                [[/if]]
                <!-- PC搜索 -->
                [[if item.moduleType == 'PcSearch']]
                <div class="modular-editor pc-search" non-editor="true" data-type="PcSearch" data-title="添加搜索模块" data-index="[[index]]">
                    <img src="/static/assets/images/decorator/pc-search.png" alt="#">
                </div>
                [[/if]]
                <!-- 整图 -->
                [[if item.moduleType == 'ImageSet']]
                <div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    [[each item.moduleData.data as data _index]]
                    <img src="[[data.pic]]" alt="#" class="img-item">
                    [[/each]]
                    [[else]]
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                    [[/if]]
                </div>
                [[/if]]
                <!-- 小图文 -->
                [[if item.moduleType == 'Teletext']]
                <div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    [[each item.moduleData.data as data _index]]
                    <div class="tele-text-item">
                        <div class="classic-name">
                            <div class="title">[[data.text]]</div>
                        </div>
                        <img src="[[data.pic]]" alt="#" class="img-item">
                    </div>
                    [[/each]]
                    [[else]]
                    <div class="tele-text-item">
                        <div class="classic-name">
                            <div class="title">文字内容</div>
                        </div>
                        <div class="img-area">
                            <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                        </div>
                    </div>
                    [[/if]]
                </div>
                [[/if]]
                <!-- 标题 -->
                [[if item.moduleType == 'LeftTitle']]
                <div class="modular-editor pc-title" data-type="LeftTitle" data-title="编辑标题模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    <div class="title">[[item.moduleData.data[0].text]]</div>
                    [[else]]
                    <div class="title">标题内容</div>
                    [[/if]]
                </div>
                [[/if]]
                [[/each]]
            </div>
            <div class="btn add-modular-area" title="添加模块" data-style-area="1">
                <span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
            </div>
        </div>

        <!-- 975区域 -->
        <div class="right-area">
            <!-- 可拖拽区域 -->
            <div id="pc-dragable-975" data-style-area="2">
                [[each data as item index]]
                [[if item.moduleType == 'PCCarouselImage']]
                <div class="modular-editor pc-carouse-image" data-type="PCCarouselImage" data-title="编辑轮播图模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    <div class="left carouse-animation">
                        [[each item.moduleData.data as data _index]]
                        [[if _index > 1]]
                            <img src="[[data.pic]]" alt="#" class="img-item" style="[[_index == 2 ? 'display: inline;' : '']]">
                        [[/if]]
                        [[/each]]
                    </div>
                    <div class="right">
                        <img src="[[item.moduleData.data[0].pic]]" alt="#">
                        <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item">
                    </div>
                    [[else]]
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                    [[/if]]
                </div>
                [[/if]]
                [[if item.moduleType == 'RightTitle']]
                <div class="modular-editor pc-title" data-type="RightTitle" data-title="编辑标题模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    <div class="title">[[item.moduleData.data[0].text]]</div>
                        [[if item.moduleData.data[0].resource]]
                        <div class="header-nav">
                            <a href="#">MORE</a>
                        </div>
                        [[/if]]
                    [[else]]
                    <div class="title">标题内容</div>
                    <div class="header-nav">
                        <a href="#">MORE</a>
                    </div>
                    [[/if]]
                </div>
                [[/if]]
                [[if item.moduleType == 'RecommendProduct']]
                <div class="modular-editor recommend-product" data-type="RecommendProduct" data-title="编辑推荐商品模块" data-index="[[index]]">
                    [[if item.moduleData]]
                    [[else]]
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                    [[/if]]
                </div>
                [[/if]]
                [[if item.moduleType == 'ProductListImg']]
                <div class="recommend-product" non-delete="true" non-added="true" data-type="ProductListImg" data-title="编辑推荐商品模块" data-index="[[index]]">
                    <img src="/static/assets/images/decorator/pc-product-list.png" alt="#" class="logo">
                </div>
                [[/if]]
                [[/each]]
            </div>
            [[if templateType == '2']]
            <div class="btn add-modular-area" title="添加模块" data-style-area="2">
                <span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
            </div>
            [[/if]]
        </div>
    </div>
</script>