Applet/pages/resident/userInfoList.vue

<template>
	<view class="container">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<!-- 居民信息 -->
		<view v-if="current == 0">
			<uni-card class="addUser">
				<uni-list :border="false">
					<uni-list-item :showExtraIcon="true" :extra-icon="extraIcon" title="添加居民信息" clickable @click="onClick"></uni-list-item>
				</uni-list>
			</uni-card>
			<uni-list :border="true">
				<view :id="item && item.residentId" class="delBox" @touchstart="touchStart" @touchend="touchEnd" v-for="(item, index) in list" :key="index" >
					<uni-list-chat :class="{ left: isId == item.residentId }" class="item" :avatar="item.avatar || '/static/user1.png'" :title="item.name" :note="item.phone" badge-positon="left">
					</uni-list-chat>
					<uni-icons @click="userbtn(item)"  color="#fff" class="del compose" type="compose" size="28"></uni-icons>
					<uni-icons :class="{ left: isId !== item.residentId }" @click="delbtn(item)" color="#fff" class="del" type="trash-filled" size="28"></uni-icons>
				</view>
			</uni-list>
		</view>
		<!-- 居民审核信息 -->
		<view v-if="current == 1">
			<uni-list :border="true">
				<view :id="item && item.residentId" class="delBox" @touchstart="touchStart" @touchend="touchEnd" v-for="(item, index) in list" :key="index" >
					<uni-list-chat :class="{ left: isId == item.residentId }" class="item" :avatar="item.avatar || '/static/user1.png'" :title="item.name" :note="item.phone" badge-positon="left">
						<text class="chat-custom-text">{{ item && item.status }}</text>
					</uni-list-chat>
					<uni-icons @click="userbtn(item)"  color="#fff" class="del compose" type="compose" size="28"></uni-icons>
					<uni-icons :class="{ left: isId !== item.residentId }" @click="delbtn(item)" color="#fff" class="del" type="trash-filled" size="28"></uni-icons>
				</view>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import request from '../../api/resident.js';
	export default {
		data() {
			return {
				isId: '',
				startX: 0,
				extraIcon: {
					color: '#ff8319',
					size: '20',
					type: 'plusempty'
				},
				list: [],
				natTaskId: '',
				membersStatus: [],
				// 选项卡参数
				items: ['居民信息', '居民审核信息'],
				activeColor: '#dd524d',
				styleType: 'text',
				current: 0
			}
		},
		async mounted() {
			this.onClickItem(0);
		},
		onShow() {
			this.isId = '';
		},
		methods: {
			// 标签页点击
			async onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				let res;
				if (e.currentIndex == 1) {
					res = request.getApplyUser();
				} else {
					res = request.getUser();
				}
				this.list = res.data;
			},
			// 滑动开始
			touchStart(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX;
				}
			},
			// 滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					let diff = endX - this.startX;
					if(Math.abs(diff) > 20){
						if(diff < 0) {
							this.isId = e.currentTarget.id;
							
						}else{
							this.isId = '';
						}
					}
				}
			},
			// 删除
			async delbtn(e) {
				const res = await request.delUser({ ...e, reqType: '2' });
				if (res.code == 200) {
					this.isId = '';
					uni.showToast({
						title: '删除成功',
						duration: 2000,
					});
				}
			},
			// 添加
			onClick() {
				uni.navigateTo({
					url: '/pages/resident/userAddr'
				})
			},
			// 修改
			userbtn(e) {
				console.log(e);
				uni.navigateTo({
					url: `/pages/resident/userAddr?residentId=${e.residentId}`
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
	}
	.addUser {
		display: block;
		/* width: 90%; */
		margin: 5px auto;
	}
	.chat-custom-text {
		font-size: 12px;
		color: #999;
		width: 100%;
		text-align: center;
		display: block;
	}
	.addUser .uni-list-item__container {
		flex: none;
		margin: 0 auto;
	}
	.addUser .uni-list-item__content-title {
		color: #ff8319;
	}
	.delBox {
		display: flex;
		width: 100%;
		overflow: hidden;
	}
	.item {
		width: 100%;
	}
	.del {
		display: block;
		width: 50px;
		background: red;
	}
	.right {
		margin-right: -100px;
	}
	.uni-icons {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 2.3em;
	}
	.left {
		margin-left: -100px;
	}
	.compose {
		background: #1aad19;
	}
</style>