add cases views arrangement

cases.html

@@ -1287,13 +1287,13 @@
                                 <h4>熱門作品</h4>
                             </div>
                             <div class="likeSee__state__filter">
-                                <a class="likeSee__state__filter--item">
+                                <a class="likeSee__state__filter--item views">
                                     人氣
                                 </a>
 
                                 <span class="likeSee__state__filter--divider"></span>
 
-                                <a class="likeSee__state__filter--item active">
+                                <a class="likeSee__state__filter--item active recently">
                                     最新
                                 </a>
                             </div>
@@ -1347,9 +1347,9 @@
                                 </div> -->
                             </div>
                         </div>
-                        <div class="mt-0 mt-md-2 popular">
+                        <!-- <div class="mt-0 mt-md-2 popular">
                             <div class="Case-popular">
-                                <!-- <div class="likeSee__rule">
+                                <div class="likeSee__rule">
                                     <a href="/cases/detail/d/14154/" target="_blank">
                                         <div class="likeSee__bgImg">
                                             <img class="img-fluid"
@@ -1365,8 +1365,8 @@
                                         <a href="/cases/lists/大坪數-keyword/" target="_blank"
                                             class="likeSee__tag--item">大坪數</a>
                                     </div>
-                                </div> -->
-                                <!-- <div class="likeSee__rule">
+                                </div>
+                                <div class="likeSee__rule">
                                     <a href="/cases/detail/d/14155/" target="_blank">
                                         <div class="likeSee__bgImg">
                                             <img class="img-fluid"
@@ -1382,9 +1382,9 @@
                                         <a href="/cases/lists/標準格局-keyword/" target="_blank"
                                             class="likeSee__tag--item">標準格局</a>
                                     </div>
-                                </div> -->
+                                </div>
                             </div>
-                        </div>
+                        </div> -->
                     </div>
                 </div>
             </div>

goto.js

@@ -1,22 +1,24 @@
 
-$(".popular").hide();
+// $(".popular").hide();
 
 
 $(document).on("click", ".article__readMore", function (event) {
-    $('.article__contexts_cases').css('height','auto');
+    $('.article__contexts_cases').css('height', 'auto');
     $('.article__readMore').hide();
-    
+
 });
 
 
 $(document).on("click", ".likeSee__state__filter--item", function (event) {
-    $(".CaseNews").toggle();
-    $(".popular").toggle();
+    // $(".CaseNews").toggle();
+    // $(".popular").toggle();
     $(".likeSee__state__filter--item").removeClass('active');
     $(this).addClass("active");
 });
 
 
+
+
 const urlParams = new URLSearchParams(window.location.search);
 let id = urlParams.get('cid');
 console.log(id);
