QTApp_800/pages/mine/person/PersonList.uvue

<template>
	<view class="container">
		<!-- 列表内容 -->
		<!-- #ifdef APP -->
		<list-view class="list" :bounces="false" :scroll-y="true" :custom-nested-scroll="true"
			@scrolltolower="loadData(null)" associative-container="nested-scroll-view">
			<list-item class="list-item" type="10">
			<!-- #endif -->
				<view class="download-card" v-for="(item, index) in users" :key="index">
					<view @click="enterItem(item.id)">
						<view class="info-row">
							<text class="label">序号：</text>
							<text class="value">{{ item.id }}</text>
						</view>
						<view class="info-row">
							<text class="label">用户姓名：</text>
							<text class="value">{{ item.name }}</text>
						</view>
						<view class="info-row">
							<text class="label">用户登录账号：</text>
							<text class="value">{{ item.username }}</text>
						</view>
						<view class="info-row">
							<text class="label">用户类型：</text>
							<text class="value">{{ item.role == 'user' ? '普通用户' : '管理员' }}</text>
						</view>
						<view class="info-row">
							<text class="label">创建时间：</text>
							<text
								class="value">{{ item.createtime === null ? item.createtime : item.updatetime }}</text>
						</view>
					</view>

					<view class="info-row">
						<button class="btn btn-second" type='warn' v-if="item.role == 'user'" @click="del(item.id)">
							删除
						</button>
					</view>
				</view>
			<!-- #ifdef APP -->
			</list-item type="20">
			<list-item class="loading">
				<uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
			</list-item>
		</list-view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { selectPageSql, removeTableData } from '@/api/work';

	const backPressOptions = reactive({
		from: 'backbutton'
	} as OnBackPressOptions)

	onBackPress((options : OnBackPressOptions) : boolean | null => {
		// 使用reLaunch代替switchTab，避免多层跳转时的闪回问题
		// reLaunch会关闭所有页面并打开到目标页面，适合需要完全重置导航栈的场景
		uni.reLaunch({
			url: `/pages/mine/index`,
		})
		// 返回true表示拦截默认返回行为
		return true
	})

	type User = {
		id : number,
		name : string,
		username : string,
		role : string,
		updatetime : string,
		createtime : string
	}

	var initUser = [] as User[]
	var users = ref<User[]>([]);
	const loading = ref(false)
	const isEnded = ref(false)
	const loadingError = ref('')
	const currentPage = ref(1)

	const loadingText = computed(() : string => {
		if (loading.value) {
			return "加载中..."
		} else if (isEnded.value) {
			return "没有更多了"
		} else if (loadingError.value.length > 0) {
			return loadingError.value
		} else {
			return ""
		}
	})
	// #ifdef APP-ANDROID

	const loadData = (loadComplete : (() => void) | null) {
		if (loading.value || isEnded.value) {
			return
		}
		loading.value = true
		let offset = currentPage.value === 1 ? 0 : (currentPage.value - 1) * 10
		selectPageSql('app_user', 'createtime', offset).then((res : UTSJSONObject) => {
			console.log(res)
			let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
			if (dataList != null && dataList.length > 0) {
				dataList.forEach(item => {
					if (item != null) {
						let log = JSON.parse<User>(item.toJSONString());
						if (log != null) {
							initUser.push(log)
						}
					}
				});
				currentPage.value++
			} else {
				isEnded.value = true
			}
			users.value = initUser
			loading.value = false
			if (loadComplete != null) {
				loadComplete()
			}
		})

	}


	onMounted(() => {
		loadData(null)
	})

	// #endif

	const del = (id : number) => {
		console.log("删除用户")
		console.log(id)
		uni.showModal({
			title: '系统提示',
			content: '确定要删除当前用户？',
			cancelText: '取消',
			confirmText: '确定',
			success: function (res) {
				if (res.confirm) {
					removeTableData('app_user', 'id', id.toString()).then(res => {
						if (res != null) {
							let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>();
							if (dataList != null && dataList.length > 0) {
								let data = dataList[0] as boolean ?? false
								if (data != null && data == true) {
									uni.showToast({
										title: "删除成功！",
									});
									// 删除成功后刷新页面数据
									initUser = [];
									currentPage.value = 1;
									isEnded.value = false;
									loadData(null);
								}
							}

						}
					})
					console.log(res)
				} else {
					// 用户取消覆盖
					uni.hideLoading();
				}
			}
		});

	}

	const enterItem = (id : number) => {
		uni.navigateTo({
			url: `/pages/mine/person/PersonDetail?id=${id}`
		});
	}

	defineExpose({
		loadData,
		backPressOptions
	})
</script>

<style scope>
	.container {
		padding: 24rpx;
		background-color: #f0f4f8;
		flex: 1;
		display: flex;
		flex-direction: column;
		font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
		/* #ifndef APP-ANDROID */
		min-height: 100vh;
		/* #endif */
		height: 120rpx;
	}

	.search-bar {
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 搜索输入框：占满容器剩余空间，放在按钮左侧 */
	.search-input {
		/* 清除默认输入框样式 */
		border: none;
		background: transparent;
		width: 70%;
		margin-left: 10rpx;
	}

	/* 扫描按钮：放在输入框右侧，距离最右10rpx */
	.scan-btn {
		justify-content: center;
		align-items: center;
		/* 新增：按钮内部图标垂直居中 */
		/* 关键：右侧10rpx边距，实现"距离最右10rpx" */
		margin-left: auto;
		/* 自动推到flex容器最右侧 */
		margin-right: 10rpx;
		/* 与容器右边缘保持10rpx间距 */
	}

	.download-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 32rpx;
		box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.download-card .view {
		margin-bottom: 16rpx;
	}

	/* 信息行 */
	.info-row {
		display: flex;
		flex-direction: row;
		/* #ifdef H5 */
		font-size: 28rpx;
		color: #33475b;
		/* #endif */
		align-items: center;
	}

	.info-row>.label {
		margin-left: 10rpx;
	}

	.info-row>.value {
		margin-left: 10rpx;
	}

	.btn-panel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.label {
		font-weight: bold;
		color: #102a43;
		min-width: 100rpx;
	}

	.value {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.btn {
		align-self: flex-end;
		background-color: #00aaff;
		color: #fff;
		border: none;
		border-radius: 32rpx;
		padding: 2rpx 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		/* #ifndef APP-ANDROID */
		transition: background-color 0.3s ease;
		/* #endif */
		margin-top: 30rpx;
	}

	.process-value {
		width: 120rpx;
		min-width: 100rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.bg-green {
		background-color: seagreen;
	}

	.bg-yellow {
		background-color: yellow;
	}

	.bg-black {
		background-color: #102a43;
	}

	.btn-first {
		margin-left: 5rpx;
	}

	.btn-second {
		margin-right: 5rpx;
		margin-left: auto;
		color: #fff;
		background-color: red;
	}

	.loading {
		padding: 30px;
		align-items: center;
	}

	.list {
		flex: 1;
		background-color: #ffffff;
	}

	.list-item {
		flex-direction: column;
		margin-top: 10px;
		padding: 10px;
	}
</style>