项目仪器详情PC

pom.xml

@@ -90,7 +90,11 @@
 
 
 
-
+        <dependency>
+            <groupId>com.alibaba</groupId>
+            <artifactId>fastjson</artifactId>
+            <version>1.2.6</version>
+        </dependency>
 
 
 

src/main/java/com/caimei/www/controller/HomeController.java

@@ -2,7 +2,7 @@ package com.caimei.www.controller;
 
 import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.base.HeadCart;
 import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.service.HomeService;
@@ -40,7 +40,7 @@ public class HomeController extends BaseController {
     @GetMapping("/index.html")
     public String home(final Model model) {
         model.addAttribute("msg", "首页");
-        List<HomeFloor> pageFloors = homeService.getHomePageFloor();
+        List<PageFloor> pageFloors = homeService.getHomePageFloor();
         model.addAttribute("pageFloors", pageFloors);
         return HOME_PATH;
     }

src/main/java/com/caimei/www/controller/InstrumentController.java

@@ -1,12 +1,18 @@
 package com.caimei.www.controller;
 
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.PageFloor;
+import com.caimei.www.pojo.content.Parameter;
 import com.caimei.www.service.InstrumentService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import java.util.List;
 
 
 /**
@@ -46,4 +52,13 @@ public class InstrumentController extends BaseController {
         return INSTRUMENT_DETAIL_PATH;
     }
 
+    /**
+     * 获取项目仪器详情页中层信息(搭配推荐,相似商品)
+     */
+    @GetMapping("/instrument/recommend")
+    @ResponseBody
+    public JsonModel<List<PageFloor>> getInstrumentRecommendById(Integer instrumentId) {
+        return instrumentService.getInstrumentRecommendById(instrumentId);
+    }
+
 }

src/main/java/com/caimei/www/controller/RedirectController.java

