menber-center/pages/certificateDetail/certificateDetail.vue

<template>
	<view class="container">
		<view class="photo-box">
			<cover-image class="photo" src="https://ok.166.net/reunionpub/1_20210628_17a5105e667995566.jpeg"></cover-image>
		</view>
		<view class="info-box">
			<view class="info-item-box">
				<view class="label">
					<span>证书编号:</span>
				</view>
				<view class="text">
					{{ info.zsbh }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>发证部门:</span>
				</view>
				<view class="text">
					{{ info.fzbm }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>发证日期:</span>
				</view>
				<view class="text">
					{{ info.fzrq }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">姓</span>
					<span>名:</span>
				</view>
				<view class="text">
					{{ info.xm }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">性</span>
					<span>别:</span>
				</view>
				<view class="text">
					{{ info.xb }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>身份证号:</span>
				</view>
				<view class="text">
					{{ info.sfzh }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span>文化程度:</span>
				</view>
				<view class="text">
					{{ info.whcd }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	import { getZhongjie, getAnjie } from '@/api/user.js'
	
	const certificateType = ref()
	const certificateTitle = ref()
	
	const info = ref({
		zsbh: null,
		fzbm: null,
		fzrq: null,
		xm: null,
		xb: null,
		sfzh: null,
		whcd: null
	})
	
	onLoad((load) => {
		certificateType.value = load.type
		certificateTitle.value = load.title
		uni.setNavigationBarTitle({
			title: certificateTitle.value
		})
		
		if (certificateType.value === 'zhongjie') {
			getZhongjie().then(res => {
				if (res && res.message === 'success') {
					info.value = res.data
				}
			})
		} else if (certificateType.value === 'anjie') {
			getAnjie().then(res => {
				if (res && res.message === 'success') {
					info.value = res.data
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color-grey;
		padding: 20rpx;
		
		.photo-box {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			.photo {
				width: 200rpx;
				height: 280rpx;
				object-fit: cover;
				border-radius: $uni-card-border-radius;
			}
		}
		
		.info-box {
			padding: 20rpx 0;
			
			.info-item-box {
				display: flex;
				background-color: $uni-bg-color;
				border: 1rpx solid #81B4F8;
				border-radius: $uni-card-border-radius;
				padding: 20rpx 30rpx;
				font-size: $uni-title-font-size-2;
				// font-weight: bold;
				letter-spacing: 2rpx;
				margin-bottom: 40rpx;
				.label {
					width: 21%;
				}
				.text {
					width: 79%;
				}
			}
		}
	}
</style>