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

<template>
	<view class="">
		<view class="cu-list menu-avatar">
			<view @click="$jump('detail')" 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 20" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="cu-avatar  xl" style="background-image: url(../../../static/del/del3.png);"></view>
				<view class="content">
					<view class="flex-direction flex">
						<text class="text-cut-1" style="width: 96%;font-size: 32rpx;">茶百道（花城汇中区店）</text>
						<view class="" style="width: 96%;">
							<text class="sub-title text-cut-1" >活动公告：桃里萄气，“莓”有烦恼！</text>
						</view>
					</view>
					<view class="margin-bottom-10">
						<view class="cu-tag tag-bg round sm" style="font-size: 24rpx;padding: 0rpx 40rpx;height: 40rpx;line-height: 42rpx;">
							天河区A区
						</view>
					</view>
				</view>
				<!-- <view class="action">
					<view class="cuIcon-right" style="color: #D2D2D2;"></view>
				</view> -->
				<view class="move" @click.stop="stop">
					<view class="bg-red">停用</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				listTouchStart: 0,
				modalName:null
			}
		},
		methods:{
			stop(){
				this.$u.toast('停用')
			},
			
			// 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>