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

<template>
	<!-- <view ref="container">
    <view class="collectionGoods" v-if="collectProductList.length > 0">
      <view class="item acea-row row-between-wrapper" v-for="(item, collectProductListIndex) in collectProductList" :key="collectProductListIndex" @click="goGoodsCon(item)">
        <view class="pictrue">
          <image :src="item.image" />
        </view>
        <view class="text acea-row row-column-between">
          <view class="infor line1">{{ item.storeName }}</view>
          <view class="acea-row row-between-wrapper">
            <view class="money font-color-red" v-if="isIntegral == 1">{{ item.costPrice }}积分</view>
            <view class="money font-color-red" v-else>￥{{ item.price }}</view>
            <view class="delete" @tap.stop="delCollection(collectProductListIndex)">删除</view>
          </view>
        </view>
      </view>
    </view>
    <Loading :loaded="loadend" :loading="loading"></Loading>
    <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> -->
	<view>
		<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">
			<view class="item-box" v-for="(item, collectProductListIndex) in collectProductList"
				:key="collectProductListIndex" :data-index="collectProductListIndex" @touchstart="drawStart"
				@touchmove="drawMove" @touchend="drawEnd" :style="'right:' + item.right + 'rpx'">
				<view class="acea-row" @click="goGoodsCon(item)">
					<image class="img" :src="item.image" mode=""></image>
					<view class="right-box acea-row row-column-between row-top">
						<view class="title-top line2">{{ item.storeName }}</view>
						<view class="pic" v-if="item.isIntegral == 1">{{ item.integral }}积分</view>
						<view class="pic" v-else>￥{{ item.price }}</view>
					</view>
				</view>
				<view class="delete" :style="item.right?'right: -122rpx;':''" @click="delCollection(collectProductListIndex)">删除</view>
			</view>
			
			<Loading :loaded="loadend" :loading="loading"></Loading>
			<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>
			</view>
		</view>
		<!-- <Recommend></Recommend> -->
	</view>
</template>
<script>
	import Loading from '@/components/Loading'
	// import Recommend from '@/components/Recommend'
	import {
		getCollectUser,
		getCollectDel
	} from '@/api/user'
	export default {
		name: 'GoodsFoot',
		components: {
			// Recommend,
			Loading,
		},
		props: {},
		data: function() {
			return {
				page: 1,
				limit: 20,
				type: 'foot',
				collectProductList: [],
				loadTitle: '',
				loading: false,
				loadend: false,
				
				startX: 0,
				delBtnWidth: 154
			}
		},
		mounted: function() {
			this.get_user_collect_product()
		},
		onReachBottom() {
			!this.loading && this.get_user_collect_product()
		},
		methods: {

			goGoodsCon(item) {
				if (item.isIntegral == 1) {
					this.$yrouter.push({
						path: '/pages/shop/IntegralGoodsCon/index',
						query: {
							id: item.pid
						},
					})
				} else {
					this.$yrouter.push({
						path: '/pages/shop/GoodsCon/index',
						query: {
							id: item.pid
						},
					})
				}
			},
			get_user_collect_product: function() {
				let that = this
				if (that.loading) return //阻止下次请求（false可以进行请求）；
				if (that.loadend) return //阻止结束当前请求（false可以进行请求）；
				that.loading = true
				getCollectUser(that.page, that.limit, that.type).then(res => {
					that.loading = false
					//apply();js将一个数组插入另一个数组;
					res.data.forEach(val => {
						val.right = 0;
					})
					that.collectProductList.push.apply(that.collectProductList, res.data)
					that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
					that.page = that.page + 1
				})
			},
			//删除收藏；
			delCollection: function(index) {
				let that = this,
					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)
						},
					})
				})
			},

			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];
				if (item.right >= 80) {
					this.collectProductList[index].right = this.delBtnWidth;
				} else {
					this.collectProductList[index].right = 0;
				}
			},
		},
	}
</script>
<style lang="less" scoped>
	.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 {
		position: relative;
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		overflow: hidden;
		background-color: #fff;
		height: 100%;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		.item-box {
			position: relative;
			width: 686rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.img {
				width: 170rpx;
				height: 170rpx;
				margin-right: 20rpx;
				border-radius: 16rpx;
			}

			.right-box {
				width: 450rpx;
				.title-top {
					color: #3A3A3C;
					font-size: 28rpx;
				}

				.pic {
					color: #2DB5AE;
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			// 删除
			.delete {
				position: absolute;
				top: 0;
				right: -250rpx;
				width: 154rpx;
				height: 210rpx;
				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.06);
			}

		}
	}
</style>