Ver Fonte

feat(qr): 动态显示身份码页面标题和描述

- 根据用户角色动态设置页面标题和描述文案
- 更新角色标签文案和默认值
- 调整页面标题、角色标签、用户名和描述文字体大小
- 优化角色映射逻辑,支持医生、患者和家属三种身份
- 完善空值处理,提升用户体验
mcbaiyun há 1 mês atrás
pai
commit
14a457cadf
1 ficheiros alterados com 29 adições e 11 exclusões
  1. 29 11
      src/pages/public/profile/qr/index.vue

+ 29 - 11
src/pages/public/profile/qr/index.vue

@@ -5,11 +5,11 @@
       <view class="qr-card">
         <view class="user-info">
           <view class="title-row">
-            <text class="card-title">个人身份码</text>
+            <text class="card-title">{{ getPageTitle(user.role) }}</text>
             <view class="role-badge">{{ getRoleText(user.role) }}</view>
           </view>
           <text class="user-name">{{ user.nickname || '未知用户' }}</text>
-          <text class="qr-desc">扫码查看我的健康档案</text>
+          <text class="qr-desc">{{ getPageDesc(user.role) }}</text>
         </view>
         <view class="qr-container">
           <canvas
@@ -33,13 +33,31 @@ import drawQrcode from 'weapp-qrcode'
 const user = ref<{ nickname?: string; role?: string | number; openid?: string; wx_openid?: string }>({})
 const qrData = ref('')
 
+const getPageTitle = (role: string | number | undefined) => {
+  const roleMap: { [key: number]: string } = {
+    2: '医生身份码',
+    3: '个人身份码',
+    4: '家属身份码'
+  }
+  return roleMap[Number(role)] || '身份码'
+}
+
+const getPageDesc = (role: string | number | undefined) => {
+  const roleMap: { [key: number]: string } = {
+    2: '扫码绑定医生',
+    3: '扫码绑定患者或查看健康档案',
+    4: '扫码绑定家属或查看家属健康数据'
+  }
+  return roleMap[Number(role)] || '扫码查看信息'
+}
+
 const getRoleText = (role: string | number | undefined) => {
   const roleMap: { [key: number]: string } = {
-    2: '医生',
-    3: '患者',
-    4: '患者家属'
+    2: '医生',
+    3: '患者',
+    4: '家属'
   }
-  return roleMap[Number(role)] || '未知身份'
+  return roleMap[Number(role)] || '身份'
 }
 
 const loadUser = () => {
@@ -142,7 +160,7 @@ onShow(() => {
 .card-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: 40rpx;
   font-weight: bold;
   color: #2c3e50;
   text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
@@ -152,9 +170,9 @@ onShow(() => {
   margin-left: auto;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  padding: 6rpx 12rpx;
+  padding: 8rpx 14rpx;
   border-radius: 16rpx;
-  font-size: 20rpx;
+  font-size: 24rpx;
   font-weight: 500;
   box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
 }
@@ -172,7 +190,7 @@ onShow(() => {
 }
 
 .user-name {
-  font-size: 48rpx;
+  font-size: 56rpx;
   font-weight: bold;
   color: #2c3e50;
   display: block;
@@ -181,7 +199,7 @@ onShow(() => {
 }
 
 .qr-desc {
-  font-size: 28rpx;
+  font-size: 32rpx;
   color: #95a5a6;
   font-weight: 400;
   display: block;