uniProject/pages/admin/banzheng/list.vue

<template>
	<view class="phone-list-page phone-banzheng-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="banzheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text>{{data.bzztName}}</text>
				<icon class="select-jt-default" />
			</view>
			<view class="filter-btn" @click="filterBtn">筛选</view>
		</view>
		<view class="banzheng-type-box" v-show="isOpen" @click="clickAlltype">
			<dataChecked :list="allType" mode="single" :selectedIds='data.statusBanzheng' :defaultCount="99"
				:showAdd="false" @change="selectChangeSkill" />
		</view>
		<!-- 课程列表 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh"
			class="phone-scroll-saixuan-view">
			<uni-list>
				<uni-list-item v-for="item in data.list" class="banzheng-list-item-box">
					<template v-slot:body>
						<view class="banzheng-list-card-box" @click="goBzDetail(item)">
							<view class="card-head-row">
								<view class="head-name">{{item.realName}}</view>
								<view class="head-status">
									<text>{{item.statusBanzheng}}</text>
									<text class="status-line"
										v-if="item.statusKaoshi != '-' && item.statusKaoshi != ''">|</text>
									<text
										v-if="item.statusKaoshi != '-' && item.statusKaoshi != ''">{{item.statusKaoshi}}</text>
									<!-- 删除 wgy看这里↓-->
									<icon class="head-clear" @click.stop="deleteFun(item)"></icon>
								</view>
							</view>
							<view class="card-body-row">
								<view class="card-img-box">
									<img :src="item.icon" v-if="item.icon">
									<icon class="phone-default-userImg" v-else></icon>
								</view>
								<view class="body-content-row">
									<view class="content-text-row">
										<text>手机号：</text>{{item.userName}}
										<button type="default" class="phone-green-btn bz-tel-btn"
											@click.stop="telCallBtn(item.userName)">打电话</button>
									</view>
									<view class="content-text-row"><text>证件号：</text>{{item.idcard}}</view>
									<view class="jg-zy-box">
										<view class="jg-zy-row">
											<icon class="bz-icon"></icon><text>报证机构：{{item.jgName}}</text>
										</view>
										<view class="jg-zy-row">
											<icon class="zy-icon"></icon><text>职业名称：{{item.zyName}}
												{{item.zyLevel}}</text>
										</view>
									</view>
								</view>
							</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 :current-tab="0"></customTabbarClientVue>
		<!-- 筛选 -->
		<filter-dialog ref="filterDialogRef" @confirm-btn="confirmBtn"></filter-dialog>
		<!-- 搜索 -->
		<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>
	</view>
</template>

<script setup>
	import * as banzhengApi from "@/api/banzheng.js"
	import dataChecked from '../Jiazheng/common/dataChecked.vue';
	import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	import filterDialog from "./filter.vue";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import searchDialog from "./search.vue";
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		getKaozhengList,
		kaozhengDelete
	} from '@/api/banzheng.js'
	import {
		formatSecondsToCnhms
	} from "@/utils/common.js"

	const filterDialogRef = ref(null);
	const searchDialogRef = ref(null);
	const commonDialogRef = ref(null);
	const deleteId = ref('');
	const deleteTitle = ref('删除');
	const deleteConcent = ref('你确定要执行这个操作吗');

	const data = reactive({
		bzztName: '全部状态',
		jgId: '', // 机构ID
		realName: '', // 姓名
		statusBanzheng: '', // 办证状态
		statusKaoshi: '', // 考试状态
		userName: '', // 手机号
		zyId: '', // 职业ID
		zyLevel: '', // 职业等级ID
		list: [], // 办证列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
		from: ''
	})

	/*** 办证状态 ***/
	let isOpen = ref(false)
	let allType = ref([])

	function getKaozhengBanzhengList() {
		banzhengApi.getKaozhengBanzheng().then(res => {
			const newItem = {
				id: 0,
				name: '全部状态'
			};
			allType.value = [newItem, ...res.data];
			data.statusBanzheng = 1
			data.bzztName = '未办证'
		})
	}
	const clickAlltype = (data) => {
		isOpen.value = !isOpen.value;
	}

	function selectChangeSkill(item) {
		if (item.length > 0) {
			data.statusBanzheng = item[0].id == 0 ? '' : item[0].id;
			data.bzztName = item[0].name;
			data.page = 0;
			refreshData();
		}

	}

	function deleteFun(data) {
		console.log('data', data);
		deleteId.value = data.id
		commonDialogRef.value.handleShow();

	}

	function deleteQuerenBtn() {
		kaozhengDelete({
			ids: [deleteId.value]
		}).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: '成功'
				})
				handleSearch()
			} else {
				uni.showToast({
					title: '失败'
				})
			}

		})
	}

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

	// 筛选
	function filterBtn() {
		filterDialogRef.value.initPage();
		filterDialogRef.value.handleShow();
	}

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

	function goBzDetail(item) {
		let pageInfo = {
			status: 'edit',
			id: '',
			userId: item.userId,
			from: 'banzheng'
		}
		uni.redirectTo({
			url: "/pages/admin/Jiazheng/jiazhengUserManager?pageInfo=" + JSON.stringify(pageInfo)
		})
	}

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

	function refreshData() {
		const opt = {
			jgId: data.jgId, // 机构ID
			realName: data.realName, // 姓名
			statusBanzheng: data.statusBanzheng, // 办证状态
			statusKaoshi: data.statusKaoshi, // 考试状态
			userName: data.userName, // 手机号
			zyId: data.zyId, // 职业ID
			zyLevel: data.zyLevel, // 职业等级ID
			page: 1,
			size: 10, // 固定查询10条
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		getKaozhengList(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 = {
			jgId: data.jgId, // 机构ID
			realName: data.realName, // 姓名
			statusBanzheng: data.statusBanzheng == '' ? 1 : data.statusBanzheng, // 办证状态
			statusKaoshi: data.statusKaoshi, // 考试状态
			userName: data.userName, // 手机号
			zyId: data.zyId, // 职业ID
			zyLevel: data.zyLevel, // 职业等级ID
			page: 1,
			size: 10, // 固定查询10条
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		getKaozhengList(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 confirmBtn(dialogData) {
		data.jgId = dialogData.jigouId;
		data.zyId = dialogData.zhiyeId;
		data.zyLevel = dialogData.levelId;
		data.statusKaoshi = dialogData.kaoshiId;
		data.page = 0;
		refreshData();
	}

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

	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 telCallBtn(data) {
		uni.makePhoneCall({
			phoneNumber: data //仅为示例
		});
	}

	onLoad((options) => {
		data.from = options.from;
	})

	onShow(() => {
		getMore()
		getKaozhengBanzhengList();
	})
</script>