@@ -14,8 +14,14 @@ import org.springframework.web.bind.annotation.PathVariable;
 public class RedirectController {
 
 	@GetMapping("/product-{id}.html")
-	public String toTest(@PathVariable("id") Integer productId) {
+	public String toProduct(@PathVariable("id") Integer productId) {
 		return "redirect:/product/detail.html?id=" + productId;
 	}
 
+	@GetMapping("/cmpage/info-2-{id}.html")
+	public String toInstrument(@PathVariable("id") Integer instrumentId) {
+		return "redirect:/instrument/detail.html?id=" + instrumentId;
+	}
+
+
 }

src/main/java/com/caimei/www/mapper/HomeDao.java

@@ -1,6 +1,6 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.pojo.base.HeadCart;
@@ -20,11 +20,11 @@ public interface HomeDao {
     /**
      * 首页楼层
      */
-    List<HomeFloor> getHomePageFloor();
+    List<PageFloor> getHomePageFloor();
     /**
      * 大专题二级楼层
      */
-    List<HomeFloor> getHomeBigTopicFloor();
+    List<PageFloor> getHomeBigTopicFloor();
     /**
      * 首页轮播图
      */

src/main/java/com/caimei/www/mapper/InstrumentDao.java

@@ -1,6 +1,8 @@
 package com.caimei.www.mapper;
 
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.content.Parameter;
 import org.apache.ibatis.annotations.Mapper;
 
@@ -18,5 +20,9 @@ public interface InstrumentDao {
     InstrumentDetail getInstrumentById(Integer instrumentId);
     /** 项目仪器参数 */
     List<Parameter> getParametersByInstrumentId(Integer instrumentId);
+    /** 获取项目仪器详情页中层信息 */
+    List<PageFloor> getInstrumentRecommendById(Integer instrumentId);
+    /** 中层信息详细数据 */
+    List<ImageLink> getFloorDataById(Integer id);
 }
 

src/main/java/com/caimei/www/pojo/content/HomeFloor.java → src/main/java/com/caimei/www/pojo/content/PageFloor.java

@@ -5,17 +5,17 @@ import lombok.Data;
 import java.util.List;
 
 /**
- * 首页楼层
+ * 页面楼层
  *
  * @author : Charles
  * @date : 2020/6/22
  */
 @Data
-public class HomeFloor {
+public class PageFloor {
 	private Integer id;
 	private Integer type;
 	private String title;
 	private String detail;
-	private List<HomeFloor> subFloors;
+	private List<PageFloor> subFloors;
 	private List<ImageLink> floorData;
 }

src/main/java/com/caimei/www/service/HomeService.java

@@ -2,7 +2,7 @@ package com.caimei.www.service;
 
 import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.base.HeadCart;
 import com.caimei.www.pojo.content.ProductList;
 
@@ -19,7 +19,7 @@ public interface HomeService {
     /**
      * 首页楼层
      */
-    List<HomeFloor> getHomePageFloor();
+    List<PageFloor> getHomePageFloor();
 
     /**
      * 首页轮播图

src/main/java/com/caimei/www/service/InstrumentService.java

@@ -1,6 +1,10 @@
 package com.caimei.www.service;
 
+import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.PageFloor;
+
+import java.util.List;
 
 /**
  * Description
@@ -9,10 +13,18 @@ import com.caimei.www.pojo.content.InstrumentDetail;
  * @date : 2020/7/16
  */
 public interface InstrumentService {
+
     /**
      * 项目仪器详情
      * @param instrumentId
      * @return
      */
     InstrumentDetail getInstrumentById(Integer instrumentId);
+
+    /**
+     * 获取项目仪器详情页中层信息(搭配推荐,相似商品)
+     * @param instrumentId
+     * @return
+     */
+    JsonModel<List<PageFloor>> getInstrumentRecommendById(Integer instrumentId);
 }

src/main/java/com/caimei/www/service/impl/HomeServiceImpl.java

@@ -2,7 +2,7 @@ package com.caimei.www.service.impl;
 
 import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.mapper.HomeDao;
-import com.caimei.www.pojo.content.HomeFloor;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.ProductList;
 import com.caimei.www.pojo.base.HeadCart;
@@ -34,8 +34,8 @@ public class HomeServiceImpl implements HomeService {
      * 首页楼层
      */
     @Override
-    public List<HomeFloor> getHomePageFloor() {
-        List<HomeFloor> floorList = homeDao.getHomePageFloor();
+    public List<PageFloor> getHomePageFloor() {
+        List<PageFloor> floorList = homeDao.getHomePageFloor();
         return floorList;
     }
 
@@ -86,7 +86,7 @@ public class HomeServiceImpl implements HomeService {
         // 大专题:6,小专题:5,商品专题:4,优质供应商:3
         Map<String, Object> topicMap = new HashMap<>();
         // 6大专题二级楼层
-        List<HomeFloor> bigTopicFloors = homeDao.getHomeBigTopicFloor();
+        List<PageFloor> bigTopicFloors = homeDao.getHomeBigTopicFloor();
         bigTopicFloors.forEach(bigTopic -> {
             List<ImageLink>  topicData = homeDao.getBigTopicData(bigTopic.getId());
             bigTopic.setFloorData(topicData);

src/main/java/com/caimei/www/service/impl/InstrumentServiceImpl.java

@@ -2,13 +2,19 @@ package com.caimei.www.service.impl;
 
 import com.caimei.www.mapper.InstrumentDao;
 import com.caimei.www.mapper.ProductDao;
+import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.InstrumentDetail;
+import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.pojo.content.Parameter;
 import com.caimei.www.service.InstrumentService;
+import com.caimei.www.utils.ImageUtil;
+import com.caimei.www.utils.PriceUtil;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 
 /**
@@ -37,4 +43,33 @@ public class InstrumentServiceImpl implements InstrumentService {
         instrument.setPageContents(contents);
         return instrument;
     }
+
+    /**
+     * 获取项目仪器详情页中层信息(搭配推荐,相似商品)
+     *
+     * @param instrumentId
+     * @return
+     */
+    @Override
+    public JsonModel<List<PageFloor>> getInstrumentRecommendById(Integer instrumentId) {
+        List<PageFloor> floorList = instrumentDao.getInstrumentRecommendById(instrumentId);
+        if (floorList.size() > 0) {
+            List<PageFloor> tempList = new ArrayList<>();
+            floorList.forEach(floor -> {
+                List<ImageLink> imageLinks = instrumentDao.getFloorDataById(floor.getId());
+                if (imageLinks.size() > 0) {
+                    imageLinks.forEach(img -> {
+                        img.setImage(ImageUtil.getImageURL("actType", img.getImage(), 0, domain));
+                    });
+                    floor.setFloorData(imageLinks);
+                } else {
+                    tempList.add(floor);
+                }
+            });
+            if(tempList.size() > 0){
+                floorList.removeAll(tempList);
+            }
+        }
+        return JsonModel.success(floorList);
+    }
 }

src/main/resources/mapper/HomeMapper.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.HomeDao">
-	<select id="getHomePageFloor" resultType="com.caimei.www.pojo.content.HomeFloor">
+	<select id="getHomePageFloor" resultType="com.caimei.www.pojo.content.PageFloor">
 		select id, type, floorTitle as title, floorDetail as detail
 		from new_page_floor
 		where delFlag = 0 and wwwEnabledStatus = '1'
 		order by sort
 	</select>
-	<select id="getHomeBigTopicFloor" resultType="com.caimei.www.pojo.content.HomeFloor">
+	<select id="getHomeBigTopicFloor" resultType="com.caimei.www.pojo.content.PageFloor">
 		select id, title, description as detail
 		from cm_page_big_topic
 		where delFlag = 0 and enabledStatus = '1'

src/main/resources/mapper/InstrumentMapper.xml

@@ -16,4 +16,26 @@
         from cm_page_name_content
         where pageId=#{instrumentId}
     </select>
+    <select id="getInstrumentRecommendById" resultType="com.caimei.www.pojo.content.PageFloor">
+        select id,
+               pageId as type,
+               title,
+               link as detail
+        from cm_page_centre
+        where pageId=#{instrumentId}
+        and enabledStatus=1
+        order by sort desc,createDate desc
+    </select>
+    <select id="getFloorDataById" resultType="com.caimei.www.pojo.content.ImageLink">
+        select  a.id as id,
+                a.title as title,
+                a.link as link,
+                d.image as image
+        from cm_page_image a
+        right join cm_page_centre_image b on b.imageId=a.id
+        left join cm_page_image_activity c on c.imageId=a.id
+        left join acttype d on d.acttypeId=c.acttypeId
+        where b.centreId=#{id} and  a.enabledStatus=1
+        order  by a.sort desc,a.createDate desc
+    </select>
 </mapper>

src/main/resources/static/css/instrument/detail.pc.css

@@ -6,11 +6,44 @@ li{list-style:none;}
 .instrumentBox{width:100%;margin:16px 0;background:#FFF;box-sizing:border-box;padding:15px}
 .instrumentBox .imageBox{float:left;width:452px;height:300px;background:#F3F7FE;}
 .instrumentBox img{width:100%;height:100%;display:block}
-.instrumentBox .detailBox{float:right;width:686px;color:#93979F;background:#F3F7FE;box-sizing:border-box;padding:14px 20px;font-size:14px;border-radius:2px;position:relative;}
-.instrumentBox .detailBox hr{border:none;border-top:1px dashed #BEC2C9;margin:12px 0}
-.instrumentBox .detailBox .row{position:relative;padding:3px 0 3px 70px;line-height:24px}
-.instrumentBox .detailBox .row .l{display:inline-block;min-width:56px;height:24px;text-align:justify;vertical-align:top;margin-left:-70px;}
-.instrumentBox .detailBox .row .l:after{content:'';display:inline-block;width:100%}
-.instrumentBox .detailBox .row>i{font-style:normal;}
-.instrumentBox .detailBox .row em{font-style:normal;color:#4A4F58}
-.instrumentBox .detailBox .tit{color:#E15616;padding:3px 0;line-height:24px;}
+.instrumentBox .infoBox{float:right;width:686px;color:#93979F;background:#F3F7FE;box-sizing:border-box;padding:10px 20px;font-size:14px;border-radius:2px;position:relative;}
+.instrumentBox .infoBox hr{border:none;border-top:1px dashed #BEC2C9;margin:5px 0}
+.instrumentBox .infoBox .row{position:relative;padding:3px 0 3px 70px;line-height:24px}
+.instrumentBox .infoBox .row .l{display:inline-block;min-width:56px;height:24px;text-align:justify;vertical-align:top;margin-left:-70px;}
+.instrumentBox .infoBox .row .l:after{content:'';display:inline-block;width:100%}
+.instrumentBox .infoBox .row>i{font-style:normal;}
+.instrumentBox .infoBox .row em{font-style:normal;color:#4A4F58}
+.instrumentBox .infoBox .tit{color:#E15616;padding:3px 0;line-height:24px;}
+.instrumentBox .infoBox .share{position:absolute;right:20px;top:10px}
+.instrumentBox .infoBox .share .icon{vertical-align:middle;display:inline-block;height:30px}
+.instrumentBox .infoBox .share .icon:before{width:32px;height:30px;background-position:-96px -293px}
+.instrumentBox .infoBox .buy{position:absolute;right:20px;bottom:20px;width:208px;height:50px;line-height:50px;background:#E15616;color:#FFF;font-size:18px;text-align:center;border-radius:2px}
+.instrumentBox .infoBox .buy:hover{opacity:.8}
+
+.detailInfo{box-sizing:border-box;padding:0 16px;width:1184px;background:#FFF}
+.detailInfo .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#93979F}
+.detailInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
+.detailInfo .tabTit span:hover{color:#E15621}
+.detailInfo .tabTit span.on,.detailInfo .tabTit span.on:hover{background:#E15621;color:#FFF}
+.detailInfo .tabCon{padding:16px 0;text-align:center}
+.detailInfo .tabCon img{max-width:100%;}
+.detailInfo .tabCon table{width:100%;text-align:left}
+
+.pageFloor .title{height:24px;line-height:24px;padding-left:10px;border-left:4px solid #E15616;margin:32px 0 16px 0;font-size:24px;color:#4A4F58;font-weight:bolder}
+.pageFloor .content{width:1202px}
+.pageFloor .content li{float:left;width:284px;height:334px;margin:0 16px 16px 0;background:#FFF}
+.pageFloor .content li img{display:block;width:284px;height:284px}
+.pageFloor .content li span{display:block;height:50px;line-height:50px;padding:0 10px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#93979F;font-size:16px}
+.pageFloor .content li:hover{box-shadow:0 2px 6px #dedede;transition:all 0.5s;-webkit-transition:all 0.5s}
+.pageFloor .content li:hover span{color:#E15616}
+
+.contactBox{width:100%;background:#FFF;margin-bottom:-29px;padding-bottom:15px}
+.contactBox .tit{position:relative;width:1184px;margin:0 auto;height:80px}
+.contactBox .tit:before{content:'';position:absolute;left:0;top:39px;width:100%;border-top:1px solid #FFE6DC}
+.contactBox .tit span{width:188px;height:80px;line-height:80px;background:#FFF;position:absolute;top:0;left:50%;margin-left:-94px;font-weight:bold;font-size:28px;color:#2D3036;text-align:center}
+.contactBox .cont{width:1184px;margin:0 auto;text-align:center;line-height:48px}
+.contactBox .cont span{display:inline-block;padding-left:84px;height:96px;text-align:left;font-size:24px;color:#2D3036;position:relative}
+.contactBox .cont .call{margin-right:160px}
+.contactBox .cont span:before{width:70px;height:70px;position:absolute;left:0;top:10px}
+.contactBox .cont .call:before{background-position:-82px -370px}
+.contactBox .cont .phone:before{background-position:0 -370px}

src/main/resources/static/css/product/detail.pc.css

@@ -67,18 +67,18 @@ li{list-style:none;}
 #productRecommend .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
 #productRecommend .swiper-pagination span.on{width:28px;opacity:1;}
 
-.wrap>.detailBox{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF}
-.detailBox .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#93979F}
-.detailBox .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
-.detailBox .tabTit span:hover{color:#E15621}
-.detailBox .tabTit span.on,.detailBox .tabTit span.on:hover{background:#E15621;color:#FFF}
-.detailBox .tabCon{padding:16px 0;text-align:center}
-.detailBox .tabCon img{max-width:100%;}
-.detailBox .tabCon table{width:100%;text-align:left}
-.detailBox .tabCon td{padding:10px 12px;line-height:20px}
-.detailBox .tabCon td:nth-of-type(1){width:20%;color:#93979F}
-.detailBox .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
-.detailBox .comment{color:#93979F;padding:40px 0}
+.wrap>.productInfo{float:left;box-sizing:border-box;padding:0 16px;width:884px;background:#FFF}
+.productInfo .tabTit{height:40px;line-height:40px;border-bottom:1px solid #E15621;font-size:16px;color:#93979F}
+.productInfo .tabTit span{display:inline-block;box-sizing:border-box;min-width:130px;text-align:center;height:100%;padding:0 32px;cursor:pointer}
+.productInfo .tabTit span:hover{color:#E15621}
+.productInfo .tabTit span.on,.productInfo .tabTit span.on:hover{background:#E15621;color:#FFF}
+.productInfo .tabCon{padding:16px 0;text-align:center}
+.productInfo .tabCon img{max-width:100%;}
+.productInfo .tabCon table{width:100%;text-align:left}
+.productInfo .tabCon td{padding:10px 12px;line-height:20px}
+.productInfo .tabCon td:nth-of-type(1){width:20%;color:#93979F}
+.productInfo .tabCon td:nth-of-type(2){width:80%;color:#4A4F58}
+.productInfo .comment{color:#93979F;padding:40px 0}
 
 .wrap>.rgt{float:right;width:284px}
 .wrap>.rgt .hd{height:40px;line-height:40px;padding:0 16px;font-size:16px;color:#E15616;font-weight:bold;background:#FEF6F3}

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

@@ -1,65 +1,33 @@
 var instrumentDetail = new Vue({
     el: "#container",
     data: {
-        productId: 0,
+        instrumentId: 0,
         userId: 6,
         userIdentity: '',
-        images: [],
-        price: 564,
-        priceFlag: 2,
-        recommendType: 1,
-        recommendPage: 1,
-        recommends: [],
-        parameters: [],
-
+        recommends: []
     },
     computed: {},
     methods: {
-        getImages: function(){
+        getRecommendById: function(){
             var _self = this;
-            if(this.productId ===0){return;}
-            $.getJSON("/product/images",{productId: this.productId}).done(function (r) {
+            if(this.instrumentId ===0){return;}
+            $.getJSON("/instrument/recommend",{instrumentId: this.instrumentId}).done(function (r) {
                 if (r.code === 0 && r.data) {
-                    _self.images = r.data;
-                    setTimeout(function(){
-                        if (isPC) {
-                            var magnifier = new ImageMagnifier(
-                                '#imgShown .smallImage li'
-                                ,'#imgShown .bigImage'
-                                ,'#imgShown .zoomImage'
-                                ,'#imgShown .mask'
-                                ,'#imgShown .zoom'
-                                ,"on"
-                            ).init();
-                        } else {
-                            var swiper = new Swiper('#swiperImage', {
-                                loop : true,
-                                autoplay: {
-                                    delay: 2000,
-                                    disableOnInteraction: false
-                                },
-                                pagination: {
-                                    el: '.swiper-pagination',
-                                    type: 'fraction'
-                                }
-                            });
-                        }
-                    },500);
+                    _self.recommends = r.data;
                 }
             });
         }
     },
     created: function () {
-        this.productId = getUrlParam("pid") ? getUrlParam("pid")*1 : 0;
+        this.instrumentId = getUrlParam("id") ? getUrlParam("id")*1 : 0;
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
             this.userId = JSON.parse(userInfo).userId*1;
         }
-        this.getImages();
+        this.getRecommendById();
     },
     mounted: function () {
-        this.getRecommends();
-        $('.detailBox').slide({
+        $('.detailInfo').slide({
             mainCell:".tabCon"
             ,titCell:".tabTit span"
             ,trigger: "click"

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

@@ -94,7 +94,7 @@ var productDetail = new Vue({
         },
     },
     created: function () {
-        this.productId = getUrlParam("pid") ? getUrlParam("pid")*1 : 0;
+        this.productId = getUrlParam("id") ? getUrlParam("id")*1 : 0;
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
             this.userId = JSON.parse(userInfo).userId*1;
@@ -103,7 +103,7 @@ var productDetail = new Vue({
     },
     mounted: function () {
         this.getRecommends();
-        $('.detailBox').slide({
+        $('.productInfo').slide({
             mainCell:".tabCon"
             ,titCell:".tabTit span"
             ,trigger: "click"

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

@@ -18,7 +18,7 @@
     <div class="wrap">
         <div class="instrumentBox clear">
             <div class="imageBox"><img th:src="${instrument.headImage}"></div>
-            <div class="detailBox">
+            <div class="infoBox">
                 <p class="row" th:each="item: ${instrument.pageContents}" th:if="${item.type}==1">
                     <span class="l" th:text="${item.name}"></span><i>：</i><em th:text="${item.content}"></em>
                 </p>
@@ -29,9 +29,47 @@
                 <p class="row" th:each="item,status : ${instrument.pageContents}" th:if="${item.type}==2 and ${status.index}>4">
                     <span class="l" th:text="${item.name}"></span><i>：</i><em th:text="${item.content}"></em>
                 </p>
+                <a href="javascript:void(0);" class="share">分享<i class="icon"></i></a>
+                <a href="javascript:void(0);" class="buy">点击购买</a>
             </div>
         </div>
     </div>
+    <div class="wrap">
+        <div class="detailInfo">
+            <div class="tabTit">
+                <!--<span class="on">项目详情</span>-->
+                <span th:each="item,status : ${instrument.pageContents}"
+                      th:if="${item.type}==3 and (${status.index}==10 or ${status.index}==11 or ${status.index}==12)"
+                      th:text="${item.name}"></span>
+            </div>
+            <div class="tabCon">
+                <div th:each="item,status : ${instrument.pageContents}"
+                     th:if="${item.type}==3 and (${status.index}==10 or ${status.index}==11 or ${status.index}==12)"
+                     th:text="${item.name}" class="item">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="wrap">
+        <div class="pageFloor" v-for="floor in recommends">
+            <div class="title" v-text="floor.title"></div>
+            <ul class="content clear">
+                <li v-for="item in floor.floorData">
+                    <a :href="item.link">
+                        <img :src="item.image">
+                        <span v-text="item.title"></span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="contactBox">
+        <div class="tit"><span>咨询 · 购买</span></div>
+        <div class="cont">
+            <span class="icon call">0755-22907771转806<br>15338851365</span>
+            <span class="icon phone">产品设备：18948339365<br>商务合作：17318032647</span>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->

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

@@ -123,7 +123,7 @@
                 <span>满意度：<em><i th:each="i:${#numbers.sequence(1,5)}" class="mIcon heart"></i></em></span>
             </a>
         </div>
-        <div class="detailBox">
+        <div class="productInfo">
             <div class="tabTit">
                 <span class="on">产品介绍</span>
                 <span>相关参数</span>
@@ -132,8 +132,8 @@
             </div>
             <div class="tabCon">
                 <div class="item">
-                    <div class="item" th:utext="${product.detailInfo}"></div>
-                    <div class="item" th:utext="${product.orderInfo}"></div>
+                    <div th:utext="${product.detailInfo}"></div>
+                    <div th:utext="${product.orderInfo}"></div>
                 </div>
                 <div class="item">
                     <table>

src/test/java/com/caimei/www/WwwApplicationTests.java

@@ -1,13 +1,12 @@
 package com.caimei.www;
 
 import lombok.Data;
-import org.assertj.core.internal.Maps;
+import com.alibaba.fastjson.JSONObject;
 import org.junit.jupiter.api.Test;
 import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.web.client.RestTemplate;
 import reactor.core.publisher.Flux;
 
-import java.time.Duration;
-import java.time.temporal.ChronoUnit;
 import java.util.*;
 import java.util.stream.Collectors;
 
@@ -98,10 +97,17 @@ class WwwApplicationTests {
 
     @Test
     void test4(){
-        Map<Integer, Integer> map =  new LinkedHashMap<>();
-        System.out.println(map.get(0));
+        RestTemplate restTemplate = new RestTemplate();
+        String uri = "https://spi.caimei365.com/search/query/product?keyword=采美";
+        JSONObject forObject = restTemplate.getForObject(uri, JSONObject.class);
+        if(forObject != null){
+            String data = forObject.getString("data");
 
+            JSONObject parse = JSONObject.parseObject(data);
+            Integer total = parse.getInteger("total");
 
+            System.out.println(total);
+        }
     }
 
 }