营销：适配商城装修组件【商品栏】

sheep/components/s-block-item/s-block-item.vue

@@ -31,7 +31,7 @@
     <!-- 商品组件：商品卡片 -->
     <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" />

sheep/components/s-goods-column/s-goods-column.vue

@@ -11,7 +11,7 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
       </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
         v-if="goodsFields.title?.show || goodsFields.price?.show"
         class="xs-goods-content ss-flex-col ss-row-around"
@@ -39,7 +39,7 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
       </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
         v-if="goodsFields.title?.show || goodsFields.price?.show"
@@ -65,7 +65,7 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
       </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
         class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
         :id="elId"
@@ -141,7 +141,7 @@
       <view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
         <view class="tag-icon">拼团</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>
           <view
@@ -204,7 +204,7 @@
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
       </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>

sheep/components/s-goods-shelves/s-goods-shelves.vue

@@ -1,8 +1,8 @@
 <template>
   <view>
-    <!-- 1  两张图片并排 图片坐文案右 -->
+    <!-- 布局1. 两列商品，图片左文案右 -->
     <view
-      v-if="mode === 1"
+      v-if="layoutType === 'twoCol'"
       class="goods-xs-box ss-flex ss-flex-wrap"
       :style="[{ margin: '-' + data.space + 'rpx' }]"
     >
@@ -19,10 +19,10 @@
         <s-goods-column
           class="goods-card"
           size="xs"
-          :goodsFields="goodsFields"
+          :goodsFields="productFields"
           :tagStyle="tagStyle"
           :data="item"
-          :titleColor="goodsFields.title?.color"
+          :titleColor="productFields.title?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           :titleWidth="(454 - marginRight * 2 - data.space * 2 - marginLeft * 2) / 2"
@@ -30,9 +30,9 @@
         ></s-goods-column>
       </view>
     </view>
-    <!-- 2  三张商品卡片并排 图片上文案下 -->
+    <!-- 布局. 三列商品：图片上文案下 -->
     <view
-      v-if="mode === 2"
+      v-if="layoutType === 'threeCol'"
       class="goods-sm-box ss-flex ss-flex-wrap"
       :style="[{ margin: '-' + data.space + 'rpx' }]"
     >
@@ -49,10 +49,10 @@
         <s-goods-column
           class="goods-card"
           size="sm"
-          :goodsFields="goodsFields"
+          :goodsFields="productFields"
           :tagStyle="tagStyle"
           :data="item"
-          :titleColor="goodsFields.title?.color"
+          :titleColor="productFields.title?.color"
           :topRadius="data.borderRadiusTop"
           :bottomRadius="data.borderRadiusBottom"
           @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
@@ -60,8 +60,8 @@
       </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>
         <view class="goods-box ss-flex">
           <view
@@ -73,10 +73,10 @@
             <s-goods-column
               class="goods-card"
               size="sm"
-              :goodsFields="goodsFields"
+              :goodsFields="productFields"
               :tagStyle="tagStyle"
               :data="item"
-              :titleColor="goodsFields.title?.color"
+              :titleColor="productFields.title?.color"
               :titleWidth="(750 - marginRight * 2 - data.space * 4 - marginLeft * 2) / 3"
               @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
             ></s-goods-column>
@@ -89,12 +89,11 @@
 
 <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 SpuApi from "@/sheep/api/product/spu";
 
   const props = defineProps({
     data: {
@@ -106,15 +105,35 @@
       default() {},
     },
   });
-  const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data;
+  const { layoutType, tagStyle, spuIds } = props.data;
   let { marginLeft, marginRight } = props.styles;
   const goodsList = ref([]);
   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;
     }
   });
+
+  // 商品字段配置，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>
 
 <style lang="scss" scoped>