小程序滑动单元格

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

技术框架:uniapp、uview3、ts

效果如下:

前端页面:

html 复制代码
<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>
相关推荐
Ama_tor38 分钟前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
一只一只妖12 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设14 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru15 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉16 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊19 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所2 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck2 天前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序