app-template.html 12.3 KB
<!-- APP模板渲染 -->
<script type="text/template" id="app-template">
    <div class="app-template">
        <img src="/static/assets/images/decorator/nar.png" alt="#">
        [[each data as item index]]
        <!-- 店招模块 -->
        [[if item.moduleType == 'ShopBanner']]
            <!-- 展示装修数据 -->
            [[if item.moduleData]]
            <div class="app-top-banner">
                <div class="app-shop-banner modular-editor" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]" non-delete="true">
                    <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
                </div>
                <img src="/static/assets/images/decorator/app-shop-intro.png" alt="#" class="app-shop-intro">
            </div>
            [[else]]
            <!--展示默认的-->
            <div class="app-top-banner">
                <div class="app-shop-banner modular-editor" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]" non-delete="true">
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                </div>
                <img src="/static/assets/images/decorator/app-shop-intro.png" alt="#" class="app-shop-intro">
            </div>
            [[/if]]
        [[/if]]

        <!-- 商品列表 -->
        [[if item.moduleType == 'ProductList']]
        <div class="app-product-list modular-editor" data-type="ProductList" data-title="编辑商品列表模块" data-index="[[index]]">
            <img src="/static/assets/images/decorator/app-product-list.png" alt="#">
        </div>
        [[/if]]
        [[if item.moduleType == 'ProductListImg']]
        <div class="app-product-list" non-delete="true" non-added="true" data-type="ProductListImg" data-title="编辑商品列表模块" data-index="[[index]]">
            <img src="/static/assets/images/decorator/app-product-list.png" alt="#">
        </div>
        [[/if]]
        [[/each]]

        <div id="app-dragable">  <!-- 可拖拽的模块区域 -->
        [[each data as item index]]
        <!-- 轮播图 -->
        [[if item.moduleType == 'CarouselImage']]
            [[if item.moduleData]]
            <div class="app-carousel-image modular-editor carouse-animation" data-type="CarouselImage" data-title="编辑轮播图模块" data-index="[[index]]"
                style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                [[each item.moduleData.data as data _index]]
                <img src="[[data.pic]]" alt="#" class="img-item" style="[[_index == 0 ? 'display: inline;' : '']]">
                [[/each]]
            </div>
            [[else]]
            <div class="app-carousel-image modular-editor" data-type="CarouselImage" data-title="编辑轮播图模块" data-index="[[index]]">
                <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            </div>
            [[/if]]
        [[/if]]

        <!-- 一张图 -->
        [[if item.moduleType == 'SingleImage']]
            <!-- 展示装修数据 -->
            [[if item.moduleData]]
            <div class="app-single-image modular-editor" data-type="SingleImage" data-title="编辑一张图模块" data-index="[[index]]" 
                style="height: [[item.moduleData.properties.moduleHeight]]px; [[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
            </div>
            [[else]]
            <div class="app-single-image modular-editor" data-type="SingleImage" data-title="编辑一张图模块" data-index="[[index]]">
                <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            </div>
            [[/if]]
        [[/if]]

        <!-- 两张图 -->
        [[if item.moduleType == 'DoubleImage']]
            [[if item.moduleData]]
            <div class="app-double-image modular-editor" data-type="DoubleImage" data-title="编辑两张图模块" data-index="[[index]]"
                style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
                <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item">
            </div>
            [[else]]
            <div class="app-double-image modular-editor" data-type="DoubleImage" data-title="编辑两张图模块" data-index="[[index]]">
                <div class="border">
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                </div>
                <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            </div>
            [[/if]]
        [[/if]]

        <!-- 三张图 -->
        [[if item.moduleType == 'TripleImage']]
            [[if item.moduleData]]
                [[if item.moduleData.properties.displayType == 1]]
                <!-- 250*330 并排展示 -->
                <div class="app-triple-image modular-editor" data-type="TripleImage" data-title="编辑三张图模块" data-index="[[index]]"
                    style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                    <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item1">
                    <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item1">
                    <img src="[[item.moduleData.data[2].pic]]" alt="#" class="img-item1">
                </div>
                [[else if item.moduleData.properties.displayType == 2]]
                <!-- 250*250 并排展示 -->
                <div class="app-triple-image2 modular-editor" data-type="TripleImage" data-title="编辑三张图模块" data-index="[[index]]"
                    style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                    <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item2">
                    <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item2">
                    <img src="[[item.moduleData.data[2].pic]]" alt="#" class="img-item2">
                </div>
                [[else if item.moduleData.properties.displayType == 3]]
                <!-- 21 -->
                <div class="app-triple-image3 modular-editor" data-type="TripleImage" data-title="编辑三张图模块" data-index="[[index]]"
                    style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                    <div class="img-item">
                        <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item31">
                        <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item31">
                    </div>
                    <div class="img-item">
                        <img src="[[item.moduleData.data[2].pic]]" alt="#" class="img-item32">
                    </div>
                </div>
                [[else if item.moduleData.properties.displayType == 4]]
                <!-- 12 -->
                <div class="app-triple-image3 modular-editor" data-type="TripleImage" data-title="编辑三张图模块" data-index="[[index]]"
                    style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                    <div class="img-item">
                        <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item41">
                    </div>
                    <div class="img-item">
                        <img src="[[item.moduleData.data[1].pic]]" alt="#" class="img-item42">
                        <img src="[[item.moduleData.data[2].pic]]" alt="#" class="img-item42">
                    </div>
                </div>
                [[/if]]
            [[else]]
            <div class="app-triple-image modular-editor" data-type="TripleImage" data-title="编辑三张图模块" data-index="[[index]]">
                <div class="border">
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                </div>
                <div class="border">
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                </div>
                <div class="border" style="border-width: 0;">
                    <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
                </div>
            </div>
            [[/if]]
        [[/if]]

        <!-- 标题 -->
        [[if item.moduleType == 'Title']]
            [[if item.moduleData]]
            <div class="app-title modular-editor" data-type="Title" data-title="编辑标题模块" data-index="[[index]]"
                style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                <div class="title">
                    [[item.moduleData.data[0].text]]
                    [[if item.moduleData.data[0].resource]]
                    <a href="#"><b>...</b></a>
                    [[/if]]
                </div>
            </div>
            [[else]]
            <div class="app-title modular-editor" data-type="Title" data-title="编辑标题模块" data-index="[[index]]">
                <div class="title">标题名称<a href="#"><b>...</b></a></div>
            </div>
            [[/if]]
        [[/if]]

        <!-- 视频 -->
        [[if item.moduleType == 'Video']]
            [[if item.moduleData]]
            <div class="app-video modular-editor" data-type="Video" data-title="编辑视频模块" data-index="[[index]]"
                style="[[item.moduleData.properties.isModuleMargin == 0 ? 'margin-bottom: 0;' : '']]">
                <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
            </div>
            [[else]]
            <div class="app-video modular-editor" data-type="Video" data-title="编辑视频模块" data-index="[[index]]">
                <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            </div>
            [[/if]]
        [[/if]]
        [[if item.moduleType == 'AppRecommendProduct']]
        <div class="modular-editor app-recommend-product" data-type="AppRecommendProduct" data-title="编辑推荐商品模块" data-index="[[index]]">
            [[if item.moduleData]]
            [[else]]
            <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
            [[/if]]
        </div>
        [[/if]]
        [[/each]]
        </div>

        <!-- 增加模块区域 过滤基础模板-->
        [[each data as item index]]
        [[if item.templateId != 3  && index == 0]]
        <div class="btn add-modular-area" title="添加模块" style="[[data.length > 1 ? 'margin-top: -5px;': '']]">
            <span class="glyphicon glyphicon-plus" style="top: -4px;"></span>
        </div>
        [[/if]]
        [[/each]]
    </div>
