notarization_applet/pagesHome/personnel/detail.vue

<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>