azon_seeker/src/components/DetailDescription.vue
2025-05-23 09:44:35 +08:00

51 lines
1.9 KiB
Vue

<script lang="ts" setup>
import type { AmazonDetailItem } from '~/logic/page-worker/types';
const props = defineProps<{ model: AmazonDetailItem }>();
</script>
<template>
<div class="detail-description">
<n-descriptions label-placement="left" bordered :column="4" label-style="min-width: 100px">
<n-descriptions-item label="ASIN" :span="2">
{{ props.model.asin }}
</n-descriptions-item>
<n-descriptions-item label="评价">
{{ props.model.rating || '-' }}
</n-descriptions-item>
<n-descriptions-item label="评论数">
{{ props.model.ratingCount || '-' }}
</n-descriptions-item>
<n-descriptions-item label="大类">
{{ props.model.category1?.name || '-' }}
</n-descriptions-item>
<n-descriptions-item label="排名">
{{ props.model.category1?.rank || '-' }}
</n-descriptions-item>
<n-descriptions-item label="小类">
{{ props.model.category2?.name || '-' }}
</n-descriptions-item>
<n-descriptions-item label="排名">
{{ props.model.category2?.rank || '-' }}
</n-descriptions-item>
<n-descriptions-item label="图片链接" :span="4">
<div v-for="link in props.model.imageUrls">
{{ link }}
</div>
</n-descriptions-item>
<n-descriptions-item v-if="props.model.topReviews" label="精选评论" :span="4">
<div v-for="review in props.model.topReviews" style="margin-bottom: 5px">
<h3 style="margin: 0">{{ review.username }}: {{ review.title }}</h3>
<div style="color: gray; font-size: smaller">{{ review.rating }}</div>
<div v-for="paragraph in review.content.split('\n')">
{{ paragraph }}
</div>
<div style="color: gray; font-size: smaller">{{ review.dateInfo }}</div>
</div>
</n-descriptions-item>
</n-descriptions>
</div>
</template>
<style lang="scss" scoped></style>