发布v1.0.3

2022-11-22 15:45:36 +08:00
commit 01f091fcd8
525 changed files with 80922 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+  <view>
+    <!-- 1  两张图片并排 图片坐文案右 -->
+    <view
+      v-if="mode === 1"
+      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="goodsFields"
+          :tagStyle="tagStyle"
+          :data="item"
+          :titleColor="goodsFields.title?.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 })"
+        ></s-goods-column>
+      </view>
+    </view>
+    <!-- 2  三张商品卡片并排 图片上文案下 -->
+    <view
+      v-if="mode === 2"
+      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="goodsFields"
+          :tagStyle="tagStyle"
+          :data="item"
+          :titleColor="goodsFields.title?.color"
+          :topRadius="data.borderRadiusTop"
+          :bottomRadius="data.borderRadiusBottom"
+          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
+        ></s-goods-column>
+      </view>
+    </view>
+
+    <!-- 3 商品卡片并排 轮播 -->
+    <view v-if="mode === 3" 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="goodsFields"
+              :tagStyle="tagStyle"
+              :data="item"
+              :titleColor="goodsFields.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>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品栏s-goods-column
+   *
+   * @description style 1:横向两个，左图右内容 2：横向三个，上图下内容 3：左右滚动
+   */
+  import { onMounted, ref } from 'vue';
+  import sheep from '@/sheep';
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    },
+    styles: {
+      type: Object,
+      default() {},
+    },
+  });
+  const { mode, tagStyle, buyNowStyle, goodsFields, goodsIds } = props.data;
+  let { marginLeft, marginRight } = props.styles;
+  const goodsList = ref([]);
+  onMounted(async () => {
+    if (goodsIds.length > 0) {
+      let { data } = await sheep.$api.goods.ids({ ids: goodsIds.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>