topic2.html 4.99 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" />
    <title>农丰网--专题</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/topic.css">
</head>

<body class="topicPage">
    <div class="m-page"></div>
    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/underscore-min.js"></script>

    <script type="text/template" id="topicPageTmpl">
        <%if(wap){%>
            <header class="m-header header-light">
                <div class="head">
                    <a href="javascript:history.go(-1);" class="lt-bar m-icon icon-back">返回</a>
                    <h1>活动专题</h1>
                    <!-- <a href="#" class="rt-bar text">分享</a> -->
                </div>
            </header>
        <%}%>
        <section class="m-content">
            <div class="cover" style="background-image: url(../images/upload/banner_holiday.jpg); background-size:100% 100%;">
            </div>
            <ul class="list clearfix" id="topicList">
                <%_.each(products, function(item){%>
                    <li>
                        <a href="<%=wap ? 'http://m.nong12.com/goods/getIntroductionPageById.do?pid='+item.id : 'http://www.nong12.com/product/'+item.id+'.html'%>">
                            <div class="pic" style="background-image:url(<%=item.defaultPic%>); background-size:cover;"></div>
                            <h3><%=item.title%></h3>
                            <p><em><%=(item.price/100).toFixed(2,10)%>/<%=item.unit%></em></p>
                        </a>
                    </li>
                <%})%>
            </ul>
        </section>
        <a href="#" class="m-to-top"></a>
    </script>

    <script>
        $(function(){
            var Topic = {
				wap:false,
                initialize:function(){
                    this.render();
                },
                bindEvents:function(){

                },
                parseUrl: function() {
					if(!location.search.split('?')[1] || location.search.split('?')[1].length <= 0){
						return;
					}
                    var arr = location.search.split('?')[1].split('&');
                    var params = {};
                    for (var i = 0, l = arr.length; i < l; i++) {
                        var param = arr[i].split('=');
                        params[param[0]] = param[1];
                    }
                    return params;
                },
                render:function(){
                    var _this = this;
						if(this.parseUrl() && this.parseUrl().source){
							source = this.parseUrl().source;
							if(source && source.toLowerCase() == 'wap'){
								this.wap = true;
							}
						}

                    var opt = {
                        data:{
                            modelCode: "TOPIC2"
                        },
                        success:function(response){
                            if(response.code == 200){
                                response.wap = _this.wap;
                                $('.m-page').html(_.template($('#topicPageTmpl').html())(response));
                            }else{
                                alert('请求数据失败,未知错误!');
                            }
                        },
                        error:function(){
                            alert('未知错误!');
                        }
                    };
                    this.request(opt);
                },
                request:function(opt){
                    $.ajax({
                        type: 'POST',
                        data: JSON.stringify(opt.data),
                        url: 'http://mobapi.nong12.com/mobsiteApp/topic/getTopicProducts.do',
                     	// url: 'http://10.28.2.183/mobsiteApp/topic/getTopicProducts.do',
                        async: true,
                        timeout: 15000,
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8"
                    }).done(function(data) {
                        opt.success && opt.success(data);
                    }).fail(function(xhr, ajaxOptions, thrownError) {
                        // console.log('error code: ' + xhr.status + '\n ajaxOptions:' + ajaxOptions + '\n message: ' + thrownError + '\n APIName:' + opt.apiName);
                    });
                }
            };
            Topic.initialize();
        });
    </script>
</body>

</html>