完成信用信息卡预览设计

components/creditCard.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="credit-card-container" :class="`${size}`">
+		<view class="title-box">
+			<view class="title">
+				广州市房地产中介服务人员
+			</view>
+			<view class="text">
+				信用信息卡
+			</view>
+		</view>
+		<view class="desc-box" v-if="!isLogin">
+			<view class="text">
+				请登录后查看
+			</view>
+		</view>
+		<view class="desc-box" v-if="isLogin && !data.id">
+			<view class="text">
+				用户暂未办理信用信息卡<br/>点击了解办理指引&gt;
+			</view>
+		</view>
+		<view class="image-box" v-if="isLogin && data.id">
+			<view class="image-item-box">
+				<cover-image class="photo" :src="data.photo"></cover-image>
+			</view>
+			<view class="image-item-box">
+				<view class="qrcode-box">
+					<cover-image class="qrcode" src="/static/images/zhengshu/qrCode.png"></cover-image>
+				</view>
+				<view class="text">
+					扫码查信用
+				</view>
+			</view>
+		</view>
+		<view class="info-box" v-if="isLogin && data.id">
+			<view class="info-item-box">
+				<view class="label">
+					<span style="letter-spacing: 2em;">姓</span><span>名:</span>
+				</view>
+				<view class="text">
+					{{ data.name }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span style="letter-spacing: 2em;">卡</span><span>号:</span>
+				</view>
+				<view class="text">
+					{{ data.number }}
+				</view>
+			</view>
+			<view class="info-item-box">
+				<view class="label">
+					<span class="label-text">发卡时间:</span>
+				</view>
+				<view class="text">
+					{{ data.time }}
+				</view>
+			</view>
+		</view>
+		<view class="publisher-box" v-if="isLogin && data.id">
+			{{ data.publisher }}&nbsp;制
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, defineProps, computed } from 'vue'
+	import { getToken } from '@/utils/auth.js'
+	
+	const props = defineProps({
+		isLogin: {
+			type: Boolean,
+			default: false
+		},
+		data: {
+			type: Object,
+			default: {
+				id: null,
+				number: null,
+				name: null,
+				time: null,
+				publisher: null,
+				photo: null,
+				qrCode: null
+			}
+		},
+		size: {
+			type: String,
+			default: 'mini' // mini | normal
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.credit-card-container {
+		height: 100%;
+		width: 100%;
+		
+		.title-box {
+			height: 20%;
+			text-align: center;
+			.title {}
+			.text {}
+		}
+		.image-box {
+			height: 40%;
+			display: flex;
+			
+			.image-item-box {
+				width: 50%;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				.photo {
+					height: 100%;
+					width: 100%;
+					object-fit: cover;
+				}
+			}
+		}
+		.info-box {
+			height: 30%;
+			.info-item-box {
+				display: flex;
+				.label {
+					width: 39%;
+				}
+				.text {
+					width: 61%;
+				}
+			}
+		}
+		.publisher-box {
+			height: 10%;
+			text-align: center;
+		}
+	}
+	
+	.mini {
+		@include backgroundImg('/static/images/zhengshu/credit-card-empty.png');
+		padding: 15rpx 10rpx;
+		.title-box {
+			font-weight: bold;
+			font-size: $uni-font-size-4;
+			.title {
+			}
+			.text {
+			}
+		}
+		.desc-box {
+			height: 60%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			.text {
+				font-size: $uni-font-size-3;
+				font-weight: bold;
+			}
+		}
+		.image-box {
+			padding: 0 10rpx;
+			gap: 20rpx;
+			.image-item-box {
+				.qrcode-box {
+					height: 70%;
+					width: 100%;
+				}
+				.text {
+					height: 20%;
+					text-align: center;
+					font-size: $uni-font-size-4;
+					font-weight: bold;
+				}
+			}
+		}
+		.info-box {
+			padding: 10rpx;
+			.info-item-box {
+				font-size: $uni-font-size-4;
+				line-height: 25rpx;
+				font-weight: bold;
+			}
+		}
+		.publisher-box {
+			padding-top: 10rpx;
+			font-size: $uni-font-size-6;
+			font-weight: bold;
+		}
+	}
+	
+	.normal {
+		padding: 25rpx 20rpx;
+		.title-box {
+			height: 18%;
+			font-weight: bold;
+			letter-spacing: 5rpx;
+			line-height: 60rpx;
+			.title {
+				font-size: calc($uni-title-font-size-1 + 3rpx);
+			}
+			.text {
+				font-size: calc($uni-title-font-size-1);
+			}
+		}
+		.image-box {
+			height: 40%;
+			padding: 0 20rpx;
+			gap: 20rpx;
+			.image-item-box {
+				.qrcode-box {
+					height: 75%;
+					width: 100%;
+				}
+				.text {
+					height: 10%;
+					text-align: center;
+					font-size: $uni-title-font-size-2;
+					font-weight: bold;
+				}
+			}
+		}
+		.info-box {
+			height: 35%;
+			padding: 30rpx 20rpx;
+			.info-item-box {
+				font-size: $uni-title-font-size-1;
+				line-height: 80rpx;
+				font-weight: bold;
+			}
+		}
+		.publisher-box {
+			padding-top: 10rpx;
+			font-size: $uni-title-font-size-3;
+			font-weight: bold;
+		}
+	}
+	
+	@mixin backgroundColor($color) {
+		background: $color;
+		background: -moz-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
+		background: -webkit-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
+		background: -o-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
+		background: -ms-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
+		background: repeating-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%), url('/static/images/zhengshu/credit-card-perview.png');
+		background-blend-mode: darken;
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+	}
+
+	.blue {
+		@include backgroundColor(rgb(43, 178, 255));
+	}
+	.red {
+		@include backgroundColor(rgb(255, 53, 54));
+	}
+	.green {
+		@include backgroundColor(rgb(61, 210, 59));
+	}
+</style>

config/index.js

@@ -0,0 +1,4 @@
+/**
+ * 登录令牌key键名
+ */
+export const authorityKey = 'authority'

pages/chat/chat.vue

@@ -14,6 +14,7 @@
 				<view class="main-box">
 					<view class="icon-box">
 						<cover-image class="icon" :src="`/static/chat-icon/${item.type}.png`"></cover-image>
+						<view class="tag" v-show="item.isRead"></view>
 					</view>
 					<view class="content-box">
 						<view class="title">
@@ -27,9 +28,6 @@
 						<view class="date">
 							{{item.time}}
 						</view>
-						<view class="tag">
-							{{item.count}}
-						</view>
 					</view>
 				</view>
 				<view class="line-box"></view>
@@ -57,7 +55,7 @@
 			content: '尊敬的用户，您在2023年8月16日15:00成交缴交会费……',
 			type: 'zhifu',
 			time: '8/16',
-			count: 1
+			isRead: true
 		},
 		{
 			id: '2',
@@ -65,7 +63,7 @@
 			content: '尊敬的用户，您预约2023年8月16日《广州市存量房网……',
 			type: 'jiaoyu',
 			time: '8/16',
-			count: 1
+			isRead: true
 		},
 		{
 			id: '3',
@@ -73,7 +71,7 @@
 			content: '尊敬的用户，您在成功购买2023年8月16日《广州市存……',
 			type: 'goumai',
 			time: '8/16',
-			count: 1
+			isRead: true
 		},
 		{
 			id: '4',
@@ -81,7 +79,7 @@
 			content: '尊敬的用户，今日是您的生日，协会祝你在……',
 			type: 'shengri',
 			time: '8/16',
-			count: 1
+			isRead: false
 		}
 	])
 	function onChatClick(chat) {
@@ -141,10 +139,20 @@
 						display: flex;
 						justify-content: center;
 						align-items: center;
+						position: relative;
 						.icon {
 							width: 70rpx;
 							height: 70rpx;
 						}
+						.tag {
+							position: absolute;
+							right: 5rpx;
+							top: -3rpx;
+							width: 15rpx;
+							height: 15rpx;
+							background-color: $uni-color-error;
+							border-radius: 50%;
+						}
 					}
 					.content-box {
 						width: 67%;
@@ -175,14 +183,6 @@
 							font-size: $uni-font-size-3;
 							color: $uni-text-color-grey;
 						}
