沙钢智慧能源系统前端代码
houzhongjian
2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015
提交 | 用户 | 时间
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>