全新UI视觉体验，移动端API优化降低重复调用，提高并发6倍，修复N多Bug

app/pages/users/user_goods_collection/index.vue

@@ -1,22 +1,48 @@
 <template>
 	<view>
+		<view class="hdbj"></view>
 		<view class='collectionGoods' v-if="collectProductList.length">
-			<navigator :url='"/pages/goods_details/index?id="+item.id' hover-class='none' class='item acea-row row-between-wrapper'
-			 v-for="(item,index) in collectProductList" :key="index">
-				<view class='pictrue'>
-					<image :src="item.image"></image>
+			<!-- #ifdef  H5 || MP-->
+			<view class='nav acea-row row-between-wrapper'>
+				<view>当前共 <text class='num font-color'>{{ totals }}</text>件商品</view>
+				<view class='administrate acea-row row-center-wrapper' @click='manage'>{{ footerswitch ? '管理' : '取消'}}
 				</view>
-				<view class='text acea-row row-column-between'>
-					<view class='name line1'>{{item.storeName}}</view>
-					<view class='acea-row row-between-wrapper'>
-						<view class='money font-color'>￥{{item.price}}</view>
-						<view class='delete' @click.stop='delCollection(item.id,index)'>删除</view>
+			</view>
+			<!-- #endif -->
+			<view class="list">
+				<checkbox-group @change="checkboxChange" class="centent">
+					<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'
+							class="acea-row">
+							<view class='pictrue'>
+								<image :src="item.image"></image>
+							</view>
+							<view>
+								<view class='name line1'>{{item.storeName}}</view>
+								<view class='money font-color'>￥{{item.price}}</view>
+							</view>
+						</navigator>
 					</view>
-				</view>
-			</navigator>
+				</checkbox-group>
+			</view>
 			<view class='loadingicon acea-row row-center-wrapper'>
 				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
 			</view>
+			<view v-if="!footerswitch" class='footer acea-row row-between-wrapper'>
+				<view>
+					<checkbox-group @change="checkboxAllChange">
+						<checkbox value="all" :checked="!!isAllSelect" />
+						<text class='checkAll'>全选</text>
+					</checkbox-group>
+				</view>
+				<view class='button acea-row row-middle'>
+					<form @submit="delCollectionAll" report-submit='true'>
+						<button class='bnt cart-color' formType="submit">取消收藏</button>
+					</form>
+				</view>
+			</view>
 		</view>
 		<view class='noCommodity' v-else-if="!collectProductList.length && page > 1">
 			<view class='pictrue'>
@@ -25,7 +51,7 @@
 			<recommend :hostProduct="hostProduct"></recommend>
 		</view>
 		<!-- #ifdef MP -->
-		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
+		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
 		<!-- #endif -->
 		<home></home>
 	</view>
@@ -35,7 +61,7 @@
 	import {
 		getCollectUserList,
 		getProductHot,
-		collectDel
+		collectDelete
 	} from '@/api/store.js';
 	import {
 		mapGetters
@@ -58,6 +84,7 @@
 		},
 		data() {
 			return {
+				footerswitch: true,
 				hostProduct: [],
 				loadTitle: '加载更多',
 				loading: false,
@@ -66,10 +93,14 @@
 				limit: 8,
 				page: 1,
 				isAuto: false, //没有授权的不会自动授权
-				isShowAuth: false ,//是否隐藏授权
-				hotScroll:false,
-				hotPage:1,
-				hotLimit:10
+				isShowAuth: false, //是否隐藏授权
+				hotScroll: false,
+				hotPage: 1,
+				hotLimit: 10,
+				isAllSelect: false, //全选
+				selectValue: [], //选中的数据
+				delBtnWidth: 80, //左滑默认宽度
+				totals: 0
 			};
 		},
 		computed: mapGetters(['isLogin']),
@@ -79,30 +110,88 @@
 				this.page = 1;
 				this.collectProductList = [];
 				this.get_user_collect_product();
-				this.get_host_product();
 			} else {
-				// #ifdef H5 || APP-PLUS
 				toLogin();
-				// #endif 
-				// #ifdef MP
-				this.isAuto = true;
-				this.$set(this, 'isShowAuth', true);
-				// #endif
 			}
 		},
-		onShow(){
+		onShow() {
 			this.loadend = false;
 			this.page = 1;
 			this.collectProductList = [];
 			this.get_user_collect_product();
 		},
-		/**
-		 * 页面上拉触底事件的处理函数
-		 */
-		onReachBottom: function() {
-			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();
+				}
+			},
 			/**
 			 * 授权回调
 			 */
