zsw-farm-bxg/pages/shop/GoodsCollection/index.vue

<template>
	<view ref="container">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">我的收藏</view>
				</block>
			</cu-custom>
		</view>

		<view class="content-box" :style="'height:calc(100vh - '+CustomBar+'px);'">
			<view class="content">
				<view class="nav acea-row row-around" :style="'top:calc('+CustomBar+'px+2px)'">
					<view class="item" @click="changeType(0)">
						<view :class="'title ' + (navType == 0? 'active' : '')">甄选商品</view>
					</view>
					<view class="item" @click="changeType(1)">
						<view :class="'title ' + (navType === 1 ? 'active' : '')">甄选评测</view>
					</view>
				</view>

				<view class="collectionGoods" v-if="collectProductList.length > 0">
					<view class="item" v-for="(item, collectProductListIndex) in collectProductList"
						:key="collectProductListIndex" :data-index="collectProductListIndex" @touchstart="drawStart"
						@touchmove="drawMove" @touchend="drawEnd" :style="'right:' + item.right + 'rpx'">
						<view v-if="navType==0" class="info-box acea-row row-between-wrapper" @click="goGoodsCon(item)">
							<view class="pictrue">
								<image :src="item.image" />
							</view>
							<view class="text">
								<view class="infor line1">{{ item.storeName }}</view>
								<view class="acea-row sku-box">
									<view class="sku" v-if="item.productInfo.attrInfo">
										{{ item.productInfo.attrInfo.sku }}</view>
								</view>
								<view class="money" v-if="isIntegral == 1">{{ item.costPrice }}积分</view>
								<view class="money" v-else>￥{{ item.price }}</view>
							</view>
						</view>
						<!-- 评测 -->
						<!-- <view v-else class="review-box acea-row row-between" @click="goEvaluation(item)">
							<view class="left acea-row row-column-between">
								<view class="acea-row row-column-between">
									<view class="title"></view>
									<view class="title1"></view>
									<view class="title2"></view>
								</view>
								<view @tap.stop="goMore" class="more">
									MORE
								</view>
							</view>
							<view class="right">
								<image src="../../../static/images/earth-white.png" mode=""></image>
							</view>
						</view> -->
						<view v-else class="review-box acea-row row-between" @click="goEvaluation(item)">
							<image class="img" :src="item.homeImage" mode="aspectFill"></image>
							<!-- <view class="more">
								MORE
							</view> -->
						</view>
						<view class="delete" @tap.stop="delCollection(collectProductListIndex)"
							:style="item.right?'right: -122rpx;':''" :class="{'del-height':navType==1}">删除</view>
					</view>
				</view>


				<Loading :loaded="loadend" :loading="loading"></Loading>

			</view>
		</view>


		<!-- <view class="noCommodity" style="background-color:#fff;" v-if="collectProductList.length < 1 && page > 1">
      <view class="noPictrue">
        <image :src="`${$VUE_APP_RESOURCES_URL}/images/noCollection.png`" class="image" />
      </view>
      <Recommend></Recommend>
    </view> -->
	</view>
