| 提交 | 用户 | 时间 | ||
| 820397 | 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 | > | |
| 9259c2 | 57 | ￥{{ fenToYuan(spu.price) }} |
| 820397 | 58 | </span> |
| H | 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' | |
| 9259c2 | 68 | import { fenToYuan } from '@/utils' |
| 820397 | 69 | |
| H | 70 | /** 商品栏 */ |
| 71 | defineOptions({ name: 'ProductList' }) | |
| 72 | // 定义属性 | |
| 73 | const props = defineProps<{ property: ProductListProperty }>() | |
| 74 | // 商品列表 | |
| 75 | const spuList = ref<ProductSpuApi.Spu[]>([]) | |
| 76 | watch( | |
| 77 | () => props.property.spuIds, | |
| 78 | async () => { | |
| 79 | spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds) | |
| 80 | }, | |
| 81 | { | |
| 82 | immediate: true, | |
| 83 | deep: true | |
| 84 | } | |
| 85 | ) | |
| 86 | // 手机宽度 | |
| 87 | const phoneWidth = ref(375) | |
| 88 | // 容器 | |
| 89 | const containerRef = ref() | |
| 90 | // 商品的列数 | |
| 91 | const columns = ref(2) | |
| 92 | // 滚动条宽度 | |
| 93 | const scrollbarWidth = ref('100%') | |
| 94 | // 商品图大小 | |
| 95 | const imageSize = ref('0') | |
| 96 | // 商品网络列数 | |
| 97 | const gridTemplateColumns = ref('') | |
| 98 | // 计算布局参数 | |
| 99 | watch( | |
| 100 | () => [props.property, phoneWidth, spuList.value.length], | |
| 101 | () => { | |
| 102 | // 计算列数 | |
| 103 | columns.value = props.property.layoutType === 'twoCol' ? 2 : 3 | |
| 104 | // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数 | |
| 105 | const productWidth = | |
| 106 | (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value | |
| 107 | // 商品图布局：2列时，左右布局 3列时，上下布局 | |
| 108 | imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px` | |
| 109 | // 根据布局类型，计算行数、列数 | |
| 110 | if (props.property.layoutType === 'horizSwiper') { | |
| 111 | // 单行显示 | |
| 112 | gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)` | |
| 113 | // 显示滚动条 | |
| 114 | scrollbarWidth.value = `${ | |
| 115 | productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1) | |
| 116 | }px` | |
| 117 | } else { | |
| 118 | // 指定列数 | |
| 119 | gridTemplateColumns.value = `repeat(${columns.value}, auto)` | |
| 120 | // 不滚动 | |
| 121 | scrollbarWidth.value = '100%' | |
| 122 | } | |
| 123 | }, | |
| 124 | { immediate: true, deep: true } | |
| 125 | ) | |
| 126 | onMounted(() => { | |
| 127 | // 提取手机宽度 | |
| 128 | phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375 | |
| 129 | }) | |
| 130 | </script> | |
| 131 | ||
| 132 | <style scoped lang="scss"></style> | |
