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>
|