49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { fetchListing, type Listing } from '@/api/listings'
|
|
|
|
const route = useRoute()
|
|
const loading = ref(false)
|
|
const listing = ref<Listing | null>(null)
|
|
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
try {
|
|
listing.value = await fetchListing(String(route.params.id))
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page" v-loading="loading">
|
|
<div v-if="listing" class="page-header">
|
|
<p class="eyebrow">{{ listing.server_region }} / {{ listing.login_platform }}</p>
|
|
<h1>{{ listing.title }}</h1>
|
|
<p>{{ listing.description || '号主暂未填写详细说明。' }}</p>
|
|
</div>
|
|
|
|
<div v-if="listing" class="detail-grid">
|
|
<div class="metric-card">
|
|
<span>哈夫币</span>
|
|
<strong>{{ listing.haf_coin_amount }}</strong>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span>时租</span>
|
|
<strong>¥{{ listing.price_hourly }}</strong>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span>押金</span>
|
|
<strong>¥{{ listing.deposit_amount }}</strong>
|
|
</div>
|
|
<div class="metric-card">
|
|
<span>租期</span>
|
|
<strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|