From a0f751c2c00403fe5c19e55d45987230581696b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=B9=8F?= <yangpeng01@agree.com.cn>
Date: Thu, 11 Sep 2025 10:43:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/home.vue                          |   94 ++
 pages/index/index.vue                         |   92 +-
 pages/index/list.vue                          |   99 +-
 .../s-goods-column-another.vue                | 1033 +++++++++++++++++
 4 files changed, 1212 insertions(+), 106 deletions(-)
 create mode 100644 pages/index/home.vue
 create mode 100644 sheep/components/s-goods-column-another/s-goods-column-another.vue

diff --git a/pages/index/home.vue b/pages/index/home.vue
new file mode 100644
index 0000000..bcf45c1
--- /dev/null
+++ b/pages/index/home.vue
@@ -0,0 +1,94 @@
+<!-- 这里是模板原来的首页代码 -->
+<!-- 首页，支持店铺装修 -->
+<template>
+  <view v-if="template">
+    <s-layout
+      title="首页"
+      navbar="custom"
+      tabbar="/pages/index/index"
+      :bgStyle="template.page"
+      :navbarStyle="template.navigationBar"
+      onShareAppMessage
+    >
+      <s-block
+        v-for="(item, index) in template.components"
+        :key="index"
+        :styles="item.property.style"
+      >
+        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+      </s-block>
+    </s-layout>
+  </view>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+  import $share from '@/sheep/platform/share';
+  // 隐藏原生tabBar
+  uni.hideTabBar({
+    fail: () => {},
+  });
+
+  const template = computed(() => sheep.$store('app').template?.home);
+  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
+  // (async function() {
+  // console.log('原代码首页定制化数据',template)
+  // let {
+  // 	data
+  // } = await index2Api.decorate();
+  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
+  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
+  // let {
+  // 	data: datas
+  // } = await index2Api.spids();
+  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
+  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
+  // 	return {
+  // 		src: item.picUrl,
+  // 		url: item.url,
+  // 		title: item.name,
+  // 		type: "image"
+  // 	}
+  // })
+  // }())
+
+  onLoad((options) => {
+    // #ifdef MP
+    // 小程序识别二维码
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      console.log('sceneParams=>', sceneParams);
+      options[sceneParams[0]] = sceneParams[1];
+    }
+    // #endif
+
+    // 预览模板
+    if (options.templateId) {
+      sheep.$store('app').init(options.templateId);
+    }
+
+    // 解析分享信息
+    if (options.spm) {
+      $share.decryptSpm(options.spm);
+    }
+
+    // 进入指定页面(完整页面路径)
+    if (options.page) {
+      sheep.$router.go(decodeURIComponent(options.page));
+    }
+  });
+
+  // 下拉刷新
+  onPullDownRefresh(() => {
+    sheep.$store('app').init();
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 800);
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d79e66d..13885ae 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,93 +1,11 @@
-<!-- 首页，支持店铺装修 -->
 <template>
-  <view v-if="template">
-    <s-layout
-      title="首页"
-      navbar="custom"
-      tabbar="/pages/index/index"
-      :bgStyle="template.page"
-      :navbarStyle="template.navigationBar"
-      onShareAppMessage
-    >
-      <s-block
-        v-for="(item, index) in template.components"
-        :key="index"
-        :styles="item.property.style"
-      >
-        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
-      </s-block>
+  <view>
+    <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="{ color: '#fff' }">
+      首页
     </s-layout>
   </view>
 </template>
 
-<script setup>
-  import { computed } from 'vue';
-  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
-  import sheep from '@/sheep';
-  import $share from '@/sheep/platform/share';
-  // 隐藏原生tabBar
-  uni.hideTabBar({
-    fail: () => {},
-  });
+<script setup></script>
 
-  const template = computed(() => sheep.$store('app').template?.home);
-  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
-  // (async function() {
-  // console.log('原代码首页定制化数据',template)
-  // let {
-  // 	data
-  // } = await index2Api.decorate();
-  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
-  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
-  // let {
-  // 	data: datas
-  // } = await index2Api.spids();
-  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
-  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
-  // 	return {
-  // 		src: item.picUrl,
-  // 		url: item.url,
-  // 		title: item.name,
-  // 		type: "image"
-  // 	}
-  // })
-  // }())
-
-  onLoad((options) => {
-    // #ifdef MP
-    // 小程序识别二维码
-    if (options.scene) {
-      const sceneParams = decodeURIComponent(options.scene).split('=');
-      console.log('sceneParams=>', sceneParams);
-      options[sceneParams[0]] = sceneParams[1];
-    }
-    // #endif
-
-    // 预览模板
-    if (options.templateId) {
-      sheep.$store('app').init(options.templateId);
-    }
-
-    // 解析分享信息
-    if (options.spm) {
-      $share.decryptSpm(options.spm);
-    }
-
-    // 进入指定页面(完整页面路径)
-    if (options.page) {
-      sheep.$router.go(decodeURIComponent(options.page));
-    }
-  });
-
-  // 下拉刷新
-  onPullDownRefresh(() => {
-    sheep.$store('app').init();
-    setTimeout(function () {
-      uni.stopPullDownRefresh();
-    }, 800);
-  });
-
-  onPageScroll(() => {});
-</script>
-
-<style></style>
+<style lang="scss" scoped></style>
diff --git a/pages/index/list.vue b/pages/index/list.vue
index f7ae619..ac26dfb 100644
--- a/pages/index/list.vue
+++ b/pages/index/list.vue
@@ -3,18 +3,34 @@
     <!-- 筛选 -->
     <su-sticky bgColor="#fff">
       <view class="ss-flex">
-        <view style="width: calc(100% - 180rpx)">
-          <su-tabs :list="categoryState.categoryList" :current="categoryState.curCategory" />
+        <view style="width: calc(100% - 210rpx)">
+          <su-tabs
+            :list="categoryState.categoryList"
+            :current="categoryState.curCategoryTab"
+            @change="onCategoryTabsChange"
+          />
         </view>
         <view
-          style="width: 180rpx; flex-shrink: 0; text-align: center"
+          style="
+            width: 210rpx;
+            flex-shrink: 0;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          "
           @click="
             () => {
               sortState.showFilter = true;
             }
           "
-          >综合排序</view
         >
+          {{ sortState.sortList[0].name }}
+          <image
+            src="https://3d.aidigitalfield.com/imgs/down-icon.png"
+            style="width: 36rpx; height: 36rpx"
+          />
+        </view>
       </view>
     </su-sticky>
 
@@ -47,7 +63,8 @@
     >
       <view class="goods-list-box">
         <view class="left-list" v-for="item in goodsState.leftGoodsList" :key="item.id">
-          <s-goods-column
+          <!-- 很多地方都引入了s-goods-column组件，为了不影响其他页面，这里用s-goods-column-another组件 -->
+          <s-goods-column-another
             class="goods-md-box"
             size="md"
             :data="item"
@@ -59,12 +76,12 @@
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" />
             </template>
-          </s-goods-column>
+          </s-goods-column-another>
         </view>
       </view>
       <view class="goods-list-box">
         <view class="right-list" v-for="item in goodsState.rightGoodsList" :key="item.id">
-          <s-goods-column
+          <s-goods-column-another
             class="goods-md-box"
             size="md"
             :topRadius="10"
@@ -76,22 +93,37 @@
             <template v-slot:cart>
               <button class="ss-reset-button cart-btn" />
             </template>
-          </s-goods-column>
+          </s-goods-column-another>
         </view>
       </view>
     </view>
+    <uni-load-more
+      v-if="goodsState.pagination.total > 0"
+      :status="goodsState.loadStatus"
+      :content-text="{
+        contentdown: '上拉加载更多',
+      }"
+      @tap="loadMore"
+    />
+    <s-empty
+      v-if="goodsState.pagination.total === 0"
+      icon="/static/soldout-empty.png"
+      text="暂无商品"
+    />
   </s-layout>
 </template>
 
 <script setup>
   import { reactive, ref } from 'vue';
