uniProject/pages/admin/zizhanghao/list.vue

<template>
	<view class="phone-list-page phone-zzh-page">
		<view class="phone-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">子账号管理</text>
			<uni-icons class="nav-bar-right-icon" type="search" size="22" color="#666" @click="searchBtn"></uni-icons>
		</view>
		<view class="zzh-new-btn-box">
			<button type="default" class="phone-green-btn" @click="handleAddZizhanghao">新增</button>
		</view>
		<!-- 课程列表 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh" @scrolltolower="onScrolltolower"
			class="zzh-saixuan-view">
			<uni-list>
				<uni-list-item v-for="item in data.list" class="zzh-list-item-box">
					<template v-slot:body>
						<view class="zzh-item-card">
							<view class="zzh-name-row">
								<view class="row-item"><icon class="user-icon"></icon>姓名：{{item.realName}}</view>
								<view class="row-item"><icon class="tel-icon"></icon>手机：{{item.userName}}</view>
							</view>
							<view class="zzh-btn-row">
								<button class="zzh-btn phone-green-btn" type="default" @click="handleEditor(item)">编辑</button>
								<button class="zzh-btn phone-green-btn" type="default" @click="handleReset(item)">重置密码</button>
								<button class="zzh-btn phone-white-btn" type="default" @click="handleDelete(item)">删除</button>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-load-more :status="data.state" @click="getMore(0)" :contentText="data.contentText"></uni-load-more>
			</uni-list>
		</scroll-view>

		<!-- 页面底端 -->
		<customTabbarClientVue></customTabbarClientVue>
		<!-- 搜索 -->
		<search-dialog ref="searchDialogRef" @search-btn="dialogSearchBtn"
			@reset-search="dialogSearchReset"></search-dialog>
		<!-- 删除子账号 -->
		<common-dialog ref="commonDialogRef" :title="deleteTitle" :content="deleteConcent"
			@confirm-btn="deleteQuerenBtn"></common-dialog>
		<!-- 新增子账号 -->
		<addUserDlVue ref="addUserRef" title="新增" @confirm-btn="onAddSuccess"></addUserDlVue>
		<!-- 更新子账号 -->
		<editorUserDlVue ref="editorUserRef" title="编辑" @confirm-btn="onUpdateSuccess"></editorUserDlVue>
		<!-- 更新密码 -->
		<resetPasswordVue ref="resetPasswordRef"></resetPasswordVue>
	</view>
</template>

<script setup>
	import searchDialog from "@/pages/admin/banzheng/search.vue";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	import addUserDlVue from "./components/addUserDl.vue";
	import editorUserDlVue from "./components/editorUserDl.vue";
	import resetPasswordVue from "./components/resetPassword.vue";
	import {
		reactive,
		ref
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getUserGuanliList,
		getUserGuanliDelete
	} from "@/api/zizhanghao.js"

	const data = reactive({
		list: [], // 办证列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
		userName: '', // 手机号
		realName: '', // 姓名
	})
	const deleteTitle = ref('删除')
	const deleteConcent = ref('你确定要执行这个操作吗')
	const deletUserId = ref(null)
	const addUserRef = ref(null)
	const editorUserRef = ref(null)
	const commonDialogRef = ref(null)
	const resetPasswordRef = ref(null)
	const searchDialogRef = ref(null)

	function goUpPage() {
		uni.redirectTo({
			url: '/pages/admin/ShouYe/shouye'
		})
	}

	function onScrolltolower() {
		getMore()
	}

	function handleEditor(item) {
		editorUserRef.value.handleShow(item.userId);
	}

	function handleDelete(item) {
		deletUserId.value = item.userId;
		commonDialogRef.value.handleShow();
	}

	function handleReset(item) {
		resetPasswordRef.value.handleShow(item.userId)
	}

	function onAddSuccess() {
		data.page = 0;
		refreshData();
	}

	function onUpdateSuccess() {
		data.page = 0;
		refreshData();
	}

	function handleAddZizhanghao() {
		addUserRef.value.handleShow()
	}

	function searchBtn() {
		searchDialogRef.value.handleShow();
	}

	function refreshData() {
		const opt = {
			realName: data.realName, // 姓名
			userName: data.userName, // 手机号
			page: 1,
			size: 10, // 固定查询10条
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		getUserGuanliList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;
			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}

	function getMore() {
		const opt = {
			realName: data.realName, // 姓名
			userName: data.userName, // 手机号
			page: 1,
			size: 10, // 固定查询10条
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		getUserGuanliList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;
			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}

	function onRefresh() {
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	function dialogSearchBtn(name, searchData) {
		switch (name) {
			case '姓名':
				dialogSearchReset();
				data.realName = searchData.value;
				break;
			case '手机号':
				data.userName = searchData.value;
				break;
		}
		data.page = 0;
		refreshData();

	}

	function dialogSearchReset() {
		data.userName = '';
		data.realName = '';
	}

	function deleteQuerenBtn() {
		getUserGuanliDelete({
			userId: deletUserId.value
		}).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: '成功'
				})
				data.page = 0;
				refreshData();
			} else {
				uni.showToast({
					title: '失败'
				})
			}

		})
	}

	onLoad(() => {
		getMore()
	})
</script>

<style>

</style>