You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
3.8 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- 装修商品组件商品栏 -->
<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>