From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/ProductList/index.vue | 132 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 132 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/ProductList/index.vue b/src/components/DiyEditor/components/mobile/ProductList/index.vue
new file mode 100644
index 0000000..a51fc07
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ProductList/index.vue
@@ -0,0 +1,132 @@
+<template>
+ <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+ <!-- 鍟嗗搧缃戞牸 -->
+ <div
+ class="grid overflow-x-auto"
+ :style="{
+ gridGap: `${property.space}px`,
+ gridTemplateColumns,
+ width: scrollbarWidth
+ }"
+ >
+ <!-- 鍟嗗搧 -->
+ <div
+ class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+ :style="{
+ borderTopLeftRadius: `${property.borderRadiusTop}px`,
+ borderTopRightRadius: `${property.borderRadiusTop}px`,
+ borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+ borderBottomRightRadius: `${property.borderRadiusBottom}px`
+ }"
+ v-for="(spu, index) in spuList"
+ :key="index"
+ >
+ <!-- 瑙掓爣 -->
+ <div
+ v-if="property.badge.show"
+ class="absolute left-0 top-0 z-1 items-center justify-center"
+ >
+ <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
+ </div>
+ <!-- 鍟嗗搧灏侀潰鍥� -->
+ <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
+ <div
+ :class="[
+ 'flex flex-col gap-8px p-8px box-border',
+ {
+ 'w-[calc(100%-64px)]': columns === 2,
+ 'w-full': columns === 3
+ }
+ ]"
+ >
+ <!-- 鍟嗗搧鍚嶇О -->
+ <div
+ v-if="property.fields.name.show"
+ class="truncate text-12px"
+ :style="{ color: property.fields.name.color }"
+ >
+ {{ spu.name }}
+ </div>
+ <div>
+ <!-- 鍟嗗搧浠锋牸 -->
+ <span
+ v-if="property.fields.price.show"
+ class="text-12px"
+ :style="{ color: property.fields.price.color }"
+ >
+ 锟{ fenToYuan(spu.price) }}
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { ProductListProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { fenToYuan } from '@/utils'
+
+/** 鍟嗗搧鏍� */
+defineOptions({ name: 'ProductList' })
+// 瀹氫箟灞炴��
+const props = defineProps<{ property: ProductListProperty }>()
+// 鍟嗗搧鍒楄〃
+const spuList = ref<ProductSpuApi.Spu[]>([])
+watch(
+ () => props.property.spuIds,
+ async () => {
+ spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds)
+ },
+ {
+ immediate: true,
+ deep: true
+ }
+)
+// 鎵嬫満瀹藉害
+const phoneWidth = ref(375)
+// 瀹瑰櫒
+const containerRef = ref()
+// 鍟嗗搧鐨勫垪鏁�
+const columns = ref(2)
+// 婊氬姩鏉″搴�
+const scrollbarWidth = ref('100%')
+// 鍟嗗搧鍥惧ぇ灏�
+const imageSize = ref('0')
+// 鍟嗗搧缃戠粶鍒楁暟
+const gridTemplateColumns = ref('')
+// 璁＄畻甯冨眬鍙傛暟
+watch(
+ () => [props.property, phoneWidth, spuList.value.length],
+ () => {
+ // 璁＄畻鍒楁暟
+ columns.value = props.property.layoutType === 'twoCol' ? 2 : 3
+ // 姣忓垪鐨勫搴︿负锛氾紙鎬诲搴� - 闂磋窛 * (鍒楁暟 - 1)锛�/ 鍒楁暟
+ const productWidth =
+ (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+ // 鍟嗗搧鍥惧竷灞�锛�2鍒楁椂锛屽乏鍙冲竷灞� 3鍒楁椂锛屼笂涓嬪竷灞�
+ imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
+ // 鏍规嵁甯冨眬绫诲瀷锛岃绠楄鏁般�佸垪鏁�
+ if (props.property.layoutType === 'horizSwiper') {
+ // 鍗曡鏄剧ず
+ gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`
+ // 鏄剧ず婊氬姩鏉�
+ scrollbarWidth.value = `${
+ productWidth * spuList.value.length + props.property.space * (spuList.value.length - 1)
+ }px`
+ } else {
+ // 鎸囧畾鍒楁暟
+ gridTemplateColumns.value = `repeat(${columns.value}, auto)`
+ // 涓嶆粴鍔�
+ scrollbarWidth.value = '100%'
+ }
+ },
+ { immediate: true, deep: true }
+)
+onMounted(() => {
+ // 鎻愬彇鎵嬫満瀹藉害
+ phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+})
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0