You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.5 KiB
64 lines
2.5 KiB
<!--商品列表，推荐商品，首页商品展示--> |
|
<script setup lang="ts"> |
|
import {linkNavigateTo} from "~/utils/util"; |
|
import { toRefs } from 'vue' |
|
const props = defineProps({ |
|
//列表数据 |
|
item: { |
|
type: Object, |
|
default: null, |
|
}, |
|
//图片大小 |
|
sizeData: { |
|
type: Object, |
|
default: { |
|
width: '228px', |
|
height: '228px', |
|
}, |
|
} |
|
}) |
|
const { item, sizeData } = toRefs(props) |
|
|
|
/** |
|
* 地址跳转 |
|
*/ |
|
const handlerNuxtLink = async (id: number)=>{ |
|
await linkNavigateTo(`/product/detail/${id}`,{type: 'normal'}) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="productItem cursors"> |
|
<div data-aos-anchor-placement="top-bottom" @click="handlerNuxtLink(item.id)"> |
|
<div class="borRadius bg-#FFFFFF" :style="{width:sizeData.width}"> |
|
<el-image class="backImg" :src="item.image" :style="{width:sizeData.width,height:sizeData.height}"></el-image> |
|
<div class="bg-white px15px py-14px content h-132px flex flex-justify-between" style="margin-top: -5px;flex-direction: column;"> |
|
<div class="line2 text-14px fontColor333 mb15px products-name h-36px lh-19px acea-row"> |
|
<div v-if="item.productTags && item.productTags.locationLeftTitle.length" class="inline-block text-12px bg-color text-#fff b-rd-2px py-2px mr-6px px-4px line-heightOne">{{item.productTags.locationLeftTitle[0].tagName}}</div>{{item.name}}</div> |
|
<div v-if="item.productTags && item.productTags.locationUnderTitle.length" class="acea-row mb14px"> |
|
<div v-for="items in item.productTags.locationUnderTitle.length>3?item.productTags.locationUnderTitle.slice(0,3):item.productTags.locationUnderTitle" :key="items.id" class="text-12px line-heightOne font-color base-border b-color-#E93323 b-rd-2px px4px py2px mr8px productTags">{{items.tagName}}</div> |
|
</div> |
|
<div class="flex-between-center"> |
|
<div class="text-12px font-color"><span class="oppoSans-M">￥</span><span class="dinProSemiBold text-20px lh-19px font-600">{{item.price}}</span></div> |
|
<div class="text-12px text-#999">已售{{item.sales}}{{item.unitName}}</div> |
|
</div> |
|
<div v-if="item.merName" class="mt-15px"> |
|
<span class="iconfont icon-guanzhudianpu mr-5px font-color"></span> |
|
<span class="text-12px text-#666">{{item.merName}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.backImg{ |
|
border-top-left-radius: 16px; |
|
border-top-right-radius: 16px; |
|
} |
|
.content{ |
|
border-bottom-left-radius: 16px; |
|
border-bottom-right-radius: 16px; |
|
} |
|
</style> |