营销:适配商城装修组件【商品栏】
parent
10fe28093e
commit
f0bf79c43e
|
@ -31,7 +31,7 @@
|
||||||
<!-- 商品组件:商品卡片 -->
|
<!-- 商品组件:商品卡片 -->
|
||||||
<s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
|
<s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
|
||||||
<!-- 商品组件:商品栏 -->
|
<!-- 商品组件:商品栏 -->
|
||||||
<s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
|
<s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />
|
||||||
|
|
||||||
<!-- 营销组件:拼团 -->
|
<!-- 营销组件:拼团 -->
|
||||||
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
|
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<view v-if="tagStyle.show" class="tag-icon-box">
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
||||||
</view>
|
</view>
|
||||||
<image class="xs-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFit"></image>
|
<image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
|
||||||
<view
|
<view
|
||||||
v-if="goodsFields.title?.show || goodsFields.price?.show"
|
v-if="goodsFields.title?.show || goodsFields.price?.show"
|
||||||
class="xs-goods-content ss-flex-col ss-row-around"
|
class="xs-goods-content ss-flex-col ss-row-around"
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
<view v-if="tagStyle.show" class="tag-icon-box">
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
||||||
</view>
|
</view>
|
||||||
<image class="sm-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image>
|
<image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||||
|
|
||||||
<view
|
<view
|
||||||
v-if="goodsFields.title?.show || goodsFields.price?.show"
|
v-if="goodsFields.title?.show || goodsFields.price?.show"
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
<view v-if="tagStyle.show" class="tag-icon-box">
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
||||||
</view>
|
</view>
|
||||||
<image class="md-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="widthFix"></image>
|
<image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
|
||||||
<view
|
<view
|
||||||
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
|
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
|
||||||
:id="elId"
|
:id="elId"
|
||||||
|
@ -141,7 +141,7 @@
|
||||||
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
|
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
|
||||||
<view class="tag-icon">拼团</view>
|
<view class="tag-icon">拼团</view>
|
||||||
</view>
|
</view>
|
||||||
<image class="lg-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image>
|
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||||
<view>
|
<view>
|
||||||
<view
|
<view
|
||||||
|
@ -204,7 +204,7 @@
|
||||||
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<image class="sl-img-box" :src="sheep.$url.cdn(data.image||data.picUrl)" mode="aspectFill"></image>
|
<image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||||
|
|
||||||
<view class="sl-goods-content">
|
<view class="sl-goods-content">
|
||||||
<view>
|
<view>
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- 1 两张图片并排 图片坐文案右 -->
|
<!-- 布局1. 两列商品,图片左文案右 -->
|
||||||
<view
|
<view
|
||||||
v-if="mode === 1"
|
v-if="layoutType === 'twoCol'"
|
||||||
class="goods-xs-box ss-flex ss-flex-wrap"
|
class="goods-xs-box ss-flex ss-flex-wrap"
|
||||||
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
||||||
>
|
>
|
||||||
|
@ -19,10 +19,10 @@
|
||||||
<s-goods-column
|
<s-goods-column
|
||||||
class="goods-card"
|
class="goods-card"
|
||||||
size="xs"
|
size="xs"
|
||||||
:goodsFields="goodsFields"
|
:goodsFields="productFields"
|
||||||
:tagStyle="tagStyle"
|
:tagStyle="tagStyle"
|
||||||
:data="item"
|
:data="item"
|
||||||
:titleColor="goodsFields.title?.color"
|
:titleColor="productFields.title?.color"
|
||||||
:topRadius="data.borderRadiusTop"
|
:topRadius="data.borderRadiusTop"
|
||||||
:bottomRadius="data.borderRadiusBottom"
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
|
:titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
|
||||||
|
@ -30,9 +30,9 @@
|
||||||
></s-goods-column>
|
></s-goods-column>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 2 三张商品卡片并排 图片上文案下 -->
|
<!-- 布局. 三列商品:图片上文案下 -->
|
||||||
<view
|
<view
|
||||||
v-if="mode === 2"
|
v-if="layoutType === 'threeCol'"
|
||||||
class="goods-sm-box ss-flex ss-flex-wrap"
|
class="goods-sm-box ss-flex ss-flex-wrap"
|
||||||
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
||||||
>
|
>
|
||||||
|
@ -49,10 +49,10 @@
|
||||||
<s-goods-column
|
<s-goods-column
|
||||||
class="goods-card"
|
class="goods-card"
|
||||||
size="sm"
|
size="sm"
|
||||||
:goodsFields="goodsFields"
|
:goodsFields="productFields"
|
||||||
:tagStyle="tagStyle"
|
:tagStyle="tagStyle"
|
||||||
:data="item"
|
:data="item"
|
||||||
:titleColor="goodsFields.title?.color"
|
:titleColor="productFields.title?.color"
|
||||||
:topRadius="data.borderRadiusTop"
|
:topRadius="data.borderRadiusTop"
|
||||||
:bottomRadius="data.borderRadiusBottom"
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||||
|
@ -60,8 +60,8 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 3 商品卡片并排 轮播 -->
|
<!-- 布局3. 一行商品,水平滑动 -->
|
||||||
<view v-if="mode === 3" class="">
|
<view v-if="layoutType === 'horizSwiper'" class="">
|
||||||
<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
|
<scroll-view class="scroll-box goods-scroll-box" scroll-x scroll-anchoring>
|
||||||
<view class="goods-box ss-flex">
|
<view class="goods-box ss-flex">
|
||||||
<view
|
<view
|
||||||
|
@ -73,10 +73,10 @@
|
||||||
<s-goods-column
|
<s-goods-column
|
||||||
class="goods-card"
|
class="goods-card"
|
||||||
size="sm"
|
size="sm"
|
||||||
:goodsFields="goodsFields"
|
:goodsFields="productFields"
|
||||||
:tagStyle="tagStyle"
|
:tagStyle="tagStyle"
|
||||||
:data="item"
|
:data="item"
|
||||||
:titleColor="goodsFields.title?.color"
|
:titleColor="productFields.title?.color"
|
||||||
:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
|
:titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
|
||||||
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||||
></s-goods-column>
|
></s-goods-column>
|
||||||
|
@ -89,12 +89,11 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
/**
|
/**
|
||||||
* 商品栏s-goods-column
|
* 商品栏
|
||||||
*
|
|
||||||
* @description style 1:横向两个,左图右内容 2:横向三个,上图下内容 3:左右滚动
|
|
||||||
*/
|
*/
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref, computed } from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
|
import SpuApi from "@/sheep/api/product/spu";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
|
@ -106,15 +105,35 @@
|
||||||
default() {},
|
default() {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data;
|
const { layoutType, tagStyle, spuIds } = props.data;
|
||||||
let { marginLeft, marginRight } = props.styles;
|
let { marginLeft, marginRight } = props.styles;
|
||||||
const goodsList = ref([]);
|
const goodsList = ref([]);
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (goodsIds.length > 0) {
|
if (spuIds.length > 0) {
|
||||||
let { data } = await sheep.$api.goods.ids({ ids: goodsIds.join(',') });
|
let { data } = await SpuApi.getSpuListByIds(spuIds.join(','));
|
||||||
goodsList.value = data;
|
goodsList.value = data;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 商品字段配置,todo @owen 字段名称与服务端对齐,这里先转换,后期重构时再修改
|
||||||
|
const productFields = computed(() => {
|
||||||
|
return {
|
||||||
|
title: props.data.fields.name,
|
||||||
|
subtitle: props.data.fields.introduction,
|
||||||
|
price: props.data.fields.price,
|
||||||
|
original_price: props.data.fields.marketPrice,
|
||||||
|
stock: props.data.fields.stock,
|
||||||
|
salesCount: props.data.fields.salesCount,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 角标,todo @owen 规范命名,这里先转换,后期重构时再修改
|
||||||
|
const badge = computed(() => {
|
||||||
|
return {
|
||||||
|
show: props.data.badge.show,
|
||||||
|
src: props.data.badge.imgUrl,
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Loading…
Reference in New Issue