-  import { onLoad } from '@dcloudio/uni-app';
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
   import { handleTree } from '@/sheep/helper/utils';
   import CategoryApi from '@/sheep/api/product/category';
   import SpuApi from '@/sheep/api/product/spu';
+  import OrderApi from '@/sheep/api/trade/order';
   import sheep from '@/sheep';
   import { resetPagination } from '@/sheep/helper/utils';
   import _ from 'lodash-es';
+  import { appendSettlementProduct } from '@/sheep/hooks/useGoods';
 
   const sys_navBar = sheep.$platform.navbar;
 
@@ -101,6 +133,7 @@
   });
 
   const categoryState = reactive({
+    curCategoryTab: 0,
     curCategory: 0,
     categoryList: [],
   });
@@ -117,14 +150,16 @@
         order: false,
       })) || [];
     categoryState.categoryList.unshift({
+      id: 0,
       name: '全部',
-      sort: 'all',
+      sort: 0,
       order: false,
     });
   }
 
   const sortState = reactive({
     curSortTab: 0,
+    curFilter: 0,
     sortList: [
       {
         name: '综合推荐',
@@ -159,7 +194,17 @@
     curOrder: undefined,
     curSort: undefined,
   });
-  // 点击 tab 的 list 筛选项
+
+  // 选择分类
+  function onCategoryTabsChange(e) {
+    if (e.index === categoryState.curCategoryTab) return;
+    categoryState.curCategoryTab = e.index;
+    categoryState.curCategory = e.id;
+    emptyList();
+    getList();
+  }
+
+  // 排序规则
   const onFilterItem = (val) => {
     // 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
     // 这里选择 tabList[0] 的原因，是目前只有它有 list
@@ -189,6 +234,7 @@
       pageNo: 1,
       pageSize: 6,
     },
+    loadStatus: '',
     leftGoodsList: [],
     rightGoodsList: [],
   });
