商品详情

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

@@ -15,7 +15,7 @@ import org.springframework.web.bind.annotation.ResponseBody;
 import java.util.List;
 
 /**
- *cription
+ * 商品页面及部分接口
  *
  * @author : Charles
  * @date : 2020/6/12

src/main/resources/static/css/base/base.css

@@ -15,6 +15,8 @@ pre{white-space:pre-wrap;}
 li{list-style-position:inside;}
 header li,footer li{list-style:none;}
 [v-cloak]{display:none;}
+table{border-collapse: collapse;}
+table,td,th{border: 1px solid #EBECEF;}
 /* 定义动画效果 */
 @-webkit-keyframes fadeInDown{
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}

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

@@ -23,7 +23,7 @@ li{list-style:none;}
 .productBox .detailBox .title{font-size:18px;font-weight:bold;line-height:24px;padding:5px 0;color:#4A4F58}
 .productBox .detailBox .tags{padding:2px 0}
 .productBox .detailBox .tags span{display:inline-block;height:16px;line-height:16px;padding:0 6px;font-size:12px;color:#FFF;background:#86B2FF;border-radius:2px;margin-right:10px}
-.productBox .detailBox .detail{box-sizing:border-box;padding:14px 20px;font-size:14px;color:#93979F;background:#F3F7FE;border-radius:2px;margin:10px 0}
+.productBox .detailBox .detail{box-sizing:border-box;padding:14px 20px;font-size:14px;color:#93979F;background:#F3F7FE;border-radius:2px;margin:10px 0;position:relative;}
 .productBox .detailBox .detail hr{border:none;border-top:1px dashed #BEC2C9;margin:12px 0}
 .productBox .detailBox .row{position:relative;padding:3px 0 3px 62px;line-height:24px}
 .productBox .detailBox .row .l{position:absolute;left:0;top:3px;display:inline-block;width:60px;height:24px;text-align:justify}
@@ -37,6 +37,146 @@ li{list-style:none;}
 .productBox .detailBox .price .icon.on{position:absolute;left:0;top:0;margin:0}
 .productBox .detailBox .price .icon:before{width:24px;height:24px;background-position:-146px -251px}
 .productBox .detailBox .price .icon.on:before{background-position:-116px -251px}
-.productBox .detailBox .number{display:inline-block;width:130px;line-height:24px;height:24px;box-sizing:border-box;background:#dae0f3;border-radius:2px;font-size:0;white-space:nowrap;text-align:center}
-.productBox .detailBox .number>em{display:inline-block;width:24px;font-size:20px;line-height:20px;vertical-align:top;cursor:pointer}
-.productBox .detailBox .number input{width:80px;border:1px solid #dae0f3;line-height:22px;font-size:14px;vertical-align:top;text-align:center}
+.productBox .detailBox .number{display:inline-block;width:130px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top;}
+.productBox .detailBox .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;line-height:20px;vertical-align:top;cursor:pointer}
+.productBox .detailBox .number input{width:80px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616;}
+
+.productBox .detailBox .detail .flag{position:absolute;right:0;top:0;font-size:0}
+.productBox .detailBox .detail .flag:before{display:inline-block;width:115px;height:115px;background-position:0 -453px}
+.productBox .detailBox .detail .btn{position:absolute;right:20px;top:20px;height:32px;line-height:32px;padding:0 16px;background:#F94B4B;font-size:14px;color:#FFF;border-radius:2px}
+.productBox .detailBox .detail .row .btn{top:6px;right:0}
+.productBox .detailBox .btnBox{text-align:center;padding:15px 0}
+.productBox .detailBox .btnBox .cart,.productBox .detailBox .btnBox .buy{display:inline-block;width:160px;height:40px;line-height:40px;text-align:center;border:1px solid #E15616;background:#FFE6DC;cursor:pointer;border-radius:2px;font-size:16px;color:#E15616;margin:0 15px}
+.productBox .detailBox .btnBox .cart:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
+.productBox .detailBox .btnBox .buy{background:#E15616;color:#FFF}
+.productBox .detailBox .detail .btn:hover,.productBox .detailBox .btnBox .cart:hover,.productBox .detailBox .btnBox .buy:hover{opacity:.8}
+.productBox .detailBox .concatBox{height:120px;padding:15px}
+.productBox .detailBox .concatBox img{height:120px;width:auto}
+
+.recommendBox{margin-bottom:16px}
+.recommendBox .hd{font-size:16px;color:#4A4F58;font-weight:bold;padding:16px 32px}
+.recommendBox .bd{width:100%;height:205px;padding:15px 0;background:#FFF}
+.recommendBox .bd li{float:left;width:153px;height:205px;margin-left:14px;overflow:hidden;line-height:22px}
+.recommendBox .bd li a{display:block;width:100%;height:100%;color:#93979F}
+.recommendBox .bd li a:hover{color:#E15616}
+.recommendBox .bd li img{display:block;width:153px;height:153px}
+
+.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 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>.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;
+}
+.shopBox {
+    margin-bottom: 16px;
+    background: #FFF;
+}
+.shopBox .bd{
+    padding: 0 16px 16px;
+}
+.shopBox .bd .name{
+    height:40px;
+    line-height: 40px;
+    font-weight: bold;
+    color: #4A4F58;
+    font-size: 14px;
+    border-bottom: 1px solid #F7F7F7;
+}
+.shopBox .shop,.shopBox .heart{vertical-align: text-top;}
+.shopBox .shop:before{
+    width: 30px;
+    height: 25px;
+    background-position: 5px -297px;
+}
+.shopBox .bd .heart:before{
+    width: 25px;
+    height: 25px;
+    background-position: -35px -297px;
+}
+.shopBox .bd .tit{
+    line-height: 30px;
+    font-weight: bold;
+    color: #4A4F58;
+    font-size: 14px;
+}
+.shopBox .bd .con{
+    line-height: 20px;
+    color:#93979F;
+    font-size: 12px;
+    margin-bottom: 12px;
+}
+.shopBox .bd .btn{
+    display: block;
+    width:100%;
+    height:36px;
+    line-height: 36px;
+    text-align: center;
+    box-sizing: border-box;
+    border-radius: 2px;
+    border:1px solid #E15616;
+    font-size: 14px;
+    color:#E15616;
+    margin-top: 12px;
+}
+
+.wrap>.rgt .contact{
+background: #FFF;
+}
+.wrap>.rgt .contact .bd{
+    padding:10px 16px 16px;
+    line-height: 24px;
+    font-size: 14px;
+    color: #4A4F58;
+    font-weight: bold;
+}

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

@@ -4,15 +4,23 @@
 var productDetail = new Vue({
     el: "#container",
     data: {
-        userId: '',
+        productId: 0,
+        userId: 6,
+        userIdentity: '',
         images: [],
+        price: 564,
+        priceFlag: 2,
+        recommendType: 1,
+        recommends: [],
+        parameters: [],
 
     },
     computed: {},
     methods: {
         getImages: function(){
             var _self = this;
-            $.getJSON("/product/images",{productId:5216}).done(function (r) {
+            if(this.productId ===0){return;}
+            $.getJSON("/product/images",{productId: this.productId}).done(function (r) {
                 if (r.code === 0 && r.data) {
                     _self.images = r.data;
                     setTimeout(function(){
@@ -42,15 +50,44 @@ var productDetail = new Vue({
                 }
             });
         },
+        getRecommends: function(){
+            var _self = this;
+            if(this.productId ===0){return;}
+            $.getJSON("/product/recommend",{
+                productId: this.productId,
+                recommendType: this.recommendType
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommends = r.data;
+                }
+            });
+        },
+        getParameters: function(){
+            var _self = this;
+            if(this.productId ===0){return;}
+            $.getJSON("/product/parameter",{
+                productId: this.productId
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.parameters = r.data;
+                }
+            });
+        },
     },
     created: function () {
+        this.productId = getUrlParam("pid") ? getUrlParam("pid")*1 : 0;
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
-            this.userId = JSON.parse(userInfo).userId;
+            this.userId = JSON.parse(userInfo).userId*1;
         }
         this.getImages();
     },
     mounted: function () {
-
+        this.getRecommends();
+        $('.detailBox').slide({
+            mainCell:".tabCon"
+            ,titCell:".tabTit span"
+            ,trigger: "click"
+        });
     }
 });

src/main/resources/static/lib/magnifier.js

@@ -42,9 +42,7 @@ ImageMagnifier.prototype = {
     smallImgHover: function () {
         var that = this;
         $('body').on("mouseover", that.imgItem, function(){
-            console.log(1);
             var src=$(this).find('img').attr("src");
-            console.log(src);
             if($(this).hasClass(that.activeClass)){
 	    		return;
 	    	}

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

@@ -46,10 +46,21 @@
                 </p>
                 <div class="detail">
                     <p class="row"><span class="l">价格</span><i>：</i>
-                        <!--<em class="price" th:text="*{price}"></em>-->
+                    <template v-if="userId && userId>0">
+                        <em v-if="priceFlag==1">未公开价格</em>
+                        <template v-else>
+                            <template v-if="priceFlag==2 && userIdentity!=2">
+                                <em>价格仅会员可见</em>
+                                <a v-if="priceFlag==2 && userIdentity!=2" href="javascript:void(0)" class="btn">去升级会员查看价格</a>
+                            </template>
+                            <em v-else class="price" v-text="'￥'+parseFloat(price).toFixed(2)"></em>
+                        </template>
+                    </template>
+                    <template v-else>
                         <em class="price"><i class="icon mIcon" th:each="i:${#numbers.sequence(1,5)}">
                                 <i th:if="*{pricegrade}>=${i} or ${i}==1" class="icon mIcon on"></i>
                         </i></em>
+                    </template>
                     </p>
                     <p class="row"><span class="l">品牌</span><i>：</i><em th:text="*{brandName}"></em></p>
                     <p class="row"><span class="l">包装规格</span><i>：</i><em th:text="*{unit}"></em></p>
@@ -69,44 +80,107 @@
                         <em class="ser">急速退款</em>
                         <em class="ser">正品保证</em>
                     </p>
+                    <a href="javascript:void(0);" class="btn">登录查看价格</a>
+                    <span class="icon flag"></span>
                 </div>
+                <div class="btnBox">
+                    <a href="javascript:void(0);" class="cart icon">加入购物车</a>
+                    <a href="javascript:void(0);" class="buy">立即购买</a>
+                </div>
+                <div class="concatBox"><img src="/img/product/concat.png"></div>
             </div>
         </div>
-    </div>
 
+        <div class="recommendBox">
+            <div class="hd">相关推荐</div>
+            <div class="bd">
+                <ul class="clear">
+                    <li class="item" v-for="p in recommends">
+                        <a class="image" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                            <img :src="p.image" :alt="p.name">
+                            <span v-text="p.name" ></span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="wrap clear">
+        <div class="detailBox">
+            <div class="tabTit">
+                <span class="on">产品介绍</span>
+                <span>相关参数</span>
+                <span>服务项目</span>
+                <span>评价</span>
+            </div>
+            <div class="tabCon">
+                <div class="item">
+                    <div class="item" th:utext="${product.detailInfo}"></div>
+                    <div class="item" th:utext="${product.orderInfo}"></div>
+                </div>
+                <div class="item">
+                    <table>
+                        <tr>
+                            <td>重量：</td>
+                            <td>180g</td>
+                        </tr>
+                        <tr>
+                            <td>颜色：</td>
+                            <td>大核心技术保证了浅色及大核心技术保了浅色及大核心技术保证了浅色及大核心技术保大核心技术保证了浅色及大 核心技术保了浅色及大核心技术保证了浅色及大核心技术保</td>
+                        </tr>
+
+                        <tr v-for="pa in parameters">
+                            <td v-text="pa.paramsName"></td>
+                            <td v-text="pa.paramsContent"></td>
+                        </tr>
+                    </table>
+                </div>
+                <div class="item">
+                    <div class="item" th:utext="${product.serviceInfo}"></div>
+                </div>
+                <div class="item">
+                    <p class="comment">该商品暂无评价!</p>
+                </div>
+            </div>
+        </div>
+        <div class="rgt">
+            <div class="shopBox">
+                <div class="hd">供应商信息</div>
+                <div class="bd">
+                    <div class="name"><span th:text="${product.shopTitle}"></span><i class="icon shop"></i></div>
+                    <div class="tit">经营范围：</div>
+                    <div class="con" th:text="${product.businessScope}"></div>
+                    <div class="tit">所在地区：</div>
+                    <div class="con" th:text="${product.shopAddress}"></div>
+                    <div class="tit">满意度：<i th:each="i:${#numbers.sequence(1,5)}" class="icon heart"></i></div>
+                    <a th:href="@{'/shop/home.html?sid=' + ${product.shopId}}" class="btn">查看主页</a>
+                </div>
+            </div>
+            <div class="contact">
+                <div class="hd">联系方式</div>
+                <div class="bd">
+                    <div>采美客服（转接供应商）</div>
+                    <div>电话：</div>
+                    <div>0755-22907771</div>
+                    <div>153-3885-1365</div>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <hr>
 <div th:text="${product.pid}"></div>
 
-<div th:text="${product.priceflag}"></div>
 <div th:text="${product.remarks}"></div>
 <div th:text="${product.validFlag}"></div>
 
-
-
 <div th:text="${product.step}"></div>
 
-<div th:utext="${product.detailInfo}"></div>
-<div th:utext="${product.orderInfo}"></div>
-<div th:utext="${product.serviceInfo}"></div>
-
 <div th:text="${product.brandId}"></div>
-
-
-
-
-<div th:text="${product.shopId}"></div>
-<div th:text="${product.shopTitle}"></div>
-<div th:text="${product.businessScope}"></div>
-<div th:text="${product.shopAddress}"></div>
-
     <hr>
 
 
 
-
-
-
 </div>
 
 <!-- 引入底部 -->