uniapp-dp/dp-workshop-manage/pages/user/list.vue

<template>
	<view>
		<scroll-view :scroll-y="true">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 用户列表
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
					v-for="(item,index) in userList" :key="index" @touchstart="ListTouchStart"
					@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="content">
						<view class="text-gray" style="width: 30%;">{{item.account}}</view>
					</view>
					<view class="text-gray" style="margin-left: auto;">{{item.name}}</view>
					<view class="move">
						<view class="bg-grey" @click="editUserInfo(item)">修改</view>
						<view class="bg-red" @click="deleteUserInfo(item)">删除</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</scroll-view>
	</view>
</template>

<script>
	import {list,deleteUser} from '@/api/system/user.js'
	export default {
		data() {
			return {
				userList: [],
				modalName: null,
			}
		},
		methods: {
			addClick() {
				uni.navigateTo({
					url: '/pages/user/add'
				})
			},
			// 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
			},
			editUserInfo(item) {
				uni.navigateTo({
					url: '/pages/user/edit?userInfo=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			deleteUserInfo(item) {
				const arr = []
				arr.push(item)
				deleteUser(arr).then(res=>{
					if(res.success){
						this.$refs.uToast.show({
							type: 'success',
							message: "删除用户成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						this.removeUserInfo(item)
					}else{
						
					}
				})
			},
			removeUserInfo(item) {
				const index = this.userList.findIndex(ele => {
					return ele.id == item.id
				})
				this.userList.splice(index, 1)
			},
			loadData() {
				list().then(res => {
					if (res.success) {
						this.userList = res.data
					} else {}
				})
			}
		},
		onLoad() {
			this.loadData()
			uni.$on('loadData', () => {
				this.loadData();
			})
		}
	}
</script>

<style>
</style>