修改

pages.json

@@ -82,7 +82,14 @@
 				{
 					"path": "personnel/index",
 					"style": {
-						"navigationBarTitleText": "公证员介绍"
+						"navigationBarTitleText": "公证员介绍",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "personnel/detail",
+					"style": {
+						"navigationBarTitleText": "公证员详情"
 					}
 				},
 				{

pagesHome/path/index.vue

@@ -1,7 +1,14 @@
 <template>
 	<view class="content">
 		<view class="one">
-			申办流程
+			<view class="list" v-for="(item, index) in list" :key="index">
+				<view class="list_1">
+					<view class="number">第 {{index+1}} 步</view>
+					<image class="image" :src="item.icon&&item.icon.length>0?item.icon[0].url:''">
+					</image>
+					<view class="name textOver">{{item.name||'暂无'}}</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -12,48 +19,81 @@
 	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
 	// 请求接口
 	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
-	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
 	// 基本信息
-	const config = ref({ logo: [], file: [] });
+	const config = ref({ logo: [] });
+	// 列表
 	const list = ref([]);
 	const total = ref(0);
-	const menuList = ref([]);
 	onShow(async () => {
 		await searchConfig();
-		await searchOther();
 		await search();
 	})
+	onPullDownRefresh(async () => {
+		await search();
+		uni.stopPullDownRefresh();
+	})
 	// config信息
 	const searchConfig = async () => {
 		config.value = uni.getStorageSync('config');
-	};
-	// 其他查询信息
-	const searchOther = async () => {
-		
 	};
 	// 查询
 	const search = async () => {
-		const info = {
-			skip: 0,
-			limit: 2,
-			status: '0'
+		const res = await $api('path', 'GET', {
+			is_use: '0'
+		});
+		if (res.errcode === 0) {
+			list.value = list.value.concat(res.data)
+			total.value = res.total
+		} else {
+			uni.showToast({
+				title: res.errmsg || '',
+				icon: 'error',
+			});
 		}
-		// const res = await $api('car', 'GET', info);
-		// if (res.errcode === 0) {
-		// 	list.value = list.value.concat(res.data)
-		// 	total.value = res.total
-		// } else {
-		// 	uni.showToast({
-		// 		title: res.errmsg || '',
-		// 		icon: 'error',
-		// 	});
-		// }
 	};
 </script>
 <style lang="scss" scoped>
 	.content {
 		display: flex;
 		flex-direction: column;
-		background-color: var(--f1Color);
+
+		.one {
+			margin: 2vw;
+
+			.list {
+				margin: 0 0 2vw 0;
+				padding: 2vw;
+				border-radius: 5px;
+				background: var(--fFFColor);
+				border: 1px solid var(--f5Color);
+
+				.list_1 {
+					position: relative;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+
+					.number {
+						position: absolute;
+						top: -2px;
+						left: 2px;
+						font-size: var(--font14Size);
+						color: var(--mainColor);
+					}
+
+					.image {
+						width: 15vw;
+						height: 15vw;
+					}
+
+					.name {
+						color: var(--mainColor);
+						margin: 2vw 0;
+						font-size: var(--font16Size);
+					}
+				}
+			}
+		}
 	}
 </style>

pagesHome/personnel/detail.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="content">
+		<view class="one">
+			<image class="image" :src="info.logo&&info.logo.length>0?info.logo[0].url:''">
+			</image>
+		</view>
+		<view class="two">
+			<view class="name">{{info.zw||'暂无'}}: {{info.name||'暂无'}}</view>
+			<view class="other">
+				<text>姓名：</text>{{info.name||'暂无'}}，<text>性别：</text>{{getDict(info.gender,'gender')}}，<text>出生年月：</text>{{info.birth||'暂无'}}
+			</view>
+			<view class="other">
+				<text>职务：</text>{{info.zw||'暂无'}}，<text>职称：</text>{{info.zc||'暂无'}}
+			</view>
+			<view class="other">
+				<text>执业证号：</text>{{info.number||'暂无'}}
+			</view>
+			<view class="list" v-if="info.work&&info.work.length>0">
+				<text>司法工作经历：</text>
+				<view class="list_1" v-for="(item, index) in info.work" :key="index" @click="toCommon(item.route)">
+					<view class="value">{{item.time}}</view>
+					<view class="value">{{item.address}}</view>
+					工作
+				</view>
+			</view>
+			<view class="list">
+				<text>业务专长：</text>
+				<view class="content">{{info.brief||'暂无'}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { getCurrentInstance, ref } from 'vue';
+	//该依赖已内置不需要单独安装
+	import { onLoad } from "@dcloudio/uni-app";
+	// 请求接口
+	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
+	// 基本信息
+	const config = ref({ logo: [], file: [] });
+	const id = ref('');
+	const info = ref({});
+	// 字典表
+	const educationList = ref([]);
+	const genderList = ref([]);
+	onLoad(async (options) => {
+		id.value = options && options.id
+		await searchConfig();
+		await searchOther();
+		await search();
+	})
+	// config信息
+	const searchConfig = async () => {
+		config.value = uni.getStorageSync('config');
+	};
+	// 其他查询信息
+	const searchOther = async () => {
+		let res;
+		// 性别
+		res = await $api(`dictData`, 'GET', { code: 'gender', is_use: '0' });
+		if (res.errcode === 0) genderList.value = res.data;
+		// 学历
+		res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
+		if (res.errcode === 0) educationList.value = res.data;
+	};
+	// 查询
+	const search = async () => {
+		if (id.value) {
+			const res = await $api(`personnel/${id.value}`, 'GET', {});
+			if (res.errcode === 0) {
+				info.value = res.data
+			} else {
+				uni.showToast({
+					title: res.errmsg || '',
+					icon: 'error',
+				});
+			}
+		}
+	};
+	// 数据处理
+	const getDict = (data, model) => {
+		let list;
+		switch (model) {
+			case 'gender':
+				list = genderList.value;
+				break;
+			case 'education':
+				list = educationList.value;
+				break;
+			default:
+				break;
+		}
+		if (!list) return;
+		const res = list.find((f) => f.value == data);
+		return res?.label || '暂无';
+	};
+</script>
+<style lang="scss" scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+
+		.one {
+			display: flex;
+			justify-content: center;
+			margin: 2vw;
+		}
+
+		.two {
+			padding: 2vw;
+
+			.name {
+				margin: 2vw 0;
+				font-size: var(--font16Size);
+			}
+
+			.other {
+				margin: 2vw 0;
+				font-size: var(--font14Size);
+
+				text {
+					color: var(--f85Color);
+				}
+			}
+
+			.list {
+				text {
+					margin: 2vw 0;
+					font-size: var(--font14Size);
+				}
+
+				.list_1 {
+					display: flex;
+					font-size: var(--font12Size);
+					color: var(--f85Color);
+					margin: 1vw;
+				}
+
+				.content {
+					margin: 1vw;
+					font-size: var(--font14Size);
+				}
+			}
+		}
+	}
+</style>

pagesHome/personnel/index.vue

@@ -1,7 +1,30 @@
 <template>
 	<view class="content">
-		<view class="one">
-			公证员介绍
+		<view class="top">
+			<u-search shape="square" :show-action="false" placeholder="请输入公证员姓名" @focus="toChange"></u-search>
+		</view>
+		<view class="bottom">
+			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+				<view class="list-scroll-view">
+					<view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
+						<view class="list_1">
+							<view class="left">
+								<image class="image" :src="item.logo&&item.logo.length>0?item.logo[0].url:''">
+								</image>
+							</view>
+							<view class="right">
+								<view class="name textOver">{{item.zw||'暂无'}}: {{item.name||'暂无'}}</view>
+								<view class="other">
+									<text>专业: {{item.speciality||"暂无"}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="is_bottom" v-if="is_bottom">
+						<text>{{config.bottom_title||'没有更多了！'}}</text>
+					</view>
+				</view>
+			</scroll-view>
 		</view>
 	</view>
 </template>
@@ -12,48 +35,163 @@
 	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
 	// 请求接口
 	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
-	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
+	// 搜索
+	const searchName = ref('');
 	// 基本信息
-	const config = ref({ logo: [], file: [] });
+	const config = ref({ logo: [] });
+	// 列表
 	const list = ref([]);
 	const total = ref(0);
-	const menuList = ref([]);
+	const skip = ref(0);
+	const limit = ref(6);
+	const page = ref(0);
+	// 数据是否触底
+	const is_bottom = ref(false);
+	const scrollTop = ref(0);
 	onShow(async () => {
 		await searchConfig();
-		await searchOther();
+		await clearPage();
+		await search();
+	})
+	onPullDownRefresh(async () => {
+		await clearPage();
 		await search();
+		uni.stopPullDownRefresh();
 	})
 	// config信息
 	const searchConfig = async () => {
 		config.value = uni.getStorageSync('config');
-	};
-	// 其他查询信息
-	const searchOther = async () => {
-		
 	};
 	// 查询
 	const search = async () => {
 		const info = {
-			skip: 0,
-			limit: 2,
-			status: '0'
+			skip: skip.value,
+			limit: limit.value,
+			is_use: '0'
 		}
-		// const res = await $api('car', 'GET', info);
-		// if (res.errcode === 0) {
-		// 	list.value = list.value.concat(res.data)
-		// 	total.value = res.total
-		// } else {
-		// 	uni.showToast({
-		// 		title: res.errmsg || '',
-		// 		icon: 'error',
-		// 	});
-		// }
+		if (searchName.value) info.name = searchName.value
+		const res = await $api('personnel', 'GET', info);
+		if (res.errcode === 0) {
+			list.value = list.value.concat(res.data)
+			total.value = res.total
+		} else {
+			uni.showToast({
+				title: res.errmsg || '',
+				icon: 'error',
+			});
+		}
+	};
+	// 搜索
+	const toChange = async (e) => {
+		if (e) searchName.value = e
+		else searchName.value = ''
+		await clearPage();
+		await search();
+	};
+	// 查看详情
+	const toView = (item) => {
+		uni.navigateTo({
+			url: `/pagesHome/personnel/detail?id=${item.id || item._id}`
+		})
+	};
+	// 分页
+	const toPage = () => {
+		if (total.value > list.value.length) {
+			uni.showLoading({
+				title: '加载中',
+				mask: true
+			})
+			page.value = page.value + 1;
+			skip.value = page.value * limit.value;
+			search();
+			uni.hideLoading();
+		} else is_bottom.value = true
+	};
+	// 清空列表
+	const clearPage = () => {
+		list.value = []
+		skip.value = 0
+		limit.value = 6
+		page.value = 0
 	};
 </script>
 <style lang="scss" scoped>
 	.content {
 		display: flex;
 		flex-direction: column;
-		background-color: var(--f1Color);
+		width: 100vw;
+		height: 100vh;
+
+		.top {
+			margin: 2vw;
+		}
+
+		.bottom {
+			position: relative;
+			flex-grow: 1;
+			background-color: var(--f1Color);
+
+			.list {
+				width: 46vw;
+				margin: 2vw 0 0 0;
+				border-radius: 5px;
+				border: 1px solid var(--f5Color);
+				background-color: var(--mainColor);
+
+				.list_1 {
+					.left {
+						.image {
+							width: 100%;
+							height: 125px;
+							border-radius: 5px 5px 0 0;
+						}
+					}
+
+					.right {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						padding: 2vw;
+
+						.name {
+							margin: 2vw 0;
+							font-size: var(--font16Size);
+						}
+
+						.other {
+							font-size: var(--font14Size);
+							color: var(--f85Color);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			padding: 0 2vw;
+		}
+	}
+
+	.is_bottom {
+		width: 100%;
+		text-align: center;
+
+		text {
+			padding: 2vw 0;
+			display: inline-block;
+			color: var(--f85Color);
+			font-size: var(--font12Size);
+		}
 	}
 </style>