|
|
@@ -1,5 +1,17 @@
|
|
|
<template>
|
|
|
- <view class="product-list-container">
|
|
|
+ <view v-if="isLoading" class="product-list-container">
|
|
|
+ <view v-for="k in skeletonCount" :key="k" class="skeleton-item">
|
|
|
+ <wd-skeleton
|
|
|
+ :row-col="[
|
|
|
+ { width: '328rpx', height: '328rpx' },
|
|
|
+ 1,
|
|
|
+ { width: '222rpx' },
|
|
|
+ [{ width: '142rpx' }, { width: '48rpx', height: '48rpx', type: 'circle' }],
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="product-list-container">
|
|
|
<ProductItem v-for="item in productList" :key="item.id" :product="item"></ProductItem>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -12,7 +24,11 @@
|
|
|
defineOptions({
|
|
|
name: 'ProductList',
|
|
|
})
|
|
|
+ withDefaults(defineProps<{ skeletonCount?: number }>(), {
|
|
|
+ skeletonCount: 2,
|
|
|
+ })
|
|
|
|
|
|
+ const isLoading = ref(true)
|
|
|
const productList = ref<ProductSimpleType[]>(data)
|
|
|
</script>
|
|
|
|
|
|
@@ -23,5 +39,17 @@
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
padding-right: 32rpx;
|
|
|
+
|
|
|
+ .skeleton-item {
|
|
|
+ --wot-skeleton-row-margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 328rpx;
|
|
|
+ height: 488rpx;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
