guosen-ldt-mall/pages/stores/comps/card.vue

<template>
	<view class="">
		<view class="cu-list menu-avatar">
			<view @click="goDetail(item.id)" hover-class="none"
				style="margin: 15rpx 10rpx 15rpx 15rpx;border-radius: 20rpx 0 0 20rpx;padding: 10rpx;" class="cu-item"
				:class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
				@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				:data-target="'move-box-' + index">
				<view class="cu-avatar  xl" :style="'background-image: url('+item.cover+')'"></view>
				<view class="content">
					<view class="flex-direction flex">	
						<text class="text-cut-1" style="width: 96%;font-size: 32rpx;">{{item.name}}</text>
						<view class="" style="width: 96%;">
							<text class="sub-title text-cut-1">{{item.slogan}}</text>
						</view>
					</view>
					<view class="margin-bottom-10" v-if="item.mallAreaName">
						<view class="cu-tag tag-bg round sm"
							style="font-size: 24rpx;padding: 0rpx 40rpx;height: 40rpx;line-height: 42rpx;">
							{{item.mallAreaName}}
						</view>
					</view>
				</view>
				<!-- <view class="action">
					<view class="cuIcon-right" style="color: #D2D2D2;"></view>
				</view> -->
				<view class="move" @click.stop="stop(item.id)">
					<view class="bg-red">停用</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		data() {
			return {
				listTouchStart: 0,
				modalName: null
			}
		},
		methods: {
			stop(id) {
				this.$emit('stop',id)
			},
			goDetail(id){
				uni.navigateTo({
					url:"/pages/stores/detail?id="+id
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-bg {
		background-color: #FFA66D;
		color: #FFFFFF;
	}

	.cu-list>.cu-item .move {
		position: absolute;
		right: 0rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 170rpx;
		height: 100%;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 220rpx;
		height: 90%;
		width: calc(100% - 96rpx - 60rpx - 100rpx - 20rpx);
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 60rpx;
		text-align: center;
	}

	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding-right: 10rpx;
		height: 180rpx;
		background-color: #ffffff;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.cu-list>.cu-item.move-cur {
		transform: translateX(-160upx)
	}

	.cu-list.menu-avatar>.cu-item>.cu-avatar {
		position: absolute;
		left: 10rpx;
	}

	.cu-avatar.xl {
		border-radius: 10rpx;
		width: 200rpx;
		height: 90%;
	}



	.sub-title {
		margin-top: 5rpx;
		color: #6C6C6C;
		font-size: 24rpx;
	}
</style>