码迷,mamicode.com
首页 > 其他好文 > 详细

双十一活动开发技术总结

时间:2014-11-17 12:04:21      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   sp   java   

问题一:返现卷读接口展示品牌与接口的二级联动效果,并能跳转到相应的商城页

下面是读取商城接口返回的json数据格式,以及相关字段说明

[{
           "id": 274,                                //跳转到商城的优惠Id
           "serialGroupgName": "奥迪Q3",             //车系名称
           "title": "多项优惠类型小活动",
           "manufacturerId": 1,                     //品牌Id
           "serialGroupId": 8670,                   //车系Id
           "beginTime": "2014-10-24 00:00:00",
           "manufacturerName": "一汽奥迪",           //品牌名称
           "stockCount": 395,                       //库存
           "endTime": "2014-11-15 23:59:59"
}]

由于外部的接口只有一个,而且将品牌车系都一起返回,没有分别返回品牌和车系,因此之前用过的伪下拉框插件用不了,附带以前用过的伪下拉框

<script src="http://js.3conline.com/min/temp/v1/dpl-related_select_v2,dpl-search_car_form.js"></script>
<script type="text/javascript">
relatedSelect(
                   {id: "pBrandNameBottom", url: "http://price.pcauto.com.cn/interface/5_3/brand_json_chooser_v2.jsp", node: {root: "brands", value: "text", text: "text", custom: "id"}, defaultValue:0, load: true},
                   {id: "pSeriesNameBottom", url: "http://price.pcauto.com.cn/interface/5_3/serial_json_chooser.jsp?brand=", node: {root: "firms", value: "text", text: "text", custom: "id"}, defaultValue:0}
);
</script>


<select id="pBrandNameBottom">
    <option value="">请选择品牌</option>
</select>
<select id="pSeriesNameBottom">
    <option value="">请选择车系</option>
</select>

所以这次需要自己写接口处理商城接口返回的数据

先展示一下我们要实现的效果图

bubuko.com,布布扣

<span class="aBtn clearfix" id="JfxBtn">
      <a href="javascript:void(0);" id="fx_500" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img1.jpg"  width="325" height="162" ></a>
      <a href="javascript:void(0);" id="fx_1500" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img2.jpg"  width="325" height="162"></a>
      <a href="javascript:void(0);" id="fx_1000" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img3.jpg"  width="325" height="162"></a>
</span>

要达到的效果如:当我们点击“支付88元返现500”的图片时,弹窗中的数据是通过调用接口

                      http://mall.pcauto.com.cn/autoMall/interface/activity/activity_manuSgList.jsp?aId=大活动ID&price=88拿到的

弹窗如下:

bubuko.com,布布扣

 

<!-- 返现弹框-->
<div class="fx_box" id="Jfx_box" style="display:none">
    <a href="javascript:void(0)" class="closeBtn closeBtn1"></a>
    <form action="index_ok.jsp" id="fx_form" method="post">
        <input type="hidden" name="price" id="price" value="">
        <span class="how_much">200元返现</span>
        <p class="changecar"><strong>选择意向车系</strong> 
        <select class="selwid148" id="pBrandNameBottom"><option value="">选择活动品牌</option></select>
        <select class="selwid148" id="pSeriesNameBottom"><option value="">选择活动车系</option></select></p> 
        <a href="" class="fx_btn"></a>
    </form>
</div>

点击事件:

//返现
$("#JfxBtn a").click(function(){
   if ($(this).attr("id") == "fx_500") {
       $(".how_much").html("500元返现");//更换弹窗文字    
       freshBrand(88);//调用接口展示品牌
   }else if ($(this).attr("id") == "fx_1000") {
       $(".how_much").html("1000元返现");
       freshBrand(188);
   }else if ($(this).attr("id") == "fx_1500") {
       $(".how_much").html("1500元返现");    
       freshBrand(288);
   }
   $.blockUI({message: $("#Jfx_box"),css:{width:‘585px‘,height:‘256px‘,cursor:‘default‘,border:‘none‘,background:‘none‘}});  //弹窗      
 });

 

