liting2017 6 years ago
parent
commit
c1301184b3

+ 3 - 0
src/css/newMenu/achievement.css

@@ -248,9 +248,11 @@ hr{
 .practicalLeft ul li .imgBj{
     position: relative;
     width: 100%;
+    height: 130px;
 }
 .practicalLeft ul li .imgBj img{
     width: 100%;
+    height: 100%;
 }
 .practicalLeft ul li .imgBj span{
     position: absolute;
@@ -435,6 +437,7 @@ hr{
 .introduce address{
     margin-bottom: 10px!important;
 }
+
 .transaction .transactionImg div address span{
     margin: 0 10px;
     display: inline-block;

+ 164 - 123
src/css/newMenu/achievementDetail.css

@@ -1,40 +1,49 @@
-.search{
+.search {
     overflow: hidden;
 }
-.search .search-inp{
+
+.search .search-inp {
     width: 100%;
 }
-.search .search-inp .input-group{
+
+.search .search-inp .input-group {
     width: 930px;
 }
-.search-inp div:nth-child(2){
+
+.search-inp div:nth-child(2) {
     margin: 0 20px;
 }
-.searchMain{
+
+.searchMain {
     padding-left: 26px;
 }
+
 /* 行业类别 */
+
 .industry {
     overflow: hidden;
     border: 1px dashed #eeeeee;
     border-style: solid solid dashed solid;
 }
-.industry>p{
+
+.industry>p {
     float: left;
     height: 82px;
     width: 115px;
     background: #f9f9f9;
     text-align: center;
-    line-height: 82px;  
-    font-size: 14px; 
+    line-height: 82px;
+    font-size: 14px;
 }
-.industry .industryList{
+
+.industry .industryList {
     width: 1082px;
     float: left;
     overflow: hidden;
     height: 82px;
     padding: 18px 0px 22px 0px;
 }
+
 .industry .industryList ul li {
     width: 90px;
     text-align: center;
@@ -43,19 +52,24 @@
     margin-bottom: 8px;
     font-size: 14px;
 }
-.industry .industryList ul li span{
+
+.industry .industryList ul li span {
     color: #7a7878
 }
-.industry .industryList ul li:hover span{
+
+.industry .industryList ul li:hover span {
     color: #ff570c
 }
+
 /* 知产类型 */
-.productionType{
-     height: 50px;  
-     border: 1px solid #eeeeee;
-     border-top: none
+
+.productionType {
+    height: 50px;
+    border: 1px solid #eeeeee;
+    border-top: none
 }
-.productionType>p{
+
+.productionType>p {
     width: 115px;
     height: 49px;
     line-height: 50px;
@@ -64,60 +78,71 @@
     float: left;
     background: #f9f9f9
 }
-.productionType ol{
+
+.productionType ol {
     float: left;
 }
-.productionType ol li{
+
+.productionType ol li {
     float: left;
     width: 90px;
     text-align: center;
     line-height: 50px;
     color: #7a7878
 }
-.productionType ol li:hover{
+
+.productionType ol li:hover {
     color: #ff570c;
     cursor: pointer;
 }
-.onSelect p{
+
+.onSelect p {
     float: left;
     width: 115px;
     height: 60px;
     text-align: center;
     line-height: 60px;
 }
-.onSelect ol{
+
+.onSelect ol {
     float: left;
     margin-top: 16px;
 }
-.onSelect ol li{
+
+.onSelect ol li {
+    display:none; 
     float: left;
     color: #7a7878;
     height: 28px;
     line-height: 28px;
-    padding:0px 10px;
+    padding: 0px 10px;
     border: 1px solid #b8d3e4;
     background: #f3f9fc;
+    margin-right: 10px;
 }
-.onSelect ol li span{
+
+.onSelect ol li span {
     font-size: 14px;
     color: #1f1f1f;
 }
-.onSelect ol li:nth-child(2){
-    border: none;
-}
-.onSelect ol li .typeClose{
+
+
+.onSelect ol li .typeClose {
     color: #6ea7c9;
     cursor: pointer;
     float: right;
     display: inline-block;
     margin-left: 10px;
 }
+
 /* 精品技术 */
-.achievementList{
+
+.achievementList {
     clear: both;
     padding-top: 30px
 }
-.achievementList .fineQuality{
+
+.achievementList .fineQuality {
     float: left;
     width: 220px;
     text-align: center;
@@ -125,108 +150,139 @@
     border: 1px solid #e7e7e7;
     padding-bottom: 20px;
 }
-.fineQuality>img{
+
+.fineQuality>img {
     margin-top: -15px;
     margin-bottom: 14px;
 }
-.fineQuality ol{
+
+.fineQuality ol {
     padding: 0 10px;
 }
+
 .fineQuality ol li {
     font-size: 14px;
     border-bottom: 1px dashed #ccc;
     padding-bottom: 10px;
     margin-bottom: 14px;
 }
-.fineQuality ol li img{
+
+.fineQuality ol li img {
     width: 100%
 }
-.fineQuality ol li .title-sm{
-   display: inline-block;
-   padding: 0 5px;
-   background: #ffe8d9;
-   color: #ff6600;
-   font-size: 14px;
-   height: 22px;
-   line-height: 22px;
-   margin-right: 5px;
-}
-.fineQuality ol li p{
+
+.fineQuality ol li .title-sm {
+    display: inline-block;
+    padding: 0 5px;
+    background: #ffe8d9;
+    color: #ff6600;
+    font-size: 14px;
+    height: 22px;
+    line-height: 22px;
+    margin-right: 5px;
+}
+
+.fineQuality ol li p {
     text-align: left;
     margin-top: 10px;
     overflow: hidden;
-    white-space:nowrap; 
-    text-overflow:ellipsis; 
-    -o-text-overflow:ellipsis;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
 }
-.achievementHot{
+
+.achievementHot {
     width: 955px;
     float: right;
 }
-.achievementHot ul{
+
+.achievementHot ul {
     overflow: hidden;
 }
-.pagination_box{
+
+.pagination_box {
     width: 100%;
-    line-height:74px 
+    line-height: 74px
 }
-.pagination_box nav{
-    float:right;
+
+.pagination_box nav {
+    float: right;
 }
-.pagination_box ul li a{
-    color:#333
+
+.pagination_box ul li a {
+    color: #333
 }
-.pagination_box .pagination{
+
+.pagination_box .pagination {
     float: right;
     margin-right: 20px;
 }
-.pagination_box .totalCount{
+
+.pagination_box .totalCount {
     float: right;
     display: inline-block;
     margin-right: 15px;
-} 
-.achievementHot>ul>li{
+}
+
+.achievementHot>ul>li {
     float: left;
     width: 308px;
     margin-left: 15.5px;
     margin-bottom: 22px;
 }
-.achievementHot ul li:nth-child(3n+1){
+
+.achievementHot>ul>li>div {
+    width: 114px;
+    height: 114px;
+    overflow: hidden;
+}
+
+.achievementHot>ul>li>div>img {
+    width: 100%;
+    height: 100%;
+}
+
+.achievementHot ul li:nth-child(3n+1) {
     margin-left: 0
 }
-.achievementHot ul li .txts h5{
+
+.achievementHot ul li .txts h5 {
     font-weight: normal;
     font-size: 14px;
     color: #1f1f1f;
     overflow: hidden;
-    white-space:nowrap; 
-    text-overflow:ellipsis; 
-    -o-text-overflow:ellipsis;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
     padding: 10px 2px;
 }
-.achievementHot ul li .hr{
+
+.achievementHot ul li .hr {
     width: 100%;
     height: 18px;
     background: url(../../../img/newMenu/achievement_27.jpg) no-repeat;
-    background-size:100% 100%; 
+    background-size: 100% 100%;
     margin: 1px 0px;
 }
-.achievementHot ul li .txts p span{
+
+.achievementHot ul li .txts p span {
     color: #7a7878;
     font-size: 12px;
     display: inline-block;
     margin-right: 5px;
 }
-.achievementHot ul li .txts .hotImg{
+
+.achievementHot ul li .txts .hotImg {
     float: right;
-    margin-right:16px;
+    margin-right: 16px;
     height: 18px;
     width: 32px;
     display: inline-block;
-    background:url(../../../img/newMenu/achievement_hot.jpg) no-repeat;
-    background-size:100% 100%; 
+    background: url(../../../img/newMenu/achievement_hot.jpg) no-repeat;
+    background-size: 100% 100%;
 }
-.achievementHot .btnTxt span{
+
+.achievementHot .btnTxt span {
     width: 64px;
     height: 24px;
     display: inline-block;
@@ -237,17 +293,20 @@
     line-height: 24px;
     margin: 0 3px;
 }
-.achievementHot ul li .img{
+
+.achievementHot ul li .img {
     float: left;
     width: 114px;
     height: 114px;
     position: relative;
 }
-.achievementHot ul li .img img{
+
+.achievementHot ul li .img img {
     width: 100%;
     height: 100%;
 }
-.achievementHot ul li .img span{
+
+.achievementHot ul li .img span {
     position: absolute;
     left: 0;
     top: 0;
@@ -255,57 +314,39 @@
     width: 48px;
     height: 41px;
     background: url(../../../img/newMenu/achievement_26.png) no-repeat;
-    background-size:100% 100%; 
+    background-size: 100% 100%;
 }
-.achievementHot ul li .txtIntroduce{
+
+.achievementHot ul li .txtIntroduce {
     float: left;
     width: 188px;
-    border:1px solid #efefef;
+    border: 1px solid #efefef;
     height: 114px;
     padding: 0px 10px 12px;
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.inp{
+    float: right;
+}
+.pagination_box{
+    display: none;
+}
+.list_none {
+    width: 550px;
+    height: 150px;
+    background: url("../../../img/all_null.png") no-repeat;
+    margin: 50px auto;
+}
+.inp{
+    display: none;
+}
+.inp input{
+    width:40px;
+    height: 35px;
+    text-align: center;
+    border-radius: 5px;
+    border:1px solid #ccc;
+}
+.inp button{
+    margin: 0 10px;
+    width: 50px;
+}

+ 109 - 104
src/js/newMenu/achievementDetail.js

@@ -14,109 +14,80 @@ import 'laypage/lib/laypage.js';
 
 "use strict";
 $(function() {
-	//获取时间轴;
-	//数据获取;
     var thePageNo = 1,
         thePageLength = 1,
-        pageSize =10;
-	loadData();
+        dataList={},
+        pageSize =12;
+    init();
+    function init(){
+        loadDate();
+        pages();
+        onSelect();
+        inpFun();
+        $('.onSelect .preFirst').css('display','none')
+        $('.onSelect .next').css('display','none')
+    };
 	function loadDate(pageNo) {
+        console.log(dataList)
         $.ajax({
             method: "get",
             dataType: "json",
-            url: globalConfig.context + "/portal/search/achievementList",
+            //url: globalConfig.context + "/portal/search/achievementList",
+            url:"https://www.apiopen.top/satinApi",
             data: {
+                //page:1
                 pageNo: pageNo || 1,
-                pageSize: 10,
-                boutiqueFlag :-1,
-                keyword: theKeyword,
-                transferMode: theMode != 999 ? theMode : undefined,
-                fieldA: theFieldA != 999 ? theFieldA : undefined,
-                fieldB: theFieldB != 999 ? theFieldB : undefined,
-                dataCategory:dataCategory != 999 ? dataCategory : undefined,
-                category:category != 999 ? category : undefined,
-                dateSort:dateSort,
-                lowerPrice:lowerPrice,
-                upperPrice:upperPrice,
-                internationalFlag:internationalFlag != 999 ? internationalFlag : undefined,
+                pageSize: 12,
+                // keyword: theKeyword,
+                fieldA: dataList.industryVal, //行业
+                fieldB: dataList.productionVal //类型
             },
             success: function (data) {
-                var theArr = [];
-                if (data.data && data.data.list) {
-                    for (let i = 0; i < data.data.list.length; i++) {
-                        let thisdata = data.data.list[i];
-                        let isJingpin="";
-                        if(thisdata.boutique==1){
-                                isJingpin="jingpin";
-                            }else{
-                                isJingpin="jingpin1";
-                            }
-                        if(thisdata.technicalPictureUrl==null){
-                                thisdata.technicalPictureUrl=''
-                            }	                    	                    
-                        var imgUrl=thisdata.technicalPictureUrl!=''?globalConfig.avatarHost + '/upload' +thisdata.technicalPictureUrl:globalConfig.avatarHost+ "/upload/default/zhuanliimg_null.png";                
-                        var star='';
-                        for(var n=0;n<thisdata.maturity;n++){
-                            star+='<li></li>';
-                        }
-                        var percentage='';
-                        if(thisdata.maturityS=='正在研发'){
-                            percentage=20
-                        }
-                        if(thisdata.maturityS=='已有样品'){
-                            percentage=40
-                        }
-                        if(thisdata.maturityS=='通过小试'){
-                            percentage=60
-                        }
-                        if(thisdata.maturityS=='通过中试'){
-                            percentage=80
-                        }
-                        if(thisdata.maturityS=='可以量产'){
-                            percentage=100
-                        }                     
-                        theArr.push([
-                             '<li val="'+thisdata.id+'" typ="'+thisdata.ownerType+'" class="list"><span class="'+isJingpin+'"></span><div>'+(thisdata.name?thisdata.name:"未知名称")+'</div>',
-                            '<ol><li>类型:<span>' + (thisdata.category ? categoryObj[thisdata.category] : '') + '</span></li>',
-                            '<li>行业:<span>' + (thisdata.fieldA?getIndustryCategory(thisdata.fieldA, thisdata.fieldB):"未知行业") + '</span></li>',					
-                            '<li>交易方式:<span>' + (thisdata.transferMode ? transferModeObj[thisdata.transferMode] : "当面交易") + '</span></li>',
-                            '<li>成熟度:<span>'+(thisdata.maturityS?thisdata.maturityS:"通过小试")+'</span></li>',
-                            //'<li val="'+thisdata.id+'" typ="'+thisdata.ownerType+'">技术方:<span>'+(thisdata.ownerName?thisdata.ownerName:"佚名")+'</span>',
-    //						'<div class="progressBar">',
-    //						'<p class="bjtxt"></p>',
-    //						'<span class="percentagePic" style="width:'+percentage+'px"></span>',
-    //						'<span class="percentage">'+percentage+'%</span>',
-    //						'<p class="txt"></p>',
-    //						'</div>',						
-                            '</li>',
-                            '<li class="consultation"><a href="javascript:;">我要咨询</a></li>',
-                            '</ol>',
-                            '<input type="hidden" class="achievementId" value="' + thisdata.id + '">',
-                            '<input type="hidden" class="achievementType" value="' + thisdata.dataCategory + '">',
-                            '</li>'	,   
-                        ].join(''));
+                console.log(data)
+                var theArrs = [];
+                data.data.totalCount=400;
+                if (data.data&&data.data.length) {
+                    for (let i = 0; i < 12; i++) {
+                        let thisdata = data.data[i];
+                        theArrs.push(`
+                        <li>
+                            <div class="img">
+                                <img src="${thisdata.cdn_img}" alt="">
+                                <span></span>
+                            </div>
+                            <div class="txtIntroduce">
+                                <div class="txts">
+                                    <h5>高压电极加热技术哈...</h5>
+                                    <p><span>实用技术</span><span>联合生产</span><span class="hotImg"></span></p>
+                                </div>
+                                <div class="hr"></div>
+                                <div class="btnTxt">
+                                    <span class="float-left">环保</span>
+                                    <span class="float-left">医疗</span>
+                                </div>
+                            </div>
+                        </li>`
+                     );
                     };
                 };
-                $('.achievementList ul').empty();
-                $('.achievementList ul').append(theArr.join(''));
+                $('.achievementHot .hotList').empty();
+                $('.achievementHot .hotList').append(theArrs.join(''));
                 
                 //页面里面的详情链接   
-                $(".achievementList ul li .consultation").siblings().on('click', function () {    	      
+                $(".achievementHot .hotList li").on('click', function () {    	      
                         var theId = $(this).parents('.list').attr('val');
                         var thetype=$(this).parents('.list').attr('typ');			       
                         window.open(globalConfig.context + '/portal/technologyTrading/achievementDetail?id=' + theId+'&type='+thetype );
                 });
-                $(".achievementList ul li div").on("click",function(){
-                        $(this).siblings("ol").children("li:first").click();
-                    });
-                $(".achievementList ul li ol .consultation").click(function(){
-                        $('#lxkf').click()			    	
-                })
-                
-                if(data.data.list.length===0){
-                        $('.achievementList ul').html("<div class='list_none'></div>")	;
-                    };
+                $('.pagination_box').css('display','block');
+                $('.inp').css('display','block');
+                if(data.data.length===0){
+                        $('.achievementHot .hotList').html("<div class='list_none'></div>")	;
+                        $('.pagination_box').css('display','none')
+                        $('.inp').css('display','none');
+                };
                 thePageLength = data.data.totalCount ? Math.ceil(data.data.totalCount / pageSize) : 1;
+                $('.totalCount').html(`共${data.data.totalCount}条数据 ${thePageLength}页`)    
                 var pageArr = [],
                     firstNo = 1,
                     endNo = 5;
@@ -143,26 +114,60 @@ $(function() {
         });
     }
     //f分页
-    $('.pagination').on('click', 'li', function (e) {
-        e.preventDefault();
-        if (this.className === 'pagePre') {
-            if (thePageNo > 1) {
-                thePageNo = 1;
-                loadDate(thePageNo);
-            }
-        } else if (this.className === 'pageNext') {
-            if (thePageNo < thePageLength) {
-                thePageNo = thePageLength;
+    function pages(){
+        $('.pagination').on('click', 'li', function (e) {
+            e.preventDefault();
+            if (this.className === 'pagePre') {
+                if (thePageNo > 1) {
+                    thePageNo = 1;
+                    loadDate(thePageNo);
+                }
+            } else if (this.className === 'pageNext') {
+                if (thePageNo < thePageLength) {
+                    thePageNo = thePageLength;
+                    loadDate(thePageNo);
+                }
+            } else {
+                var nextPageNo = $(this).children()[0].text;
+                if (thePageNo != nextPageNo) {
+                    $(this).siblings("li").removeClass("active");
+                    $(this).addClass("active");
+                    thePageNo = nextPageNo;
+                    loadDate(thePageNo);
+                };
+            };
+        });
+    }
+    //输入跳转
+    function inpFun(){
+        $('.inp .btn').on('click',function(){
+            let val = $(this).siblings().val();
+            if(!isNaN(val)&&val<thePageLength&&val>0){
+                thePageNo=val;
                 loadDate(thePageNo);
             }
-        } else {
-            var nextPageNo = $(this).children()[0].text;
-            if (thePageNo != nextPageNo) {
-                $(this).siblings("li").removeClass("active");
-                $(this).addClass("active");
-                thePageNo = nextPageNo;
-                loadDate(thePageNo);
-            };
-        };
-    });
+        })
+    }
+
+    //已选类型
+    function onSelect(){
+       $('.industryList ul li').on('click',function(){
+        dataList.industryVal = $(this).attr('value');
+           let txt = $(this).text();
+           $('.onSelect .preFirst').css('display','block').html(`
+                <span>${txt}</span>
+                <span class="typeClose">x</span>
+           `)
+           loadDate();
+       }) ;
+       $('.productionType ol li').on('click',function(){
+        dataList.productionVal = $(this).attr('value');
+        let txt = $(this).text();
+        $('.onSelect .next').css('display','block').html(`
+             <span>${txt}</span>
+             <span class="typeClose">x</span>
+             `)
+             loadDate();
+        }) 
+    }
 })

+ 13 - 13
template/newMenu/achievementDetails.html

@@ -230,22 +230,19 @@
         <div class="productionType">
             <p>知产类型</p>
             <ol>
-                <li>技术专利</li>
-                <li>技术专利</li>
-                <li>技术专利</li>
+                <li value="1">技术专利1</li>
+                <li value="2">技术专利2</li>
+                <li value="3">技术专利3</li>
             </ol>
         </div>
         <div class="onSelect">
             <p>已选类型 </p>
             <ol>
-                <li>
-                    <span>食品饮料</span>
-                    <span class="typeClose">x</span>
+                <li class="preFirst">
+                   
                 </li>
-                <li > > </li>
-                <li>
-                    <span>食品饮料</span>
-                    <span class="typeClose">x</span>
+                <li class="next">
+                   
                 </li>
             </ol>
         </div>
@@ -278,7 +275,7 @@
             </div>
             <div class="achievementHot">
                 <ul class="hotList">
-                    <li>
+                    <!-- <li>
                         <div class="img">
                             <img src="../../img/newMenu/achievmentDetail_3.jpg" alt="">
                             <span></span>
@@ -358,9 +355,9 @@
                                 <span class="float-left">医疗</span>
                             </div>
                         </div>
-                    </li>
+                    </li> -->
                 </ul>
-                <div class="container pagination_box">
+                <div class="pagination_box">
                     <nav aria-label="Page navigation" class="clearfix">
                         <ul class="pagination">
                             <li class="pagePre">
@@ -375,6 +372,9 @@
                                 </a>
                             </li>
                         </ul>
+                        <div class="inp">
+                            <input type="text" class=""><button class="btn btn-default">跳转</button>
+                        </div>
                         <span class="totalCount">共0条数据</span>
                     </nav>
                 </div>