@@ -228,7 +274,7 @@
   }
 
   async function getList() {
-    // state.loadStatus = 'loading';
+    goodsState.loadStatus = 'loading';
     const { code, data } = await SpuApi.getSpuPage({
       pageNo: goodsState.pagination.pageNo,
       pageSize: goodsState.pagination.pageSize,
@@ -241,17 +287,32 @@
       return;
     }
     // 拼接结算信息（营销）
-    // await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
-    //   if (res.code !== 0) {
-    //     return;
-    //   }
-    //   appendSettlementProduct(data.list, res.data);
-    // });
+    await OrderApi.getSettlementProduct(data.list.map((item) => item.id).join(',')).then((res) => {
+      if (res.code !== 0) {
+        return;
+      }
+      appendSettlementProduct(data.list, res.data);
+    });
     goodsState.pagination.list = _.concat(goodsState.pagination.list, data.list);
     goodsState.pagination.total = data.total;
-    // state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+    goodsState.loadStatus =
+      goodsState.pagination.list.length < goodsState.pagination.total ? 'more' : 'noMore';
     mountMasonry();
   }
+
+  // 加载更多
+  function loadMore() {
+    if (goodsState.loadStatus === 'noMore') {
+      return;
+    }
+    goodsState.pagination.pageNo++;
+    getList();
+  }
+
+  // 上拉加载更多
+  onReachBottom(() => {
+    loadMore();
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/sheep/components/s-goods-column-another/s-goods-column-another.vue b/sheep/components/s-goods-column-another/s-goods-column-another.vue
new file mode 100644
index 0000000..f27c313
--- /dev/null
+++ b/sheep/components/s-goods-column-another/s-goods-column-another.vue
@@ -0,0 +1,1033 @@
+<!-- 页面 -->
+<template>
+  <view class="ss-goods-wrap">
+    <!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边  -->
+    <view
+      v-if="size === 'xs'"
+      class="xs-goods-card ss-flex ss-col-stretch"
+      :style="[elStyles]"
+      @tap="onClick"
+    >
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit" />
+      <view
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
+        class="xs-goods-content ss-flex-col ss-row-around"
+      >
+        <view
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
+          class="xs-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+        >
+          {{ data.title || data.name }}
+        </view>
+        <!-- 活动信息 -->
+        <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
+          <view class="card" v-if="discountText">{{ discountText }}</view>
+          <view
+            class="card2"
+            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item"
+          >
+            {{ item }}
+          </view>
+        </view>
+        <view
+          v-if="goodsFields.price?.show"
+          class="xs-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
+          <!-- 活动价格 -->
+          <view
+            class="ss-flex"
+            v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+          >
+            <image
+              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+              class="point-img"
+            ></image>
+            <text class="point-text ss-m-r-16">
+              {{ data.point }}
+              {{
+                !data.pointPrice || data.pointPrice === 0
+                  ? ''
+                  : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+              }}
+            </text>
+          </view>
+          <template v-else>
+            <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+            <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
+            <text v-else>
+              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+            </text>
+          </template>
+        </view>
+      </view>
+    </view>
+
+    <!-- sm卡片：竖向紧凑，一行放三个，图上内容下 -->
+    <view v-if="size === 'sm'" class="sm-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <image
+        class="sm-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        mode="aspectFill"
+      ></image>
+
+      <view
+        v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
+        class="sm-goods-content"
+        :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+      >
+        <view
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
+          class="sm-goods-title ss-line-1 ss-m-b-16"
+        >
+          {{ data.title || data.name }}
+        </view>
+        <!-- 活动信息 -->
+        <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
+          <view class="card" v-if="discountText">{{ discountText }}</view>
+          <view
+            class="card2"
+            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item"
+          >
+            {{ item }}
+          </view>
+        </view>
+        <view
+          v-if="goodsFields.price?.show"
+          class="sm-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
+          <!-- 活动价格 -->
+          <view
+            class="ss-flex"
+            v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+          >
+            <image
+              :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+              class="point-img"
+            ></image>
+            <text class="point-text ss-m-r-16">
+              {{ data.point }}
+              {{
+                !data.pointPrice || data.pointPrice === 0
+                  ? ''
+                  : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+              }}
+            </text>
+          </view>
+          <template v-else>
+            <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+            <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
+            <text v-else>
+              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+            </text>
+          </template>
+        </view>
+      </view>
+    </view>
+
+    <!-- md卡片：竖向，一行放两个，图上内容下 -->
+    <view
+      v-if="size === 'md'"
+      class="md-goods-card ss-flex-col"
+      :style="[elStyles]"
+      style="border-radius: 0"
+      @tap="onClick"
+    >
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
+      </view>
+      <image
+        v-if="data.image_wh"
+        class="md-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        mode="widthFix"
+      />
+      <image
+        v-else
+        class="md-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        :style="[{ height: defaultImgWidth * 1.5 + 'px' }]"
+        mode="aspectFill"
+      />
+      <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"
+      >
+        <view
+          v-if="goodsFields.title?.show || goodsFields.name?.show"
+          class="md-goods-title ss-line-1"
+          :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
+        >
+          {{ data.title || data.name }}
+        </view>
+        <view
+          v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+          class="md-goods-subtitle ss-m-t-16 ss-line-2"
+          :style="[{ color: subTitleColor, background: subTitleBackground }]"
+        >
+          {{ data.subtitle || data.introduction }}
+        </view>
+        <slot name="activity">
+          <view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
+            <view
+              class="activity-tag ss-m-r-10 ss-m-t-16"
+              v-for="item in data.promos"
+              :key="item.id"
+            >
+              {{ item.title }}
+            </view>
+          </view>
+        </slot>
+        <!-- 活动信息 -->
+        <!-- <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
+          <view class="card" v-if="discountText">{{ discountText }}</view>
+          <view
+            class="card2"
+            v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+            :key="item"
+          >
+            {{ item }}
+          </view>
+        </view> -->
+        <view class="ss-flex ss-col-bottom">
+          <view
+            v-if="goodsFields.price?.show"
+            class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
+            :style="[{ color: goodsFields.price.color }]"
+          >
+            <!-- 活动价格 -->
+            <view
+              class="ss-flex"
+              v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"
+            >
+              <image
+                :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                class="point-img"
+              ></image>
+              <text class="point-text ss-m-r-16">
+                {{ data.point }}
+                {{
+                  !data.pointPrice || data.pointPrice === 0
+                    ? ''
+                    : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                }}
+              </text>
+            </view>
+            <template v-else>
+              <text class="price-unit ss-font-24" style="margin-right: 0px">{{ priceUnit }}</text>
+              <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
+              <text v-else>
+                {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+              </text>
+            </template>
+          </view>
+          <!-- <view
+            v-if="
+              (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+              (data.original_price > 0 || data.marketPrice > 0)
+            "
+            class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
+            :style="[{ color: originPriceColor }]"
+          >
+            <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+            <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+          </view> -->
+        </view>
+
+        <!-- <view class="ss-m-t-16 ss-flex ss-col-center ss-flex-wrap">
+          <view class="sales-text">{{ salesAndStock }}</view>
+        </view> -->
+      </view>
+
+      <slot name="cart">
+        <view class="cart-box ss-flex ss-col-center ss-row-center">
+          <image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode="" />
+        </view>
+      </slot>
+    </view>
+
+    <!-- lg卡片：横向型，一行放一个，图片左内容右边  -->
+    <view
+      v-if="size === 'lg'"
+      class="lg-goods-card ss-flex ss-col-stretch"
+      :style="[elStyles]"
+      @tap="onClick"
+    >
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
+      </view>
+      <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view>
+      <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"
+      />
+      <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
+        <view>
+          <view
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
+            class="lg-goods-title ss-line-2"
+            :style="[{ color: titleColor }]"
+          >
+            {{ data.title || data.name }}
+          </view>
+          <view
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+            class="lg-goods-subtitle ss-m-t-10 ss-line-1"
+            :style="[{ color: subTitleColor, background: subTitleBackground }]"
+          >
+            {{ data.subtitle || data.introduction }}
+          </view>
+        </view>
+        <view>
+          <slot name="activity">
+            <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center">
+              <view class="activity-tag ss-m-r-10" v-for="item in data.promos" :key="item.id">
+                {{ item.title }}
+              </view>
+            </view>
+          </slot>
+          <!-- 活动信息 -->
+          <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
+            <view class="card" v-if="discountText">{{ discountText }}</view>
+            <view
+              class="card2"
+              v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+              :key="item"
+            >
+              {{ item }}
+            </view>
+          </view>
+          <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
+            <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
+              <!-- 活动价格 -->
+              <view
+                class="ss-flex"
+                v-if="
+                  data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type
+                "
+              >
+                <image
+                  :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                  class="point-img"
+                ></image>
+                <text class="point-text ss-m-r-16">
+                  {{ data.point }}
+                  {{
+                    !data.pointPrice || data.pointPrice === 0
+                      ? ''
+                      : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                  }}
+                </text>
+              </view>
+              <template v-else>
+                <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+                <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
+                <text v-else>
+                  {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+                </text>
+              </template>
+            </view>
+            <view
+              v-if="
+                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+                (data.original_price > 0 || data.marketPrice > 0)
+              "
+              class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
+              :style="[{ color: originPriceColor }]"
+            >
+              <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+              <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+            </view>
+          </view>
+          <view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
+            <view class="sales-text">{{ salesAndStock }}</view>
+          </view>
+        </view>
+      </view>
+
+      <slot name="cart">
+        <view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow"> 去购买</view>
+      </slot>
+    </view>
+
+    <!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
+    <view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
+      <view v-if="tagStyle.show" class="tag-icon-box">
+        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
+      </view>
+      <image
+        class="sl-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        mode="aspectFill"
+      />
+      <view class="sl-goods-content">
+        <view>
+          <view
+            v-if="goodsFields.title?.show || goodsFields.name?.show"
+            class="sl-goods-title ss-line-1"
+            :style="[{ color: titleColor }]"
+          >
+            {{ data.title || data.name }}
+          </view>
+          <view
+            v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+            class="sl-goods-subtitle ss-m-t-16"
+            :style="[{ color: subTitleColor, background: subTitleBackground }]"
+          >
+            {{ data.subtitle || data.introduction }}
+          </view>
+        </view>
+        <view>
+          <slot name="activity">
+            <view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
+              <view
+                class="activity-tag ss-m-r-10 ss-m-t-16"
+                v-for="item in data.promos"
+                :key="item.id"
+              >
+                {{ item.title }}
+              </view>
+            </view>
+          </slot>
+          <!-- 活动信息 -->
+          <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
+            <view class="card" v-if="discountText">{{ discountText }}</view>
+            <view
+              class="card2"
+              v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
+              :key="item"
+            >
+              {{ item }}
+            </view>
+          </view>
+          <view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
+            <view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
+              <!-- 活动价格 -->
+              <view
+                class="ss-flex"
+                v-if="
+                  data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type
+                "
+              >
+                <image
+                  :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
+                  class="point-img"
+                ></image>
+                <text class="ss-m-r-16">
+                  {{ data.point }}
+                  {{
+                    !data.pointPrice || data.pointPrice === 0
+                      ? ''
+                      : `+${priceUnit}${fen2yuan(data.pointPrice)}`
+                  }}
+                </text>
+              </view>
+              <template v-else>
+                <text class="price-unit ss-font-24">{{ priceUnit }}</text>
+                <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
+                <text v-else>
+                  {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
+                </text>
+              </template>
+            </view>
+            <view
+              v-if="
+                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
+                (data.original_price > 0 || data.marketPrice > 0)
+              "
+              class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
+              :style="[{ color: originPriceColor }]"
+            >
+              <text class="price-unit ss-font-20">{{ priceUnit }}</text>
+              <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
+            </view>
+          </view>
+          <view class="ss-m-t-16 ss-flex ss-flex-wrap">
+            <view class="sales-text">{{ salesAndStock }}</view>
+          </view>
+        </view>
+      </view>
+
+      <slot name="cart">
+        <view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  /**
+   * 商品卡片
+   *
+   * @property {Array} size = [xs | sm | md | lg | sl ] 			 	- 列表数据
+   * @property {String} tag                      - md及以上才有
+   * @property {String} img                      - 图片
+   * @property {String} background                  - 背景色
+   * @property {String} topRadius                  - 上圆角
+   * @property {String} bottomRadius                  - 下圆角
+   * @property {String} title                    - 标题
+   * @property {String} titleColor                  - 标题颜色
+   * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
+   * @property {String} subTitle                    - 副标题
+   * @property {String} subTitleColor                  - 副标题颜色
+   * @property {String} subTitleBackground              - 副标题背景
+   * @property {String | Number} price                - 价格
+   * @property {String} priceColor                  - 价格颜色
+   * @property {String | Number} originPrice              - 原价/划线价
+   * @property {String} originPriceColor                - 原价颜色
+   * @property {String | Number} sales                - 销售数量
+   * @property {String} salesColor                  - 销售数量颜色
+   *
+   * @slots activity												 	- 活动插槽
+   * @slots cart														- 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
+   *
+   * @event {Function()} click                    - 点击卡片
+   *
+   */
+  import { computed, ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue';
+  import sheep from '@/sheep';
+  import {
+    fen2yuan,
+    formatExchange,
+    formatSales,
+    formatStock,
+    getRewardActivityRuleItemDescriptions,
+  } from '@/sheep/hooks/useGoods';
+  import { isArray } from 'lodash-es';
+  import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
+
+  // 数据
+  let defaultImgWidth = ref(0);
+
+  // 接收参数
+  const props = defineProps({
+    goodsFields: {
+      type: [Array, Object],
+      default() {
+        return {
+          // 商品价格
+          price: {
+            show: true,
+          },
+          // 库存
+          stock: {
+            show: true,
+          },
+          // 商品名称
+          name: {
+            show: true,
+          },
+          // 商品介绍
+          introduction: {
+            show: true,
+          },
+          // 市场价
+          marketPrice: {
+            show: true,
+          },
+          // 销量
+          salesCount: {
+            show: true,
+          },
+        };
+      },
+    },
+    tagStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    size: {
+      type: String,
+      default: 'sl',
+    },
+    background: {
+      type: String,
+      default: '',
+    },
+    topRadius: {
+      type: Number,
+      default: 0,
+    },
+    bottomRadius: {
+      type: Number,
+      default: 0,
+    },
+    titleWidth: {
+      type: Number,
+      default: 0,
+    },
+    titleColor: {
+      type: String,
+      default: '#333',
+    },
+    priceColor: {
+      type: String,
+      default: '',
+    },
+    originPriceColor: {
+      type: String,
+      default: '#C4C4C4',
+    },
+    priceUnit: {
+      type: String,
+      default: '￥',
+    },
+    subTitleColor: {
+      type: String,
+      default: '#999999',
+    },
+    subTitleBackground: {
+      type: String,
+      default: '',
+    },
+    buttonShow: {
+      type: Boolean,
+      default: true,
+    },
+    seckillTag: {
+      type: Boolean,
+      default: false,
+    },
+    grouponTag: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  // 优惠文案
+  const discountText = computed(() => {
+    const promotionType = props.data.promotionType;
+    if (promotionType === 4) {
+      return '限时优惠';
+    } else if (promotionType === 6) {
+      return '会员价';
+    }
+    return undefined;
+  });
+
+  // 组件样式
+  const elStyles = computed(() => {
+    return {
+      background: props.background,
+      'border-top-left-radius': props.topRadius + 'px',
+      'border-top-right-radius': props.topRadius + 'px',
+      'border-bottom-left-radius': props.bottomRadius + 'px',
+      'border-bottom-right-radius': props.bottomRadius + 'px',
+    };
+  });
+
+  // 格式化销量、库存信息
+  const salesAndStock = computed(() => {
+    let text = [];
+    if (props.goodsFields.salesCount?.show) {
+      if (
+        props.data.activityType &&
+        props.data.activityType === PromotionActivityTypeEnum.POINT.type
+      ) {
+        text.push(
+          formatExchange(
+            props.data.sales_show_type,
+            (props.data.pointTotalStock || 0) - (props.data.pointStock || 0),
+          ),
+        );
+      } else {
+        text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
+      }
+    }
+    if (props.goodsFields.stock?.show) {
+      if (
+        props.data.activityType &&
+        props.data.activityType === PromotionActivityTypeEnum.POINT.type
+      ) {
+        text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
+      } else {
+        text.push(formatStock(props.data.stock_show_type, props.data.stock));
+      }
+    }
+    return text.join(' | ');
+  });
+
+  // 返回事件
+  const emits = defineEmits(['click', 'getHeight']);
+
+  const onClick = () => {
+    emits('click');
+  };
+
+  // 获取卡片实时高度
+  const { proxy } = getCurrentInstance();
+  const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+
+  function getGoodsPriceCardWH() {
+    if (props.size === 'md') {
+      const view = uni.createSelectorQuery().in(proxy);
+      view.select(`#${elId}`).fields({
+        size: true,
+        scrollOffset: true,
+      });
+      view.exec((data) => {
+        console.log(data, 'data');
+        let totalHeight = 0;
+        const goodsPriceCard = data[0];
+        defaultImgWidth.value = data[0].width;
+
+        if (props.data.image_wh && Number(props.data.image_wh.w)) {
+          totalHeight =
+            (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
+            goodsPriceCard.height;
+        } else {
+          totalHeight = goodsPriceCard.width + goodsPriceCard.height;
+        }
+        emits('getHeight', totalHeight);
+      });
+    }
+  }
+
+  onMounted(() => {
+    nextTick(() => {
+      getGoodsPriceCardWH();
+    });
+  });
+</script>
+
+<style lang="scss" scoped>
+  .tag-icon-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+
+    .tag-icon {
+      width: 72rpx;
+      height: 44rpx;
+    }
+  }
+
+  .seckill-tag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 68rpx;
+    height: 38rpx;
+    background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
+    border-radius: 10rpx 0px 10rpx 0px;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 32rpx;
+  }
+
+  .point-img {
+    width: 30rpx;
+    height: 30rpx;
+    margin: 0 4rpx;
+  }
+
+  .groupon-tag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    width: 68rpx;
+    height: 38rpx;
+    background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
+    border-radius: 10rpx 0px 10rpx 0px;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 32rpx;
+  }
+
+  .goods-img {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+  }
+
+  .price-unit {
+    margin-right: -4px;
+  }
+
+  .sales-text {
+    display: table;
+    font-size: 24rpx;
+    transform: scale(0.8);
+    margin-left: 0rpx;
+    color: #c4c4c4;
+  }
+
+  .activity-tag {
+    font-size: 20rpx;
+    color: #ff0000;
+    line-height: 30rpx;
+    padding: 0 10rpx;
+    border: 1px solid rgba(#ff0000, 0.25);
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .goods-origin-price {
+    font-size: 20rpx;
+    color: #c4c4c4;
+    line-height: 36rpx;
+    text-decoration: line-through;
+  }
+
+  // xs
+  .xs-goods-card {
+    overflow: hidden;
+    // max-width: 375rpx;
+    background-color: $white;
+    position: relative;
+
+    .xs-img-box {
+      width: 128rpx;
+      height: 128rpx;
+      margin-right: 20rpx;
+    }
+
+    .xs-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .xs-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+
+  // sm
+  .sm-goods-card {
+    overflow: hidden;
+    // width: 223rpx;
+    // width: 100%;
+    background-color: $white;
+    position: relative;
+
+    .sm-img-box {
+      // width: 228rpx;
+      width: 100%;
+      height: 208rpx;
+    }
+
+    .sm-goods-content {
+      padding: 20rpx 16rpx;
+      box-sizing: border-box;
+    }
+
+    .sm-goods-title {
+      font-size: 26rpx;
+      color: #333;
+    }
+
+    .sm-goods-price {
+      font-size: 30rpx;
+      color: $red;
+    }
+  }
+
+  // md
+  .md-goods-card {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    position: relative;
+
+    .md-img-box {
+      width: 100%;
+    }
+
+    .md-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      width: 100%;
+    }
+
+    .md-goods-subtitle {
+      height: 60rpx;
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+    }
+
+    .md-goods-price {
+      font-size: 14px;
+      color: #031c24;
+      // line-height: 36rpx;
+    }
+
+    .cart-box {
+      width: 54rpx;
+      height: 54rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 50%;
+      position: absolute;
+      bottom: 50rpx;
+      right: 20rpx;
+      z-index: 2;
+
+      .cart-icon {
+        width: 30rpx;
+        height: 30rpx;
+      }
+    }
+  }
+
+  // lg
+  .lg-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    background-color: $white;
+    height: 280rpx;
+
+    .lg-img-box {
+      width: 280rpx;
+      height: 280rpx;
+      margin-right: 20rpx;
+    }
+
+    .lg-goods-title {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333333;
+      // line-height: 36rpx;
+      // width: 410rpx;
+    }
+
+    .lg-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+      // line-height: 30rpx;
+      // width: 410rpx;
+    }
+
+    .lg-goods-price {
+      font-size: 30rpx;
+      color: $red;
+      line-height: 36rpx;
+    }
+
+    .buy-box {
+      position: absolute;
+      bottom: 20rpx;
+      right: 20rpx;
+      z-index: 2;
+      width: 120rpx;
+      height: 50rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+
+    .tag-box {
+      width: 100%;
+    }
+  }
+
+  // sl
+
+  .sl-goods-card {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    background-color: $white;
+
+    .sl-goods-content {
+      padding: 20rpx 20rpx;
+      box-sizing: border-box;
+    }
+
+    .sl-img-box {
+      width: 100%;
+      height: 360rpx;
+    }
+
+    .sl-goods-title {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .sl-goods-subtitle {
+      font-size: 24rpx;
+      font-weight: 400;
+      color: #999999;
+      line-height: 30rpx;
+    }
+
+    .sl-goods-price {
+      font-size: 30rpx;
+      color: $red;
+      line-height: 36rpx;
+    }
+
+    .buy-box {
+      position: absolute;
+      bottom: 20rpx;
+      right: 20rpx;
+      z-index: 2;
+      width: 148rpx;
+      height: 50rpx;
+      background: linear-gradient(90deg, #fe8900, #ff5e00);
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
+
+  .card {
+    width: fit-content;
+    height: fit-content;
+    padding: 2rpx 10rpx;
+    background-color: red;
+    color: #ffffff;
+    font-size: 24rpx;
+    margin-top: 5rpx;
+  }
+
+  .card2 {
+    width: fit-content;
+    height: fit-content;
+    padding: 2rpx 10rpx;
+    background-color: rgb(255, 242, 241);
+    color: #ff2621;
+    font-size: 24rpx;
+    margin: 5rpx 0 5rpx 5rpx;
+  }
+
+  .iconBox {
+    width: 100%;
+    height: fit-content;
+    margin-top: 10rpx;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+</style>