@tplc/business 0.4.107 → 0.4.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/components/lcb-nav/lcb-nav.vue +1 -1
- package/components/lcb-product/lcb-product.vue +283 -238
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.4.108](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.107...v0.4.108) (2025-05-10)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### ✨ Features | 新功能
|
|
9
|
+
|
|
10
|
+
* 对比修改 ([2decf5d](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/2decf5d485bd6d9c197d1d9fd2566bbcb29d9ffb))
|
|
11
|
+
* 暂时提交骨架屏 ([4314836](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/43148361462a43b75f4f80806b6021d979b398d5))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### 🐛 Bug Fixes | Bug 修复
|
|
15
|
+
|
|
16
|
+
* nav 判断 ([6fd5aa6](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/commit/6fd5aa6e27722e1a17ebd637cf4b1c29d0599eab))
|
|
17
|
+
|
|
5
18
|
### [0.4.107](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.106...v0.4.107) (2025-05-09)
|
|
6
19
|
|
|
7
20
|
### [0.4.106](http://gitlab888.30jia.com.cn/bhBank/zero-code-pro/compare/v0.4.105...v0.4.106) (2025-05-09)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { isH5 } from '@tplc/wot/components/common/util'
|
|
3
3
|
import UWaterfall from 'uview-plus/components/u-waterfall/u-waterfall.vue'
|
|
4
|
-
import { ref, useAttrs, watch, watchEffect } from 'vue'
|
|
4
|
+
import { computed, ref, useAttrs, watch, watchEffect } from 'vue'
|
|
5
5
|
import useSyncForm from '../../hooks/useSyncForm'
|
|
6
6
|
import { transformValueUnit } from '../../utils/transform'
|
|
7
7
|
import { calculateImageHeight } from '../../utils/utils'
|
|
@@ -32,6 +32,7 @@ const props = withDefaults(defineProps<LcbProductProps>(), {
|
|
|
32
32
|
gap: 16,
|
|
33
33
|
})
|
|
34
34
|
const { form } = useSyncForm(props.dynamicScope)
|
|
35
|
+
const loading = ref(false)
|
|
35
36
|
const renderList = ref<Record<string, any>[]>([])
|
|
36
37
|
const screenWidth = isH5 ? window.innerWidth : uni.getWindowInfo().screenWidth
|
|
37
38
|
watchEffect(() => {
|
|
@@ -43,39 +44,48 @@ defineSlots<{
|
|
|
43
44
|
}>()
|
|
44
45
|
const getData = async () => {
|
|
45
46
|
/** 如果是list里面嵌套就不处理 */
|
|
46
|
-
if (props.filterList)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
uWaterfallRef.value?.clear?.()
|
|
47
|
+
if (props.filterList) {
|
|
48
|
+
loading.value = false
|
|
49
|
+
return
|
|
50
50
|
}
|
|
51
|
-
|
|
51
|
+
loading.value = true
|
|
52
52
|
try {
|
|
53
|
-
|
|
53
|
+
if (props.listType === 'waterfall') {
|
|
54
|
+
renderList.value = []
|
|
55
|
+
uWaterfallRef.value?.clear?.()
|
|
56
|
+
}
|
|
57
|
+
let requestParams = {}
|
|
58
|
+
try {
|
|
59
|
+
requestParams = JSON.parse(props.requestParams ?? '{}')
|
|
60
|
+
} catch (error) {
|
|
61
|
+
console.error(error)
|
|
62
|
+
}
|
|
63
|
+
/** 如果是列表模式 */
|
|
64
|
+
if (props.items?.length && props.sourceMode === 1) {
|
|
65
|
+
const { data } = await uni.$lcb.http.post('/productInfo/filteredPage', {
|
|
66
|
+
productIdList: props.items.map((item) => item.productId),
|
|
67
|
+
productType: props.items[0].productType,
|
|
68
|
+
listType: props.listType,
|
|
69
|
+
sortType: props.sortType,
|
|
70
|
+
...requestParams,
|
|
71
|
+
})
|
|
72
|
+
renderList.value = data as Record<string, any>[]
|
|
73
|
+
/** 如果是请求模式 */
|
|
74
|
+
} else if (props.requestUrl && props.sourceMode === 2) {
|
|
75
|
+
const { data } = await uni.$lcb.http.post(props.requestUrl, {
|
|
76
|
+
listType: props.listType,
|
|
77
|
+
...requestParams,
|
|
78
|
+
...form.value,
|
|
79
|
+
})
|
|
80
|
+
renderList.value = data as Record<string, any>[]
|
|
81
|
+
} else {
|
|
82
|
+
renderList.value = []
|
|
83
|
+
uWaterfallRef.value?.clear?.()
|
|
84
|
+
}
|
|
54
85
|
} catch (error) {
|
|
55
86
|
console.error(error)
|
|
56
87
|
}
|
|
57
|
-
|
|
58
|
-
if (props.items?.length && props.sourceMode === 1) {
|
|
59
|
-
const { data } = await uni.$lcb.http.post('/productInfo/filteredPage', {
|
|
60
|
-
productIdList: props.items.map((item) => item.productId),
|
|
61
|
-
productType: props.items[0].productType,
|
|
62
|
-
listType: props.listType,
|
|
63
|
-
sortType: props.sortType,
|
|
64
|
-
...requestParams,
|
|
65
|
-
})
|
|
66
|
-
renderList.value = data as Record<string, any>[]
|
|
67
|
-
/** 如果是请求模式 */
|
|
68
|
-
} else if (props.requestUrl && props.sourceMode === 2) {
|
|
69
|
-
const { data } = await uni.$lcb.http.post(props.requestUrl, {
|
|
70
|
-
listType: props.listType,
|
|
71
|
-
...requestParams,
|
|
72
|
-
...form.value,
|
|
73
|
-
})
|
|
74
|
-
renderList.value = data as Record<string, any>[]
|
|
75
|
-
} else {
|
|
76
|
-
renderList.value = []
|
|
77
|
-
uWaterfallRef.value?.clear?.()
|
|
78
|
-
}
|
|
88
|
+
loading.value = false
|
|
79
89
|
}
|
|
80
90
|
watch(
|
|
81
91
|
() => form!.value,
|
|
@@ -138,122 +148,59 @@ defineExpose({
|
|
|
138
148
|
}
|
|
139
149
|
},
|
|
140
150
|
})
|
|
151
|
+
const blockProps = computed(() => {
|
|
152
|
+
const {
|
|
153
|
+
paddingHorizontal,
|
|
154
|
+
paddingVertical,
|
|
155
|
+
paddingLeft,
|
|
156
|
+
paddingRight,
|
|
157
|
+
paddingTop,
|
|
158
|
+
paddingBottom,
|
|
159
|
+
marginHorizontal,
|
|
160
|
+
...reset
|
|
161
|
+
} = props
|
|
162
|
+
return [
|
|
163
|
+
{
|
|
164
|
+
paddingHorizontal,
|
|
165
|
+
paddingVertical,
|
|
166
|
+
paddingLeft,
|
|
167
|
+
paddingRight,
|
|
168
|
+
paddingTop,
|
|
169
|
+
paddingBottom,
|
|
170
|
+
marginHorizontal,
|
|
171
|
+
},
|
|
172
|
+
reset,
|
|
173
|
+
]
|
|
174
|
+
})
|
|
141
175
|
</script>
|
|
142
176
|
|
|
143
177
|
<template>
|
|
144
|
-
<lcb-block
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<view
|
|
155
|
-
class="flex flex-col"
|
|
156
|
-
v-if="listType === 'list'"
|
|
157
|
-
:style="{
|
|
158
|
-
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
159
|
-
gap: gap ? `${gap}rpx` : undefined,
|
|
160
|
-
}"
|
|
161
|
-
>
|
|
162
|
-
<block v-for="(item, index) in renderList" :key="`${item?.productId}:${index}`">
|
|
163
|
-
<UnconditionedLayout
|
|
164
|
-
v-if="item.productType === 'noProductOption'"
|
|
165
|
-
v-bind="{ ...item, ...$props, ...attrs }"
|
|
166
|
-
/>
|
|
167
|
-
<lcb-action-view v-bind="item.link" render-mode="view" v-else>
|
|
168
|
-
<slot name="item" :item="item">
|
|
169
|
-
<lcb-absolute-config-layout
|
|
170
|
-
v-if="renderItemAbsoluteConfigLayout"
|
|
171
|
-
:blocks="renderItemAbsoluteConfigLayout?.blocks"
|
|
172
|
-
:canvas="renderItemAbsoluteConfigLayout?.canvas"
|
|
173
|
-
:dataset="{
|
|
174
|
-
...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
|
|
175
|
-
...item,
|
|
176
|
-
}"
|
|
177
|
-
/>
|
|
178
|
-
<lcb-product-item
|
|
179
|
-
v-else
|
|
180
|
-
v-bind="{ ...item, ...$props, ...attrs }"
|
|
181
|
-
:layoutType="layoutType"
|
|
182
|
-
:coverImgStyle="{
|
|
183
|
-
width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
|
|
184
|
-
height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
185
|
-
minHeight: layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
186
|
-
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
187
|
-
...($props?.coverImgStyle ?? {}),
|
|
188
|
-
}"
|
|
189
|
-
></lcb-product-item>
|
|
190
|
-
</slot>
|
|
191
|
-
</lcb-action-view>
|
|
192
|
-
</block>
|
|
193
|
-
</view>
|
|
194
|
-
<!-- 双列 -->
|
|
195
|
-
<view
|
|
196
|
-
class="grid grid-cols-2 box-border"
|
|
197
|
-
v-else-if="listType === 'grid'"
|
|
198
|
-
:style="{
|
|
199
|
-
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
200
|
-
gap: gap ? `${gap}rpx` : undefined,
|
|
201
|
-
}"
|
|
202
|
-
>
|
|
203
|
-
<lcb-action-view
|
|
204
|
-
v-for="(item, index) in renderList"
|
|
205
|
-
:key="`${item?.productId}:${index}`"
|
|
206
|
-
v-bind="item.link"
|
|
207
|
-
render-mode="view"
|
|
208
|
-
custom-class="h-full rounded-md overflow-hidden"
|
|
178
|
+
<lcb-block v-bind="loading ? blockProps[0] : {}">
|
|
179
|
+
<wd-skeleton animation="gradient" theme="paragraph" :loading="loading">
|
|
180
|
+
<lcb-block
|
|
181
|
+
v-bind="{
|
|
182
|
+
...$props,
|
|
183
|
+
shadowColor: blockShadowColor,
|
|
184
|
+
shadowSize: blockShadowSize,
|
|
185
|
+
blurSize: blockBlurSize,
|
|
186
|
+
}"
|
|
187
|
+
:custom-class="`${listType == 'horizontal' ? '!gap-0 h-fit overflow-x-auto whitespace-nowrap flex items-stretch w-full' : ''}`"
|
|
209
188
|
>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
:
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
:coverImgStyle="{
|
|
226
|
-
width: '100%',
|
|
227
|
-
height: transformValueUnit(imageHeight),
|
|
228
|
-
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
229
|
-
...(attrs?.coverImgStyle ?? {}),
|
|
230
|
-
}"
|
|
231
|
-
></lcb-product-item>
|
|
232
|
-
</slot>
|
|
233
|
-
</lcb-action-view>
|
|
234
|
-
</view>
|
|
235
|
-
|
|
236
|
-
<view
|
|
237
|
-
class="lcb-product-waterfall !py-1"
|
|
238
|
-
v-else-if="listType === 'waterfall'"
|
|
239
|
-
:style="{
|
|
240
|
-
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
241
|
-
}"
|
|
242
|
-
>
|
|
243
|
-
<u-waterfall :addTime="0" :modelValue="renderList" ref="uWaterfallRef" custom-class="!gap-20">
|
|
244
|
-
<template #left="{ leftList: list }">
|
|
245
|
-
<view
|
|
246
|
-
class="flex flex-col gap-3"
|
|
247
|
-
:style="{
|
|
248
|
-
marginRight: `${gap / 2}rpx`,
|
|
249
|
-
}"
|
|
250
|
-
>
|
|
251
|
-
<lcb-action-view
|
|
252
|
-
v-for="(item, index) in list"
|
|
253
|
-
:key="`${item?.productId}:${index}`"
|
|
254
|
-
v-bind="item.link"
|
|
255
|
-
render-mode="view"
|
|
256
|
-
>
|
|
189
|
+
<!-- 单列 -->
|
|
190
|
+
<view
|
|
191
|
+
class="flex flex-col"
|
|
192
|
+
v-if="listType === 'list'"
|
|
193
|
+
:style="{
|
|
194
|
+
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
195
|
+
gap: gap ? `${gap}rpx` : undefined,
|
|
196
|
+
}"
|
|
197
|
+
>
|
|
198
|
+
<block v-for="(item, index) in renderList" :key="`${item?.productId}:${index}`">
|
|
199
|
+
<UnconditionedLayout
|
|
200
|
+
v-if="item.productType === 'noProductOption'"
|
|
201
|
+
v-bind="{ ...item, ...$props, ...attrs }"
|
|
202
|
+
/>
|
|
203
|
+
<lcb-action-view v-bind="item.link" render-mode="view" v-else>
|
|
257
204
|
<slot name="item" :item="item">
|
|
258
205
|
<lcb-absolute-config-layout
|
|
259
206
|
v-if="renderItemAbsoluteConfigLayout"
|
|
@@ -264,44 +211,192 @@ defineExpose({
|
|
|
264
211
|
...item,
|
|
265
212
|
}"
|
|
266
213
|
/>
|
|
267
|
-
|
|
268
214
|
<lcb-product-item
|
|
269
|
-
v-bind="{ ...item, ...$props, ...attrs }"
|
|
270
|
-
layoutType="vertical"
|
|
271
215
|
v-else
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
:
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
item.coverImgProps?.[0]?.width,
|
|
284
|
-
)
|
|
285
|
-
"
|
|
286
|
-
/>
|
|
287
|
-
</template>
|
|
288
|
-
</lcb-product-item>
|
|
216
|
+
v-bind="{ ...item, ...$props, ...attrs }"
|
|
217
|
+
:layoutType="layoutType"
|
|
218
|
+
:coverImgStyle="{
|
|
219
|
+
width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
|
|
220
|
+
height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
221
|
+
minHeight:
|
|
222
|
+
layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
223
|
+
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
224
|
+
...($props?.coverImgStyle ?? {}),
|
|
225
|
+
}"
|
|
226
|
+
></lcb-product-item>
|
|
289
227
|
</slot>
|
|
290
228
|
</lcb-action-view>
|
|
291
|
-
</
|
|
292
|
-
</
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
}
|
|
229
|
+
</block>
|
|
230
|
+
</view>
|
|
231
|
+
<!-- 双列 -->
|
|
232
|
+
<view
|
|
233
|
+
class="grid grid-cols-2 box-border"
|
|
234
|
+
v-else-if="listType === 'grid'"
|
|
235
|
+
:style="{
|
|
236
|
+
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
237
|
+
gap: gap ? `${gap}rpx` : undefined,
|
|
238
|
+
}"
|
|
239
|
+
>
|
|
240
|
+
<lcb-action-view
|
|
241
|
+
v-for="(item, index) in renderList"
|
|
242
|
+
:key="`${item?.productId}:${index}`"
|
|
243
|
+
v-bind="item.link"
|
|
244
|
+
render-mode="view"
|
|
245
|
+
custom-class="h-full rounded-md overflow-hidden"
|
|
246
|
+
>
|
|
247
|
+
<slot name="item" :item="item">
|
|
248
|
+
<lcb-absolute-config-layout
|
|
249
|
+
v-if="renderItemAbsoluteConfigLayout"
|
|
250
|
+
:blocks="renderItemAbsoluteConfigLayout?.blocks"
|
|
251
|
+
:canvas="renderItemAbsoluteConfigLayout?.canvas"
|
|
252
|
+
:dataset="{
|
|
253
|
+
...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
|
|
254
|
+
...item,
|
|
255
|
+
}"
|
|
256
|
+
/>
|
|
257
|
+
<lcb-product-item
|
|
258
|
+
v-else
|
|
259
|
+
v-bind="{ ...item, ...$props, ...attrs }"
|
|
260
|
+
layoutType="vertical"
|
|
261
|
+
className="h-full"
|
|
262
|
+
:coverImgStyle="{
|
|
263
|
+
width: '100%',
|
|
264
|
+
height: transformValueUnit(imageHeight),
|
|
265
|
+
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
266
|
+
...(attrs?.coverImgStyle ?? {}),
|
|
267
|
+
}"
|
|
268
|
+
></lcb-product-item>
|
|
269
|
+
</slot>
|
|
270
|
+
</lcb-action-view>
|
|
271
|
+
</view>
|
|
272
|
+
|
|
273
|
+
<view
|
|
274
|
+
class="lcb-product-waterfall !py-1"
|
|
275
|
+
v-else-if="listType === 'waterfall'"
|
|
276
|
+
:style="{
|
|
277
|
+
width: itemWidth ? `${itemWidth}rpx` : '100%',
|
|
278
|
+
}"
|
|
279
|
+
>
|
|
280
|
+
<u-waterfall
|
|
281
|
+
:addTime="0"
|
|
282
|
+
:modelValue="renderList"
|
|
283
|
+
ref="uWaterfallRef"
|
|
284
|
+
custom-class="!gap-20"
|
|
285
|
+
>
|
|
286
|
+
<template #left="{ leftList: list }">
|
|
287
|
+
<view
|
|
288
|
+
class="flex flex-col gap-3"
|
|
289
|
+
:style="{
|
|
290
|
+
marginRight: `${gap / 2}rpx`,
|
|
291
|
+
}"
|
|
292
|
+
>
|
|
293
|
+
<lcb-action-view
|
|
294
|
+
v-for="(item, index) in list"
|
|
295
|
+
:key="`${item?.productId}:${index}`"
|
|
296
|
+
v-bind="item.link"
|
|
297
|
+
render-mode="view"
|
|
298
|
+
>
|
|
299
|
+
<slot name="item" :item="item">
|
|
300
|
+
<lcb-absolute-config-layout
|
|
301
|
+
v-if="renderItemAbsoluteConfigLayout"
|
|
302
|
+
:blocks="renderItemAbsoluteConfigLayout?.blocks"
|
|
303
|
+
:canvas="renderItemAbsoluteConfigLayout?.canvas"
|
|
304
|
+
:dataset="{
|
|
305
|
+
...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
|
|
306
|
+
...item,
|
|
307
|
+
}"
|
|
308
|
+
/>
|
|
309
|
+
|
|
310
|
+
<lcb-product-item
|
|
311
|
+
v-bind="{ ...item, ...$props, ...attrs }"
|
|
312
|
+
layoutType="vertical"
|
|
313
|
+
v-else
|
|
314
|
+
>
|
|
315
|
+
<template #coverImg="{ value }">
|
|
316
|
+
<wd-img
|
|
317
|
+
:src="value"
|
|
318
|
+
width="100%"
|
|
319
|
+
mode="aspectFill"
|
|
320
|
+
:lazyPlaceWidth="columnWidth"
|
|
321
|
+
:height="
|
|
322
|
+
calculateImageHeight(
|
|
323
|
+
screenWidth,
|
|
324
|
+
item.coverImgProps?.[0]?.height,
|
|
325
|
+
item.coverImgProps?.[0]?.width,
|
|
326
|
+
)
|
|
327
|
+
"
|
|
328
|
+
/>
|
|
329
|
+
</template>
|
|
330
|
+
</lcb-product-item>
|
|
331
|
+
</slot>
|
|
332
|
+
</lcb-action-view>
|
|
333
|
+
</view>
|
|
334
|
+
</template>
|
|
335
|
+
<template #right="{ rightList: list }">
|
|
336
|
+
<view
|
|
337
|
+
class="flex flex-col gap-3"
|
|
338
|
+
:style="{
|
|
339
|
+
marginLeft: `${gap / 2}rpx`,
|
|
340
|
+
}"
|
|
341
|
+
>
|
|
342
|
+
<lcb-action-view
|
|
343
|
+
v-for="(item, index) in list"
|
|
344
|
+
:key="`${item?.productId}:${index}`"
|
|
345
|
+
v-bind="item.link"
|
|
346
|
+
render-mode="view"
|
|
347
|
+
>
|
|
348
|
+
<slot name="item" :item="item">
|
|
349
|
+
<lcb-absolute-config-layout
|
|
350
|
+
v-if="renderItemAbsoluteConfigLayout"
|
|
351
|
+
:blocks="renderItemAbsoluteConfigLayout?.blocks"
|
|
352
|
+
:canvas="renderItemAbsoluteConfigLayout?.canvas"
|
|
353
|
+
:dataset="{
|
|
354
|
+
...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
|
|
355
|
+
...item,
|
|
356
|
+
}"
|
|
357
|
+
/>
|
|
358
|
+
<lcb-product-item
|
|
359
|
+
v-else
|
|
360
|
+
v-bind="{ ...item, ...$props, ...attrs }"
|
|
361
|
+
layoutType="vertical"
|
|
362
|
+
>
|
|
363
|
+
<template #coverImg="{ value }">
|
|
364
|
+
<wd-img
|
|
365
|
+
:src="value"
|
|
366
|
+
width="100%"
|
|
367
|
+
:lazyPlaceWidth="columnWidth"
|
|
368
|
+
mode="aspectFill"
|
|
369
|
+
:height="
|
|
370
|
+
calculateImageHeight(
|
|
371
|
+
screenWidth,
|
|
372
|
+
item.coverImgProps?.[0]?.height,
|
|
373
|
+
item.coverImgProps?.[0]?.width,
|
|
374
|
+
)
|
|
375
|
+
"
|
|
376
|
+
/>
|
|
377
|
+
</template>
|
|
378
|
+
</lcb-product-item>
|
|
379
|
+
</slot>
|
|
380
|
+
</lcb-action-view>
|
|
381
|
+
</view>
|
|
382
|
+
</template>
|
|
383
|
+
</u-waterfall>
|
|
384
|
+
</view>
|
|
385
|
+
<!-- 单列滚动 -->
|
|
386
|
+
<template v-else-if="listType == 'horizontal'">
|
|
387
|
+
<lcb-action-view
|
|
388
|
+
v-for="(item, index) in renderList"
|
|
389
|
+
:key="`${item?.productId}:${index}`"
|
|
390
|
+
custom-class="flex-shrink-0 w-fit !h-auto"
|
|
391
|
+
v-bind="item.link"
|
|
392
|
+
render-mode="view"
|
|
299
393
|
>
|
|
300
|
-
<
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
394
|
+
<view
|
|
395
|
+
:style="{
|
|
396
|
+
width: `${itemWidth}rpx`,
|
|
397
|
+
marginLeft: index === 0 ? 0 : `${gap}rpx`,
|
|
398
|
+
}"
|
|
399
|
+
class="h-full"
|
|
305
400
|
>
|
|
306
401
|
<slot name="item" :item="item">
|
|
307
402
|
<lcb-absolute-config-layout
|
|
@@ -315,73 +410,23 @@ defineExpose({
|
|
|
315
410
|
/>
|
|
316
411
|
<lcb-product-item
|
|
317
412
|
v-else
|
|
413
|
+
className="h-full"
|
|
318
414
|
v-bind="{ ...item, ...$props, ...attrs }"
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
:
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
calculateImageHeight(
|
|
329
|
-
screenWidth,
|
|
330
|
-
item.coverImgProps?.[0]?.height,
|
|
331
|
-
item.coverImgProps?.[0]?.width,
|
|
332
|
-
)
|
|
333
|
-
"
|
|
334
|
-
/>
|
|
335
|
-
</template>
|
|
336
|
-
</lcb-product-item>
|
|
415
|
+
:coverImgStyle="{
|
|
416
|
+
width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
|
|
417
|
+
height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
418
|
+
minHeight:
|
|
419
|
+
layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
420
|
+
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
421
|
+
...(attrs?.coverImgStyle ?? {}),
|
|
422
|
+
}"
|
|
423
|
+
></lcb-product-item>
|
|
337
424
|
</slot>
|
|
338
|
-
</
|
|
339
|
-
</view>
|
|
425
|
+
</view>
|
|
426
|
+
</lcb-action-view>
|
|
340
427
|
</template>
|
|
341
|
-
</
|
|
342
|
-
</
|
|
343
|
-
<!-- 单列滚动 -->
|
|
344
|
-
<template v-else-if="listType == 'horizontal'">
|
|
345
|
-
<lcb-action-view
|
|
346
|
-
v-for="(item, index) in renderList"
|
|
347
|
-
:key="`${item?.productId}:${index}`"
|
|
348
|
-
custom-class="flex-shrink-0 w-fit !h-auto"
|
|
349
|
-
v-bind="item.link"
|
|
350
|
-
render-mode="view"
|
|
351
|
-
>
|
|
352
|
-
<view
|
|
353
|
-
:style="{
|
|
354
|
-
width: `${itemWidth}rpx`,
|
|
355
|
-
marginLeft: index === 0 ? 0 : `${gap}rpx`,
|
|
356
|
-
}"
|
|
357
|
-
class="h-full"
|
|
358
|
-
>
|
|
359
|
-
<slot name="item" :item="item">
|
|
360
|
-
<lcb-absolute-config-layout
|
|
361
|
-
v-if="renderItemAbsoluteConfigLayout"
|
|
362
|
-
:blocks="renderItemAbsoluteConfigLayout?.blocks"
|
|
363
|
-
:canvas="renderItemAbsoluteConfigLayout?.canvas"
|
|
364
|
-
:dataset="{
|
|
365
|
-
...(renderItemAbsoluteConfigLayout?.dataset ?? {}),
|
|
366
|
-
...item,
|
|
367
|
-
}"
|
|
368
|
-
/>
|
|
369
|
-
<lcb-product-item
|
|
370
|
-
v-else
|
|
371
|
-
className="h-full"
|
|
372
|
-
v-bind="{ ...item, ...$props, ...attrs }"
|
|
373
|
-
:coverImgStyle="{
|
|
374
|
-
width: layoutType === 'vertical' ? '100%' : transformValueUnit(imageWidth),
|
|
375
|
-
height: layoutType === 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
376
|
-
minHeight: layoutType !== 'vertical' ? transformValueUnit(imageHeight) : undefined,
|
|
377
|
-
borderRadius: imageRadius ? transformValueUnit(imageRadius) : undefined,
|
|
378
|
-
...(attrs?.coverImgStyle ?? {}),
|
|
379
|
-
}"
|
|
380
|
-
></lcb-product-item>
|
|
381
|
-
</slot>
|
|
382
|
-
</view>
|
|
383
|
-
</lcb-action-view>
|
|
384
|
-
</template>
|
|
428
|
+
</lcb-block>
|
|
429
|
+
</wd-skeleton>
|
|
385
430
|
</lcb-block>
|
|
386
431
|
</template>
|
|
387
432
|
|