</template>
<script>
	import Recommend from '@/components/Recommend'
	import {
		getCollectUser,
		getCollectDel,
		getCollectEvaluation
	} from '@/api/user'
	import {
		delUserCollection
	} from '@/api/store.js'
	import Loading from '@/components/Loading'
	export default {
		name: 'GoodsCollection',
		components: {
			Recommend,
			Loading,
		},
		props: {},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				navType: 0,
				page: 1,
				limit: 20,
				type: 'collect',
				collectProductList: [],
				loadTitle: '',
				loading: false,
				loadend: false,
				delBtnWidth: 154,
				startX: 0
			}
		},
		mounted: function() {
			this.get_user_collect_product(this.navType)
		},
		onReachBottom() {
			!this.loading && this.get_user_collect_product(this.navType)
		},
		methods: {
			changeType(i) {
				if (this.navType == i) return;
				this.navType = i;
				this.collectProductList = []
				this.page = 1
				this.limit = 20
				this.get_user_collect_product(this.navType)
			},

			drawStart(e) {
				var touch = e.touches[0];
				// let index = e.currentTarget.dataset.index;
				for (var index in this.collectProductList) {
					this.collectProductList[index].right = 0;
				}
				this.startX = touch.clientX;
				// console.log(this.startX, "drawStart", index)
			},
			drawMove(e) {
				let touch = e.touches[0];
				// console.log(touch, "drawMove")
				let index = e.currentTarget.dataset.index;
				let item = this.collectProductList[index];
				let disX = this.startX - touch.clientX;

				// console.log(index, "drawMove")
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.collectProductList[index].right = disX;
				} else {
					this.collectProductList[index].right = 0;
				}
			},
			drawEnd(e) {
				let index = e.currentTarget.dataset.index;
				let item = this.collectProductList[index];
				console.log(item.right, "drawEnd", index);
				if (item.right >= 80) {
					this.collectProductList[index].right = this.delBtnWidth;
				} else {
					this.collectProductList[index].right = 0;
				}
				console.log(this.collectProductList, "drawEnd", index);
			},
			goGoodsCon(item) {
				if (item.isIntegral == 1) {
					this.$yrouter.push({
						path: '/pages/shop/GoodsCon/index',
						query: {
							id: item.pid
						},
					})
				} else {
					this.$yrouter.push({
						path: '/pages/shop/GoodsCon/index',
						query: {
							id: item.pid
						},
					})
				}
			},

			goEvaluation(item) {
				this.$yrouter.push({
					// 跳转评测详情
					path: '/pages/shop/Evaluations/EvaluationDetail/index',
					query: {
						id: item.evaluationId
					},
				})
			},
			get_user_collect_product: function(navType) {

				let that = this

				if (that.loading) return //阻止下次请求（false可以进行请求）；
				// if (that.loadend) return //阻止结束当前请求（false可以进行请求）；
				that.loading = true
				if (navType === 1) {
					// 获取评测收藏 collectEvaluation/user
					getCollectEvaluation(that.page, that.limit, that.type).then(res => {
						that.loading = false
						//apply();js将一个数组插入另一个数组;
						var arr = [];
						for (var i in res.data) {
							res.data[i].right = 0;
							arr.push(res.data[i])
						};
						that.collectProductList.push.apply(that.collectProductList, arr)
						// this.collectProductList.forEach(val => {
						// 	val.right = 0;
						// })
						that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
						that.page = that.page + 1
					})
				} else {
					getCollectUser(that.page, that.limit, that.type).then(res => {
						that.loading = false
						//apply();js将一个数组插入另一个数组;
						var arr = [];
						for (var i in res.data) {
							res.data[i].right = 0;
							arr.push(res.data[i])
						};
						that.collectProductList.push.apply(that.collectProductList, arr)
						// this.collectProductList.forEach(val => {
						// 	val.right = 0;
						// })
						that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
						that.page = that.page + 1
					})

				}

			},
			//删除收藏；
			delCollection: function(index) {
				let that = this

				if (that.navType === 0) {
					let id = that.collectProductList[index].pid,
						category = that.collectProductList[index].category
					getCollectDel(id, category).then(function() {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000,
							complete: () => {
								that.collectProductList.splice(index, 1)
								that.$set(that, 'collectProductList', that.collectProductList)
							},
						})
					})
				} else {
					// 取消评测收藏
					let param={}
					  param.id=that.collectProductList[index].evaluationId,
					  param.category= "collect"			
					delUserCollection(param).then(function() {
					  uni.showToast({
					    title: '删除成功',
					    icon: 'success',
					    duration: 2000,
					    complete: () => {
					      that.collectProductList.splice(index, 1)
					      that.$set(that, 'collectProductList', that.collectProductList)
					    },
					  })
					})
				}

			},

		},
	}
