商品详情相关推荐静态化

src/main/resources/static/js/common/serviceapi/product.service.js

@@ -64,30 +64,30 @@ var ProductApi = {
                 callback(res);
             });
         },
-        // GetProductDdtailsParameter: function (params, callback) {//获取商品参数
-        //     Http.AjaxService({
-        //         url:'/commodity/detail/params',
-        //         type:'get',
-        //         data:params,
-        //         json:true,
-        //         isHost:true
-        //     })
-        //     .then(function(res){
-        //         callback(res);
-        //     });
-        // },
-        // GetProductDdtailsRecommend: function (params, callback) {//获取商品推荐
-        //     Http.AjaxService({
-        //         url:'/commodity/detail/recommend',
-        //         type:'get',
-        //         data:params,
-        //         json:true,
-        //         isHost:true
-        //     })
-        //     .then(function(res){
-        //         callback(res);
-        //     });
-        // },
+        GetProductDdtailsParameter: function (params, callback) {//获取商品参数
+            Http.AjaxService({
+                url:'/commodity/detail/params',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetProductDdtailsRecommend: function (params, callback) {//获取商品推荐
+            Http.AjaxService({
+                url:'/commodity/detail/recommend',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
         GetEquipmentDdtailsRecommend: function (params, callback) {//获取项目详情
             Http.AjaxService({
                 url:'/commodity/equipment/details',

src/main/resources/static/js/product/detail.js

@@ -224,7 +224,7 @@ var productDetail = new Vue({
                         _self.isHideButton = true
                         _self.handleShowProductType()
                     }
-                    // _self.getRecommends();
+                    _self.getRecommends();
                     _self.getProdcutArchiveDetails();  //获取资料列表
                     // 获取路由hash标识，设置默认展开tab
                     var str = CAIMEI.getUrlParam('open');
@@ -461,52 +461,52 @@ var productDetail = new Vue({
                 window.location.href = '/shopping/confirm.html?type=2&productId='+_self.productId+'&count='+_self.number;
             }
         },
-        // getRecommends: function () {
-        //     var _self = this;
-        //     if (!this.productId) {
-        //         return;
-        //     }
-        //     ProductApi.GetProductDdtailsRecommend(
-        //         {
-        //             productId: _self.productId,
-        //             recommendType: _self.recommendType,
-        //             userId: _self.userId
-        //         },
-        //         function (response) {
-        //             if (response.code === 0 && response.data) {
-        //                 if (response.data.length > 0) {
-        //                     _self.recommends = response.data;
-        //                     _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
-        //                     setTimeout(function () {
-        //                         if (isPC) {
-        //                             $('#productRecommend').slide({
-        //                                 mainCell: ".swiper-wrapper",
-        //                                 titCell: ".swiper-pagination span",
-        //                                 effect: "leftLoop",
-        //                                 interTime: 3000,
-        //                                 autoPlay: true,
-        //                                 scroll: 7,
-        //                                 vis: 7,
-        //                                 trigger: "mouseover"
-        //                             });
-        //                         } else {
-        //                             var swiper = new Swiper('#productRecommend', {
-        //                                 slidesPerView: 3,
-        //                                 spaceBetween: 0,
-        //                                 autoplay: {
-        //                                     delay: 3000,
-        //                                     disableOnInteraction: false
-        //                                 },
-        //                                 pagination: {
-        //                                     el: '.swiper-pagination'
-        //                                 }
-        //                             });
-        //                         }
-        //                     }, 500);
-        //                 }
-        //             }
-        //         });
-        // },
+        getRecommends: function () {
+            var _self = this;
+            if (!this.productId) {
+                return;
+            }
+            ProductApi.GetProductDdtailsRecommend(
+                {
+                    productId: _self.productId,
+                    recommendType: _self.recommendType,
+                    userId: _self.userId
+                },
+                function (response) {
+                    if (response.code === 0 && response.data) {
+                        if (response.data.length > 0) {
+                            _self.recommends = response.data;
+                            _self.recommendPage = isPC ? Math.ceil(response.data.length / 7) : Math.ceil(response.data.length / 3);
+                            setTimeout(function () {
+                                if (isPC) {
+                                    $('#productRecommend').slide({
+                                        mainCell: ".swiper-wrapper",
+                                        titCell: ".swiper-pagination span",
+                                        effect: "leftLoop",
+                                        interTime: 3000,
+                                        autoPlay: true,
+                                        scroll: 7,
+                                        vis: 7,
+                                        trigger: "mouseover"
+                                    });
+                                } else {
+                                    var swiper = new Swiper('#productRecommend', {
+                                        slidesPerView: 3,
+                                        spaceBetween: 0,
+                                        autoplay: {
+                                            delay: 3000,
+                                            disableOnInteraction: false
+                                        },
+                                        pagination: {
+                                            el: '.swiper-pagination'
+                                        }
+                                    });
+                                }
+                            }, 500);
+                        }
+                    }
+                });
+        },
         queryProductDetilsCoupons: function() {// 初始化商品详情优惠券信息
             var _self = this;
             ProductApi.QueryProductDetilsCoupons(_self.couponParam, function (response) {

src/main/resources/templates/product/detail.html

@@ -417,7 +417,7 @@
             </div>
         </div>
         <!--相关推荐区域-->
-        <div class="recommendBox" th:if="${lists.size()>0}">
+        <div v-if="!GLOBAL_USER_ID" class="recommendBox" th:if="${lists.size()>0}">
             <div class="hd">相关推荐</div>
             <div id="productRecommend" class="swiper-container">
                 <ul class="swiper-wrapper" v-cloak>
@@ -441,6 +441,30 @@
                 <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
             </div>
         </div>
+        <div class="recommendBox" v-if="GLOBAL_USER_ID && recommends.length>0">
+            <div class="hd">相关推荐</div>
+            <div id="productRecommend" class="swiper-container">
+                <ul class="swiper-wrapper" v-cloak>
+                    <li class="swiper-slide mfc" v-for="p in recommends">
+                        <div class="item">
+                            <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
+                                <img :src="p.image" :alt="p.name"
+                                     onerror="javascript:this.src='/img/base/placeholder.png';">
+                                <span v-html="p.name"></span>
+                            </a>
+                        </div>
+                    </li>
+                    <!--<li class="swiper-slide  defaulImg" v-for="(item,index) in recommendIndex">
+                       <div class="item">
+                            <a href="javascript:0" class="image">
+                                <img src="/img/base/placeholder.png" alt="">
+                            </a>
+                     </div>
+                    </li>-->
+                </ul>
+                <div class="swiper-pagination mfc"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+            </div>
+        </div>
     </div>
     <div class="wrap clear">
         <div v-if="!isPC" class="mShopBox">