车系与品牌联动的js:

        //车系下拉
        function freshSeries(price, brandId) {            
            $("#pSeriesNameBottom").html("<option value=‘‘>选择活动车系</option>");
            $.get("http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp", {price:price, brandId: brandId, r:(new Date()).getTime()}, function(data){
                data =  $.trim(data);                
                var jsonObj = eval("("+data+")");
                var text = "";
                //拼接下拉框文本
                for (i = 0; i < jsonObj.list.length; i++) {
                    var series = jsonObj.list[i];                    
                    text += "<option value=‘" + series.target_id + "‘>" + series.name + "</option>";
                    if (i == 0) {
                        $(".fx_btn").prop("href", "http://mall.pcauto.com.cn/r3/s" + series.target_id + "/");
                    }
                }        
                if (text != ‘‘)
                    $("#pSeriesNameBottom").html(text);    
                $("#pSeriesNameBottom").unbind("change");
                //车系下拉框触发改变事件,跳转链接发生改变
                $("#pSeriesNameBottom").change(function(){
                    var seriesId = $(this).val();
                    $(".fx_btn").prop("href", "http://mall.pcauto.com.cn/r3/s" + seriesId + "/");    
                });
                
            });            
        }
        
        //品牌下拉
        function freshBrand(price) {
            $("#pBrandNameBottom").html("<option value=‘‘>选择活动品牌</option>");
            $("#pSeriesNameBottom").html("<option value=‘‘>选择活动车系</option>");
            $.get("http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp", {price:price, r:(new Date()).getTime()}, function(data){
                data =  $.trim(data);                
                var jsonObj = eval("("+data+")");
                var text = "";
                //拼接下拉框文本
                for (i = 0; i < jsonObj.list.length; i++) {
                    var brand = jsonObj.list[i];                    
                    text += "<option value=‘" + brand.id + "‘>" + brand.name + "</option>";    
                    if (i == 0) {
                        freshSeries(price, brand.id);    
                    }
                }
                //显示
                if (text != ‘‘)
                    $("#pBrandNameBottom").html(text);
                $("#pBrandNameBottom").unbind("change");
                //品牌下拉框改变触发事件,同步车系
                $("#pBrandNameBottom").change(function() {
                    var brandId = $(this).val();
                    freshSeries(price, brandId);
                });
            });        
        }      

 

无brandId时

http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp?price=88

接口返回的数据:

{"list":[{id:57, name:"奇瑞汽车", target_id:121},{id:375, name:"上海大众斯柯达", target_id:123},{id:17, name:"一汽马自达", target_id:131},{id:78, name:"江淮汽车", target_id:133},{id:407, name:"长安马自达", target_id:186},{id:30, name:"雷克萨斯", target_id:135},{id:660, name:"上汽大通MAXUS", target_id:146}]}

接口返回的数据中id表示品牌id,name 是品牌名称,target_id表示商城优惠Id,不过由于优惠是与车系关联的,在这里没什么用

 

有brandId时

http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp?price=88&brandId=57

接口返回的数据:

{"list":[{id:9313, name:"艾瑞泽7", target_id:121},{id:8580, name:"奇瑞E3", target_id:114},{id:8880, name:"奇瑞QQ", target_id:122},{id:10771, name:"瑞虎3", target_id:134},{id:4100, name:"风云2", target_id:145}]}

接口返回的数据中id表示车系id,name 是车系名称,target_id表示商城优惠Id,用于组装跳转到商城的链接

 

下面看看fx_activity.jsp接口是怎样实现的

<%@page language="java" contentType="text/html;charset=GBK" pageEncoding="GBK"%>
<%@ include file="/WEB-INF/jspf/import.jspf"%><%
    request.setCharacterEncoding("utf-8");

    String price = request.getParameter("price");
    String brandId = request.getParameter("brandId");    
    
    //查询活动车系库存       
    BaseConfig baseConfig = EnvUtils.getEnv().getBean(BaseConfig.class);
    String actId = (String)baseConfig.get("actId");
    String data = HttpClientUtils.httpGet(SysConfig.BRAND_URI + "?aId=" + actId + "&price=" + price, "utf-8", true);
    //System.out.println("-------" + data);
    List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();
    Map<String, Boolean> brandMap = new HashMap<String, Boolean>();
    if (StringUtils.isNotEmpty(data)) {
        JSONArray jsonArray = JSONArray.parseArray(data);    
        if (jsonArray != null && jsonArray.size() > 0) {
            for (int i = 0 ; i < jsonArray.size(); i++) {
                try {
                       JSONObject json = jsonArray.getJSONObject(i);                       
                       if (json.getInteger("stockCount") <= 0) //库存<0不能显示
                           continue;
                       
                       //查品牌
                       if (brandId == null && brandMap.get(json.getString("manufacturerName")) == null) {
                           Map<String, Object> map = new HashMap<String, Object>();    
                           map.put("id", json.getInteger("manufacturerId"));
                           map.put("name", json.getString("manufacturerName"));
                           map.put("target_id", json.getInteger("id"));
                           resultList.add(map);
                           brandMap.put(json.getString("manufacturerName"), true);
                       }else {
                           //查某品牌下所有车系
                           String brandIdStr = json.getString("manufacturerId");    
                           if (brandIdStr != null && brandIdStr.equals(brandId)) {
                               Map<String, Object> map = new HashMap<String, Object>();    
                               map.put("id", json.getInteger("serialGroupId"));
                               map.put("name", json.getString("serialGroupgName"));
                               map.put("target_id", json.getInteger("id"));
                               resultList.add(map);    
                           }
                       }
                }catch(Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
    request.setAttribute("resultList", resultList);     
%>
{"list":[
    <c:forEach var="o" items="${resultList }" varStatus="idx">
        {id:${o.id}, name:"${o.name}", target_id:${o.target_id}}
        <c:if test="${!idx.last }">,</c:if>
    </c:forEach>
]}

 

双十一活动开发技术总结

标签:style   blog   http   io   color   ar   os   sp   java   

原文地址:http://www.cnblogs.com/ITtangtang/p/4103144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!