商品收藏

src/main/java/com/caimei/www/controller/authorized/user/UserPageController.java

@@ -58,6 +58,8 @@ public class UserPageController extends BaseController {
 	private static final String COUPON_COLLECTION = "user-center/account/coupon-collection";
 	/** 兑换优惠券 */
 	private static final String COUPON_EXCHANGE = "user-center/account/coupon-exchange";
+	/** 收藏商品 */
+	private static final String COLLECTION = "user-center/collection/collection";
 
     /** 我的采美 */
     @GetMapping("/user/dashboard.html")
@@ -180,4 +182,8 @@ public class UserPageController extends BaseController {
     @GetMapping("/user/coupon-exchange.html")
     public String couponExchange() {return COUPON_EXCHANGE;}
 
+    /** 收藏商品 */
+    @GetMapping("/user/collection.html")
+    public String collection() {return COLLECTION;}
+
 }

src/main/resources/static/css/account/login.css

@@ -37,7 +37,7 @@ footer .footTop{display:none;}
 #qrCodeWrap .model .refresh-div p{text-align:center;font-size:14px;line-height:20px}
 .baseHeadCenter.account .accountLogin{display:none}
 .bg{width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999999;font-family: inherit;overflow: hidden;background-color: #4444444f;opacity: 0}
- .bg .bg-content{width: 338px;height: fit-content;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;z-index: 9999;background: #fff;}
+ .bg .bg-content{width: 338px;height: 234px;position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;z-index: 9999;background: #fff;}
  .bg .bg-content .bg-tittle{height: 42px;line-height: 42px;font-size: 16px;background:#f8f8f8;color: #333333;padding: 0 16px;position: relative}
  .bg-tittle .icon{width: 25px;height: 25px;position: absolute;right: 10px;top: 10px;cursor: pointer;}
  .bg-tittle .icon:before{ width: 25px;height: 25px;background-position: -313px 0px;}

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

@@ -8,7 +8,7 @@ li{list-style:none}
 #swiperImage .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center}
 #swiperImage .swiper-wrapper img{width:auto;height:100vw;display:block}
 #swiperImage .swiper-wrapper .swiper-slide .cm-product-cover-tag{position:absolute;top: 3vw;right: 3vw;width: 15.9vw;height: 5.5vw;background: url(/img/activity/cm_cover_bg_h5.png) no-repeat center;background-size: 15.9vw;text-align: center;color: #fff;line-height: 5.5vw;font-size: 2vw;}
-.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden}
+.productBox .detailBox{box-sizing:border-box;padding:0 3.3vw;overflow:hidden;position: relative;}
 .productBox .detailBox .crumbs{height:8vw;line-height:8vw;font-size:3.1vw;overflow:hidden;color:#93979F}
 .productBox .detailBox .crumbs a{color:#93979F}
 .productBox .detailBox .title{font-size:4.2vw;font-weight:bold;line-height:6.4vw;color:#4A4F58;margin-bottom:3.5vw}
@@ -19,10 +19,12 @@ li{list-style:none}
 .productBox .detailBox .none-details .none-image{width: 38.6vw;height: 30.5vw;display: block;margin: 0 auto;}
 .productBox .detailBox .none-details .none-text{width: 100%;height: 4vw;line-height: 4vw;text-align: center;color: #ffb496;font-size: 3.4vw;margin-top: 2vw;}
 .productBox .detailBox .none-details.show{opacity: 1;}
-
+.productBox .detailBox .product-collection{width:14.4vw;display: block;position: absolute;right: 0;top: 10.4vw;cursor: pointer;}
+.productBox .detailBox .product-collection img{height: 6.4vw;width: 6.4vw;display: block;margin: 0 auto;margin-bottom: .2vw;}
+.productBox .detailBox .product-collection p{height: 4.4vw;line-height: 4.4vw;text-align: center;font-size: 3vw;color: #333333;}
 .productBox .detailBox .row{position:relative;}
 .priceTag {position: absolute;left: 20vw;}
-.productBox .detailBox .row>i{font-style:normal;margin-right:2vw}
+.productBox .detailBox .row>i{font-style:normal;margin-right:2vw;}
 .productBox .detailBox .row>em{font-style:normal;color:#4A4F58}
 .productBox .detailBox .row>em.p{font-weight:bold;}
 .productBox .detailBox .row>em.ser{color:#93979F;display:inline-block;width: 24%}

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

@@ -5,7 +5,7 @@
 li{list-style:none;}
 .productBox{width:100%;margin:16px 0;background:#FFF;box-sizing:border-box;padding:15px}
 .productBox .imageBox{float:left;width:452px;height:545px;position:relative}
-.productBox .detailBox{float:right;width:686px}
+.productBox .detailBox{float:right;width:686px;position: relative;}
 .productBox img{width:100%;height:100%;display:block}
 .productBox .bigImage{position:relative; width:452px;height:452px;background:#F3F7FE;border: 1px solid #e4e4e4;}
 .productBox .bigImage .mask{display:none;position:absolute;left:0;top:0;width:215px;height:215px;border:1px solid #aaa;background:rgba(255,208,22,.4);opacity:.5;filter:alpha(opacity:50);cursor:move}
@@ -17,7 +17,9 @@ li{list-style:none;}
 .productBox .smallImage li:first-child{margin-left:0}
 .productBox .zoomImage{display:none;overflow:hidden;position:absolute;right:-466px;top:0;width:452px;height:452px;border:1px solid #e4e4e4;z-index:9999;background:#FFF}
 .productBox .zoomImage img{width:950px;height:950px;margin-right:10px;display:block;max-width:none;}
-
+.productBox .detailBox .product-collection{width: 72px;display: block;position: absolute;right: 0;top: 0;cursor: pointer;}
+.productBox .detailBox .product-collection img{height: 26px;width: 26px;display: block;margin: 0 auto;margin-bottom: 2px;}
+.productBox .detailBox .product-collection p{height: 26px;line-height: 26px;text-align: center;font-size: 14px;color: #333333;}
 .productBox .detailBox .crumbs{height:28px;line-height:28px;font-size:14px;overflow:hidden;color:#9aa5b5;padding:0;}
 .productBox .detailBox .crumbs a{color:#9aa5b5}
 .productBox .detailBox .crumbs a:hover{color:#E15616}

src/main/resources/static/css/user-center/collection/collection.css

@@ -0,0 +1,124 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .collection-title{width:1200px;margin:0 auto;box-sizing:border-box;margin-top: 24px;}
+    .collection-name{height: 22px;font-size: 16px;color: #4A4F58;line-height: 22px;font-weight: bold;}
+    .collection-btnmain{height: 60px;box-sizing: border-box;padding: 16px 0;}
+    .collection-btn{height: 28px;}
+    .collection-btn .coll-btn{cursor: pointer;width: 72px;height: 28px;line-height: 28px;color: #FFFFFF;background-color: #E15621;text-align: center;font-size: 14px;border-radius: 2px;float: left;}
+    .collection-btn .coll-btn.none{color: #FFFFFF;background-color: #D8D8D8;}
+    .collection-btn .coll-eang{float: right;}
+    .collection-btn .coll-span{display: block;float: left;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
+    .collection-btn .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .collection-btn .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .collection-btn .coll-cart{width: 20px;height: 20px;background: url(/img/base/icon.png) no-repeat;background-position:-30px -1px;display: block;margin-right: 6px;}
+    .collection-btn .coll-icon{width: 16px;height: 16px;background: url("/img/account/icon-collection@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .productList{width:1200px;margin:0 auto;box-sizing:border-box}
+    .productList .productItem {width: 184px;height: 268px;float: left;background: #fff;position: relative;margin: 0 16px 16px 0;overflow: hidden;float: left;position: relative;}
+    .productList .productItem:nth-child(6n){margin-right: 0;}
+    .productList .product-cancel{width: 100%;height: 32px;line-height: 32px;text-align: center;background-color: #FFE6DC;color: #E15621;font-size: 14px;cursor: pointer;position: absolute;top: -32px;left: 0;display: none;transition: all 0.3s;}
+    .productList .product-button{width: 100%;height: 40px;position: absolute;bottom: -40px;left: 0;display: none;transition: all 0.2s}
+    .productList .product-button .coll-btn{width: 50%;height: 100%;line-height: 40px;font-size: 14px;text-align: center;float: left;position: relative;cursor: pointer;}
+    .productList .product-button .coll-btn.add{background-color: #FFE6DC;color: #E15621;}
+    .productList .product-button .coll-btn.add:before{content: '';width: 0;height: 0;border-bottom: 20px solid transparent;border-top: 20px solid transparent;border-right: 20px solid transparent;border-left: 13px solid #FFE6DC;position: absolute;right: -33px;top: 0;z-index: 99;}
+    .productList .product-button .coll-btn.buy{background-color: #E15621;color: #FFFFFF;}
+    .productList .product-mask{width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;z-index: 99;cursor: pointer;}
+    .productList .product-mask .mask-checked{width: 16px;height: 16px;background: url("/img/account/icon-weigouxuan@2x.png") no-repeat;background-size: cover;display: block;position: absolute;right: 0;top: 0;}
+    .productList .product-mask .mask-checked.checked{background: url("/img/account/icon-yigouxuan@2x.png") no-repeat;background-size: cover;}
+    .productList .productItem:hover .product-cancel{top: 0;display: block;}
+    .productList .productItem:hover .product-button{bottom: 0;display: block;}
+    .productList .productItem img {width: 100%;height: 164px;}
+    .productList .productItem .name{display: block;padding: 0 8px;margin-top: 8px;height: 40px;line-height: 21px;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
+    .productItem .price{border: 0;box-sizing: border-box;padding: 0 8px;height: 54px;width: 100%;}
+    .productItem .price .icon:before{width: 63px;}
+    .productItem .price .icon.i5:before {background-position: -2px -832px;}
+    .productItem .price .icon.i1:before {background-position: -2px -712px;}
+    .productItem .price .icon.i2:before {background-position: -2px -742px;}
+    .productItem .price .icon.i3:before {background-position: -2px -772px;}
+    .productItem .price .icon.i4:before {background-position: -2px -802px;}
+    .listTag{margin: 12px 8px 0 0;padding: 0 2px;}
+    .productItem .image .icon{position: inherit;}
+    .productItem .price em{font-weight: normal}
+    .productItem .price em.bold{font-weight: bold}
+    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
+    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
+    .productItem .price .price_text_tag .couponTag{margin: 0 8px 0 0;float: left}
+    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
+    .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
+    .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
+    .login-btn{font-size: 12px}
+    .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
+    .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
+    .productItem .name span.tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 2px;}
+    .empty{width: 1200px;margin: 0 auto;background-color: #FFFFFF;padding: 150px 0;}
+    .empty img{width: 180px;height: 180px;}
+    .empty .msg{color: #999;}
+}
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .collection-content{padding-bottom: 20.5vw;}
+    .collection-title{width:100%;box-sizing:border-box;padding: 0 3vw;}
+    .collection-name{height:11vw;font-size: 3.4vw;color: #4A4F58;line-height: 11vw;font-weight: bold;}
+    .collection-btnmain{width:100%;height: auto;box-sizing: border-box;padding: 3.1vw 3.3vw;position: fixed;bottom: 0;left: 0;background-color: #FFF;z-index: 999;}
+    .collection-btn{height: 11.2vw;}
+    .collection-btn .coll-eang{width: 100%;float: left;margin: 1.5vw 0;display: flex;}
+    .collection-btn .coll-btn{cursor: pointer;width: 100%;height:11.2vw;line-height: 11.2vw;color: #FFFFFF;background-color: #E15621;text-align: center;font-size: 3.6vw;border-radius: 2px;float: left;}
+    .collection-btn .coll-btn.none{color: #FFFFFF;background-color: #D8D8D8;}
+    .collection-btn .coll-span.all{flex: 2;}
+    .collection-btn .coll-span.cart{flex: 4;}
+    .collection-btn .coll-span.coll{flex: 4;}
+    .collection-btn .coll-span{display: block;float: left;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
+    .collection-btn .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .collection-btn .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .collection-btn .coll-cart{width: 20px;height: 20px;background: url(/img/base/icon.png) no-repeat;background-position:-30px -1px;display: block;margin-right: 6px;}
+    .collection-btn .coll-icon{width: 16px;height: 16px;background: url("/img/account/icon-collection@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .productList{margin:0 auto 3.2vw;width: 97vw;}
+    .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;position: relative;}
+    .productList .product-cancel{display: none;}
+    .productList .product-button{display: none;}
+    .productList .product-mask{width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;top: 0;left: 0;z-index: 99;cursor: pointer;}
+    .productList .product-mask .mask-checked{width: 16px;height: 16px;background: url("/img/account/icon-weigouxuan@2x.png") no-repeat;background-size: cover;display: block;position: absolute;right: 0;top: 0;}
+    .productList .product-mask .mask-checked.checked{background: url("/img/account/icon-yigouxuan@2x.png") no-repeat;background-size: cover;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
+    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
+    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .productItem img {width: 45.6vw;height: 45.6vw;}
+    .productItem .name {display: block;padding: 0 3.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+    .price {padding: 2vw 3.2vw;overflow: hidden;}
+    .couponTag{padding:0 2vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: 1vw;}
+    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+    .price_grade{width: 100%;float: left;margin-top: 2vw;}
+    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
+    .productItem .price .main_price_show{color: #f94b4b}
+    .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
+
+    .original-price{text-decoration:line-through}
+    .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
+    .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
+    .empty{width: 100%;float: left;}
+    .empty img{width: 36vw;height: 36vw;}
+    .empty .msg{color: #999;}
+
+
+
+
+
+
+}
+

src/main/resources/static/css/user-center/dashboard.css

@@ -45,8 +45,6 @@ li{list-style:none}
     .user-content .section .user-main.collec .account-collec{width: 72px;display: block;float: left;}
     .user-content .section .user-main.collec .account-collec img{height: 26px;width: 26px;display: block;margin: 0 auto;margin-bottom: 2px;}
     .user-content .section .user-main.collec .account-collec p{height: 26px;line-height: 26px;text-align: center;font-size: 14px;color: #333333;}
-
-
     .user-content .section .user-main .tabs-left{height: 100%;float: left;}
     .user-content .section .user-main .tabs-left .item{width: 50px;height: 100%;float: left;margin:0 40px;}
     .user-content .section .user-main .tabs-left .item a{width: 100%;height: 100%;display: block;}
@@ -130,6 +128,10 @@ li{list-style:none}
     .user-content .section .user-main.account{height: 23vw;box-sizing: border-box;padding: 2vw 3.2vw;}
     .user-content .section .user-main.account .account-cell{line-height:9vw;font-size:3.4vw;color: #333333;float: left;margin-right: 10vw;display: block;}
     .user-content .section .user-main.account .account-cell .red{font-size:4.2vw;color: #f94b4b;font-weight: bold;}
+    .user-content .section .user-main.collec{width: 20vw;height: 20vw;box-sizing: border-box;padding: 3vw 3.2vw;}
+    .user-content .section .user-main.collec .account-collec{height: 20vw;box-sizing: border-box;width: 100%;display: block;}
+    .user-content .section .user-main.collec .account-collec img{height: 6.4vw;width: 6.4vw;display: block;margin: 0 auto;margin-bottom: 1vw;}
+    .user-content .section .user-main.collec .account-collec p{height: 4.4vw;line-height: 4.4vw;text-align: center;font-size: 3vw;color: #333333;}
     .user-content .user-main .tabs-left{box-sizing:border-box;width:100vw;padding:.7vw 6vw 4vw 6vw}
     .user-content .user-main .tabs-left .item{width:20.8vw;height:8.4vw;line-height:8.4vw;text-align:center;border-radius:4.2vw;border:1px solid #b8bfca;font-size:3.3vw;color:#627386;margin:3.3vw 4vw 0 4vw;position:relative}
     .user-content .user-main .tabs-left .item .icon span{height:4.6vw;line-height:4.6vw;padding:0 .6vw;border-radius:2.1vw;font-size:3.1vw;background-color:#f55c5c;color:#FFF;font-style:normal;position:absolute;right:1vw;top:-2vw}

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

@@ -69,5 +69,22 @@ var ShoppingApi = {
                 .then(function(res){
                     callback(res);
                 });
+        },
+        /**
+         * @购物车-加入购物车
+         * @param:userID 用户userId
+         * @param:productID 商品Id
+         * @param:productCount 商品数量
+         */
+        ShoppingAddCart:function (params, callback) {
+            Http.AjaxService({
+                url:'/shoppingCart/addCart',
+                type:'post',
+                data:params,
+                json:false
+            })
+            .then(function(res){
+                callback(res);
+            });
         }
 };

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

@@ -49,6 +49,7 @@ var productDetail = new Vue({
         isCouponEmpty:false,
         productCoupon:[], 							// 优惠券
         productCouponList:[],						// 优惠券弹窗列表
+        collectionType:false,                       // 商品收藏状态
 
     },
     filters: {
@@ -229,6 +230,9 @@ var productDetail = new Vue({
                 });
             }
         },
+        handleCollection:function (){
+            this.collectionType = !this.collectionType
+        },
         toLogin: function() {
             setBeforeUrl();
             window.location.href = '/login.html';

src/main/resources/static/js/user-center/collection/collection.js

@@ -0,0 +1,251 @@
+;
+var orderPage = new Vue({
+    el: "#productList",
+    data: {
+        isRequset:true,
+        noMore: false,
+        listLoading: true,
+        isHandle:false,
+        isAllChecked:false,
+        isProductChecked:false,
+        checkedNum:0,
+        productIds:'',
+        listQuery:{
+            userId:0,
+            pageNum:1,
+            pageSize:6,
+            status:1
+        },
+        params: {
+            size: 12,
+            num: 1,
+            keyword: "测试",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+        },
+        listData:[],
+        checkedList:[],
+        listRecord: 0,
+        pageInput: '1'
+    },
+    filters: {
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {//点击切换分页
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum;
+                this.QueryCouponActivityList();
+            }
+        },
+        checkNum: function () {//输入跳转分页
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        QueryCouponActivityList: function () {
+            var _self = this;
+            ProductApi.GetProductSearchList({
+                keyword: this.params.keyword,
+                identity: GLOBAL_USER_IDENTITY,
+                pageSize: this.params.size,
+                pageNum: this.params.num,
+                sortField: this.params.sortField,
+                sortType: this.params.sortType
+            },function (res) {
+                if (res.code === 0 && res.data ) {
+                    var result = JSON.parse(res.data);
+                    _self.listRecord = result.total;
+                    var resultData = setSearchProductList(result.items, _self.userId, function(){
+                        _self.$forceUpdate();
+                        setTimeout(function(){
+                            // 图片懒加载
+                            $("img[data-original]").lazyload();
+                        },500);
+                    });
+                    var list = resultData.map((el,index)=>{
+                            el.isChecked = false;
+                        return el
+                    });
+                    if(isPC){
+                        _self.listData = list;
+                    }else{
+                        _self.listData = _self.listData.concat(list);
+                    }
+                    console.log('listData',_self.listData)
+                    _self.listLoading = false;
+                    _self.requestFlag = true;
+                }else {
+                    CAIMEI.Alert(res.msg, '确定');
+                }
+            });
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        shoppingCart:function (pros) {
+            var _self = this;
+            ShoppingApi.ShoppingAddCart(
+                {
+                    userID:_self.listQuery.userId,
+                    productID:pros.productId,
+                    productCount:1
+                },
+                function (response) {
+                    if(response.code === 0){
+                        globalHead.getHeadCart(_self.listQuery.userId);
+                        $.confirm({
+                            useBootstrap: false,
+                            boxWidth: (isPC?'338px':'74.6vw'),
+                            title: false,
+                            content:'<div class="cartAlert"><h6>商品已成功加入购物车！</h6><p>当前购物车共<em>'+response.data+'</em>种商品</p></div>',
+                            closeIcon: true,
+                            animation: 'opacity',
+                            closeAnimation: 'opacity',
+                            animateFromElement: false,
+                            scrollToPreviousElement: false,
+                            buttons: {
+                                login: {
+                                    text: '去结算',
+                                    btnClass: 'btn-to-cart',
+                                    action: function(){
+                                        window.location.href = '/shopping/cart.html';
+                                    }
+                                },
+                                close: {
+                                    text: '继续购物',
+                                    btnClass: 'btn-to-goon'
+                                }
+                            }
+                        });
+                    } else {
+                        dialog("加入购物车失败！");
+                    }
+            })
+        },
+        hanldBuyCart:function (pros,type) {// 1 加入购物车 2 立即购买
+            var _self = this;
+            console.log('pros',pros)
+            console.log('type',type)
+            if(type == 1) {
+                _self.shoppingCart(pros);
+            }else{
+                window.location.href = '/shopping/confirm.html?type=2&id='+pros.productId+'&count='+pros.priceGrade;
+            }
+        },
+        hanldAllAddCart:function () {// 批量加入购物车
+            var _self = this;
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+            }
+            _self.checkedList.forEach(el =>{
+                _self.productIds += el.productId+',';
+            })
+        },
+        hanldCancel:function (pros) {// 取消收藏
+            var _self = this;
+            CAIMEI.Modal('确定要取消收藏吗？','取消','确定',function () {
+                OrderApi.AffirmOrderOrder({orderID:orderId},function(response){
+                    if(response.code == 0){
+                        CAIMEI.dialog('确认成功',true,function () {
+                            _self.GetQueryOrderListData();
+                        });
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
+            })
+        },
+        hanldAllCancel:function () {// 批量取消收藏
+            var _self = this;
+            if(!_self.isProductChecked){
+                CAIMEI.dialog('请先选择商品',false);
+            }
+            _self.checkedList.forEach(el =>{
+                _self.productIds += el.productId+',';
+            })
+            console.log('_self.productIds',_self.productIds);
+        },
+        isCheckedAll(){//全选
+            var _self = this;
+            _self.isAllChecked = !_self.isAllChecked;
+            _self.listData.forEach((el)=>{
+                el.isChecked = _self.isAllChecked;
+                if(el.isChecked) {
+                    _self.checkedList.push(el);
+                }
+            })
+            if(_self.isAllChecked){
+                _self.isProductChecked = true;
+                _self.checkedNum = _self.listData.length;
+            }else{
+                _self.isProductChecked = false;
+                _self.checkedNum = 0;
+            }
+        },
+        checkedSoperv:function (pros) {// 勾选
+            console.log(pros)
+            var _self = this;
+            var goodsCheckedLength = 0;
+            pros.isChecked = !pros.isChecked
+            _self.listData.forEach(el => {
+                if(el.isChecked) {
+                    goodsCheckedLength++;
+                    _self.checkedList.push(el);
+                }
+            })
+            _self.checkedNum = goodsCheckedLength;
+            _self.isAllChecked = goodsCheckedLength === _self.listData.length;
+            if(goodsCheckedLength>0){
+                _self.isProductChecked = true
+            }else{
+                _self.isProductChecked = false
+            }
+        },
+        showHandle:function () {// 显示批量操作
+            this.isHandle = true;
+        },
+        hideHandle:function () {
+            this.isHandle = false;
+        }
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.userId = globalUserData.userId;
+            _self.listQuery.userId = this.userId;
+            _self.QueryCouponActivityList();
+        }
+    }
+});

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

@@ -41,7 +41,11 @@
                 </div>
             </div>
             <div class="detailBox" th:object="${product}">
-                <div class="crumbs">
+                <div class="product-collection" @click="handleCollection">
+                    <img :src="collectionType ? '/img/account/icon-collection@2x.png' : '/img/account/icon-collection-none@2x.png'" alt="">
+                    <p>{{ collectionType ? '已收藏' : '收藏' }}</p>
+                </div>
+                <div class="crumbss">
                     <span v-text="'所属分类：'+productTypeName"></span>
                 </div>
                 <div class="Beautyfair">

src/main/resources/templates/user-center/collection/collection.html

@@ -4,7 +4,7 @@
 <head>
   <title>采美365网-商品列表</title>
   <template th:replace="components/head-link"></template>
-  <link th:href="@{/css/product/product-coupon.css(v=${version})}" rel="stylesheet" type="text/css">
+  <link th:href="@{/css/user-center/collection/collection.css(v=${version})}" rel="stylesheet" type="text/css">
   <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -13,22 +13,49 @@
 
 <!-- 商品列表 -->
 <div id="productList">
+
   <div v-if="listLoading" class="loading">
     <img src="/img/base/loading.gif">
   </div>
   <template v-else>
-    <!--banner图-->
-    <div class="coupon-banner">
-      <a href='javascript:void(0)'>
-        <img :src="pcBanner" v-if="isPC">
-        <img :src="appletsBanner" v-else>
-      </a>
-    </div>
     <!--商品列表-->
-    <div class="coupon-content clear">
-      <ul class="productList clear mfw">
+    <div class="collection-title">
+      <div class="collection-name">收藏的商品</div>
+      <div class="collection-btnmain">
+        <div class="collection-btn" v-if="!isHandle">
+          <div class="coll-btn" @click="showHandle" :class="listData.length > 0 ? '' : 'none'">批量操作</div>
+        </div>
+        <div class="collection-btn" v-else>
+          <div class="coll-eang">
+            <div class="coll-span all" @click="isCheckedAll">
+              <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
+              <span>全选</span>
+            </div>
+            <div class="coll-span cart" @click="hanldAllAddCart">
+              <span class="coll-cart"></span>
+              <span>加入购物车({{ checkedNum }})</span>
+            </div>
+            <div class="coll-span coll" @click="hanldAllCancel">
+              <span class="coll-icon"></span>
+              <span>取消收藏({{ checkedNum }})</span>
+            </div>
+          </div>
+          <div class="coll-btn" @click="hideHandle">完成</div>
+        </div>
+      </div>
+    </div>
+    <div class="collection-content clear">
+      <ul class="productList clear mfw" v-if="listData.length > 0">
         <li class="productItem " v-for="p in listData">
-          <a class="image" :href="'/product-'+p.productId+'.html'">
+          <div class="product-cancel" @click="hanldCancel(p)" v-if="!isHandle">取消收藏</div>
+          <div class="product-button" v-if="!isHandle">
+            <div class="coll-btn add" @click="hanldBuyCart(p,1)">加入购物车</div>
+            <div class="coll-btn buy" @click="hanldBuyCart(p,2)">立即购买</div>
+          </div>
+          <div class="product-mask" v-if="isHandle"  @click="checkedSoperv(p)">
+            <span class="mask-checked" :class="[p.isChecked ?'checked':'']"></span>
+          </div>
+          <a class="image" :href="'/product-'+p.productId+'.html'" target="_blank">
             <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
             <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
             <p class="name" v-html="p.name" v-else></p>
@@ -44,7 +71,7 @@
                 <template v-else>
                   <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || p.userIdentity==3">
                     <div class="price_text_tag">
-                      <!--                                            <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
+                <!--<p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
                       <p class="listTag" v-if="p.actStatus==1">
                         {{p.promotions.name}}
                         <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
@@ -56,14 +83,14 @@
                   </template>
                   <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                     <div class="price_text_tag">
-                      <!--                                            <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
+                      <!-- <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
                       <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
                     </div>
                     <div class="main_price_unde">￥会员可见</div>
                   </template>
                   <template v-else>
                     <div class="price_text_tag">
-                      <!--                                            <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
+                  <!-- <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
                       <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
                     </div>
                     <div class="price_grade"><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
@@ -72,7 +99,7 @@
               </template>
               <template v-else>
                 <div class="price_text_tag ">
-                  <!--                                    <p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
+                  <!--<p class="couponTag" v-if="p.couponsLogo">优惠券</p>-->
                   <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
                 </div>
                 <div class="price_grade "><span class="bold">￥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
@@ -81,16 +108,34 @@
           </a>
         </li>
       </ul>
+      <div v-else class="empty">
+        <img src="/img/account/icon-collection-empty@2x.png">
+        <div class="msg"><p>暂无收藏商品~</p></div>
+      </div>
+    </div>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+      <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
+      <template v-for="n in showPageBtn">
+        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+        <span v-else>···</span>
+      </template>
+      <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)" href="javascript:void(0);"></a>
+      <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+      <span>跳至</span>
+      <input v-model="pageInput" @blur="checkNum()"/>
+      <span>页</span>&nbsp;
+      <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
     </div>
   </template>
-  <!--分页-->
-  <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
 
 </div>
 <!-- 引入底部 -->
-<template th:replace="components/footer"></template>
+<!--<template th:replace="components/footer"></template>-->
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-coupon.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopping.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/collection/collection.js(v=${version})}"></script>
 </body>
 </html>