-						.tag {
-							font-size: $uni-font-size-3;
-							width: 42rpx;
-							background-color: $uni-color-error;
-							color: $uni-text-color-inverse;
-							border-radius: 20rpx;
-							text-align: center;
-						}
 					}
 				}
 				.line-box {

pages/chatDetail/chatDetail.vue

@@ -1,19 +1,17 @@
 <template>
 	<view class="container">
-		<view class="list-box">
-			<view class="list-item-box" v-for="item in list" :key="item.id">
-				<view class="header-box">
-					<view class="icon-box">
-						<cover-image class="icon" :src="`/static/chat-icon/${item.type}.png`"></cover-image>
-					</view>
-					<view class="title-box">
-						{{item.title}}
-					</view>
+		<view class="chat-box">
+			<view class="header-box">
+				<view class="icon-box">
+					<cover-image class="icon" :src="`/static/chat-icon/${chat.type}.png`"></cover-image>
 				</view>
-				<view class="main-box">
-					{{item.content}}
+				<view class="title-box">
+					{{chat.title}}
 				</view>
 			</view>
+			<view class="main-box">
+				{{chat.content}}
+			</view>
 		</view>
 	</view>
 </template>
@@ -25,22 +23,13 @@
 	const chatId = ref()
 	const chatTitle = ref('')
 	
-	const list = ref([
-		{
-			id: '1',
-			title: '课程提醒',
-			content: '尊敬的用户，您预约2023年8月16日《广州市存量房网……》直播课堂已经开始，请及时观看！',
-			type: 'jiaoyu',
-			time: '8/16',
-		},
-		{
-			id: '2',
-			title: '课程提醒',
-			content: '尊敬的用户，您预约2023年8月16日《xxxx》直播课堂已经开始，请及时观看！',
-			type: 'jiaoyu',
-			time: '8/16',
-		},
-	])
+	const chat = ref({
+		id: '1',
+		title: '课程提醒',
+		content: '尊敬的用户，您预约2023年8月16日《广州市存量房网……》直播课堂已经开始，请及时观看！',
+		type: 'jiaoyu',
+		time: '8/16',
+	})
 	
 	onLoad((load) => {
 		chatId.value = load.id
@@ -56,42 +45,39 @@
 		height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
-		padding: 0 20rpx;
+		padding: 0 40rpx;
 		
-		.list-box {
-			padding: 0 20rpx;
-			.list-item-box {
-				padding: 20rpx;
-				background-color: $uni-text-color-inverse;
-				margin-bottom: 30rpx;
-				border-radius: $uni-card-border-radius;
-				&:active {
-					background-color: $uni-bg-color-hover;
-				}
-				.header-box {
-					display: flex;
-					align-items: center;
-					margin-bottom: 10rpx;
-					.icon-box {
-						width: 50rpx;
-						.icon {
-							width: 35rpx;
-							height: 35rpx;
-						}
-					}
-					.title-box {
-						font-size: $uni-title-font-size-2;
-						font-weight: bolder;
+		.chat-box {
+			padding: 20rpx;
+			background-color: $uni-text-color-inverse;
+			margin-bottom: 30rpx;
+			border-radius: $uni-card-border-radius;
+			&:active {
+				background-color: $uni-bg-color-hover;
+			}
+			.header-box {
+				display: flex;
+				align-items: center;
+				margin-bottom: 10rpx;
+				.icon-box {
+					width: 50rpx;
+					.icon {
+						width: 35rpx;
+						height: 35rpx;
 					}
 				}
-				.main-box {
-					padding: 10rpx;
-					padding-bottom: 0;
-					font-size: $uni-font-size-1;
-					font-weight: bold;
-					line-height: 40rpx;
+				.title-box {
+					font-size: $uni-title-font-size-2;
+					font-weight: bolder;
 				}
 			}
+			.main-box {
+				padding: 10rpx;
+				padding-bottom: 0;
+				font-size: $uni-font-size-1;
+				font-weight: bold;
+				line-height: 40rpx;
+			}
 		}
 	}
 </style>

pages/personalCenter/personalCenter.vue

@@ -6,7 +6,7 @@
 					<cover-image class="icon" :src="`/static/chat-icon/${user.icon}.png`"></cover-image>
 				</view>
 				<view class="name-box">
-					<view class="name" v-if="authority">
+					<view class="name" v-if="isLogin">
 						<view class="text">
 							{{user.username}}
 						</view>
@@ -28,7 +28,7 @@
 						任职机构:
 					</view>
 					<view class="text">
-						{{authority ? user.employment : ''}}
+						{{isLogin ? user.employment : ''}}
 					</view>
 				</view>
 				<view class="info-item-box">
@@ -36,7 +36,7 @@
 						机构备案证号:
 					</view>
 					<view class="text">
-						{{authority ? user.recordCertificateNumber : ''}}
+						{{isLogin ? user.recordCertificateNumber : ''}}
 					</view>
 				</view>
 			</view>
@@ -46,14 +46,20 @@
 				我的证明
 			</view>
 			<view class="list-box">
-				<view class="list-item-box" :class="[authority ? 'zhongjie-front-zhiyin' : 'zhongjie-front-login']">
+				<view class="list-item-box" @click="onShowCreditCard(isLogin && creditCard.id)">
+					<CreditCard :isLogin="isLogin" :data="creditCard"></CreditCard>
 				</view>
-				<view class="list-item-box" :class="[authority ? 'zhongjie-back-zhiyin' : 'zhongjie-back-login']">
+				<view class="list-item-box" :class="[isLogin ? (user.zhongjierenzheng ? 'zhongjie-back' : 'zhongjie-back-zhiyin') : 'zhongjie-back-login']">
 				</view>
-				<view class="list-item-box" :class="[authority ? 'anjie-back-zhiyin' : 'anjie-back-login']">
+				<view class="list-item-box" :class="[isLogin ? (user.anjierenzheng ? 'anjie-back' : 'anjie-back-zhiyin') : 'anjie-back-login']">
 				</view>
 			</view>
 		</view>
+		<u-popup v-model="showCreditCard" mode="center">
+			<view class="certificate-preview-box">
+				<CreditCard :isLogin="isLogin" size="normal red" :data="creditCard"></CreditCard>
+			</view>
+		</u-popup>
 		<view class="menu-box">
 			<view class="menu-item-box">
 				<view class="icon-box">
@@ -137,19 +143,49 @@
 </template>
 
 <script setup>
-	import { ref } from 'vue'
+	import CreditCard from '@/components/creditCard.vue'
+	
+	import { ref, computed } from 'vue'
 	import { onLoad } from '@dcloudio/uni-app'
+	import { getToken } from '@/utils/auth.js'
 	
+	// 用户信息
 	const user = ref({
 		icon: 'jiaoyu',
 		username: '某某某',
 		employment: '广州市xx地产有限公司',
-		recordCertificateNumber: '123xxxx'
+		recordCertificateNumber: '123xxxx',
+		zhongjierenzheng: true, // 中介认证
+		anjierenzheng: true // 按揭认证
+	})
+	
+	// 是否预览信用信息卡
+	const showCreditCard = ref(false)
+	// 信用信息卡
+	const creditCard = ref({
+		id: '1',
+		number: 'GZ2028000001',
+		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',
+		qrCode: '/static/images/zhengshu/qrCode.png'
+	})
+	
+	function onShowCreditCard(auth) {
+		console.log('onShowCreditCard');
+		showCreditCard.value = false
+		if (auth) {
+			showCreditCard.value = true
+		}
+	}
+	
+	const isLogin = computed(() => {
+		return true
+		// return getToken() ? true : false
 	})
 	
-	const authority = ref('')
 	onLoad(() => {
-		// authority.value = uni.getStorageSync('authority')
 	})
 </script>
 
@@ -247,15 +283,6 @@
 					}
 				}
 				
-				.zhengshu-empty {
-					@include backgroundImg('/static/images/zhengshu/zhengshu-empty.png')
-				}
-				.zhongjie-front-login {
-					@include backgroundImg('/static/images/zhengshu/zhongjie-front-login.png')
-				}
-				.zhongjie-front-zhiyin {
-					@include backgroundImg('/static/images/zhengshu/zhongjie-front-zhiyin.png')
-				}
 				.zhongjie-back {
 					@include backgroundImg('/static/images/zhengshu/zhongjie-back.png')
 				}
@@ -277,6 +304,11 @@
 			}
 		}
 		
+		.certificate-preview-box {
+			height: 65vh;
+			width: 75vw;
+		}
+		
 		.menu-box {
 			padding: 20rpx 20rpx;
 			margin: 10rpx 0;

store/authStore.js

@@ -22,8 +22,8 @@ export const useAuthStore = defineStore('auth', {
 		}
 	},
 	getters: {
-	    isAuthenticated(state) {
-	      return !!state.token; // 如果 token 存在，返回 true；否则返回 false
-	    }
-	  }
+		isAuthenticated(state) {
+			return !!state.token; // 如果 token 存在，返回 true；否则返回 false
+		}
+	}
 })

uni.scss

@@ -48,6 +48,9 @@ $uni-title-font-size-3: 24rpx;
 $uni-font-size-1: 24rpx;
 $uni-font-size-2: 20rpx;
 $uni-font-size-3: 18rpx;
+$uni-font-size-4: 16rpx;
+$uni-font-size-5: 14rpx;
+$uni-font-size-6: 12rpx;
 
 /* 卡片圆角 */
 $uni-card-border-radius: 20rpx;

utils/auth.js

@@ -1,13 +1,14 @@
-const TokenKey = 'token'
+import { authorityKey } from '@/config/index.js'
+
 // token
 export function getToken() {
-  return uni.getStorageSync(TokenKey)
+  return uni.getStorageSync(authorityKey)
 }
 
 export function setToken(token) {
-  return uni.setStorageSync(TokenKey, token)
+  return uni.setStorageSync(authorityKey, token)
 }
 
 export function removeToken() {
-  return uni.removeStorageSync(TokenKey)
+  return uni.removeStorageSync(authorityKey)
 }