完成证书详情页设计

components/creditCard.vue

@@ -13,7 +13,7 @@
 				请登录后查看
 			</view>
 		</view>
-		<view class="desc-box" v-if="isLogin && !data.id">
+		<view class="desc-box" v-if="isLogin && !data.id" @click="onGuideClick()">
 			<view class="text">
 				用户暂未办理信用信息卡<br/>点击了解办理指引&gt;
 			</view>
@@ -64,9 +64,10 @@
 </template>
 
 <script setup>
-	import { ref, defineProps, computed } from 'vue'
+	import { ref, defineProps, computed, defineEmits } from 'vue'
 	import { getToken } from '@/utils/auth.js'
 	
+	const emit = defineEmits(['guide'])
 	const props = defineProps({
 		isLogin: {
 			type: Boolean,
@@ -89,6 +90,10 @@
 			default: 'mini' // mini | normal
 		}
 	})
+	
+	function onGuideClick() {
+		emit('guide')
+	}
 </script>
 
 <style lang="scss" scoped>

pages.json

@@ -153,6 +153,17 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path" : "pages/certificateDetail/certificateDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/certificateDetail/certificateDetail.vue

@@ -0,0 +1,139 @@
+<template>
+	<view class="container">
+		<view class="photo-box">
+			<cover-image class="photo" :src="info.photo"></cover-image>
+		</view>
+		<view class="info-box">
+			<view class="info-item-box">
+				<view class="label">
+					<span>证书编号:</span>
+				</view>
+				<view class="text">
+					{{ info.number }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span>发证部门:</span>
+				</view>
+				<view class="text">
+					{{ info.dept }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span>发证日期:</span>
+				</view>
+				<view class="text">
+					{{ info.time }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span style="letter-spacing: 2em;">姓</span>
+					<span>名:</span>
+				</view>
+				<view class="text">
+					{{ info.name }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span style="letter-spacing: 2em;">性</span>
+					<span>别:</span>
+				</view>
+				<view class="text">
+					{{ info.gender }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span>身份证号:</span>
+				</view>
+				<view class="text">
+					{{ info.idCard }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span>文化程度:</span>
+				</view>
+				<view class="text">
+					{{ info.culture }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const certificateType = ref()
+	const certificateTitle = ref()
+	
+	const info = ref({
+		id: '1',
+		number: 'ZS20250101001',
+		dept: '广州市房地产中介协会',
+		time: '2025年01月13日',
+		name: '彭于晏',
+		gender: '男',
+		idCard: '123456789012345679',
+		culture: '大学',
+		photo: 'https://ok.166.net/reunionpub/1_20210628_17a5105e667995566.jpeg'
+	})
+	
+	onLoad((load) => {
+		certificateType.value = load.type
+		certificateTitle.value = load.title
+		uni.setNavigationBarTitle({
+			title: certificateTitle.value
+		})
+	})
+</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>

pages/personalCenter/personalCenter.vue

@@ -46,12 +46,12 @@
 				我的证明
 			</view>
 			<view class="list-box">
-				<view class="list-item-box" @click="onShowCreditCard(isLogin && creditCard.id)">
-					<CreditCard :isLogin="isLogin" :data="creditCard"></CreditCard>
+				<view class="list-item-box" @click="onShowCreditCard(creditCard.id)">
+					<CreditCard :isLogin="isLogin" :data="creditCard" @guide="onCreditCardGuideClick()"></CreditCard>
 				</view>
-				<view class="list-item-box" :class="[isLogin ? (user.zhongjierenzheng ? 'zhongjie-back' : 'zhongjie-back-zhiyin') : 'zhongjie-back-login']">
+				<view class="list-item-box" :class="[isLogin ? (user.zhongjierenzheng ? 'zhongjie-back' : 'zhongjie-back-zhiyin') : 'zhongjie-back-login']" @click="onZhongJieRenZhengClick(user.zhongjierenzheng)">
 				</view>
-				<view class="list-item-box" :class="[isLogin ? (user.anjierenzheng ? 'anjie-back' : 'anjie-back-zhiyin') : 'anjie-back-login']">
+				<view class="list-item-box" :class="[isLogin ? (user.anjierenzheng ? 'anjie-back' : 'anjie-back-zhiyin') : 'anjie-back-login']" @click="onAnJieRenZhengClick(user.anjierenzheng)">
 				</view>
 			</view>
 		</view>
@@ -168,17 +168,46 @@
 		name: '彭于晏',
 		time: '2018年6月22日',
 		publisher: '广州市住房和城乡建设委员会',
-		photo: 'https://ts1.cn.mm.bing.net/th/id/R-C.54d0da7ab73d8e264c031ef1ce1421de?rik=ABKcbe849Ve92Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn01%2f593%2fw641h752%2f20181122%2f8f8b-hnyuqhi7197762.png&ehk=RXjmmVz4Cozi5iRM2f8h%2fc4SPjwb9Pjh9Dc5Cutxlos%3d&risl=&pid=ImgRaw&r=0',
+		photo: 'https://ok.166.net/reunionpub/1_20210628_17a5105e667995566.jpeg',
 		qrCode: '/static/images/zhengshu/qrCode.png'
 	})
-	
-	function onShowCreditCard(auth) {
-		console.log('onShowCreditCard');
+	function onShowCreditCard(valid) {
 		showCreditCard.value = false
-		if (auth) {
+		if (isLogin.value &&  valid) {
 			showCreditCard.value = true
 		}
 	}
+	// 信息信用卡-点击指引
+	function onCreditCardGuideClick() {
+		console.log('点击-信息信用卡指引');
+	}
+	// 中介认证点击
+	function onZhongJieRenZhengClick(valid) {
+		if (!isLogin.value) {
+			return
+		}
+		if (valid) {
+			uni.navigateTo({
+				url: '/pages/certificateDetail/certificateDetail?type=zhongjie&title=广州市房地产中介从业人员水平认证证书'
+			})
+		} else {
+			console.log('跳转中介认证报名指引');
+		}
+	}
+	// 按揭认证点击
+	function onAnJieRenZhengClick(valid) {
+		if (!isLogin.value) {
+			return
+		}
+		if (valid) {
+			uni.navigateTo({
+				url: '/pages/certificateDetail/certificateDetail?type=anjie&title=广州市房地产按揭从业人员水平认证证书'
+			})
+			console.log('跳转按揭认证报名指引');
+		} else {
+			
+		}
+	}
 	
 	const isLogin = computed(() => {
 		return true

uni.scss

@@ -32,7 +32,7 @@ $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
 $uni-bg-color:#f7f7f7;
-$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-grey:#ffffff;
 $uni-bg-color-hover:#f1f1f1; //点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4); //遮罩颜色