商品收藏

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

@@ -20,7 +20,7 @@ li{list-style:none}
     .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{width: 100%;height: 40px;position: absolute;bottom: -40px;left: 0;display: none;transition: all 0.2s;z-index: 99;}
     .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;}

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

@@ -333,4 +333,56 @@ var ProductApi = {
                 callback(res);
             });
         },
+        /**
+         * @商品收藏-操作商品收藏
+         * @param:userId 用户userId
+         * @param:productId 商品Id
+         */
+        getProductUserLike:function (params, callback) {//商品收藏操作
+            Http.AjaxService({
+                url:'/commodity/userLike/likeOne',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        /**
+         * @我的商品收藏-列表
+         * @param:userId 用户userId
+         * @param:pageNum 页码
+         * @param:pageSize 每一页条数
+         */
+        getProductUserLikeList:function (params, callback) {//获取商品收藏列表
+            Http.AjaxService({
+                url:'/commodity/userLike/likeList',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        /**
+         * @商品收藏-删除商品收藏
+         * @param:userId 用户userId
+         * @param:productIds 字符串productId逗号隔开
+         */
+        getDeleteUserLike:function (params, callback) {//获取促销活动详情
+            Http.AjaxService({
+                url:'/commodity/userLike/deleteList',
+                type:'get',
+                data:params,
+                json:true,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
 };

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

@@ -120,6 +120,11 @@ var productDetail = new Vue({
                     _self.productTypeName = product.typeName;
                     _self.recommendType = product.recommendType ? product.recommendType : 0;
                     _self.archiveId = product.archiveId; // 保存资料列表id
+                    if (product.userLike && product.userLike == 1) {// 商品收藏
+                        _self.collectionType = true
+                    } else {
+                        _self.collectionType = false
+                    }
                     if (product.productDetail.orderInfo != '' && product.productDetail.serviceInfo != '') {
                         _self.isServiceInfo = true;
                     }
@@ -254,8 +259,21 @@ var productDetail = new Vue({
                 });
             }
         },
-        handleCollection:function (){
-            this.collectionType = !this.collectionType
+        handleCollection:function (){// 收藏操作
+            var _self = this;
+            console.log('_self.userId',_self.userId)
+            if (_self.userId > 0) {
+                ProductApi.getProductUserLike({userId: _self.userId, productId: _self.productId}, function (response) {
+                    if (response.code === 0 && response.data) {
+                        _self.collectionType = !_self.collectionType
+                        CAIMEI.dialog(response.data,false);
+                    } else {
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                });
+            }else{
+                _self.toLogin();
+            }
         },
         toLogin: function () {
             setBeforeUrl();
@@ -411,6 +429,7 @@ var productDetail = new Vue({
     },
     created: function () {
         this.productId = this.couponParam.productId = $("#productId").val();
+        this.userId = this.couponParam.userId = GLOBAL_USER_ID;
         this.productStock = $("#productStock").val();
         this.getImages();
         // identity: 0个人，1协销，2会员机构，3供应商，4普通机构

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

@@ -13,15 +13,7 @@ var orderPage = new Vue({
         listQuery:{
             userId:0,
             pageNum:1,
-            pageSize:6,
-            status:1
-        },
-        params: {
-            size: 12,
-            num: 1,
-            keyword: "测试",
-            sortField: "",
-            sortType: 1, // 1降序，其他升序
+            pageSize:12,
         },
         listData:[],
         checkedList:[],
@@ -57,7 +49,7 @@ var orderPage = new Vue({
         toPagination: function (pageNum) {//点击切换分页
             if (pageNum <= this.pageTotal) {
                 this.listQuery.pageNum = pageNum;
-                this.QueryCouponActivityList();
+                this.getCollectionProductList();
             }
         },
         checkNum: function () {//输入跳转分页
@@ -67,27 +59,13 @@ var orderPage = new Vue({
                 this.pageInput = 1;
             }
         },
-        QueryCouponActivityList: function () {
+        getCollectionProductList: 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)=>{
+            ProductApi.getProductUserLikeList(_self.listQuery,function (response) {
+                if (response.code === 0 ) {
+                    var data = response.data;
+                    _self.listRecord = data.totalRecord;
+                    var list = data.results.map((el,index)=>{
                             el.isChecked = false;
                         return el
                     });
@@ -97,6 +75,10 @@ var orderPage = new Vue({
                         _self.listData = _self.listData.concat(list);
                     }
                     console.log('listData',_self.listData)
+                    setTimeout(function(){
+                        // 图片懒加载
+                        $("img[data-original]").lazyload();
+                    },500);
                     _self.listLoading = false;
                     _self.requestFlag = true;
                 }else {
@@ -169,17 +151,15 @@ var orderPage = new Vue({
             if(!_self.isProductChecked){
                 CAIMEI.dialog('请先选择商品',false);
             }
-            _self.checkedList.forEach(el =>{
-                _self.productIds += el.productId+',';
-            })
+            _self.productIds = _self.checkedList.join(",")
         },
         hanldCancel:function (pros) {// 取消收藏
             var _self = this;
             CAIMEI.Modal('确定要取消收藏吗？','取消','确定',function () {
-                OrderApi.AffirmOrderOrder({orderID:orderId},function(response){
+                ProductApi.getDeleteUserLike({userId:_self.listQuery.userId,productIds:pros.productId+','},function(response){
                     if(response.code == 0){
-                        CAIMEI.dialog('确认成功',true,function () {
-                            _self.GetQueryOrderListData();
+                        CAIMEI.dialog('取消收藏成功',true,function () {
+                            _self.getCollectionProductList();
                         });
                     }else{
                         CAIMEI.Alert(response.msg, '确定', false);
@@ -189,22 +169,36 @@ var orderPage = new Vue({
         },
         hanldAllCancel:function () {// 批量取消收藏
             var _self = this;
+            var checkedList =[];
+            _self.productIds = '';
             if(!_self.isProductChecked){
                 CAIMEI.dialog('请先选择商品',false);
+                return;
             }
-            _self.checkedList.forEach(el =>{
-                _self.productIds += el.productId+',';
+            _self.listData.forEach((el)=>{
+                if(el.isChecked){
+                    checkedList.push(el.productId)
+                }
+            })
+            _self.productIds = checkedList.join(",")
+            console.log('_self.productIds2',_self.productIds);
+            CAIMEI.Modal('确定要取消收藏吗？','取消','确定',function () {
+                ProductApi.getDeleteUserLike({userId:_self.listQuery.userId,productIds:_self.productIds},function(response){
+                    if(response.code == 0){
+                        CAIMEI.dialog('取消收藏成功',true,function () {
+                            _self.getCollectionProductList();
+                        });
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
             })
-            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;
@@ -222,7 +216,6 @@ var orderPage = new Vue({
             _self.listData.forEach(el => {
                 if(el.isChecked) {
                     goodsCheckedLength++;
-                    _self.checkedList.push(el);
                 }
             })
             _self.checkedNum = goodsCheckedLength;
@@ -245,7 +238,7 @@ var orderPage = new Vue({
         if(globalUserData){
             _self.userId = globalUserData.userId;
             _self.listQuery.userId = this.userId;
-            _self.QueryCouponActivityList();
+            _self.getCollectionProductList();
         }
     }
 });

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

@@ -57,7 +57,7 @@
           </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-if="p.beautyActFlag==1"></p>
             <p class="name" v-html="p.name" v-else></p>
             <div class="price">
               <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">

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

@@ -80,7 +80,7 @@
                         <div class="title order">我的收藏</div>
                         <div class="section">
                             <div class="user-main collec">
-                                <a href="javascript:void(0);" class="account-collec">
+                                <a href="/user/collection.html" class="account-collec">
                                     <img src="/img/account/icon-collection@2x.png" alt="">
                                     <p>收藏商品</p>
                                 </a>