浏览代码

Technologytrading have a small bug

dengzhiguo 7 年之前
父节点
当前提交
2f57e195be
共有 3 个文件被更改,包括 150 次插入187 次删除
  1. 9 7
      src/css/Technologytrading.css
  2. 127 110
      src/js/Technologytrading.js
  3. 14 70
      template/Technologytrading.html

+ 9 - 7
src/css/Technologytrading.css

@@ -76,10 +76,11 @@ body{background: #f5f5f5;}
 .main_details ul{overflow: hidden;}
 .main_details ul li{width: 260px;height:380px;float: left;position: relative;z-index: 10;box-shadow: 0 0 15px #CCCCCC;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;}
 
-.main_details ul li img{;width: 260px;}
-.main_details ul li .details_fix{position: absolute;top: 145px;background: rgba(131,146,145,0.5);z-index: 12;width: 260px;height: 70px;text-align: center;color: #FFFFFF;}
-.details_fix p{line-height: 25px;}
-.details_fix p:first-child{margin-top: 10px;}
+.main_details ul li img{;width: 260px;height:211px;}
+.main_details ul li .details_fix{position: absolute;top: 140px;background: rgba(131,146,145,0.5);z-index: 12;width: 260px;height: 70px;
+    text-align: left;color: #FFFFFF;padding-left: 10px;}
+.details_fix p{height:35px;width:100%;}
+.details_fix p:first-child{margin-top: 0;}
 .details_fix p span{color: #333333;margin-left: 5px;}
 
 .details_text{width:260px;padding-top:10px ;position: absolute;left: 0;bottom:0px;}
@@ -100,7 +101,7 @@ body{background: #f5f5f5;}
 .details_text a{width: 80px;height: 26px;display: inline-block;background: #ffb200;border-radius: 10px;float: right;line-height: 26px;text-align: center;color: #ffffff;margin-right: 30px;margin-bottom: 16px;}
 
 .pagination_box{width: 100%;height:50px;text-align: right;line-height: 90px;}
-.pagination_box>div{float:right;width:200px;height:50px;overflow: hidden;display:inline-block;line-height: 40px;}
+.pagination_box>div{float:right;width:272px;height:50px;overflow: hidden;display:inline-block;line-height: 40px;}
 .pagination_box>span{width:40px;height:30px;display:inline-block;font-size: 14px;
     float: right;line-height: 30px;margin-top: 10px;box-shadow: 0 0 10px 0 #999 inset;text-align: center;
 border-radius: 5px;cursor: pointer;font-weight: bold;}
@@ -112,9 +113,10 @@ border-radius: 5px;cursor: pointer;font-weight: bold;}
 .pagination_box>span.all_span{width:40px;height:30px;display:inline-block;font-size: 14px;
     float: right;line-height: 30px;margin-top: 10px;font-weight: bold;text-align: center;
 border: none;box-shadow: none;}
+.pagination_box>span.one_all_span{width:60px;}
 .paging_box{overflow: hidden;}
-.paging_box>span{line-height: 50px;font-size: 16px;color:#F68705;width:25px;text-align: center;
-    display: inline-block;cursor: pointer;}
+.paging_box>span{line-height: 50px;font-size: 16px;color:#F68705;width:30px;text-align: center;
+    display: inline-block;cursor: pointer;margin: 0 2px;}
 .paging_box>span.action_span{font-weight: bold;}
 .pagination_box  .totalCount{ float:right; line-height: 74px;margin-right: 20px;color: #999;}
 .pagination_box .pagination{float: right;}

+ 127 - 110
src/js/Technologytrading.js

@@ -10,15 +10,87 @@ import {
     getIndustryCategory
     } from './DicIndustryList';
 (function(){
+    //处�data数�函数��
+    function manage(data){
+        var demand_html="";
+        for(var i=0;i<data.pageSize;i++){
+            demand_html+="<li>" +
+            "<img src='"+globalConfig.uploadPath+data.list[i].pictureUrl+" alt=''/>" +
+            "<div class='details_text'>" +
+            "<p>行业<span>"+data.list[i].industryCatalog+"</span></p>" +
+            "<p>ä»·æ ¼<span>"+data.list[i].price+"</span></p>" +
+            "<p>简介<b>"+data.list[i].sketch.substring(0,18)+"..."+"</b></p>" +
+            "<a href='#'>了解详情</a>" +
+            "</div>" +
+            "<div class='details_fix'>" +
+            "<p>专利�<span>"+data.list[i].name+"</span></p>" +
+            "<p>所有人<span>"+data.list[i].personName+"</span></p>" +
+            "</div></li>"
+        }
+        $("#demandList_patent").html(demand_html);
+    }
+    //当数�传回�之�,
+    function page(data){
+        var data=Math.ceil(data/6);
+        var paging_html="";
+        for(var j=1;j<=data;j++){
+            paging_html+="<span value="+j+">"+j+"</span>"
+        }
+        $(".paging_box").html(paging_html).width(data*34);
+        $(".paging_box span:first").addClass("action_span").siblings().removeClass("action_span");
+        $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>共"+data+"页</span>");
+    }
     var ul_html="";
     for(var i=0;i<industryObject.length;i++){
         ul_html+="<li value='"+industryObject[i].value+"'><a href='javascript:;'>"+industryObject[i].label+"</a></li>";
     }
     $(".industry_ul").html(ul_html);
     $(".industry_ul li:first").addClass("action_li");
+    var left_val=$(".industry_ul li.action_li").val();
+    $.ajax({
+        method: "post",
+        dataType: "json",
+        url: globalConfig.context + "/portal/search/boutiqueSearchList",
+        data: {
+            boutiqueType:0,
+            industryCatalog:left_val,
+            pageNo:1,
+            pageSize:6
+        },
+        success: function (data) {
+            if(data.data.totalCount==0){
+                $(".pagination_box").css("display","none");
+                $("#demandList_patent").html("<div class='list_none'>敬请期待...</div>");
+            }else{
+                $(".pagination_box").css("display","block");
+                manage(data.data);
+                page(data.data.totalCount);
+            }
+        }
+    })
 })();
 (function(){
+    //处�data数�函数��
+    function manage(data){
+        var demand_html="";
+        for(var i=0;i<data.pageSize;i++){
+            demand_html+="<li>" +
+            "<img src='"+globalConfig.uploadPath+data.list[i].pictureUrl+" alt=''/>" +
+            "<div class='details_text'>" +
+            "<p>行业:<span>"+data.list[i].industryCatalog+"</span></p>" +
+            "<p>ä»·æ ¼:<span>"+data.list[i].price+"</span></p>" +
+            "<p>简介:<b>"+data.list[i].sketch.substring(0,18)+"..."+"</b></p>" +
+            "<a href='#'>了解详情</a>" +
+            "</div>" +
+            "<div class='details_fix'>" +
+            "<p>专利�:<span>"+data.list[i].name+"</span></p>" +
+            "<p>所有人:<span>"+data.list[i].personName+"</span></p>" +
+            "</div></li>"
+        }
+        $("#demandList_patent").html(demand_html);
+    }
     $(".title_details ol li").click(function(){
+        $(".paging_box span:first").addClass("action_span").siblings().removeClass("action_span");
         $(this).addClass("act").siblings().removeClass("act");
         var left_val=$(".industry_ul li.action_li").val();
         var right_val = $(this).val();
@@ -34,12 +106,21 @@ import {
 
             },
             success: function (data) {
-                console.log(data);
+                if(data.data.totalCount==0){
+                    $(".pagination_box").css("display","none");
+                    $("#demandList_patent").html("<div class='list_none'>敬请期待...</div>");
+                }else{
+                    $(".pagination_box").css("display","block");
+                    manage(data.data);
+                    page(data.data.totalCount);
+                }
             }
         })
 
     });
+
     $(".industry_ul li").click(function() {
+        $(".paging_box span:first").addClass("action_span").siblings().removeClass("action_span");
         $(".title_details ol li").eq(0).addClass("act").siblings().removeClass("act");
         $(this).addClass("action_li").siblings().removeClass("action_li");
         var left_val = $(this).val();
@@ -55,15 +136,22 @@ import {
                 pageSize:6
             },
             success: function (data) {
-                console.log(data);
+                if(data.data.totalCount==0){
+                    $(".pagination_box").css("display","none");
+                    $("#demandList_patent").html("<div class='list_none'>敬请期待...</div>");
+                }else{
+                    $(".pagination_box").css("display","block");
+                    manage(data.data);
+                    page(data.data.totalCount);
+                }
             }
         })
     });
-    //ÓÒ²àÄÚÈݵķÖÒ³¹¦ÄÜ
-    $(".paging_box").on("click","span",function(){
-        $(this).addClass("action_span").siblings().removeClass("action_span");
+    //�侧内容的分页功能,点击一次��一个ajax的请求,�请求6组数�
+    $(".paging_box").on("click","span",function(e){
         var page_length=$(this).attr("value");
         var left_val=$(".industry_ul li.action_li").val();
+        var right_val=$(".title_details ol li.act").val();
         var right_check=$(".title_details ol li.act").index();
         $.ajax({
             method: "post",
@@ -76,102 +164,52 @@ import {
                 pageSize:6
             },
             success: function (data) {
-                console.log(data);
+                if(data.data.totalCount==0){
+                    $(".pagination_box").css("display","none");
+                    $("#demandList_patent").html("<div class='list_none'>敬请期待...</div>");
+                }else{
+                    $(".pagination_box").css("display","block");
+                    manage(data.data);
+                    page(data.data.totalCount);
+                }
             }
-        })
+        });
+        $(e.target).addClass("action_span").siblings().removeClass("action_span");
     });
-    //ÌáÈ¡ajaxº¯Êý
-    function ajax_check(check,left_val,page){
-        if(check==0){
-            $.ajax({
-                method: "get",
-                dataType: "json",
-                url: globalConfig.context + "/portal/search/demandList",
-                data: {
-                    fieldA:left_val,
-                    category:0,
-                    dataCategory:null,
-                    pageNo:page,
-                    pageSize:6
-                },
-                success: function (data) {
-                    console.log(data);
-                }
-            })
-        }else if(check==1){
-            $.ajax({
-                method: "get",
-                dataType: "json",
-                url: globalConfig.context + "/portal/search/achievementList",
-                data: {
-                    fieldA:left_val,
-                    category:1,
-                    boutique:1,
-                    pageNo:page,
-                    pageSize:6
-                },
-                success: function (data) {
-                    console.log(data);
-                }
-            })
-        }else if(check==2){
-            $.ajax({
-                method: "get",
-                dataType: "json",
-                url: globalConfig.context + "/portal/search/demandList",
-                data: {
-                    industryCategoryA:left_val,
-                    sign:0,
-                    boutique:1,
-                    pageNo:page,
-                    pageSize:6
-                },
-                success: function (data) {
-                    console.log(data);
-                }
-            })
-        }
-    }
-    //ʵÏÖ·ÖÒ³ÓÒ²àµã»÷°´Å¥
-    var isfirst=0;//ÅжÏ12...ÊDz»ÊÇÓ¦¸ÃÌí¼Ó
-    var isone=1;//ÅжÏ...ÊDz»ÊÇÓ¦¸ÃÌí¼Ó
+   //实现分页�侧点击按钮
+    var isfirst=0;//判断12...是�是应该添加
+    var page_click=0;//记录左�两侧的按钮点击的次数
     $(".page_right").click(function(){
+        page_click++;
         var box_scrollleft=$(".pagination_box>div").scrollLeft();
-        box_scrollleft+=75;
+        box_scrollleft+=102;
         $(".pagination_box>div").scrollLeft(box_scrollleft);
         $(".page_left").addClass("span_true");
         if(isfirst==0){
             $(".page_left").before("<span class='all_span two_all_span'>. . .</span><span class='second'>2</span><span class='first'>1</span>");
             isfirst=1;
         }
-         if($(".pagination_box>div").scrollLeft()==($(".paging_box").width()-$(".pagination_box>div").width())){
+        if($(".pagination_box>div").scrollLeft()==($(".paging_box").width()-$(".pagination_box>div").width())){
             $(".page_right").removeClass("span_true");
-             $(".one_all_span").remove();
-             isone=0;
         };
 
     });
-    //ʵÏÖ·ÖÒ³×ó²àµã»÷°´Å¥
+    //实现分页左侧点击按钮
     $(".page_left").click(function(){
-        if(isone==0){
-            $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>. . .</span>");
-            isone=1;
-        }
-         var box_scrollleft=$(".pagination_box>div").scrollLeft();
-        box_scrollleft-=75;
+        page_click--;
+        var box_scrollleft=$(".pagination_box>div").scrollLeft();
+        box_scrollleft-=102;
         $(".pagination_box>div").scrollLeft(box_scrollleft);
         $(".page_right").addClass("span_true");
-       if($(".pagination_box>div").scrollLeft()==0){
-           $(".page_left").removeClass("span_true");
-           $(".first").remove();
-           $(".second").remove();
-           $(".two_all_span").remove();
-           isfirst=0;
-
-       }
+        if($(".pagination_box>div").scrollLeft()==0){
+            $(".page_left").removeClass("span_true");
+            $(".first").remove();
+            $(".second").remove();
+            $(".two_all_span").remove();
+            isfirst=0;
+        }
     });
-
-    //гöÀ´µÄ1ºÍ2µÄµã»÷Ч¹û
+    //新出�的1和2的点击效果
     $(".pagination_box").on("click",".first",function() {
         $(".paging_box").children().eq(0).click();
         $(".pagination_box>div").scrollLeft(0);
@@ -180,20 +218,8 @@ import {
         $(".two_all_span").remove();
         $(".page_left").removeClass("span_true");
         isfirst = 0;
-        if (isone == 0) {
-            $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>. . .</span>");
-            isone = 1;
-        }
-    })
-    $(".pagination_box").on("click","span",function(){
-        $(this).addClass("action_span").siblings().removeClass("action_span");
-        var page_length=$(this).attr("value");
-        console.log(page_length);
-        $(".main_details").scrollTop((page_length-1)*800);
-        console.log($(".main_details").scrollTop());
-
     });
-    //гöÀ´µÄ1ºÍ2µÄµã»÷Ч¹û
+    //新出�的1和2的点击效果
     $(".pagination_box").on("click",".second",function(){
         $(".paging_box").children().eq(1).click();
         $(".pagination_box>div").scrollLeft(0);
@@ -202,27 +228,18 @@ import {
         $(".two_all_span").remove();
         $(".page_left").removeClass("span_true");
         isfirst=0;
-        if(isone==0){
-            $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>. . .</span>");
-            isone=1;
-        }
     });
-    //µ±Êý¾Ý´«»ØÀ´Ö®ºó£¬
+    //当数�传回�之�,
     function page(data){
+        $(".one_all_span").remove();
+        var data=Math.ceil(data/6);
         var paging_html="";
         for(var j=1;j<=data;j++){
             paging_html+="<span value="+j+">"+j+"</span>"
         }
-        $(".paging_box").html(paging_html).width(data*25);
-        $(".paging_box span:first").addClass("action_span");
-        if(data>8){
-            $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>. . .</span>");
-        }else{
-            $(".all_span").remove();
-        }
+        $(".paging_box").html(paging_html).width(data*34);
+        $(".page_right").addClass("span_true").after("<span class='all_span one_all_span'>共"+data+"页</span>");
     }
-    page(19);
-
 })();
 
 

+ 14 - 70
template/Technologytrading.html

@@ -172,75 +172,19 @@
 				</div>
 				<div class="main_details checked">
 					<ul id="demandList_patent">
-						<li>
-							<img src="../img/Technology_21.png" alt="" />
-							<div class="details_text">
-								<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
-								<p>价格 <span>10000</span></p>
-								<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
-								<a href="#">了解详情</a>
-							</div>
-							<div class="details_fix">
-								<p>专利名 <span> 医疗四分局王死哦风景</span></p>
-								<p>所有人 <span> 胡海峰</span></p>
-							</div>
-						</li>
-						<li>
-							<img src="../img/Technology_21.png" alt="" />
-							<div class="details_text">
-								<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
-								<p>价格 <span>10000</span></p>
-								<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
-								<a href="#">了解详情</a>
-							</div>
-							<div class="details_fix">
-								<p>专利名 <span> 医疗四分局王死哦风景</span></p>
-								<p>所有人 <span> 胡海峰</span></p>
-
-							</div>
-						</li>
-						<li>
-							<img src="../img/Technology_21.png" alt="" />
-							<div class="details_text">
-								<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
-								<p>价格 <span>10000</span></p>
-								<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
-								<a href="#">了解详情</a>
-							</div>
-							<div class="details_fix">
-								<p>专利名 <span> 医疗四分局王死哦风景</span></p>
-								<p>所有人 <span> 胡海峰</span></p>
-
-							</div>
-						</li>
-						<li>
-							<img src="../img/Technology_21.png" alt="" />
-							<div class="details_text">
-								<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
-								<p>价格 <span>10000</span></p>
-								<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
-								<a href="#">了解详情</a>
-							</div>
-							<div class="details_fix">
-								<p>专利名 <span> 医疗四分局王死哦风景</span></p>
-								<p>所有人 <span> 胡海峰</span></p>
-
-							</div>
-						</li>
-						<li>
-							<img src="../img/Technology_21.png" alt="" />
-							<div class="details_text">
-								<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>
-								<p>价格 <span>10000</span></p>
-								<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>
-								<a href="#">了解详情</a>
-							</div>
-							<div class="details_fix">
-								<p>专利名 <span> 医疗四分局王死哦风景</span></p>
-								<p>所有人 <span> 胡海峰</span></p>
-							</div>
-						</li>
-
+						<!--<li>-->
+							<!--<img src="../img/Technology_21.png" alt="" />-->
+							<!--<div class="details_text">-->
+								<!--<p>行业 <span>怒吼道胡非常胡海峰回复</span></p>-->
+								<!--<p>价格 <span>10000</span></p>-->
+								<!--<p>简介 <b>怒吼道胡非常胡海峰回复怒吼道胡非常胡海峰回复</b></p>-->
+								<!--<a href="#">了解详情</a>-->
+							<!--</div>-->
+							<!--<div class="details_fix">-->
+								<!--<p>专利名 <span> 医疗四分局王死哦风景</span></p>-->
+								<!--<p>所有人 <span> 胡海峰</span></p>-->
+							<!--</div>-->
+						<!--</li>-->
 					</ul>
 				</div>
 				<div class="pagination_box">
@@ -257,7 +201,7 @@
 				</div>
 			</div>
 		</div>
-	<div>
+	</div>
  	<!--行业分类--> 
  	<div class="channel">
 		<div class="container">