@@ -33,7 +35,7 @@ function get_data() {
         dataType: "json",
     })
         .done(function (msg) {
-            console.log(msg);
+            // console.log(msg);
             let designersinfo = "";
             let CaseInfo = "";
             let CaseInfo_mb = "";
@@ -44,13 +46,15 @@ function get_data() {
             let CaseDetail = "";
             let CasePageTitle = "";
             let CaseImgQuantity = "";
-            let article__contexts="";
-            let CaseCoverImg="";
+            let article__contexts = "";
+            let CaseCoverImg = "";
+
 
 
 
             for (let i = 0; i < msg.length; i++) {
-                CaseCoverImg=`
+
+                CaseCoverImg = `
                 <img class="img-fluid" src="${msg[i].CaseCoverImg}" alt="">
                 
                 `
@@ -138,10 +142,10 @@ function get_data() {
                  </div>
                 `
 
-                    if(msg[i].Casedescription == undefined){
-                        article__contexts=`<div></div>`
-                    }else {
-                        article__contexts=`
+                if (msg[i].Casedescription == undefined) {
+                    article__contexts = `<div></div>`
+                } else {
+                    article__contexts = `
                         <div><p class="article__contexts_cases">${msg[i].Casedescription}</p></div>
                         <div class="article__readMore">
                         <i class="fa fa-chevron-down" aria-hidden="true"></i>
@@ -149,7 +153,7 @@ function get_data() {
                         <i class="fa fa-chevron-down" aria-hidden="true"></i>
                         </div>
                         `
-                    }
+                }
 
                 for (let j = 0; j < msg[i].CaseTag.length; j++) {
                     // console.log(msg[i].CaseTag.length);
@@ -157,7 +161,7 @@ function get_data() {
                     // console.log(msg[i].CaseTag[j].Tag);
 
                     CaseTag += ' \
-                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].CaseTag[j].Tag + '-keyword/" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
+                        <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[i].CaseTag[j].Tag + '-keyword/" class="btn btn-outline-custom rounded-0">' + msg[i].CaseTag[j].Tag + '</a> \
                         ';
                 }
 
@@ -267,30 +271,9 @@ function get_data() {
                     CaseNews += '</div></div></div></div>'
                 };
 
-              
 
-                let NewsProfile=msg[0].DesignerProfile;
 
-                console.log(NewsProfile);
-                console.log(NewsProfile.length);
-
-                function sortNum(a,b) {
-                    return a - b; //升序，如降序，把“a - b”該成“b - a”
-                }
-
-
-                function SortTest() {
-                    var  ProfileSort= [];
-
-                    for(let r =0; r<NewsProfile.length; r++){
-                        let NewsArry=NewsProfile[r].Views;
-                        let NewsArray2 = parseInt(NewsArry);
-                        console.log(NewsArray2);
-    
-                    }
-                }
 
-                SortTest();
                 // for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
                 //     CasePopular +=
                 //         '<div class="likeSee__rule"\
@@ -315,7 +298,7 @@ function get_data() {
                 // 輪播圖
                 for (let j = 0; j < msg[i].CaseDetail.length; j++) {
                     CaseDetail +=
-                    '<div style="width: 960px;" class="CaseSlider" data-info="'+j+'"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="'+ msg[i].CaseDetail[j].CaseDetailImg+ '" alt=""></div></div></div>'
+                        '<div style="width: 960px;" class="CaseSlider" data-info="' + j + '"><div class="img-wrapper-desktop"><div class="swiper-zoom-container-desktop"><img src="' + msg[i].CaseDetail[j].CaseDetailImg + '" alt=""></div></div></div>'
 
                 }
 
@@ -363,15 +346,15 @@ function get_data() {
                     <div class="other-case-desktop-items d-flex flex-wrap">\
                 '
                 for (let j = 0; j < msg[i].CaseDetail.length; j++) {
-                 
+
                     CaseDetail +=
-                        '<div id="img-0" data-thisid=('+j+') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo('+j+')">\
+                        '<div id="img-0" data-thisid=(' + j + ') class="w-20 m-1 p-1 img_all CaseOtherImg" style="cursor: pointer;" onclick="slickGoTo(' + j + ')">\
                                 <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg + '" width="70" height="70" alt="該個案的其他圖片">\
                         </div>'
-                        
+
                 };
-                
-             
+
+
                 CaseDetail += '</div></div>';
 
                 CaseDetail += '<div class="divider"></div>';
@@ -539,23 +522,23 @@ function get_data() {
 
 
 
-                $('.CaseDetail-slick').slick({
-                    slidesToShow: 1, //預設 1 幻燈片顯示幾張
-                    slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
-                    arrows: true, // 預設 true 左右箭頭是否顯示
-                    prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
-                    nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
-                });
-                
-                var activeimg = $(".slick-active img")[0];
+            $('.CaseDetail-slick').slick({
+                slidesToShow: 1, //預設 1 幻燈片顯示幾張
+                slidesToScroll: 1,//預設 1 幻灯片每次滑動幾張
+                arrows: true, // 預設 true 左右箭頭是否顯示
+                prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white; transform: translateY(-10px);"></i></button>',
+                nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
+            });
+
+            var activeimg = $(".slick-active img")[0];
 
-                console.log(activeimg);
-    
-                var imgwidth = activeimg.width;
-    
-                var imgheight = activeimg.height;
-    
-                console.log(imgwidth);
+            console.log(activeimg);
+
+            var imgwidth = activeimg.width;
+
+            var imgheight = activeimg.height;
+
+            console.log(imgwidth);
 
 
             // if(imgwidth < 1000 && imgwidth >imgheight)
@@ -564,11 +547,11 @@ function get_data() {
             //     activeimg.parentNode.classList.add('swiper-zoom-container-sm-desktop');
             // }
 
-                if(imgwidth < imgheight){
-                    activeimg.style.width = 'auto';
-                }
- 
-            
+            if (imgwidth < imgheight) {
+                activeimg.style.width = 'auto';
+            }
+
+
 
         });
 }
@@ -579,13 +562,13 @@ $('.morePhotoTip > a').attr('href', `./casedetail.html?cid=${id}`);
 
 function slickGoTo(key) {
 
-    let slickNumber="";
+    let slickNumber = "";
     $('.CaseDetail-slick').slick('slickGoTo', key);
-    
-    let slickNo=key+1;
+
+    let slickNo = key + 1;
     console.log(slickNo);
 
-    slickNumber+=''+slickNo+''
+    slickNumber += '' + slickNo + ''
 
     $('.slickNumber').html(slickNumber);
 
@@ -593,28 +576,28 @@ function slickGoTo(key) {
 
 
 $(document).on("click", ".slick-prev", function (event) {
-    let slickNumbertest='';
-    console.log(desid-1);
+    let slickNumbertest = '';
+    console.log(desid - 1);
 
-    let slickNumber1=desid+1;
+    let slickNumber1 = desid + 1;
 
-    slickNumbertest+=''+slickNumber1+''
+    slickNumbertest += '' + slickNumber1 + ''
 
     $('.slickNumber').html(slickNumbertest);
-    
+
 
 });
 
 
 $(document).on("click", ".slick-next", function (event) {
-var desid =$(".slick-active").data("info");
+    var desid = $(".slick-active").data("info");
 
-let slickNumbertest='';
-    console.log(desid+1);
+    let slickNumbertest = '';
+    console.log(desid + 1);
 
-    let slickNumber1=desid+1;
+    let slickNumber1 = desid + 1;
 
-    slickNumbertest+=''+slickNumber1+''
+    slickNumbertest += '' + slickNumber1 + ''
 
     $('.slickNumber').html(slickNumbertest);
 
@@ -625,3 +608,59 @@ $(document).on("click", ".close-window", function (event) {
 });
 
 
+$( ".views" ).click(function() {
+    get_views_data();
+});
+
+$( ".recently" ).click(function() {
+    get_data();
+});
+
+function get_views_data() {
+    $.ajax({
+        method: "GET",
+        url: `json/cases-${id}.json`,
+        // url:`json/cases.json`,
+        dataType: "json",
+    })
+        .done(function (msg) {
+
+            console.log(msg);
+            let CaseNews = "";
+            msg[0].DesignerProfile.sort(function (a,b){
+                return a['Views'] > b['Views']? -1:1;
+            });
+
+
+
+            console.log(msg[0].DesignerProfile);
+
+            for (var k = 0; k < msg[0].DesignerProfile.length; k++) {
+                CaseNews +=
+                    '<div class="col-6 col-md-4 ps-0"\
+                        <div class="vue-waterfall-slot">\
+                         <div class="card CaseNews-Card">\
+                             <a href="'+ msg[0].DesignerProfile[k].ProfileLink + '">\
+                                <img class="img-fluid"\
+                                src="'+ msg[0].DesignerProfile[k].ProfileImg + '"\
+                                alt="幸福空間個案圖" class="card-img-top">\
+                            </a>\
+                        </div>'
+                CaseNews += '<div class="card-body">'
+                for (var z = 0; z < msg[0].DesignerProfile[k].ProfileTag.length; z++) {
+                    // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
+                    CaseNews += '\
+                            <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].DesignerProfile[k].ProfileTag[z].Tag + '-keyword/">\
+                            '+ msg[0].DesignerProfile[k].ProfileTag[z].Tag + '\
+                            </a>\
+                            ';
+                }
+                CaseNews += '</div></div></div></div>'
+            };
+
+            $('.CaseNews-Card').html(CaseNews);
+
+        });
+
+};
+

json/cases-1043.json

@@ -48,7 +48,7 @@
             {
                 "designerid":"",
                 "casesid":"",
-                "Views":"1000",
+                "Views":2000,
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14155_20211230151618.jpg",
                 "ProfileTag":[
                     {
@@ -69,7 +69,7 @@
             {
                 "designerid":"",
                 "casesid":"",
-                "Views":"1000",
+                "Views":2600,
                 "ProfileImg": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_14154_20211230151111.jpg",
                 "ProfileTag":[
                     {
@@ -86,6 +86,89 @@
                     }
                 ],
                 "ProfileLink":""
+            },
+            {
+                "designerid":"",
+                "casesid":"",
+                "Views":3200,
+                "ProfileImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_92_01.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            },{
+                "designerid":"",
+                "casesid":"",
+                "Views":1500,
+                "ProfileImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_86_01.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            },
+            {
+                "designerid":"",
+                "casesid":"",
+                "Views":1800,
+                "ProfileImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_88_06.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
+            },
+            {
+                "designerid":"",
+                "casesid":"",
+                "Views":3800,
+                "ProfileImg": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point03_99_02-1.jpg",
+                "ProfileTag":[
+                    {
+                        "Tag":"北歐風",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"新成屋",
+                        "TagLink":""
+                    },
+                    {
+                        "Tag":"大坪數",
+                        "TagLink":""
+                    }
+                ],
+                "ProfileLink":""
             }
         ],