小程序滑动单元格

项目场景：小程序用户管理列表，通过单元格滑动实现“密码重置”、“删除”功能。

技术框架：uniapp、uview3、ts

效果如下：

前端页面：

<template>
	<view class="fui-wrap">
		<view class="fui-page__hd">
			<view class="fui-page__title">{{data.title}}</view>
			<view class="fui-page__desc">{{data.sub_title}}</view>
		</view>
		<view class="">

		</view>
		<view class="u-page__swipe-action-item" :bottomLeft="0" v-for="(item,index) in data.list">
			<up-swipe-action>
				<up-swipe-action-item :options="buttons" @click="click" :name="item.StfID">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<text style="min-height: 150rpx;"
								class="swipe-action__content__text">{{item.StfName}}/{{item.StfFullName}}</text>
						</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { deluser_api, resetpwd_api, userlist_api } from '@/service/ZlfApi';
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	const buttons = ref([{
		text: '重置密码',
		style: {
			background: '#465CFF'
		}

	}, {
		text: '删除',
		style: {
			background: '#FF2B2B'
		}
	}])

	const data = ref({
		title: '用户管理',
		sub_title: '滑动重置密码、删除用户',
		list: [],
		// totalCount: 0,
	})

	onLoad(() => {
		list()
	})
	onUnload(() => {
		// uni.$off('manageRefresh') 
	})

	const click = (e : any) => {
		// console.log(index)
		let StfID = e.name
		if (e.index == 0) {
			// 重置密码
			resetpwd_api({ StfID: StfID }).then((res : any) => {
				if (res.code == 1) {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel:false
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
				}
			})
		}
		if (e.index == 1) {
			// 删除用户
			uni.showModal({
				title: '提示',
				content: '操作不可逆，确认删除？',
				success: function (res) {
					if (res.confirm) {
						// console.log('用户点击确定');
						deluser_api({ StfID: StfID }).then((res : any) => {
							if (res.code == 1) {
								uni.hideLoading()
								uni.showModal({
									title: '提示',
									content: res.msg,
									showCancel:false,
									success: function (res) {
											if (res.confirm) {
												list();
											}
										}
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: res.msg
								})
							}
						})
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});

		}
	}
	

	const list = async () => {
		// 发起请求，获取设备列表
		const res = await userlist_api()
		data.value.list = res.data
		console.log(data.value.list)
	}
</script>

<style lang="scss">
	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	page {
		font-weight: normal;
		/* 非nvue端使用此变量改变list线条颜色，nvue端请查看文档 */
		/* --fui-color-border:#B2B2B2; */
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-list__item {
		flex: 1;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fui-text__explain {
		font-size: 28rpx;
		color: #7F7F7F;
		flex-shrink: 0;
	}

	.fui-list__icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
</style>