fix(family-card): 优化家属信息展示

shinnosuke

2026-08-13 94a016859dc18db321f1925a056bf55e00ed8b22

fix(family-card): 优化家属信息展示

 rencaika/pages/family-card/family-card.uvue

@@ -19,7 +19,7 @@
                    <view v-for="member in familyMembers" :key="member.id" class="family-card">
                        <view class="family-avatar"><text>{{member.initial}}</text></view>
                        <view class="family-info">
                            <view class="family-name-row"><text class="family-name">{{member.name}}</text><image src="/static/benefits-assets/map-pin.svg" mode="aspectFit"></image><text class="family-relation">{{member.relationship}}</text></view>
                            <view class="family-name-row"><text class="family-name">{{member.name}}</text><image class="relation-icon" src="/static/family-card-assets/heart.svg" mode="aspectFit"></image><text class="family-relation">{{member.relationship}}</text></view>
                            <view class="family-phone-row"><image src="/static/merchant-assets/phone.svg" mode="aspectFit"></image><text>{{member.mobile}}</text></view>
                            <view v-if="member.status == 2 && member.auditRemark != ''" class="family-reject"><text>驳回原因：{{member.auditRemark}}</text></view>
                        </view>
@@ -135,7 +135,7 @@
    .family-info { min-width: 0; flex: 1; margin-left: 24rpx; }
    .family-name-row { display: flex; min-width: 0; height: 42rpx; flex-direction: row; align-items: center; }
    .family-name { color: #20252D; font-size: 30rpx; line-height: 42rpx; font-weight: 700; white-space: nowrap; }
    .family-name-row image { width: 24rpx; height: 24rpx; margin-left: 29rpx; opacity: .55; }
    .relation-icon { width: 25rpx; height: 25rpx; margin-left: 29rpx; flex-shrink: 0; }
    .family-relation { margin-left: 8rpx; color: #697381; font-size: 23rpx; line-height: 32rpx; white-space: nowrap; }
    .family-phone-row { display: flex; height: 36rpx; margin-top: 14rpx; flex-direction: row; align-items: center; }
    .family-phone-row image { width: 25rpx; height: 25rpx; opacity: .62; }

 rencaika/static/family-card-assets/heart.svg

New file
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z" stroke="#98A2AE" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

 talent-card-admin/src/views/FamilyCardApplicationDetailView.vue

@@ -15,6 +15,10 @@
  return value === undefined || value === null || value === '' ? '-' : String(value)
}

function dateTimeText(value?: string | null) {
  return value ? value.replace('T', ' ') : '-'
}

function genderText(gender?: number | string) {
  if (gender === 1 || gender === '1') return '男'
  if (gender === 2 || gender === '2') return '女'
@@ -46,7 +50,6 @@
}

const cardholderInfo = computed(() => [
  { label: '申请编号：', value: text(detail.value?.applicationNo || detail.value?.applyNo) },
  { label: '持卡人姓名：', value: text(detail.value?.talentName) },
  { label: '持卡人身份证号：', value: text(detail.value?.talentIdCardNo) },
  { label: '手机号：', value: text(detail.value?.talentMobile) },
@@ -55,8 +58,6 @@
  { label: '性别：', value: genderText(detail.value?.gender) },
  { label: '卡片等级：', value: text(detail.value?.cardLevel) },
  { label: '人才卡号：', value: text(detail.value?.talentCardNo) },
  { label: '有效期：', value: text(detail.value?.validStart) + ' 至 ' + text(detail.value?.validEnd) },
  { label: '发卡时间：', value: text(detail.value?.issueTime) },
  { label: '当前家属卡数量：', value: String(detail.value?.currentFamilyCardCount || 0) + '/' + String(detail.value?.familyCardLimit || 2) },
])

@@ -66,8 +67,8 @@
  { label: '手机号：', value: familyMobile() },
  { label: '与持卡人关系：', value: relationship() },
  { label: '审核状态：', value: statusText(detail.value?.status) },
  { label: '申请时间：', value: text(detail.value?.applyTime) },
  { label: '审核时间：', value: text(detail.value?.auditTime) },
  { label: '申请时间：', value: dateTimeText(detail.value?.applyTime) },
  { label: '审核时间：', value: dateTimeText(detail.value?.auditTime) },
  { label: '审核人：', value: text(detail.value?.auditorName || detail.value?.auditBy) },
  { label: '审核备注：', value: text(detail.value?.auditRemark) },
])