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
6 months ago
|
<!--商品列表，推荐商品，首页商品展示-->
|
||
|
|
<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>
|