Applet/pages/illness/receive.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>
		<text class="notes">注：代领富裕街道家庭成员</text>
		<uni-list :border="true">
			<view :id="item && item.residentId" :name="item.reqStatus" class="delBox" @touchstart="touchStart" @touchend="touchEnd" v-for="(item, index) in list" :key="index" >
				<uni-list-chat
					:class="{ left: isId == item.residentId, is0: item.reqStatus == 0, is1: item.reqStatus == 1, is2: item.reqStatus == 2, }"
					class="item"
					:avatar="item.avatar || '/static/user1.png'"
					:title="item.name"
					:note="item.reqStatusText"
					badge-positon="left">
					<button type="primary" size="mini" @click="userbtn(item)">详情</button>
				</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: [],
				// applylist: [],
				natTaskId: '',
				membersStatus: [],
			}
		},
		mounted() {},
		async onShow() {
			this.isId = '';
			this.query();
		},
		methods: {
			async query() {
				const familyInfo = await requestFamily.getFamilyInfo();
				const res = await requestFamily.getApplyUser();
				res.data.forEach(e => {
					 const isTrue = familyInfo.rows.find(k => e.residentReqId == k.residentId);
					 if (isTrue) {
						familyInfo.rows.map(j => {
							const data = e.residentReqId == j.residentId
							if (data) return { ...j, reqStatus: data.reqStatus };
							return j;
						})
						return;
					}
					familyInfo.rows.push({ ...e, residentId: e.residentReqId }) 
				})
				this.list = familyInfo.rows.map(e => {
					if (e.reqStatus == 0) e.reqStatusText = '待审核';
					if (e.reqStatus == 1) e.reqStatusText = '已通过';
					if (e.reqStatus == 2) e.reqStatusText = '已拒绝';
					return e;
				});
			},
			// 滑动开始
			touchStart(e) {
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX=e.touches[0].clientX;
				}
			},
			// 滑动结束
			touchEnd(e) {
				const data = this.list.find(j => j.residentId == e.currentTarget.id);
				if (data.reqStatus !== '1') return;
				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 requestFamily.familyInfo({ ...e, reqType: '2' });
				if (res.code == 200) {
					this.isId = '';
					uni.showToast({
						title: '已提交审核',
						duration: 2000,
					});
				}
				this.query();
			},
			// 添加
			onClick() {
				uni.navigateTo({
					url: '/pages/user/familyInfo'
				})
			},
			// 修改
			userbtn(e) {
				if (e.reqStatus == '1') {
					uni.navigateTo({
						url: `/pages/user/familyInfo?residentId=${e.residentId}`
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/user/familyInfo?residentReqId=${e.residentReqId}`
				})
			}
		}
	}
</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: 70px;
		background: red;
	}
	.right {
		margin-right: -70px;
	}
	.uni-icons {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 2.3em;
	}
	.left {
		margin-left: -70px;
	}
	.compose {
		background: #1aad19;
	}
	.notes {
		width: 90%;
		display: block;
		margin: 5px auto;
		color: #ff8319;
		font-size: 12px;
	}
	.is0 .uni-list-chat__content-note{
		color: #1aad19;
	}
	.is1 .uni-list-chat__content-note{
		color: #2979ff;
	}
	.is2 .uni-list-chat__content-note{
		color: red;
	}
</style>