s-goods-shelves.vue
3.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!-- 装修商品组件：商品栏 -->
<template>
<view>
<!-- 布局1. 两列商品，图片左文案右 -->
<view
v-if="layoutType === 'twoCol'"
class="goods-xs-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
class="goods-xs-list"
v-for="item in goodsList"
:key="item.id"
:style="[
{
padding: data.space + 'rpx',
},
]"
>
<s-goods-column
class="goods-card"
size="xs"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
/>
</view>
</view>
<!-- 布局. 三列商品：图片上文案下 -->
<view
v-if="layoutType === 'threeCol'"
class="goods-sm-box ss-flex ss-flex-wrap"
:style="[{ margin: '-' + data.space + 'rpx' }]"
>
<view
v-for="item in goodsList"
:key="item.id"
class="goods-card-box"
:style="[
{
padding: data.space + 'rpx',
},
]"
>
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
/>
</view>
</view>
<!-- 布局3. 一行商品，水平滑动 -->
<view v-if="layoutType === 'horizSwiper'" class="">
<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
<view class="goods-box ss-flex">
<view
class="goods-card-box"
v-for="item in goodsList"
:key="item.id"
:style="[{ marginRight: data.space * 2 + 'rpx' }]"
>
<s-goods-column
class="goods-card"
size="sm"
:goodsFields="data.fields"
:tagStyle="data.badge"
:data="item"
:titleColor="data.fields.name?.color"
:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
/>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script setup>
/**
* 商品栏
*/
import { onMounted, ref, computed } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
const props = defineProps({
data: {
type: Object,
default() {},
},
styles: {
type: Object,
default() {},
},
});
const { layoutType, spuIds } = props.data;
let { marginLeft, marginRight } = props.styles;
const goodsList = ref([]);
onMounted(async () => {
if (spuIds.length > 0) {
let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
goodsList.value = data;
}
});
</script>
<style lang="scss" scoped>
.goods-xs-box {
// margin: 0 auto;
width: 100%;
.goods-xs-list {
box-sizing: border-box;
flex-shrink: 0;
overflow: hidden;
width: 50%;
}
}
.goods-sm-box {
margin: 0 auto;
box-sizing: border-box;
.goods-card-box {
flex-shrink: 0;
overflow: hidden;
width: 33.3%;
box-sizing: border-box;
}
}
.goods-scroll-box {
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
</style>