【我的收藏】

1. 实现功能

api/product/favorite.js

@@ -20,3 +20,15 @@ export function deleteFavorite(spuId) {
     spuId
   });
 }
+
+// 获得商品收藏分页
+export function getFavoritePage(data) {
+  return request.get('app-api/product/favorite/page', data);
+}
+
+// 取消多个商品收藏
+export function deleteFavoriteList(spuIds) {
+  return request.delete('app-api/product/favorite/delete-list', {
+    spuIds
+  });
+}

pages/users/user_goods_collection/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
 		<view class="hdbj"></view>
+		<!-- 收藏列表 -->
     <view class='collectionGoods' v-if="collectProductList.length">
 			<!-- #ifdef  H5 || MP-->
 			<view class='nav acea-row row-between-wrapper'>
@@ -14,13 +15,13 @@
 					<view v-for="(item,index) in collectProductList" :key="index" class='item acea-row row-middle'>
 						<checkbox :value="item.id.toString()" :checked="item.checked" v-if="!footerswitch"
 							style="margin-right: 10rpx;" />
-						<navigator :url='"/pages/goods_details/index?id="+item.productId' hover-class='none'
+						<navigator :url='"/pages/goods_details/index?id="+item.spuId' hover-class='none'
 							class="acea-row">
 							<view class='pictrue'>
-								<image :src="item.image"></image>
+								<image :src="item.picUrl" />
 							</view>
 							<view>
-								<view class='name line1'>{{item.storeName}}</view>
+								<view class='name line1'>{{ item.spuName }}</view>
 								<view class='money font-color'>￥{{ item.price }}</view>
 							</view>
 						</navigator>
@@ -28,7 +29,7 @@
 				</checkbox-group>
 			</view>
 			<view class='loadingicon acea-row row-center-wrapper'>
-				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
+				<text class='loading iconfont icon-jiazai' :hidden='!loading' />{{loadTitle}}
 			</view>
 			<view v-if="!footerswitch" class='footer acea-row row-between-wrapper'>
 				<view>
@@ -44,75 +45,62 @@
 				</view>
 			</view>
 		</view>
+
+    <!-- 热门商品 -->
     <view class='noCommodity' v-else-if="!collectProductList.length && page > 1">
 			<view class='pictrue'>
 				<image src='../static/noCollection.png'></image>
 			</view>
 			<recommend :hostProduct="hostProduct"></recommend>
 		</view>
-		<!-- #ifdef MP -->
-		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
-		<!-- #endif -->
 		<home></home>
 	</view>
 </template>
 
 <script>
-	import {
+	import { mapGetters } from "vuex";
-		getCollectUserList,
+	import { toLogin } from '@/libs/login.js';
-		getProductHot,
-		collectDelete
-	} from '@/api/store.js';
-	import {
-		mapGetters
-	} from "vuex";
-	import {
-		toLogin
-	} from '@/libs/login.js';
 	import recommend from '@/components/recommend';
-	// #ifdef MP
-	import authorize from '@/components/Authorize';
-	// #endif
 	import home from '@/components/home';