</script>
<style lang="less" scoped>
	// .review-box{
	// 	padding: 30rpx 30rpx 20rpx 30rpx;
	// 	width: 687rpx;
	// 	height: 250rpx;
	// 	border-radius: 16rpx;
	// 	background: #F5F6F8;
	// 	box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
	// 	.left{
	// 		max-width: 460rpx;

	// 		.title{
	// 			font-size: 36rpx;
	// 			font-weight: 500;
	// 			text-transform: uppercase;
	// 		}
	// 		.title1{
	// 			margin: 10rpx 0 5rpx 0;
	// 			font-size: 24rpx;
	// 			text-transform: uppercase;
	// 		}
	// 		.title2{
	// 			font-size: 28rpx;


	// 		}
	// 		.more{
	// 			font-size: 24rpx;
	// 			position: relative;
	// 		}
	// 		.more::before{
	// 			position: absolute;
	// 			border-bottom: 1rpx solid black;
	// 			bottom: -8rpx;
	// 			left: -4rpx;
	// 			content: '';
	// 			width: 100rpx;
	// 			background-color: black;
	// 			height: 1rpx;
	// 		}
	// 		.more::after{
	// 			margin-left: 10rpx;
	// 			content: '';
	// 			display: inline-block;
	// 			width: 0;
	// 			height: 0;
	// 			border-top: 10rpx solid transparent;
	// 			border-left: 10rpx solid black;
	// 			border-bottom: 10rpx solid transparent;
	// 			border-right: 10rpx solid transparent;
	// 		}
	// 	}
	// 	.right{
	// 		image{
	// 			width: 200rpx;
	// 			height: 100%;
	// 		}

	// 	}
	// }

	.review-box {
		// padding: 30rpx 30rpx 20rpx 30rpx;
		// width: 687rpx;
		// height: 240rpx;
		border-radius: 16rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		position: relative;
		.img {
			width: 687rpx;
			height: 240rpx;
			border-radius: 16rpx;
		}

		.more {
			font-size: 24rpx;
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
		}

		.more::before {
			position: absolute;
			border-bottom: 1rpx solid black;
			bottom: -8rpx;
			left: -4rpx;
			content: '';
			width: 100rpx;
			background-color: black;
			height: 1rpx;
		}

		.more::after {
			margin-left: 10rpx;
			content: '';
			display: inline-block;
			width: 0;
			height: 0;
			border-top: 10rpx solid transparent;
			border-left: 10rpx solid black;
			border-bottom: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
		}
	}









	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}

		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content-box {
		padding-top: 4rpx;
		width: 100vw;
		position: relative;

		.content {
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0rpx 0rpx;

			.nav {
				width: 100vw;
				background: #FFFFFF;
				height: 92rpx;
				padding: 34rpx 32rpx 16rpx;
				position: fixed;
				left: 0;
				z-index: 5;
				border-radius: 28rpx 28rpx 0rpx 0rpx;

				.item {
					width: 112rpx;
					text-align: center;
					position: relative;

					.title {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #3A3A3C;
						line-height: 38rpx;
					}

					.active {
						color: #2DB5AE;
						font-weight: 600;
					}

					.title::after {
						display: block;
						content: '';
						width: 100%;
						height: 4rpx;
						background: #2DB5AE;
						position: absolute;
						bottom: 0;
						left: 0;
						opacity: 0;
						transform: scaleX(0);
						transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease;
					}

					.active::after {
						opacity: 1;
						transform: scaleX(1);
					}
				}
			}
		}
	}

	.info-box {
		width: 686rpx;
		height: 202rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		padding: 20rpx;

		.sku-box {
			margin: 18rpx 0rpx;
			height: 46rpx;
		}

		.sku {
			padding: 0rpx 16rpx;
			height: 46rpx;
			background: #E3E3E3;
			border-radius: 8rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 46rpx;
		}
	}

	.collectionGoods .item .delete {
		position: absolute;
		top: 0;
		right: -186rpx;
		width: 154rpx;
		height: 202rpx;
		background: #EC3A5B;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 202rpx;
		text-align: center;
		text-shadow: 0rpx 10rpx 16rpx rgba(0, 0, 0, 0.15);
	}

	.del-height {
		height: 240rpx !important;
		line-height: 240rpx !important;
	}
</style>