53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="column q-gutter-xs">
|
||
|
|
<!-- 동네 찰떡지수 (전체 노출) -->
|
||
|
|
<div v-if="hood" class="text-caption row items-center no-wrap">
|
||
|
|
<q-icon name="groups" size="14px" color="teal" class="q-mr-xs" />
|
||
|
|
<span class="text-weight-medium text-teal-8">동네 찰떡지수 {{ hood.percent }}%</span>
|
||
|
|
<span class="text-grey-6 q-ml-xs">({{ hood.label }})</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 우리 찰떡지수 (매칭 이력 있는 쌍만) -->
|
||
|
|
<div v-if="pair?.matched" class="text-caption row items-center no-wrap">
|
||
|
|
<q-icon name="favorite" size="14px" color="pink-5" class="q-mr-xs" />
|
||
|
|
<template v-if="pair.locked">
|
||
|
|
<span class="text-weight-medium text-pink-6">우리 찰떡지수</span>
|
||
|
|
<q-badge color="amber-7" class="q-ml-xs" text-color="white">유료회원 전용</q-badge>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<span class="text-weight-medium text-pink-6">우리 찰떡지수 {{ pair.percent }}%</span>
|
||
|
|
<span class="text-grey-6 q-ml-xs">({{ pair.label }})</span>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from 'vue'
|
||
|
|
import { affinityApi, type NeighborhoodScore, type PairScore } from '@/api/affinity'
|
||
|
|
|
||
|
|
const props = defineProps<{ myDogId: number; otherDogId: number }>()
|
||
|
|
|
||
|
|
const hood = ref<NeighborhoodScore | null>(null)
|
||
|
|
const pair = ref<PairScore | null>(null)
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => [props.myDogId, props.otherDogId] as const,
|
||
|
|
() => void load(),
|
||
|
|
{ immediate: true },
|
||
|
|
)
|
||
|
|
|
||
|
|
async function load() {
|
||
|
|
// 부가 정보 — 실패해도 카드 나머지는 정상 표시
|
||
|
|
try {
|
||
|
|
hood.value = await affinityApi.neighborhood(props.otherDogId)
|
||
|
|
} catch {
|
||
|
|
hood.value = null
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
pair.value = await affinityApi.pair(props.myDogId, props.otherDogId)
|
||
|
|
} catch {
|
||
|
|
pair.value = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|