Applet/pages/illness/index.vue

<template>
	<view class="container">
		<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">
					<view class="chat-custom-right">
						<text class="chat-custom-text">{{ item && item.status == 0 ? '未检' : '已检' }}</text>
						<!-- 需要使用 uni-icons 请自行引入 -->
						<!-- <uni-icons type="upload" color="#999" size="18"></uni-icons> -->
						<button type="primary" size="mini" :disabled="item && item.status == 1" @click="filing(item)">报备</button>
					</view>
				</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>
</template>

<script>
	import requestFamily from '../../api/family.js';
	export default {
		data() {
			return {
				isId: '',
				startX: 0,
				extraIcon: {
					color: '#ff8319',
					size: '20',
					type: 'plusempty'
				},
				list: [],
				natTaskId: '',
			}
		},
		async mounted() {
			const task = await requestFamily.runningTask();
			if (task.code == 200) {
				this.natTaskId = task.data[0].natTaskId;
				this.query();
			}
		},
		onShow() {
			this.isId = '';
		},
		methods: {
			async query() {
				const { userId } = uni.getStorageSync('userinfo');
				const familyInfo = await requestFamily.getFamilyInfo({ userId });
				if (familyInfo.code == 200) {
					const membersStatus = await requestFamily.membersStatus({ userId, natTaskId: this.natTaskId });
					familyInfo.rows = familyInfo.rows.map(e => {
						const resident = membersStatus.data.find(j => j.residentId == e.residentId);
						return { ...e, status: resident?.status || 0 };
					})
					this.list = familyInfo.rows;
				}
			},
			// 滑动开始
			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 filing(e) {
				const res = await requestFamily.filing({ residentId: e.residentId, natTaskId: this.natTaskId });
				if (res.code == 200) {
					this.query();
					uni.showToast({
						title: '报备成功',
						duration: 2000,
					});
				}
			},
			// 删除
			async delbtn(e) {
				const res = await requestFamily.familyInfo({ ...e, reqType: '2' });
				if (res.code == 200) {
					this.isId = '';
					uni.showToast({
						title: '已提交审核',
						duration: 2000,
					});
				}
			},
			onClick() {
				uni.navigateTo({
					url: '/pages/user/familyInfo'
				})
			},
			userbtn(e) {
				console.log(e);
				uni.navigateTo({
					url: `/pages/user/familyInfo?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>