提交 | 用户 | 时间
|
314507
|
1 |
<template> |
H |
2 |
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> |
|
3 |
<!-- 商品网格 --> |
|
4 |
<div |
|
5 |
class="grid overflow-x-auto" |
|
6 |
:style="{ |
|
7 |
gridGap: `${property.space}px`, |
|
8 |
gridTemplateColumns, |
|
9 |
width: scrollbarWidth |
|
10 |
}" |
|
11 |
> |
|
12 |
<!-- 商品 --> |
|
13 |
<div |
|
14 |
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white" |
|
15 |
:style="{ |
|
16 |
borderTopLeftRadius: `${property.borderRadiusTop}px`, |
|
17 |
borderTopRightRadius: `${property.borderRadiusTop}px`, |
|
18 |
borderBottomLeftRadius: `${property.borderRadiusBottom}px`, |
|
19 |
borderBottomRightRadius: `${property.borderRadiusBottom}px` |
|
20 |
}" |
|
21 |
v-for="(spu, index) in spuList" |
|
22 |
:key="index" |
|
23 |
> |
|
24 |
<!-- 角标 --> |
|
25 |
<div |
|
26 |
v-if="property.badge.show" |
|
27 |
class="absolute left-0 top-0 z-1 items-center justify-center" |
|
28 |
> |
|
29 |
<el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" /> |
|
30 |
</div> |
|
31 |
<!-- 商品封面图 --> |
|
32 |
<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" /> |
|
33 |
<div |
|
34 |
:class="[ |
|
35 |
'flex flex-col gap-8px p-8px box-border', |
|
36 |
{ |
|
37 |
'w-[calc(100%-64px)]': columns === 2, |
|
38 |
'w-full': columns === 3 |
|
39 |
} |
|
40 |
]" |
|
41 |
> |
|
42 |
<!-- 商品名称 --> |
|
43 |
<div |
|
44 |
v-if="property.fields.name.show" |
|
45 |
class="truncate text-12px" |
|
46 |
:style="{ color: property.fields.name.color }" |
|
47 |
> |
|
48 |
{{ spu.name }} |
|
49 |
</div> |
|
50 |
<div> |
|
51 |
<!-- 商品价格 --> |
|
52 |
<span |
|
53 |
v-if="property.fields.price.show" |
|
54 |
class="text-12px" |
|
55 |
:style="{ color: property.fields.price.color }" |
|
56 |
> |
|
57 |
¥{{ spu.price }} |
|
58 |
</span> |
|
59 |
</div> |
|
60 |
</div> |
|
61 |
</div> |
|
62 |
</div> |
|
63 |
</el-scrollbar> |
|
64 |
</template> |
|
65 |
<script setup lang="ts"> |
|
66 |
import { ProductListProperty } from './config' |
|
67 |
import * as ProductSpuApi from '@/api/mall/product/spu' |
|
68 |
|
|
69 |
/** 商品栏 */ |
|
70 |
defineOptions({ name: 'ProductList' }) |
|
71 |
// 定义属性 |
|
72 |
const props = defineProps<{ property: ProductListProperty }>() |
|
73 |
// 商品列表 |
|
74 |
const spuList = ref<ProductSpuApi.Spu[]>([]) |
|
75 |
watch( |
|
76 |
() => props.property.spuIds, |
|
77 |
async () => { |
|
78 |
spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds) |
|
79 |
}, |
|
80 |
{ |
|
81 |
immediate: true, |
|
82 |
deep: true |
|
83 |
} |
|
84 |
) |
|
85 |
// 手机宽度 |
|
86 |
const phoneWidth = ref(375) |
|
87 |
// 容器 |
|
88 |
const containerRef = ref() |
|
89 |
// 商品的列数 |
|
90 |
const columns = ref(2) |
|
91 |
// 滚动条宽度 |
|
92 |
const scrollbarWidth = ref('100%') |
|
93 |
// 商品图大小 |
|
94 |
const imageSize = ref('0') |
|
95 |
// 商品网络列数 |
|
96 |
const gridTemplateColumns = ref('') |
|
97 |
// 计算布局参数 |
|
98 |
watch( |
|
99 |
() => [props.property, phoneWidth, spuList.value.length], |
|
100 |
() => { |
|
101 |
// 计算列数 |
|
102 |
columns.value = props.property.layoutType === 'twoCol' ? 2 : 3 |
|
103 |
// 每列的宽度为:(总宽度 - 间距 * (列数 - 1))/ 列数 |
|
104 |
const productWidth = |
|
105 |
(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value |
|
106 |
// 商品图布局:2列时,左右布局 3列时,上下布局 |
|
107 |
imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px` |
|
108 |
// 根据布局类型,计算行数、列数 |
|
109 |
if (props.property.layoutType === 'horizSwiper') { |
|
110 |
// 单行显示 |
|
111 |
gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)` |
|
112 |
// 显示滚动条 |
|
113 |
scrollbarWidth.value = `${ |
|
114 |
productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1) |
|
115 |
}px` |
|
116 |
} else { |
|
117 |
// 指定列数 |
|
118 |
gridTemplateColumns.value = `repeat(${columns.value}, auto)` |
|
119 |
// 不滚动 |
|
120 |
scrollbarWidth.value = '100%' |
|
121 |
} |
|
122 |
}, |
|
123 |
{ immediate: true, deep: true } |
|
124 |
) |
|
125 |
onMounted(() => { |
|
126 |
// 提取手机宽度 |
|
127 |
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375 |
|
128 |
}) |
|
129 |
</script> |
|
130 |
|
|
131 |
<style scoped lang="scss"></style> |