96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
||
<van-popup
|
||
v-model:show="props.show"
|
||
position="bottom"
|
||
:style="{ height: props.height }"
|
||
round
|
||
closeable
|
||
@closed="handleClose"
|
||
>
|
||
<div class="p-[16px] overflow-y-auto h-full">
|
||
<!-- 商品基本信息 -->
|
||
<div class="flex flex-col gap-[12px]">
|
||
<img
|
||
:src="props.detail?.artwork?.hdPic"
|
||
class="w-full rounded-[4px] object-cover"
|
||
:alt="props.detail?.name"
|
||
/>
|
||
<div class="text-[16px] font-medium text-[#000]">
|
||
{{ props.detail?.name }}
|
||
</div>
|
||
|
||
<!-- 价格信息 -->
|
||
<div class="flex flex-col gap-[8px]">
|
||
<div class="text-[14px] text-[#575757]">
|
||
起拍价：{{ formatPrice(props.detail?.startPrice) }}
|
||
</div>
|
||
<div v-if="props.detail?.soldPrice" class="text-[14px] text-[#b58047]">
|
||
成交价：{{ formatPrice(props.detail?.soldPrice) }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品详情 -->
|
||
<div class="mt-[16px]">
|
||
<div class="text-[16px] font-medium mb-[12px]">商品详情</div>
|
||
<div class="flex flex-col gap-[8px]">
|
||
<div class="flex justify-between text-[14px]">
|
||
<span class="text-[#575757]">尺寸</span>
|
||
<span>{{ props.detail?.artwork?.size || '-' }}</span>
|
||
</div>
|
||
<div class="flex justify-between text-[14px]">
|
||
<span class="text-[#575757]">年代</span>
|
||
<span>{{ props.detail?.artwork?.year || '-' }}</span>
|
||
</div>
|
||
<div class="flex justify-between text-[14px]">
|
||
<span class="text-[#575757]">材质</span>
|
||
<span>{{ props.detail?.artwork?.material || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作品描述 -->
|
||
<div v-if="props.detail?.artwork?.description" class="mt-[16px]">
|
||
<div class="text-[16px] font-medium mb-[12px]">作品描述</div>
|
||
<div class="text-[14px] text-[#575757] whitespace-pre-wrap">
|
||
{{ props.detail?.artwork?.description }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { formatPrice } from '~/utils/format'
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '90vh'
|
||
},
|
||
detail: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:show'])
|
||
|
||
const handleClose = () => {
|
||
emit('update:show', false)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
:deep(.van-popup) {
|
||
max-height: 90vh;
|
||
}
|
||
|
||
:deep(.van-popup__close-icon) {
|
||
color: #000;
|
||
}
|
||
</style> |