<script setup lang="ts">
|
import { computed, onMounted, ref } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { getServiceApplicationDetail, updateServiceApplicationStatus } from '../api/admin'
|
import type { ServiceApplication } from '../types/admin'
|
|
const route = useRoute()
|
const detail = ref<ServiceApplication>()
|
const loading = ref(false)
|
|
function text(value?: string | number) {
|
return value === undefined || value === null || value === '' ? '-' : String(value)
|
}
|
|
function dateTimeText(value?: string | number) {
|
return text(value).replace('T', ' ')
|
}
|
|
const cardholderInfo = computed(() => [
|
{ label: '持卡人姓名：', value: text(detail.value?.talentName) },
|
{ label: '手机号：', value: text(detail.value?.talentMobile) },
|
{ label: '人才等级：', value: text(detail.value?.talentLevel) },
|
])
|
|
const reservationInfo = computed(() => [
|
{ label: '酒店名称：', value: text(detail.value?.merchantName) },
|
{ label: '联系电话：', value: text(detail.value?.contactMobile) },
|
{ label: '房型：', value: text(detail.value?.productName) },
|
{ label: '期望入住时间：', value: text(detail.value?.expectedTime) },
|
{ label: '入住人数：', value: detail.value?.guestCount ? `${detail.value.guestCount}人` : '-' },
|
{ label: '提交时间：', value: dateTimeText(detail.value?.submittedAt) },
|
])
|
|
const statusInfo = computed(() => [
|
{ label: '状态：', value: text(detail.value?.status) },
|
{ label: '处理时间：', value: dateTimeText(detail.value?.handledAt) },
|
{ label: '处理人：', value: text(detail.value?.handlerName) },
|
])
|
|
const handled = computed(() => detail.value?.status === '已处理')
|
|
async function loadDetail() {
|
loading.value = true
|
try {
|
detail.value = await getServiceApplicationDetail(String(route.params.id))
|
} finally {
|
loading.value = false
|
}
|
}
|
|
async function markHandled() {
|
detail.value = await updateServiceApplicationStatus(String(route.params.id), '已处理')
|
ElMessage.success('已处理')
|
}
|
|
onMounted(loadDetail)
|
</script>
|
|
<template>
|
<div v-loading="loading" class="hotel-reservation-detail-page">
|
<section class="hotel-reservation-detail-panel">
|
<div class="reservation-detail-section">
|
<h3>持卡人信息</h3>
|
<div class="reservation-detail-grid single-line">
|
<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 reservation-grid">
|
<div v-for="item in reservationInfo" :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 single-line">
|
<div v-for="item in statusInfo" :key="item.label" class="reservation-detail-item">
|
<span>{{ item.label }}</span>
|
<strong>{{ item.value }}</strong>
|
</div>
|
</div>
|
</div>
|
</section>
|
|
<el-button v-if="!handled" type="primary" class="reservation-detail-action" @click="markHandled">已处理</el-button>
|
</div>
|
</template>
|