+  import * as ProductSpuApi from '@/api/product/spu.js';
+  import * as ProductFavoriteApi from '@/api/product/favorite.js';
+  import * as PromotionActivityApi from '@/api/promotion/activity.js';
+  import * as ProductUtil from '@/utils/product.js';
 	export default {
 		components: {
 			recommend,
-			// #ifdef MP
-			authorize,
-			// #endif
 			home
 		},
 		data() {
 			return {
 				footerswitch: true,
-				hostProduct: [],
 				loadTitle: '加载更多',
 				loading: false,
 				loadend: false,
-				collectProductList: [],
+				collectProductList: [], // 收藏列表
 				limit: 8,
 				page: 1,
-				isAuto: false, //没有授权的不会自动授权
-				isShowAuth: false, //是否隐藏授权
-				hotScroll: false,
-				hotPage: 1,
-				hotLimit: 10,
 				isAllSelect: false, // 全选
 				selectValue: [], // 选中的数据
-				delBtnWidth: 80, //左滑默认宽度
+				totals: 0,
-				totals: 0
+
+        // ========== 热门推荐 ==========
+        hostProduct: [],
+        hotPage: 1,
+        hotLimit: 10,
+        hotScroll: false,
       };
 		},
 		computed: mapGetters(['isLogin']),
 		onLoad() {
-			if (this.isLogin) {
+			if (!this.isLogin) {
+        toLogin();
+				return
+			}
       this.loadend = false;
       this.page = 1;
       this.collectProductList = [];
       this.get_user_collect_product();
-			} else {
-				toLogin();
-			}
 		},
 		onShow() {
 			this.loadend = false;
@@ -121,144 +109,55 @@
 			this.get_user_collect_product();
 		},
 		methods: {
-			// #ifdef MP
-			drawStart(e) {
-				var touch = e.touches[0];
-				this.startX = touch.clientX;
-			},
-			//触摸滑动
-			drawMove(e) {
-				var touch = e.touches[0];
-				var item = this.collectProductList[e.currentTarget.dataset.index];
-				var disX = this.startX - touch.clientX;
-				if (disX >= 20) {
-					if (disX > this.delBtnWidth) {
-						disX = this.delBtnWidth;
-					}
-					this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', disX);
-				} else {
-					this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', 0);
-				}
-			},
-			//触摸滑动结束
-			drawEnd(e) {
-				var item = this.collectProductList[e.currentTarget.dataset.index];
-				if (item.right >= this.delBtnWidth / 2) {
-					this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
-				} else {
-					this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', 0);
-				}
-			},
-			// #endif
-			manage: function() {
-				this.footerswitch = !this.footerswitch;
-			},
-
-			checkboxChange: function(event) {
-				var items = this.collectProductList,
-					values = event.detail.value;
-				for (var i = 0, lenI = items.length; i < lenI; ++i) {
-					const item = items[i]
-					if (values.includes(item.id.toString())) {
-						this.$set(item, 'checked', true)
-					} else {
-						this.$set(item, 'checked', false)
-					}
-				}
-				this.selectValue = values.toString();
-				this.isAllSelect = items.length === values.length;
-			},
-			checkboxAllChange: function(event) {
-				let value = event.detail.value;
-				if (value.length > 0) {
-					this.setAllSelectValue(1)
-				} else {
-					this.setAllSelectValue(0)
-				}
-			},
-			setAllSelectValue: function(status) {
-				let selectValue = [];
-				if (this.collectProductList.length > 0) {
-					this.collectProductList.map(item => {
-						if (status) {
-							this.$set(item, 'checked', true)
-							selectValue.push(item.id);
-							this.isAllSelect = true;
-						} else {
-							this.$set(item, 'checked', false)
-							this.isAllSelect = false;
-						}
-					});
-					this.selectValue = selectValue.toString();
-				}
-			},
-			/**
-			 * 授权回调
-			 */
-			onLoadFun: function() {
-				this.get_user_collect_product();
-				this.get_host_product();
-			},
-			// 授权关闭
-			authColse: function(e) {
-				this.isShowAuth = e
-			},
       /**
        * 获取收藏产品
        */
       get_user_collect_product: function() {
         let that = this;
-				if (this.loading) return;
+        if (this.loading || this.loadend) {
-				if (this.loadend) return;
+          return;
-				that.loading = true;
+        }
-				that.loadTitle = "";
+        this.loading = true;
-				getCollectUserList({
+        this.loadTitle = "";
-					page: that.page,
+        ProductFavoriteApi.getFavoritePage({
-					limit: that.limit
+          pageNo: this.page,
+          pageSize: this.limit
         }).then(res => {
-					res.data.list.map(item => {
+          this.totals = res.data.total;
-						that.$set(item, 'right', 0);
+          const collectProductList = res.data.list;
-					});
+          const loadend = collectProductList.length < this.limit;
-					that.totals = res.data.total;
+          this.collectProductList = this.$util.SplitArray(collectProductList, this.collectProductList);
-					let collectProductList = res.data.list;
+          this.$set(that, 'collectProductList', this.collectProductList);
-					let loadend = collectProductList.length < that.limit;
+          this.loadend = loadend;
-					that.collectProductList = that.$util.SplitArray(collectProductList, that
+          this.loadTitle = loadend ? '我也是有底线的' : '加载更多';
-						.collectProductList);
+          this.page = this.page + 1;
-					that.$set(that, 'collectProductList', that.collectProductList);
+          this.loading = false;
-					if (that.collectProductList.length === 0) that.get_host_product();
+
-					that.loadend = loadend;
+          // 如果没有收藏，加载热门商品
-					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
+          if (this.totals === 0) {
-					that.page = that.page + 1;
+            this.get_host_product();
-					that.loading = false;
+          }
         }).catch(err => {
-					that.loading = false;
+          this.loading = false;
-					that.loadTitle = "加载更多";
+          this.loadTitle = "加载更多";
         });
       },
       /**
-			 * 取消收藏
+       * 删除多个收藏
        */
-			delCollection: function(id, index) {
-				this.selectValue = id;
-				this.del({
-					ids: this.selectValue.toString()
-				});
-			},
       delCollectionAll: function() {
-				if (!this.selectValue || this.selectValue.length == 0) return this.$util.Tips({
+        // 取消收藏
+        if (!this.selectValue || this.selectValue.length === 0) {
+          return this.$util.Tips({
             title: '请选择商品'
           });
-				this.del({
+        }
-					ids: this.selectValue
+        ProductFavoriteApi.deleteFavoriteList(this.selectValue).then(res => {
-				});
-			},
-			del: function(data) {
-				collectDelete(data).then(res => {
           this.$util.Tips({
             title: '取消收藏成功',
             icon: 'success'
           });
-					// this.collectProductList = this.collectProductList.filter(item=>item!==this.selectValue)
+          // 重新获得收藏列表
           this.collectProductList = [];
           this.loadend = false;
           this.page = 1;
@@ -269,19 +168,83 @@
           })
         });
       },
+      /**
+       * 进入【管理】
+       */
+			manage: function() {
+				this.footerswitch = !this.footerswitch;
+			},
+      /**
+       * 选中某个收藏
+       */
+			checkboxChange: function(event) {
+        const items = this.collectProductList;
+        const values = event.detail.value;
+        for (let i = 0; i < items.length; ++i) {
+					const item = items[i]
+					if (values.includes(item.spuId)) {
+						this.$set(item, 'checked', true)
+					} else {
+						this.$set(item, 'checked', false)
+					}
+				}
+				this.selectValue = values;
+				this.isAllSelect = items.length === values.length;
+			},
+      /**
+       * 全选收藏
+       */
+			checkboxAllChange: function(event) {
+				let value = event.detail.value;
+				if (value.length > 0) {
+					this.setAllSelectValue(1)
+				} else {
+					this.setAllSelectValue(0)
+				}
+			},
+      /**
+       * 全选收藏
+       */
+			setAllSelectValue: function(status) {
+				const selectValue = [];
+				if (this.collectProductList.length > 0) {
+					this.collectProductList.map(item => {
+						if (status) {
+							this.$set(item, 'checked', true)
+							selectValue.push(item.spuId);
+							this.isAllSelect = true;
+						} else {
+							this.$set(item, 'checked', false)
+							this.isAllSelect = false;
+						}
+					});
+					this.selectValue = selectValue.toString();
+				}
+			},
 			/**
 			 * 获取我的推荐
 			 */
 			get_host_product: function() {
-				let that = this;
+				if (this.hotScroll) {
-				if (that.hotScroll) return
+          return
-				getProductHot(
+        }
-					that.hotPage,
+        ProductSpuApi.getSpuPage({
-					that.hotLimit,
+          recommendType: 'hot',
-				).then(res => {
+          pageNo: this.hotPage,
-					that.hotPage++
+          pageSize: this.hotLimit
-					that.hotScroll = res.data.list.length < that.hotLimit
+        }).then(res => {
-					that.hostProduct = that.hostProduct.concat(res.data.list)
+          const good_list = res.data.list;
+          this.hotPage++
+          this.hotScroll = good_list.length < this.hotLimit
+
+          // 设置营销活动
+          const spuIds = good_list.map(item => item.id);
+          if (spuIds.length > 0) {
+            PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
+              ProductUtil.setActivityList(good_list, res.data);
+              this.hostProduct = this.hostProduct.concat(good_list) // 放在此处，避免 Vue 监控不到数组里的元素变化
+            });
+          }
         });
 			}
 		},