添加商品页面路径

src/main/java/com/caimei/www/pojo/ProductList.java

@@ -20,5 +20,5 @@ public class ProductList {
 	/** 价格等级 */
 	private Integer pricegrade;
 	/** 活动图标 */
-	private Integer actype;
+	private Integer acttype;
 }

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

@@ -14,6 +14,7 @@ input:focus {box-shadow: 0 0 5px #003399;}
 pre{white-space:pre-wrap;}
 li{list-style-position:inside;}
 header li,footer li{list-style:none;}
+[v-cloak]{display:none;}
 /* 定义动画效果 */
 @-webkit-keyframes fadeInDown{
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}

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

@@ -54,7 +54,7 @@ body{min-width:1200px;}
 .baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
 .baseHeadCenter .headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
 .baseHeadCenter .headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
-.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.17);border-radius:2px}
+.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,2);border-radius:2px}
 .baseHeadCenter .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
 .baseHeadCenter .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
 .baseHeadCenter .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}

src/main/resources/static/css/index/index.h5.css

@@ -34,11 +34,23 @@ li{list-style:none;}
 .mNavBox .navItem{display:none;width:100vw;position:absolute;left:0;background:#F5F5F5}
 .mNavBox .navItem .second{display:block;text-align:center;width:25vw;padding:3.2vw 0;color:#999FAB;font-size:3.2vw;line-height:6.4vw;white-space:nowrap}
 .mNavBox .navItem .second img{display:block;margin:0 auto;width:6.4vw;height:6.4vw}
+/* 首页楼层 */
+.recMain{width:93.4vw;margin:0 auto;}
+.floorTit h2{font-weight:bold;color:#2D3036;font-size:3.7vw;line-height:11.2vw;}
+.floorTit+ul img{width:60px;}
 /* 推荐专区 */
 #recommendBox{width:100%;height:120vw;overflow:hidden;position:relative}
-#recommendBox .swiper-wrapper .swiper-slide{height: calc((100% - 30px) / 2);overflow: hidden;text-align:center;background:#fff;}
+#recommendBox .swiper-wrapper .swiper-slide{
+    width:454vw;
+    height:792vw;
+    margin-right:2.6vw;
+    margin-bottom:2.6vw;
+    overflow: hidden;
+    text-align:center;
+    background:#fff;
+}
 #recommendBox .swiper-wrapper img{width:auto;height:48vw;display:block}
 
 
 
-.floorTit+ul img{width:60px;}
+

src/main/resources/static/css/index/index.pc.css

@@ -27,21 +27,30 @@ li{list-style:none;}
 .footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
 .footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
 .footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}
+/* 首页楼层 */
+.floorTit h2{font-weight:bold;color:#2D3036;font-size:24px;line-height:56px;padding-top:16px}
 /* 推荐专区 */
-#recommendBox{width:1200px;height:400px;overflow:hidden;position:relative}
-#recommendBox .swiper-wrapper{position:relative;height:100%;z-index:0}
-#recommendBox .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:300px;overflow:hidden}
-#recommendBox .swiper-wrapper li img{width:100%;}
-
-
-
-
-
-
-
-
-
-
-
-
+#recommendBox{width:1200px;height:484px;overflow:hidden;position:relative}
+#recommendBox .swiper-pagination{width:100%;height:68px;padding:27px 0;z-index:1;text-align:center;font-size:0;}
+#recommendBox .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+#recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:#f1d5c8;border-radius:2px}
+#recommendBox .swiper-pagination span.on:before{width:28px;background:#E15616}
+#recommendBox .swiper-wrapper{position:relative;width:200%;height:416px;z-index:0;overflow:hidden}
+#recommendBox .swiper-wrapper .swiper-slide{float:left;width:285px;height:416px;margin-right:20px;}
+#recommendBox .swiper-slide .item{position:relative;zoom:1;vertical-align:middle;overflow:hidden;display:block;margin:0 auto;width:100%;height:100%;background:#FFF;box-shadow:0 3px 6px rgba(45,48,54,.2);border-radius:2px;font-size:16px}
+#recommendBox .swiper-slide .item img{display:block;width:100%;height:284px}
+#recommendBox .swiper-slide .icon{position:absolute;right:20px;top:10px}
+#recommendBox .swiper-slide .icon.hot:before,#recommendBox .swiper-slide .icon.new:before{display:block;width:50px;height:64px}
+#recommendBox .swiper-slide .icon.hot:before{background-position:-57px -180px}
+#recommendBox .swiper-slide .icon.new:before{background-position:0px -180px}
+#recommendBox .swiper-slide .name{display:block;padding:14px 35px;height:48px;line-height:24px}
+#recommendBox .swiper-slide .name span{color:#93979F;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+#recommendBox .swiper-slide .price{height:48px;line-height:48px;text-align:center}
+#recommendBox .swiper-slide .price em{color:#4A4F58;font-style:normal}
+#recommendBox .swiper-slide .price em.p{color:#F94B4B}
+#recommendBox .swiper-slide .btnBox{display:none;position:absolute;width:284px;height:68px;background:#FEF6F3;text-align:center;bottom:0;left:0}
+#recommendBox .swiper-slide .item:hover .btnBox{display:block}
+#recommendBox .swiper-slide .item:hover {box-shadow:0px 3px 6px rgba(225,86,22,.5)}
+#recommendBox .swiper-slide .btn{display:block;width:158px;margin:12px auto;height:42px;line-height:42px;text-align:center;overflow:hidden;color:#F94B4B;background:#FFE6DC;border:1px solid #E15616;border-radius:2px}
+#recommendBox .swiper-slide .btn:hover,#recommendBox .swiper-slide .btn.on{background:#E15616;color:#FFF}
 

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

@@ -0,0 +1,4 @@
+@charset "utf-8";
+/**
+* 移动端
+*/

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

@@ -0,0 +1,4 @@
+@charset "utf-8";
+/**
+ * PC端
+ */

src/main/resources/static/css/product/list.h5.css

@@ -0,0 +1,4 @@
+@charset "utf-8";
+/**
+* 移动端
+*/

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

@@ -0,0 +1,4 @@
+@charset "utf-8";
+/**
+ * PC端
+ */

src/main/resources/static/js/base.js

@@ -1,5 +1,6 @@
 var spiServer = $("#spiServer").val();
 var isPC = ($(window).width()>768);
+var loginState = false;
 var classifyData = [];
 var mainClassify = new Vue({
     el: '#mainClassify',

src/main/resources/static/js/index.js

@@ -1,8 +1,11 @@
 var homeData = new Vue({
     el: '#container',
     data: {
+        userIdentity: 4,//用户身份: 2-会员机构, 4-普通机构
+        priceLoading: true,
         images: [],
         recommends: [],
+        recommendPage: 1,
         bigTopicData: [],
         topicData3: [],
         topicData4: [],
@@ -55,20 +58,17 @@ var homeData = new Vue({
             $.getJSON("/home/recommend").done(function (r) {
                 if (r.code === 0 && r.data) {
                     _self.recommends = r.data;
+                    _self.recommendPage = Math.ceil(r.data.length / 4);
                     setTimeout(function(){
                         if (isPC) {
                             $('#recommendBox').slide({
                                 mainCell:".swiper-wrapper"
                                 ,titCell:".swiper-pagination span"
                                 ,effect: "leftLoop"
-                                ,prevCell:".swiper-button-prev"
-		                        ,nextCell:".swiper-button-next"
-		                        ,autoPage:true
                                 ,interTime: 3000
                                 ,autoPlay: true
                                 ,scroll:4
                                 ,vis:4
-                                ,pnLoop:false
                                 ,trigger: "mouseover"
                             });
                         } else {
@@ -82,12 +82,7 @@ var homeData = new Vue({
                                     disableOnInteraction: false
                                 },
                                 pagination: {
-                                    el: '.swiper-pagination',
-                                    type: 'fraction'
-                                },
-                                navigation: {
-                                    nextEl: '.swiper-button-next',
-                                    prevEl: '.swiper-button-prev'
+                                    el: '.swiper-pagination'
                                 },
                             });
                         }

src/main/resources/templates/components/headLink.html

@@ -6,6 +6,7 @@
     <meta http-equiv="keywords" content="采美、易耗品商城、光电美容仪器项目、光电中心、皮肤管理中心、光电转型、美容院转型、光电美容">
     <meta http-equiv="description" content="采美365网——中国美业互联网共享经济平台，中国美业较大的光电美容干货信息平台，提供美容专业线客装产品、美容院消耗品、专业线院装产品、光电美容仪器、光电美容项目交易，同时提供采美公益大讲堂、光电美容干货、光电美容资讯、美业动态等行业信息。采集梦想，美启未来。">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/base.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">

src/main/resources/templates/index.html

@@ -4,7 +4,6 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/headLink"></template>
-    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/index/index.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
     <link th:href="@{/css/index/index.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
@@ -51,29 +50,49 @@
     <!--页面主体数据-->
     <div class="wrap">
         <div th:each="item: ${pageFloors}">
-            <div th:if="${item.type}==1">
+            <div th:if="${item.type}==1" class="recMain">
                 <!--推荐专区-->
                 <div class="floorTit">
                     <h2 th:text="${item.title}" data-id="1"></h2>
                 </div>
-                <div id="recommendBox" class="swiper-container">
-                    <ul class="swiper-wrapper">
-                        <li class="swiper-slide mfc" v-for="product in recommends">
-                            <a :href="'/product/detail.html?pid='+product.pid" target="_blank">
-                                <img :src="product.image" :alt="product.name">
-                                <p v-html="product.name"></p>
-                                <div>
-                                    价格{{product.pricegrade}}
+                <div class="floorCon">
+                    <div id="recommendBox" 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/detail.html?pid='+p.pid" target="_blank">
+                                        <img :src="p.image" :alt="p.name">
+                                        <span v-if="p.acttype==1||p.acttype==2" :class="p.acttype==1?'icon hot':'icon new'"></span>
+                                    </a>
+                                    <a class="name" :href="'/product/detail.html?pid='+p.pid" target="_blank">
+                                        <span v-html="p.name"></span>
+                                    </a>
+                                    <div class="price">
+                                        <template v-if="loginState">
+                                            <em v-if="p.priceflag==1">未公开价格</em>
+                                            <template v-else-if="priceLoading">
+                                                <em>正在获取价格...</em>
+                                            </template>
+                                            <template v-else>
+                                                <em v-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                                <em v-else class="p" v-text="'￥'+parseFloat(p.pricegrade).toFixed(2)"></em>
+                                            </template>
+                                        </template>
+                                        <template v-else>
+                                            <em>价格:<i class="icon" v-for="i in 5">
+                                                    <i v-if="i==1||p.pricegrade>=i" class="icon"></i>
+                                            </i></em>
+                                        </template>
+                                    </div>
+                                    <div class="btnBox">
+                                        <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
+                                        <a v-else-if="p.priceflag!=1" href="javascript:void(0)" class="btn on">加入购物车</a>
+                                    </div>
                                 </div>
-                                <span class="icon">
-                                    热销：acttype=1，
-                                    上新：actType=2
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                    <div class="swiper-pagination"><span v-if="isPC" v-for="i in recommends"></span></div>
-                    <span v-if="isPC" class="pageState"></span>
+                            </li>
+                        </ul>
+                        <div class="swiper-pagination"><span v-if="isPC" v-for="i in recommendPage"></span></div>
+                    </div>
                 </div>
             </div>
             <div th:if="${item.type}==2">

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

@@ -1,20 +1,25 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="https://www.thymeleaf.org">
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+    <title>采美365网-商品详情</title>
+    <template th:replace="components/headLink"></template>
+    <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/product/detail.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
 <body>
-    <!-- 引用头部 -->
-    <div th:replace="components/header"></div>
-    <div class="container">
-        商品详情
-        <p th:text="${msg}"></p>
-    </div>
-    <!-- 引入底部 -->
-    <div th:replace="components/footer"></div>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!--页面主体数据-->
+<div id="container">
+    <hr>
+    <h1>商品详情</h1>
+    <hr>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -2,17 +2,17 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <title>采美365网-商品列表</title>
     <template th:replace="components/headLink"></template>
-    <link rel="stylesheet" th:href="@{/css/base.css(v=${version})}">
-
+    <link th:href="@{/css/product/list.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/product/list.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
 <!--页面主体数据-->
-<div class="container">
+<div id="container">
     <hr>
     <h1>商品列表</h1>
     <hr>
@@ -20,6 +20,6 @@
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
-
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>
 </body>
 </html>