在供应商主页上展示促销信息详情轮播图解决方案 - 模板篇（高级）

本文已参与「新人创作礼」活动，一起开启掘金创作之路

情景描述

一般厂家为了更好的向经销商销售其商品，经常会使用到促销手段，希望一旦促销信息被市场部审核通过，且管理员对指定用户发布该促销信息后，那么就会将促销图以轮播banner形式展示在指定用户的主页上。

实施步骤

1. 建立Promotion（主要用于记录状态信息和促销起止日期），Promotion Detail（主要记录产品类别和满足促销的最小数量和折扣信息）和Promotion Product（符合产品类别的具体产品信息）数据模型。
2. 编写逻辑代码。 a. 主页banner组件代码

<apex:page controller="PromotionCon">
    <title>Bootstrap 实例</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="{!URLFOR($Resource.PromotionBanner, 'PromotionBanner/css/bootstrap.min.css')}"/>
    
    <apex:includeScript value="{!URLFOR($Resource.PromotionBanner, 'PromotionBanner/js/jquery.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.PromotionBanner, 'PromotionBanner/js/popper.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.PromotionBanner, 'PromotionBanner/js/bootstrap.min.js')}"/>
        
    <style>
        ul, li, img{
            padding: 0;
            margin: 0 !important;
        }
        img {
            width: 100%;
            max-height: 380px;
        }
        li{
            list-style: none;
        }
        .carousel-inner, #thePanel {
            max-width: 1375px;
            height: 380px;
        }
        .noData {
            display: block;
            text-align: center;
            line-height: 380px;
            color: #666; 
            font-size: 14px;
        }
    </style>
    
    <apex:outputPanel rendered="{!results.size > 0}">
        <div id="demo" class="carousel slide" data-ride="carousel">


            <!-- 指示符 -->
            <apex:outputPanel rendered="{!results.size > 1}">
                <ul class="carousel-indicators"></ul>
            </apex:outputPanel>


            <!-- 轮播图片 -->
            <apex:dataList styleClass="carousel-inner" value="{!results}" var="r">
                <apex:outputLink target="_blank" title="{!r.promotion.Name}" value="/{!r.promotion.Id}">
                    <apex:image alt="{!r.promotion.Name}" url="{!r.link}" />
                </apex:outputLink>
            </apex:dataList>


            <!-- 左右切换按钮 -->
            <apex:outputPanel rendered="{!results.size > 1}">
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </apex:outputPanel>


        </div>
    </apex:outputPanel>
    <apex:outputPanel id="thePanel" rendered="{!results.size = 0}" styleClass="noData">
        暂无数据，敬请期待...
    </apex:outputPanel>
    <script>
        $(function(){
            var listSize = {!results.size};
            console.log('dataSize: ' + listSize);
            // 动态添加指示符个数
            for(var i = 0; i < listSize; i++) {
                $('ul.carousel-indicators').append("<li data-target='#demo' data-slide-to='"+ i +"'></li>");
            }
            $('ul.carousel-indicators li').eq(0).addClass('active');
            $('ul.carousel-inner li').addClass('carousel-item');
            $('ul.carousel-inner li').eq(0).addClass('active');
        });
    </script>
</apex:page>

b. 获取促销信息的controller

public class PromotionCon {
	public List<Item> results{get;set;}

	public class Item {
		public Promotion__c promotion{get;set;}
		public String link{get;set;}
	}

	public PromotionCon() {
		results = new List<Item>();
		List<Promotion__c> promotionList = new List<Promotion__c>();
		DateTime n = System.NOW();
		System.debug('n: ' + n);

		promotionList = [SELECT Id, Name, Promotion_Image__c
						 FROM Promotion__c 
						 WHERE Status__c = 'Approved' AND Publish__c = TRUE AND Start_Time__c <= :n AND End_Time__c >= :n
						 ORDER BY CreatedDate DESC
						 LIMIT 10];

		if(promotionList.size() > 0) {
			for(Promotion__c p : promotionList) {
				if(p.Promotion_Image__c != null && p.Promotion_Image__c.substringBetween('<img', 'img>') != null) {
					Item item = new Item();
	                String firstSubString = p.Promotion_Image__c.substringBetween('<img', 'img>');
	                String secondSubString = firstSubString.substringBetween('src="', '"');
	                String link = secondSubString.replace('amp;', '');
	                System.debug('Link: ' + link);
	                item.promotion = p;
	                item.link = link;
	            	results.add(item);
	            }
			}
			System.debug('results: ' + results);
		}
	}
}

c. 基于发布状态和指定用户的触发器逻辑（自定义共享规则）；
3. 配置主页Component：将banner.page加入到组件，并设置窗口高度和是否显示Label及滚动条。

效果展示

Sample位置

Sandbox + wilson@deloitte.com