<script setup lang="ts">
|
import { computed, onMounted, ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { getFamilyCardApplicationDetail, unbindFamilyCard } from '../api/admin'
|
import type { FamilyCardApplication } from '../types/admin'
|
|
const route = useRoute()
|
const detail = ref<FamilyCardApplication>()
|
const loading = ref(false)
|
const unbinding = ref(false)
|
|
function text(value?: string | number | null) {
|
return value === undefined || value === null || value === '' ? '-' : String(value)
|
}
|
|
function genderText(gender?: number | string) {
|
if (gender === 1 || gender === '1') return '男'
|
if (gender === 2 || gender === '2') return '女'
|
return '-'
|
}
|
|
const isBound = computed(() => detail.value?.status === 1 || detail.value?.status === '1')
|
const cardholderInfo = computed(() => [
|
{ label: '持卡人姓名：', value: text(detail.value?.talentName) },
|
{ label: '身份证号：', value: text(detail.value?.talentIdCardNo) },
|
{ label: '联系方式：', value: text(detail.value?.talentMobile) },
|
{ label: '联系地址：', value: text(detail.value?.contactAddress) },
|
{ label: '工作地址：', value: text(detail.value?.workAddress) },
|
{ label: '性别：', value: genderText(detail.value?.gender) },
|
{ label: '人才等级：', value: text(detail.value?.cardLevel) },
|
{ label: '当前家属卡数量：', value: `${detail.value?.currentFamilyCardCount ?? 0}/${detail.value?.familyCardLimit ?? 2}` },
|
])
|
const familyInfo = computed(() => [
|
{ label: '家属姓名：', value: text(detail.value?.familyName || detail.value?.dependentName) },
|
{ label: '身份证号：', value: text(detail.value?.idCardNo || detail.value?.dependentIdCardNo) },
|
{ label: '手机号：', value: text(detail.value?.familyMobile || detail.value?.dependentMobile) },
|
{ label: '与持卡人关系：', value: text(detail.value?.relationship || detail.value?.relation) },
|
])
|
|
async function loadDetail() {
|
loading.value = true
|
try {
|
detail.value = await getFamilyCardApplicationDetail(String(route.params.id))
|
} finally {
|
loading.value = false
|
}
|
}
|
|
async function unbind() {
|
if (!detail.value) return
|
await ElMessageBox.confirm('解除绑定后，该家属卡将无法继续使用。确定解除吗？', '解除绑定', {
|
type: 'warning',
|
confirmButtonText: '确定解绑',
|
cancelButtonText: '取消',
|
})
|
unbinding.value = true
|
try {
|
detail.value = await unbindFamilyCard(detail.value.id)
|
ElMessage.success('解除绑定成功')
|
} finally {
|
unbinding.value = false
|
}
|
}
|
|
onMounted(loadDetail)
|
</script>
|
|
<template>
|
<div v-loading="loading" class="family-card-detail-page">
|
<section class="family-card-detail-panel">
|
<div class="reservation-detail-section">
|
<h3>持卡人信息</h3>
|
<div class="reservation-detail-grid family-card-owner-grid">
|
<div v-for="item in cardholderInfo" :key="item.label" class="reservation-detail-item">
|
<span>{{ item.label }}</span><strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
<div class="reservation-detail-section">
|
<h3>家属信息</h3>
|
<div class="reservation-detail-grid family-card-member-grid">
|
<div v-for="item in familyInfo" :key="item.label" class="reservation-detail-item">
|
<span>{{ item.label }}</span><strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
</section>
|
<div class="family-card-detail-actions">
|
<el-button v-if="isBound" type="primary" :loading="unbinding" @click="unbind">解除绑定</el-button>
|
<span v-else class="family-card-unbound-tip">该家属卡已解绑</span>
|
</div>
|
</div>
|
</template>
|
