4e771fde21
- 添加了 itemDetail 组件，用于展示商品详细信息 - 在 home 页面中集成了瀑布流列表组件 - 实现了商品列表的加载更多和下拉刷新功能 - 添加了商品详情弹窗组件
87 lines
3.2 KiB
Vue
87 lines
3.2 KiB
Vue
<script setup>
|
||
import { showImagePreview } from 'vant';
|
||
|
||
import xImage from '@/components/x-image/index.vue'
|
||
const props = defineProps({
|
||
detailInfo: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
})
|
||
const filteredPriceRules = computed(() => {
|
||
if (!props.detailInfo?.priceRules) return []
|
||
|
||
// 找到第一个price为空的索引
|
||
const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)
|
||
|
||
if (emptyIndex === -1) {
|
||
// 如果没有空价格，返回全部
|
||
return props.detailInfo.priceRules
|
||
} else {
|
||
// 如果有空价格，只返回到空价格之前的数据
|
||
return props.detailInfo.priceRules.slice(0, emptyIndex)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="flex justify-center">
|
||
<xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
|
||
</div>
|
||
<div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
|
||
<div class="text-[#000] text-[16px] mb-[12px]">{{detailInfo?.artworkTitle}}</div>
|
||
<div class="text-#575757 text-[14px] pb-8px">
|
||
<div class="flex mb-[4px]">
|
||
<div class="w-[70px]">{{$t('detail.text1')}}：</div>
|
||
<div>{{detailInfo?.artwork?.artistName??'-'}}</div>
|
||
</div>
|
||
<div class="flex mb-[4px]">
|
||
<div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
|
||
<div>{{detailInfo?.artwork?.ruler??'-'}}</div>
|
||
</div>
|
||
<div class="flex mb-[4px]">
|
||
<div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
|
||
<div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
|
||
</div>
|
||
<div class="flex mb-[4px]">
|
||
<div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</div>
|
||
<div>{{detailInfo?.artwork?.abstract??'-'}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
|
||
<div class="text-[#575757] text-[14px]">{{$t('detail.text6')}}：</div>
|
||
<div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
|
||
</div>
|
||
<div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
|
||
<div class="text-[#B58047] text-[14px]">成交价：</div>
|
||
<div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
|
||
</div>
|
||
<div class="px-[16px] bg-#fff pt-12px pb-18px">
|
||
<div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
|
||
<div v-if="detailInfo?.priceRuleType!=='diy'">
|
||
<xImage :src="detailInfo?.priceRuleImage" alt=""/>
|
||
</div>
|
||
<div v-else class="mt-20px">
|
||
<div class="flex text-#575757 text-12px">
|
||
<div class="grow-1 text-center">序号</div>
|
||
<div class="grow-1 text-center">叫价金额</div>
|
||
</div>
|
||
<div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
|
||
<div class="grow-1 text-center">{{item.index}}</div>
|
||
<div class="grow-1 text-center">{{item.price}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="flex text-[#575757] text-[14px] justify-center">
|
||
<div>固定跳价:</div>
|
||
<div>{{ detailInfo?.priceRuleAdd }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style> |