</script>

<!-- 三张图模块展示样式 -->
<script type="text/template" id="triple-image-radio-group">
    <div class="form-group">
        <div class="col-sm-1 title">展示类型: </div>
        <div class="col-sm-1">
            <input type="radio" name="displayType" value="1" class="display-type-radio" id="displayTypeRadio1" data-index="[[index]]">
            <label for="displayTypeRadio1" class="title">250*330</label>
        </div>
        <div class="col-sm-1">
            <input type="radio" name="displayType" value="2" class="display-type-radio" id="displayTypeRadio2" data-index="[[index]]">
            <label for="displayTypeRadio2" class="title">250*250</label>
        </div>
        <div class="col-sm-1 ">
            <input type="radio" name="displayType" value="3" class="display-type-radio" id="displayTypeRadio3" data-index="[[index]]">
            <label for="displayTypeRadio3" class="title">21</label>
        </div>
        <div class="col-sm-1">
            <input type="radio" name="displayType" value="4" class="display-type-radio" id="displayTypeRadio4" data-index="[[index]]">
            <label for="displayTypeRadio4" class="title">12</label>
        </div>
        <!-- 此处的id要与radioname一致,用于初始化数据绑定 -->
        <input type="hidden" value="[[displayType||1]]" id="displayType" for="radio" required/>
    </div>
</script>