@@ -127,10 +216,16 @@
 					page: that.page,
 					limit: that.limit
 				}).then(res => {
+					res.data.list.map(item => {
+						that.$set(item, 'right', 0);
+					});
+					that.totals = res.data.total;
 					let collectProductList = res.data.list;
 					let loadend = collectProductList.length < that.limit;
-					that.collectProductList = that.$util.SplitArray(collectProductList, that.collectProductList);
+					that.collectProductList = that.$util.SplitArray(collectProductList, that
+						.collectProductList);
 					that.$set(that, 'collectProductList', that.collectProductList);
+					if (that.collectProductList.length === 0) that.get_host_product();
 					that.loadend = loadend;
 					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
 					that.page = that.page + 1;
@@ -144,15 +239,34 @@
 			 * 取消收藏
 			 */
 			delCollection: function(id, index) {
-				let that = this;
-				collectDel(id).then(res => {
-					return that.$util.Tips({
+				this.selectValue = id;
+				this.del({
+					ids: this.selectValue.toString()
+				});
+			},
+			delCollectionAll: function() {
+				if (!this.selectValue || this.selectValue.length == 0) return this.$util.Tips({
+					title: '请选择商品'
+				});
+				this.del({
+					ids: this.selectValue
+				});
+			},
+			del: function(data) {
+				collectDelete(data).then(res => {
+					this.$util.Tips({
 						title: '取消收藏成功',
 						icon: 'success'
-					}, function() {
-						that.collectProductList.splice(index, 1);
-						that.$set(that, 'collectProductList', that.collectProductList);
 					});
+					// this.collectProductList = this.collectProductList.filter(item=>item!==this.selectValue)
+					this.collectProductList = [];
+					this.loadend = false;
+					this.page = 1;
+					this.get_user_collect_product();
+				}).catch(err => {
+					return this.$util.Tips({
+						title: err
+					})
 				});
 			},
 			/**
@@ -160,45 +274,118 @@
 			 */
 			get_host_product: function() {
 				let that = this;
-				if(that.hotScroll) return
+				if (that.hotScroll) return
 				getProductHot(
 					that.hotPage,
 					that.hotLimit,
 				).then(res => {
 					that.hotPage++
-					that.hotScroll = res.data.list.length<that.hotLimit
+					that.hotScroll = res.data.list.length < that.hotLimit
 					that.hostProduct = that.hostProduct.concat(res.data.list)
 				});
 			}
 		},
+		/**
+		 * 页面上拉触底事件的处理函数
+		 */
 		onReachBottom() {
+			this.get_user_collect_product();
 			this.get_host_product();
 		}
 	}
 </script>
 
 <style scoped lang="scss">
+
+	.hdbj {
+		width: 100%;
+		height: 30rpx;
+		background-color: #f5f5f5;
+		z-index: 999999;
+		position: fixed;
+		top: 0;
+	}
+
+	.order-item {
+		width: 100%;
+		display: flex;
+		position: relative;
+		align-items: right;
+		flex-direction: row;
+	}
+
+	.remove {
+		width: 120rpx;
+		height: 100%;
+		background-color: $theme-color;
+		color: white;
+		position: absolute;
+		top: 0;
+		right: -160rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 24rpx;
+	}
+
 	.collectionGoods {
-		background-color: #fff;
-		border-top: 1rpx solid #eee;
+
+		.nav {
+			width: 92%;
+			height: 90rpx;
+			background-color: #fff;
+			padding: 0 24rpx;
+			-webkit-box-sizing: border-box;
+			box-sizing: border-box;
+			font-size: 28rpx;
+			color: #282828;
+			position: fixed;
+			left: 30rpx;
+			z-index: 5;
+			top: 30rpx;
+			border-bottom: 1px solid #EEEEEE;
+			border-top-left-radius: 14rpx;
+			border-top-right-radius: 14rpx;
+		}
+
+		.list {
+			padding: 30rpx;
+			margin-top: 90rpx;
+
+			.name {
+				width: 434rpx;
+				margin-bottom: 56rpx;
+			}
+		}
+
+		.centent {
+			/* #ifdef H5 || MP */
+			background-color: #fff;
+			/* #endif */
+			border-bottom-left-radius: 14rpx;
+			border-bottom-right-radius: 14rpx;
+		}
 	}
 
 	.collectionGoods .item {
-		margin-left: 30rpx;
-		padding-right: 30rpx;
-		border-bottom: 1rpx solid #eee;
+		background-color: #fff;
+		padding-left: 24rpx;
 		height: 180rpx;
+		margin-bottom: 15rpx;
+		border-radius: 14rpx;
+
 	}
 
 	.collectionGoods .item .pictrue {
 		width: 130rpx;
 		height: 130rpx;
+		margin-right: 20rpx;
 	}
 
 	.collectionGoods .item .pictrue image {
 		width: 100%;
 		height: 100%;
-		border-radius: 6rpx;
+		border-radius: 14rpx;
 	}
 
 	.collectionGoods .item .text {
@@ -232,4 +419,40 @@
 		padding-top: 1rpx;
 		border-top: 0;
 	}
+
+	.footer {
+		z-index: 9;
+		width: 100%;
+		height: 96rpx;
+		background-color: #fff;
+		position: fixed;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		border-top: 1rpx solid #eee;
+		border-bottom: 1px solid #EEEEEE;
+		/* #ifdef H5 || MP */
+		bottom: 0rpx;
+		/* #endif */
+		/* #ifndef MP */
+		// bottom: 98rpx;
+		// bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
+		// bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
+		/* #endif */
+		.checkAll {
+			font-size: 28rpx;
+			color: #282828;
+			margin-left: 16rpx;
+		}
+
+		.button .bnt {
+			font-size: 28rpx;
+			color: #999;
+			border-radius: 30rpx;
+			border: 1px solid #999;
+			width: 160rpx;
+			height: 60rpx;
+			text-align: center;
+			line-height: 60rpx;
+		}
+	}
 </style>