Merge branch 'master' of https://gitee.com/yudaocode/yudao-mall-uniapp into develop

# Conflicts: # pages/goods/index.vue # pages/order/addressSelection.vue # pages/order/confirm.vue # sheep/components/s-goods-column/s-goods-column.vue
2024-09-16 08:24:54 +08:00
parent 5a66e71809 4a8a92f323
commit f03fcf1373
72 changed files with 3179 additions and 1995 deletions
@@ -10,7 +10,11 @@
      />

      <!-- 2. 短信登录  smsLogin -->
-      <sms-login v-if="authType === 'smsLogin'" :agreeStatus="state.protocol" @onConfirm="onConfirm" />
+      <sms-login
+        v-if="authType === 'smsLogin'"
+        :agreeStatus="state.protocol"
+        @onConfirm="onConfirm"
+      />

      <!-- 3. 忘记密码 resetPassword-->
      <reset-password v-if="authType === 'resetPassword'" />
@@ -32,7 +36,11 @@
        <!-- 7.1 微信小程序的快捷登录 -->
        <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
          <view class="register-title">还没有账号?</view>
-          <button class="ss-reset-button login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
+          <button
+            class="ss-reset-button login-btn"
+            open-type="getPhoneNumber"
+            @getphonenumber="getPhoneNumber"
+          >
            快捷登录
          </button>
          <view class="circle" />
@@ -81,17 +89,13 @@
          />
          <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
            我已阅读并遵守
-            <view class="tcp-text" @tap.stop="onProtocol('用户协议')">
-              《用户协议》
-            </view>
+            <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
            <view class="agreement-text">与</view>
-            <view class="tcp-text" @tap.stop="onProtocol('隐私协议')">
-              《隐私协议》
-            </view>
+            <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
          </view>
        </label>
      </view>
-      <view class="safe-box"/>
+      <view class="safe-box" />
    </view>
  </su-popup>
 </template>
@@ -107,8 +111,6 @@
  import mpAuthorization from './components/mp-authorization.vue';
  import { closeAuthModal, showAuthModal } from '@/sheep/hooks/useModal';

-  const appInfo = computed(() => sheep.$store('app').info);
-
  const modalStore = sheep.$store('modal');
  // 授权弹窗类型
  const authType = computed(() => modalStore.auth);
@@ -152,7 +154,13 @@
    }
    const loginRes = await sheep.$platform.useProvider(provider).login();
    if (loginRes) {
+      const userInfo = await sheep.$store('user').getInfo();
      closeAuthModal();
+      // 如果用户已经有头像和昵称，不需要再次授权
+      if (userInfo.avatar && userInfo.nickname) {
+        return;
+      }
+
      // 触发小程序授权信息弹框
      // #ifdef MP-WEIXIN
      showAuthModal('mpAuthorization');
@@ -9,7 +9,7 @@
    <!-- 基础组件：列表导航 -->
    <s-menu-list v-if="type === 'MenuList'" :data="data" />
    <!-- 基础组件：宫格导航 -->
-    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
+    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" :styles="styles" />
    <!-- 基础组件：弹窗广告 -->
    <s-popup-image v-if="type === 'Popover'" :data="data" />
    <!-- 基础组件：悬浮按钮 -->
@@ -47,13 +47,13 @@
    <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />

    <!-- 用户组件：用户卡片 -->
-    <s-user-card v-if="type === 'UserCard'" />
+    <s-user-card v-if="type === 'UserCard'" :data="data" :styles="styles" />
    <!-- 用户组件：用户订单 -->
-    <s-order-card v-if="type === 'UserOrder'" :data="data" />
+    <s-order-card v-if="type === 'UserOrder'" :data="data" :styles="styles" />
    <!-- 用户组件：用户资产 -->
-    <s-wallet-card v-if="type === 'UserWallet'" />
+    <s-wallet-card v-if="type === 'UserWallet'" :data="data" :styles="styles" />
    <!-- 用户组件：用户卡券 -->
-    <s-coupon-card v-if="type === 'UserCoupon'" />
+    <s-coupon-card v-if="type === 'UserCoupon'" :data="data" :styles="styles" />
  </view>
 </template>

@@ -1,152 +1,176 @@
 <!-- 装修营销组件：优惠券  -->
 <template>
-  <scroll-view class="scroll-box" scroll-x scroll-anchoring>
-    <view class="coupon-box ss-flex">
-      <view
-        class="coupon-item"
-        :style="[couponBg, { marginLeft: `${data.space}px` }]"
-        v-for="(item, index) in couponList"
-        :key="index"
-      >
-        <su-coupon
-          :size="SIZE_LIST[columns - 1]"
-          :textColor="data.textColor"
-          background=""
-          :couponId="item.id"
-          :title="item.name"
-          :type="formatCouponDiscountType(item)"
-          :value="formatCouponDiscountValue(item)"
-          :sellBy="formatValidityType(item)"
-        >
-          <template v-slot:btn>
-            <!-- 两列时，领取按钮坚排 -->
-            <button
-              v-if="columns === 2"
-              @click.stop="onGetCoupon(item.id)"
-              class="ss-reset-button card-btn vertical"
-              :style="[btnStyles]"
-            >
-              <view class="btn-text">立即领取</view>
-            </button>
-            <button
-              v-else
-              class="ss-reset-button card-btn"
-              :style="[btnStyles]"
-              @click.stop="onGetCoupon(item.id)"
-            >
-              立即领取
-            </button>
-          </template>
-        </su-coupon>
-      </view>
-    </view>
-  </scroll-view>
+	<scroll-view class="scroll-box" scroll-x scroll-anchoring :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+		<view class="coupon-box ss-flex" :style="couponList.length === 2 ? couponBoxStyleTwo : couponBoxStyleNormal">
+			<view class="coupon-item" :style="[couponBg, { marginLeft: `${data.space}px` }]"
+				v-for="(item, index) in couponList" :key="index">
+				<su-coupon :size="SIZE_LIST[columns - 1]" :textColor="data.textColor" background="" :couponId="item.id"
+					:title="item.name" :type="formatCouponDiscountType(item)" :value="formatCouponDiscountValue(item)"
+					:sellBy="formatValidityType(item)">
+					<template v-slot:btn>
+						<!-- 两列时，领取按钮坚排 -->
+						<button v-if="columns === 2" @click.stop="onGetCoupon(item.id)"
+							class="ss-reset-button card-btn vertical" :style="[btnStyles]">
+							<view class="btn-text">立即领取</view>
+						</button>
+						<button v-else class="ss-reset-button card-btn" :style="[btnStyles]"
+							@click.stop="onGetCoupon(item.id)">
+							立即领取
+						</button>
+					</template>
+				</su-coupon>
+			</view>
+		</view>
+	</scroll-view>
 </template>

 <script setup>
-  import sheep from '@/sheep';
-  import CouponApi from '@/sheep/api/promotion/coupon';
-  import { ref, onMounted } from 'vue';
-  import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from "@/sheep/util/const";
-  import { floatToFixed2, formatDate } from "@/sheep/util";
+	import sheep from '@/sheep';
+	import CouponApi from '@/sheep/api/promotion/coupon';
+	import {
+		ref,
+		onMounted,
+		computed
+	} from 'vue';
+	import {
+		CouponTemplateValidityTypeEnum,
+		PromotionDiscountTypeEnum
+	} from "@/sheep/util/const";
+	import {
+		floatToFixed2,
+		formatDate
+	} from "@/sheep/util";

-  const props = defineProps({
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    styles: {
-      type: Object,
-      default: () => ({}),
-    },
-  });
-  const { columns, button } = props.data;
-  const SIZE_LIST = ['lg', 'md', 'xs']
-  const couponBg = {
-    background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
-  };
-  const btnStyles = {
-    background: button.bgColor,
-    color: button.color,
-  };
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+		styles: {
+			type: Object,
+			default: () => ({}),
+		},
+	});
+	const {
+		columns,
+		button
+	} = props.data;
+	const SIZE_LIST = ['lg', 'md', 'xs']
+	const couponBg = {
+		background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
+	};
+	const btnStyles = {
+		background: button.bgColor,
+		color: button.color,
+	};
+	// 两列优惠券时的排版方式
+	const couponBoxStyleNormal = {
+		'display': 'flex',
+		'justify-content': 'space-between'
+	};
+	// 非两列优惠券时的排版方式
+	const couponBoxStyleTwo = {
+		'display': 'flex',
+		'justify-content': 'space-around'
+	};
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;

-  // 格式化【折扣类型】
-  const formatCouponDiscountType = (coupon) => {
-    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      return 'reduce'
-    }
-    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-      return 'percent'
-    }
-    return `未知【${coupon.discountType}】`
-  }
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
+	});
+	// 格式化【折扣类型】
+	const formatCouponDiscountType = (coupon) => {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+			return 'reduce'
+		}
+		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+			return 'percent'
+		}
+		return `未知【${coupon.discountType}】`
+	}

-  // 格式化【折扣】
-  const formatCouponDiscountValue = (coupon) => {
-    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      return floatToFixed2(coupon.discountPrice)
-    }
-    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-      return coupon.discountPercent
-    }
-    return `未知【${coupon.discountType}】`
-  }
+	// 格式化【折扣】
+	const formatCouponDiscountValue = (coupon) => {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+			return floatToFixed2(coupon.discountPrice)
+		}
+		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+			return coupon.discountPercent
+		}
+		return `未知【${coupon.discountType}】`
+	}

-  // 格式化【有效期限】
-  const formatValidityType = (row) => {
-    if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
-      return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
-    }
-    if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
-      return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
-    }
-    return '未知【' + row.validityType + '】'
-  }
+	// 格式化【有效期限】
+	const formatValidityType = (row) => {
+		if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+			return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
+		}
+		if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+			return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
+		}
+		return '未知【' + row.validityType + '】'
+	}

-  const couponList = ref([]);
-  // 立即领取优惠券
-  async function onGetCoupon(id) {
-    const { error, msg } = await CouponApi.takeCoupon(id);
-    if (error === 0) {
-      uni.showToast({
-        title: msg,
-        icon: 'none',
-      });
-      return
-    }
-    await getCouponTemplateList()
-  }
-  const getCouponTemplateList = async () => {
-    const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
-    couponList.value = data;
-  }
-  onMounted(() => {
-    getCouponTemplateList()
-  });
+	const couponList = ref([]);
+	// 立即领取优惠券
+	async function onGetCoupon(id) {
+		const {
+			error,
+			msg
+		} = await CouponApi.takeCoupon(id);
+		if (error === 0) {
+			uni.showToast({
+				title: msg,
+				icon: 'none',
+			});
+			return
+		}
+		await getCouponTemplateList()
+	}
+	const getCouponTemplateList = async () => {
+		const {
+			data
+		} = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+		couponList.value = data;
+	}
+	onMounted(() => {
+		getCouponTemplateList()
+	});
 </script>

 <style lang="scss" scoped>
-  .card-btn {
-    width: 140rpx;
-    height: 50rpx;
-    border-radius: 25rpx;
-    font-size: 24rpx;
-    line-height: 50rpx;
-    &.vertical {
-      width: 50rpx;
-      height: 140rpx;
-      margin: auto 20rpx auto 0;
+	.card-btn {
+		width: 140rpx;
+		height: 50rpx;
+		border-radius: 25rpx;
+		font-size: 24rpx;
+		line-height: 50rpx;

-      .btn-text {
-        font-size: 24rpx;
-        text-align: center;
-        writing-mode: vertical-lr;
-      }
-    }
-  }
-  .coupon-item {
-    &:nth-of-type(1) {
-      margin-left: 0 !important;
-    }
-  }
-</style>
+		&.vertical {
+			width: 50rpx;
+			height: 140rpx;
+			margin: auto 20rpx auto 0;
+
+			.btn-text {
+				font-size: 24rpx;
+				text-align: center;
+				writing-mode: vertical-lr;
+			}
+		}
+	}
+
+	.coupon-item {
+		&:nth-of-type(1) {
+			margin-left: 0 !important;
+		}
+	}
+</style>
@@ -1,6 +1,6 @@
 <!-- 装修用户组件：用户卡券 -->
 <template>
-	<view class="ss-coupon-menu-wrap ss-flex ss-col-center">
+	<view class="ss-coupon-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
 		<view class="menu-item ss-flex-col ss-row-center ss-col-center" v-for="item in props.list" :key="item.title"
 			@tap="sheep.$router.go(item.path, { type: item.type })"
 			:class="item.type === 'all' ? 'menu-wallet' : 'ss-flex-1'">
@@ -15,6 +15,7 @@
 	 * 装修组件 - 优惠券菜单
 	 */
 	import sheep from '@/sheep';
+	import { computed } from 'vue';

 	// 接收参数
 	const props = defineProps({
@@ -52,6 +53,28 @@
 				];
 			},
 		},
+		// 装修数据
+		data: {
+		  type: Object,
+		  default: () => ({}),
+		},
+		// 装修样式
+		styles: {
+		  type: Object,
+		  default: () => ({}),
+		},
+	});
+	// 设置背景样式
+	const bgStyle = computed(() => {
+	  // 直接从 props.styles 解构
+	  const { bgType, bgImg, bgColor } = props.styles; 
+	
+	  // 根据 bgType 返回相应的样式
+	  return {
+		background: bgType === 'img'
+			? `url(${bgImg}) no-repeat top center / 100% 100%`
+			: bgColor
+		};
 	});
 </script>

@@ -37,30 +37,22 @@
        <view class="ss-flex ss-row-between ss-m-t-16">
          <view
            class="sellby-text"
-            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
+            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
            v-if="data.validityType === 2"
          >
            有效期：领取后 {{ data.fixedEndTerm }} 天内可用
          </view>
-          <view
-            class="sellby-text"
-            :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
-            v-else
-          >
+          <view class="sellby-text" :class="isDisable ? 'disabled-color' : 'subtitle-color'" v-else>
            有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
            {{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
          </view>
-          <view
-            class="value-enough"
-            :class="isDisable ? 'disabled-color' : 'subtitle-color'"
-          >
+          <view class="value-enough" :class="isDisable ? 'disabled-color' : 'subtitle-color'">
            满 {{ fen2yuan(data.usePrice) }} 可用
          </view>
        </view>
      </view>
    </view>

-    <!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
    <view class="desc ss-flex ss-row-between">
      <view>
        <view class="desc-title">{{ data.description }}</view>
@@ -76,17 +68,15 @@
 </template>

 <script setup>
-  import { computed, reactive } from 'vue';
+  import { computed } from 'vue';
  import { fen2yuan } from '../../hooks/useGoods';
  import sheep from '../../index';

-  const state = reactive({});
-
  const isDisable = computed(() => {
    if (props.type === 'coupon') {
      return false;
    }
-    return props.data.status !== 1;
+    return props.disabled;
  });

  // 接受参数
@@ -202,4 +192,4 @@
  .price-text {
    color: #ff0000;
  }
-</style>
+</style>
@@ -16,8 +16,12 @@
        :scroll-with-animation="false"
        :enable-back-to-top="true"
      >
+        <!--可使用的优惠券区域-->
        <view class="subtitle ss-m-l-20">可使用优惠券</view>
-        <view v-for="(item, index) in state.couponInfo" :key="index">
+        <view
+          v-for="(item, index) in state.couponInfo.filter((coupon) => coupon.match)"
+          :key="index"
+        >
          <s-coupon-list :data="item" type="user" :disabled="false">
            <template #default>
              <label class="ss-flex ss-col-center" @tap="radioChange(item.id)">
@@ -31,19 +35,18 @@
            </template>
          </s-coupon-list>
        </view>
-        <!-- TODO 芋艿：未来接口需要支持下
+        <!--不可使用的优惠券区域-->
        <view class="subtitle ss-m-t-40 ss-m-l-20">不可使用优惠券</view>
-        <view v-for="item in state.couponInfo.cannot_use" :key="item.id">
+        <view v-for="item in state.couponInfo.filter((coupon) => !coupon.match)" :key="item.id">
          <s-coupon-list :data="item" type="user" :disabled="true">
            <template v-slot:reason>
              <view class="ss-flex ss-m-t-24">
                <view class="reason-title"> 不可用原因：</view>
-                <view class="reason-desc">{{ item.cannot_use_msg }}</view>
+                <view class="reason-desc">{{ item.mismatchReason || '未达到使用门槛' }}</view>
              </view>
            </template>
          </s-coupon-list>
        </view>
-      -->
      </scroll-view>
    </view>
    <view class="modal-footer ss-flex">
@@ -55,7 +58,8 @@
  import { computed, reactive } from 'vue';

  const props = defineProps({
-    modelValue: { // 优惠劵列表
+    modelValue: {
+      // 优惠劵列表
      type: Object,
      default() {},
    },
@@ -69,13 +73,13 @@

  const state = reactive({
    couponInfo: computed(() => props.modelValue), // 优惠劵列表
-    couponId: 0, // 选中的优惠劵编号
+    couponId: undefined, // 选中的优惠劵编号
  });

  // 选中优惠劵
  function radioChange(couponId) {
    if (state.couponId === couponId) {
-      state.couponId = 0;
+      state.couponId = undefined;
    } else {
      state.couponId = couponId;
    }
@@ -84,7 +88,7 @@
  // 确认优惠劵
  const onConfirm = () => {
    emits('confirm', state.couponId);
-  }
+  };
 </script>
 <style lang="scss" scoped>
  :deep() {
@@ -96,25 +100,30 @@
  .model-box {
    height: 60vh;
  }
+
  .title {
    font-size: 36rpx;
    height: 80rpx;
    font-weight: bold;
    color: #333333;
  }
+
  .subtitle {
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
  }
+
  .model-content {
    height: 54vh;
  }
+
  .modal-footer {
    width: 100%;
    height: 120rpx;
    background: #fff;
  }
+
  .confirm-btn {
    width: 710rpx;
    margin-left: 20rpx;
@@ -123,12 +132,14 @@
    border-radius: 40rpx;
    color: #fff;
  }
+
  .reason-title {
    font-weight: 600;
    font-size: 20rpx;
    line-height: 26rpx;
    color: #ff0003;
  }
+
  .reason-desc {
    font-weight: 600;
    font-size: 20rpx;
@@ -44,9 +44,9 @@
   *
   * @property {Number | String}  alwaysShow = [0,1]			    - 是否常驻
   * @property {Number | String}  styleType = [inner]			   	- 是否沉浸式
-   * @property {String | Number} type 		 					- 标题背景模式
-   * @property {String} color 		 							- 页面背景色
-   * @property {String} src 		 								- 页面背景图片
+   * @property {String | Number} type              - 标题背景模式
+   * @property {String} color                  - 页面背景色
+   * @property {String} src                    - 页面背景图片
   */
  import { computed, unref } from 'vue';
  import sheep from '@/sheep';
@@ -77,7 +77,7 @@
  });
  const navList = computed(() => {
    // #ifdef MP
-    return props.data.mapCells || [];
+    return props.data.mpCells || [];
    // #endif
    return props.data.otherCells || [];
  });
@@ -117,11 +117,12 @@
  const bgStyles = computed(() => {
    return {
      background:
-          props.data.bgType === 'img' && props.data.bgImg
+        props.data.bgType === 'img' && props.data.bgImg
          ? `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`
-          : props.data.bgColor
+          : props.data.bgColor,
    };
  });
+
  // 左侧按钮：返回上一页或首页
  function onClickLeft() {
    if (hasHistory) {
@@ -130,6 +131,7 @@
      sheep.$router.go('/pages/index/index');
    }
  }
+
  // 右侧按钮：打开快捷菜单
  function onClickRight() {
    showMenuTools();
@@ -147,44 +149,53 @@
      top: 50%;
      transform: translateY(-50%);
    }
+
    .nav-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20rpx;
+
      .inner-icon-box {
        border: 1px solid rgba(#fff, 0.4);
        background: none !important;
      }
+
      .icon-box {
        background: #ffffff;
-        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
-          0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
        border-radius: 30rpx;
        width: 134rpx;
        height: 56rpx;
        margin-left: 8rpx;
+
        .line {
          width: 2rpx;
          height: 24rpx;
          background: #e5e5e7;
        }
+
        .sicon-back {
          font-size: 32rpx;
        }
+
        .sicon-home {
          font-size: 32rpx;
        }
+
        .sicon-more {
          font-size: 32rpx;
        }
+
        .icon-button {
          width: 67rpx;
          height: 56rpx;
+
          &-left:hover {
            background: rgba(0, 0, 0, 0.16);
            border-radius: 30rpx 0px 0px 30rpx;
          }
+
          &-right:hover {
            background: rgba(0, 0, 0, 0.16);
            border-radius: 0px 30rpx 30rpx 0px;
@@ -3,7 +3,10 @@
  <!-- 商品卡片 -->
  <view>
    <!-- 布局1. 单列大图（上图，下内容）-->
-    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length"
+      class="goods-sl-box"
+    >
      <view
        class="goods-box"
        v-for="item in state.goodsList"
@@ -100,7 +103,10 @@
    </view>

    <!-- 布局3. 单列小图（左图，右内容） -->
-    <view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length"
+      class="goods-lg-box"
+    >
      <view
        class="goods-box"
        :style="[{ marginBottom: data.space + 'px' }]"
@@ -147,7 +153,7 @@
    TWO_COL: 'twoCol',
    // 单列小图
    ONE_COL_SMALL_IMG: 'oneColSmallImg',
-  }
+  };

  const state = reactive({
    goodsList: [],
@@ -157,16 +163,16 @@
  const props = defineProps({
    data: {
      type: Object,
-      default() {},
+      default: () => ({}),
    },
    styles: {
      type: Object,
-      default() {},
+      default: () => ({}),
    },
  });

-  const { layoutType, btnBuy, spuIds } = props.data ?? {};
-  const { marginLeft, marginRight } = props.styles ?? {};
+  const { layoutType, btnBuy, spuIds } = props.data || {};
+  const { marginLeft, marginRight } = props.styles || {};

  // 购买按钮样式
  const buyStyle = computed(() => {
@@ -215,6 +221,7 @@
    // 计数
    count++;
  }
+
  //endregion

  /**
@@ -283,7 +290,7 @@
    settleData.value = await getSettlementByIds(spuIds.join(','))
    state.goodsList = await enrichDataWithSkus(ms,settleData.value)
    // 只有双列布局时需要
-    if (layoutType === LayoutTypeEnum.TWO_COL){
+    if (layoutType === LayoutTypeEnum.TWO_COL) {
      // 分列
      calculateGoodsColumn();
    }
@@ -298,11 +305,13 @@
  .goods-list-box {
    width: 50%;
    box-sizing: border-box;
+
    .left-list {
      &:nth-last-child(1) {
        margin-bottom: 0 !important;
      }
    }
+
    .right-list {
      &:nth-last-child(1) {
        margin-bottom: 0 !important;
@@ -2,29 +2,38 @@
 <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="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"></image>
-      <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' : '' }]">
+      <image
+        class="xs-img-box"
+        :src="sheep.$url.cdn(data.image || data.picUrl)"
+        mode="aspectFit"
+      ></image>
+      <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.discountPrice || data.vipPrice || data.reward">
-          <view class="card" v-if="iconShow">{{iconShow}}</view>
-          <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
-        </view>
-        <!-- 这里是新加的会员价和限时优惠结束 -->
-        <view v-if="goodsFields.price?.show" class="xs-goods-price font-OPPOSANS"
-              :style="[{ color: goodsFields.price.color }]">
+        <view
+          v-if="goodsFields.price?.show"
+          class="xs-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
          <text class="price-unit ss-font-24">{{ priceUnit }}</text>
-          <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
-          <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
-          <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
+          {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
        </view>
      </view>
    </view>
@@ -34,26 +43,30 @@
      <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>
+      <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">
+      <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.discountPrice || data.vipPrice || data.reward">
-          <view class="card" v-if="iconShow">{{iconShow}}</view>
-          <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
-        </view>
-        <!-- 这里是新加的会员价和限时优惠结束 -->
-        <view v-if="goodsFields.price?.show" class="sm-goods-price font-OPPOSANS"
-              :style="[{ color: goodsFields.price.color }]">
+        <view
+          v-if="goodsFields.price?.show"
+          class="sm-goods-price font-OPPOSANS"
+          :style="[{ color: goodsFields.price.color }]"
+        >
          <text class="price-unit ss-font-24">{{ priceUnit }}</text>
-          <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
-          <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
-          <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
+          {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
        </view>
      </view>
    </view>
@@ -63,43 +76,58 @@
      <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="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">
-        <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="md-goods-title ss-line-1"
-              :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
+      <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"
+      >
+        <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-1"
-              :style="[{ color: subTitleColor, background: subTitleBackground }]">
+        <view
+          v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
+          class="md-goods-subtitle ss-m-t-16 ss-line-1"
+          :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">
+            <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.discountPrice || data.vipPrice || data.reward">
-          <view class="card" v-if="iconShow">{{iconShow}}</view>
-          <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</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
+            v-if="goodsFields.price?.show"
+            class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
+            :style="[{ color: goodsFields.price.color }]"
+          >
            <text class="price-unit ss-font-24">{{ priceUnit }}</text>
-            <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
-            <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
-            <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
+            {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
          </view>

-          <view v-if="
+          <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 }]">
+            "
+            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>
@@ -118,24 +146,38 @@
    </view>

    <!-- lg卡片：横向型，一行放一个，图片左内容右边  -->
-    <view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
+    <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="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"></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 v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
-                :style="[{ color: titleColor }]">
+          <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 }]">
+          <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>
@@ -147,27 +189,25 @@
              </view>
            </view>
          </slot>
-          <!-- 这里是新加的会员价和限时优惠 -->
-          <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
-            <view class="card" v-if="iconShow">{{iconShow}}</view>
-            <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
-          </view>
-          <!-- 这里是新加的会员价和限时优惠结束 -->
          <view class="ss-flex ss-col-bottom ss-m-t-10">
-            <view v-if="goodsFields.price?.show"
-                  class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
-                  :style="[{ color: goodsFields.price.color }]">
+            <view
+              v-if="goodsFields.price?.show"
+              class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
+              :style="[{ color: goodsFields.price.color }]"
+            >
              <text class="ss-font-24">{{ priceUnit }}</text>
              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
            </view>
-            <view v-if="
+            <view
+              v-if="
                (goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
                (data.original_price > 0 || data.marketPrice > 0)
-              " class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
+              "
+              class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
+              :style="[{ color: originPriceColor }]"
+            >
              <text class="price-unit ss-font-20">{{ priceUnit }}</text>
-              <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
-              <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
-              <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</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">
@@ -187,45 +227,54 @@
        <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></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>
-          <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sl-goods-title ss-line-1"
-                :style="[{ color: titleColor }]">
+          <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 }]">
+          <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">
+              <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.discountPrice || data.vipPrice || data.reward">
-            <view class="card" v-if="iconShow">{{iconShow}}</view>
-            <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</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 }]">
              <text class="price-unit ss-font-24">{{ priceUnit }}</text>
-              <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
-              <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
-              <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
+              {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
            </view>
-            <view v-if="
+            <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 }]">
+              "
+              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>
@@ -248,50 +297,36 @@
   * 商品卡片
   *
   * @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 {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									- 销售数量颜色
+   * @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 										- 点击卡片
+   * @event {Function()} click                    - 点击卡片
   *
   */
-  import {
-    computed,
-    reactive,
-    getCurrentInstance,
-    onMounted,
-    nextTick,
-    ref
-  } from 'vue';
+  import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
  import sheep from '@/sheep';
-  import {
-    fen2yuan,
-    formatSales
-  } from '@/sheep/hooks/useGoods';
-  import {
-    formatStock
-  } from '@/sheep/hooks/useGoods';
-  import goodsCollectVue from '@/pages/user/goods-collect.vue';
-  import {
-    isArray
-  } from 'lodash-es';
+  import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
+  import { formatStock } from '@/sheep/hooks/useGoods';
+  import { isArray } from 'lodash-es';
+
  // 数据
  const state = reactive({});

@@ -299,42 +334,30 @@
  const props = defineProps({
    goodsFields: {
      type: [Array, Object],
-      default () {
+      default() {
        return {
          // 商品价格
-          price: {
-            show: true
-          },
+          price: { show: true },
          // 库存
-          stock: {
-            show: true
-          },
+          stock: { show: true },
          // 商品名称
-          name: {
-            show: true
-          },
+          name: { show: true },
          // 商品介绍
-          introduction: {
-            show: true
-          },
+          introduction: { show: true },
          // 市场价
-          marketPrice: {
-            show: true
-          },
+          marketPrice: { show: true },
          // 销量
-          salesCount: {
-            show: true
-          },
+          salesCount: { show: true },
        };
      },
    },
    tagStyle: {
      type: Object,
-      default: {},
+      default: () => ({}),
    },
    data: {
      type: Object,
-      default: {},
+      default: () => ({}),
    },
    size: {
      type: String,
@@ -393,25 +416,7 @@
      default: false,
    },
  });
-  //判断限时优惠和会员价标签内容暂时导致页面出错，又舍不得丢，等着把新的数据整合到商品信息中，也用起来
-  const iconShow = handle()

-  function handle() {
-    if (props.data.discountPrice === null && props.data.vipPrice === null) {
-      // 如果两个值都为 null，则不展示任何内容
-      return '';
-    } else if (props.data.discountPrice === null) {
-      // 如果 discountPrice 为 null，展示 vipPrice
-      return '会员价';
-    } else if (props.data.vipPrice === null) {
-      // 如果 vipPrice 为 null，展示 discountPrice
-      return '限时优惠';
-    } else if (props.data.discountPrice < props.data.vipPrice) {
-      return '限时优惠';
-    } else if (props.data.discountPrice > props.data.vipPrice) {
-      return '会员价';
-    }
-  }
  // 组件样式
  const elStyles = computed(() => {
    return {
@@ -443,18 +448,13 @@
  };

  // 获取卡片实时高度
-  const {
-    proxy
-  } = getCurrentInstance();
+  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.select(`#${elId}`).fields({ size: true, scrollOffset: true });
      view.exec((data) => {
        let totalHeight = 0;
        const goodsPriceCard = data[0];
@@ -469,6 +469,7 @@
      });
    }
  }
+
  onMounted(() => {
    nextTick(() => {
      getGoodsPriceCardWH();
@@ -762,31 +763,4 @@
      color: #ffffff;
    }
  }
-
-  .card {
-    width: fit-content;
-    height: fit-content;
-    padding: 2rpx 10rpx;
-    background-color: red;
-    color: #ffffff;
-    font-size: 24rpx;
-  }
-
-  .card2 {
-    width: fit-content;
-    height: fit-content;
-    padding: 2rpx 10rpx;
-    background-color: rgb(255, 242, 241);
-    color: #ff2621;
-    font-size: 24rpx;
-    margin-left: 5rpx;
-  }
-
-  .iconBox {
-    width: 100%;
-    height: fit-content;
-    margin-top: 10rpx;
-    display: flex;
-    justify-content: flex-start;
-  }
-</style>
+</style>
@@ -1,83 +1,166 @@
-<!-- 装修组件 - 拼团 -->
+<!-- 装修商品组件：【拼团】商品卡片 -->
 <template>
+  <!-- 商品卡片 -->
  <view>
+    <!-- 布局1. 单列大图（上图，下内容）-->
    <view
-      v-if="layoutType === 'threeCol'"
-      class="goods-sm-box ss-flex ss-flex-wrap"
-      :style="[{ margin: '-' + data.space + 'rpx' }]"
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
+      class="goods-sl-box"
    >
      <view
-        v-for="product in productList"
-        :key="product.id"
-        class="goods-card-box"
-        :style="[
-          {
-            padding: data.space + 'rpx',
-          },
-        ]"
+        class="goods-box"
+        v-for="item in state.spuList"
+        :key="item.id"
+        :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
      >
        <s-goods-column
-          class="goods-card"
-          size="sm"
+          class=""
+          size="sl"
          :goodsFields="data.fields"
-          :tagStyle="tagStyle"
-          :data="product"
+          :tagStyle="data.badge"
+          :data="item"
          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
-          @click="
-            sheep.$router.go('/pages/goods/groupon', {
-              id: props.data.activityId,
-            })
-          "
-        ></s-goods-column>
+          @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
      </view>
    </view>
-    <!-- 样式2 一行一个 图片左 文案右 -->
-    <view class="goods-box" v-if="layoutType === 'oneCol'">
+
+    <!-- 布局2. 单列小图（左图，右内容） -->
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
+      class="goods-lg-box"
+    >
      <view
-        class="goods-list"
-        v-for="(product, index) in productList"
-        :key="index"
-        :style="[{ marginBottom: space + 'px' }]"
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.spuList"
+        :key="item.id"
      >
        <s-goods-column
          class="goods-card"
          size="lg"
          :goodsFields="data.fields"
-          :tagStyle="tagStyle"
-          :data="product"
+          :data="item"
+          :tagStyle="data.badge"
          :titleColor="data.fields.name?.color"
-          :subTitleColor="data.fields.introduction?.color"
+          :subTitleColor="data.fields.introduction.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
-          @click="
-            sheep.$router.go('/pages/goods/groupon', {
-              id: props.data.activityId,
-            })
-          "
+          @tap="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
        >
+          <!-- 购买按钮 -->
          <template v-slot:cart>
            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
            </button>
          </template>
        </s-goods-column>
      </view>
    </view>
+
+    <!-- 布局3. 双列（每一列：上图，下内容）-->
+    <view
+      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view
+          class="left-list"
+          :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.leftSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'left')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view
+          class="right-list"
+          :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.rightSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'right')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
  </view>
 </template>

 <script setup>
  /**
-   * 拼团
+   * 商品卡片
   */
-  import { computed, onMounted, ref } from 'vue';
+  import { computed, onMounted, reactive, ref } from 'vue';
  import sheep from '@/sheep';
-  import SpuApi from "@/sheep/api/product/spu";
-  import CombinationApi from "@/sheep/api/promotion/combination";
+  import CombinationApi from '@/sheep/api/promotion/combination';
+  import SpuApi from '@/sheep/api/product/spu';

-  // 接收参数
+  // 布局类型
+  const LayoutTypeEnum = {
+    // 单列大图
+    ONE_COL_BIG_IMG: 'oneColBigImg',
+    // 双列
+    TWO_COL: 'twoCol',
+    // 单列小图
+    ONE_COL_SMALL_IMG: 'oneColSmallImg',
+  };
+
+  const state = reactive({
+    spuList: [],
+    leftSpuList: [],
+    rightSpuList: [],
+  });
  const props = defineProps({
    data: {
      type: Object,
@@ -89,19 +172,19 @@
    },
  });

-  let { layoutType, tagStyle, btnBuy, space } = props.data;
-  let { marginLeft, marginRight } = props.styles;
+  const { layoutType, btnBuy, activityIds } = props.data || {};
+  const { marginLeft, marginRight } = props.styles || {};

  // 购买按钮样式
  const buyStyle = computed(() => {
-    let btnBuy = props.data.btnBuy;
-    if (btnBuy?.type === 'text') {
+    if (btnBuy.type === 'text') {
+      // 文字按钮：线性渐变背景颜色
      return {
        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
      };
    }
-
-    if (btnBuy?.type === 'img') {
+    if (btnBuy.type === 'img') {
+      // 图片按钮
      return {
        width: '54rpx',
        height: '54rpx',
@@ -111,21 +194,124 @@
    }
  });

-  const productList = ref([]);
+  //region 商品瀑布流布局
+  // 下一个要处理的商品索引
+  let count = 0;
+  // 左列的高度
+  let leftHeight = 0;
+  // 右列的高度
+  let rightHeight = 0;
+
+  /**
+   * 计算商品在左列还是右列
+   * @param height 商品的高度
+   * @param where 添加到哪一列
+   */
+  function calculateGoodsColumn(height = 0, where = 'left') {
+    // 处理完
+    if (!state.spuList[count]) return;
+    // 增加列的高度
+    if (where === 'left') leftHeight += height;
+    if (where === 'right') rightHeight += height;
+    // 添加到矮的一列
+    if (leftHeight <= rightHeight) {
+      state.leftSpuList.push(state.spuList[count]);
+    } else {
+      state.rightSpuList.push(state.spuList[count]);
+    }
+    // 计数
+    count++;
+  }
+
+  //endregion
+
+  /**
+   * 根据商品编号列表，获取商品列表
+   * @param ids 商品编号列表
+   * @return {Promise<undefined>} 商品列表
+   */
+  async function getCombinationActivityDetailList(ids) {
+    const { data } = await CombinationApi.getCombinationActivityListByIds(ids);
+    return data;
+  }
+
+  /**
+   * 根据商品编号，获取商品详情
+   * @param ids 商品编号列表
+   * @return {Promise<undefined>} 商品列表
+   */
+  async function getSpuDetail(ids) {
+    const { data: spu } = await SpuApi.getSpuDetail(ids);
+    return spu;
+  }
+
+  // 初始化
  onMounted(async () => {
-    // todo：@owen 与Yudao结构不一致，待重构
-    const { data: activity } = await CombinationApi.getCombinationActivity(props.data.activityId);
-    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
-    productList.value = [spu];
+    // 加载活动列表
+    const activityList = await getCombinationActivityDetailList(activityIds.join(','));
+    // 循环获取活动商品SPU详情并添加到spuList
+    for (const activity of activityList) {
+      state.spuList.push(await getSpuDetail(activity.spuId));
+    }
+
+    // 循环活动列表
+    activityList.forEach((activity) => {
+      // 提取活动价格
+      const combinationPrice = activity.combinationPrice || Infinity;
+      // 查找对应的 spu 并更新价格
+      const spu = state.spuList.find((spu) => activity.spuId === spu.id);
+      if (spu) {
+        // 赋值最低价格
+        spu.price = Math.min(combinationPrice, spu.price);
+        // 赋值活动ID，为了点击跳转详情页
+        spu.activityId = activity.id;
+      }
+    });
+
+    // 只有双列布局时需要
+    if (layoutType === LayoutTypeEnum.TWO_COL) {
+      // 分列
+      calculateGoodsColumn();
+    }
  });
 </script>

 <style lang="scss" scoped>
-  .goods-list {
+  .goods-md-wrap {
+    width: 100%;
+  }
+
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+
+    .left-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .right-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box,
+  .goods-lg-box {
    position: relative;
+
    .cart-btn {
      position: absolute;
-      bottom: 10rpx;
+      bottom: 18rpx;
      right: 20rpx;
      z-index: 11;
      height: 50rpx;
@@ -136,19 +322,4 @@
      color: #fff;
    }
  }
-  .goods-list {
-    &:nth-last-of-type(1) {
-      margin-bottom: 0 !important;
-    }
-  }
-  .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;
-    }
-  }
 </style>
@@ -70,8 +70,8 @@
      default() {},
    },
  });
-  const { mode, goodsFields, mpliveIds } = props.data ?? {};
-  const { marginLeft, marginRight } = props.styles ?? {};
+  const { mode, goodsFields, mpliveIds } = props.data || {};
+  const { marginLeft, marginRight } = props.styles || {};

  async function getLiveListByIds(ids) {
    const { data } = await sheep.$api.app.mplive.getRoomList(ids);
@@ -1,363 +1,343 @@
 <!-- 装修基础组件：菜单导航（金刚区） -->
 <template>
-  <!-- 包裹层 -->
-  <view
-    class="ui-swiper"
-    :class="[props.mode, props.bg, props.ui]"
-    :style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"
-  >
-    <!-- 轮播 -->
-    <swiper
-      :circular="props.circular"
-      :current="state.cur"
-      :autoplay="props.autoplay"
-      :interval="props.interval"
-      :duration="props.duration"
-      :style="[{ height: swiperHeight + 'rpx' }]"
-      @change="swiperChange"
-    >
-      <swiper-item
-        v-for="(arr, index) in menuList"
-        :key="index"
-        :class="{ cur: state.cur == index }"
-      >
-        <!-- 宫格 -->
-        <view class="grid-wrap">
-          <view
-            v-for="(item, index) in arr"
-            :key="index"
-            class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
-            hover-class="ss-hover-btn"
-            @tap="sheep.$router.go(item.url)"
-          >
-            <view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
-              <view
-                v-if="item.badge.show"
-                class="tag-box"
-                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-              >
-                {{ item.badge.text }}
-              </view>
-              <image
-                v-if="item.iconUrl"
-                class="menu-icon"
-                :style="[
+	<!-- 包裹层 -->
+	<view class="ui-swiper" :class="[props.mode, props.ui]"
+		:style="[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]">
+		<!-- 轮播 -->
+		<swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay" :interval="props.interval"
+			:duration="props.duration" :style="[{ height: swiperHeight + 'rpx' }]" @change="swiperChange">
+			<swiper-item v-for="(arr, index) in menuList" :key="index" :class="{ cur: state.cur == index }">
+				<!-- 宫格 -->
+				<view class="grid-wrap">
+					<view v-for="(item, index) in arr" :key="index"
+						class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
+						:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]" hover-class="ss-hover-btn"
+						@tap="sheep.$router.go(item.url)">
+						<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
+							<view v-if="item.badge.show" class="tag-box"
+								:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
+								{{ item.badge.text }}
+							</view>
+							<image v-if="item.iconUrl" class="menu-icon" :style="[
                  {
                    width: props.iconSize + 'rpx',
                    height: props.iconSize + 'rpx',
                  },
-                ]"
-                :src="sheep.$url.cdn(item.iconUrl)"
-                mode="aspectFill"
-              ></image>
-              <view
-                v-if="data.layout === 'iconText'"
-                class="menu-title"
-                :style="[{ color: item.titleColor }]"
-              >
-                {{ item.title }}
-              </view>
-            </view>
-          </view>
-        </view>
-      </swiper-item>
-    </swiper>
-    <!-- 指示点 -->
-    <template v-if="menuList.length > 1">
-      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
-        <view
-          class="line-box"
-          v-for="(item, index) in menuList.length"
-          :key="index"
-          :class="[state.cur == index ? 'cur' : '', props.dotCur]"
-        ></view>
-      </view>
-      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
-        <view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
-          <view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
-        </view>
-      </view>
-    </template>
-  </view>
+                ]" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFill"></image>
+							<view v-if="data.layout === 'iconText'" class="menu-title"
+								:style="[{ color: item.titleColor }]">
+								{{ item.title }}
+							</view>
+						</view>
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+		<!-- 指示点 -->
+		<template v-if="menuList.length > 1">
+			<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
+				<view class="line-box" v-for="(item, index) in menuList.length" :key="index"
+					:class="[state.cur == index ? 'cur' : '', props.dotCur]"></view>
+			</view>
+			<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
+				<view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
+					<view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
+				</view>
+			</view>
+		</template>
+	</view>
 </template>

 <script setup>
-  /**
-   * 轮播menu
-   *
-   * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
-   * @property {Boolean} autoplay = true  		- 是否自动切换
-   * @property {Number} interval = 5000  			- 自动切换时间间隔
-   * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
-   * @property {Array} list = [] 					- 轮播数据
-   * @property {String} ui = ''  					- 样式class
-   * @property {String} mode  					- 模式
-   * @property {String} dotStyle  				- 指示点样式
-   * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
-   * @property {String} bg  						- 背景
-   *
-   * @property {String|Number} col = 4  			- 一行数量
-   *  @property {String|Number} row = 1 			- 几行
-   * @property {String} hasBorder 				- 是否有边框
-   * @property {String} borderColor 				- 边框颜色
-   * @property {String} background		  		- 背景
-   * @property {String} hoverClass 				- 按压样式类
-   * @property {String} hoverStayTime 		  	- 动画时间
-   *
-   * @property {Array} list 		  				- 导航列表
-   * @property {Number} iconSize 		  			- 图标大小
-   * @property {String} color 		  			- 标题颜色
-   *
-   */
+	/**
+	 * 轮播menu
+	 *
+	 * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
+	 * @property {Boolean} autoplay = true  		- 是否自动切换
+	 * @property {Number} interval = 5000  			- 自动切换时间间隔
+	 * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
+	 * @property {Array} list = [] 					- 轮播数据
+	 * @property {String} ui = ''  					- 样式class
+	 * @property {String} mode  					- 模式
+	 * @property {String} dotStyle  				- 指示点样式
+	 * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
+	 * @property {String} bg  						- 背景
+	 *
+	 * @property {String|Number} col = 4  			- 一行数量
+	 * @property {String|Number} row = 1 			- 几行
+	 * @property {String} hasBorder 				- 是否有边框
+	 * @property {String} borderColor 				- 边框颜色
+	 * @property {String} background		  		- 背景
+	 * @property {String} hoverClass 				- 按压样式类
+	 * @property {String} hoverStayTime 		  	- 动画时间
+	 *
+	 * @property {Array} list 		  				- 导航列表
+	 * @property {Number} iconSize 		  			- 图标大小
+	 * @property {String} color 		  			- 标题颜色
+	 *
+	 */

-  import { reactive, computed } from 'vue';
-  import sheep from '@/sheep';
+	import {
+		reactive,
+		computed
+	} from 'vue';
+	import sheep from '@/sheep';

-  // 数据
-  const state = reactive({
-    cur: 0,
-  });
+	// 数据
+	const state = reactive({
+		cur: 0,
+	});

-  // 接收参数
+	// 接收参数

-  const props = defineProps({
-    data: {
-      type: Object,
-      default() {},
-    },
-    styles: {
-      type: Object,
-      default() {},
-    },
-    circular: {
-      type: Boolean,
-      default: true,
-    },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    },
-    interval: {
-      type: Number,
-      default: 5000,
-    },
-    duration: {
-      type: Number,
-      default: 500,
-    },
+	const props = defineProps({
+		// 装修数据
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+		// 装修样式
+		styles: {
+			type: Object,
+			default: () => ({}),
+		},
+		circular: {
+			type: Boolean,
+			default: true,
+		},
+		autoplay: {
+			type: Boolean,
+			default: false,
+		},
+		interval: {
+			type: Number,
+			default: 5000,
+		},
+		duration: {
+			type: Number,
+			default: 500,
+		},
+		ui: {
+			type: String,
+			default: '',
+		},
+		mode: {
+			//default
+			type: String,
+			default: 'default',
+		},
+		dotStyle: {
+			type: String,
+			default: 'long', //default long tag
+		},
+		dotCur: {
+			type: String,
+			default: 'ui-BG-Main',
+		},
+		height: {
+			type: Number,
+			default: 300,
+		},
+		// 是否有边框
+		hasBorder: {
+			type: Boolean,
+			default: true,
+		},
+		// 边框颜色
+		borderColor: {
+			type: String,
+			default: 'red',
+		},
+		background: {
+			type: String,
+			default: 'blue',
+		},
+		hoverClass: {
+			type: String,
+			default: 'ss-hover-class', //'none'为没有hover效果
+		},
+		// 一排宫格数
+		col: {
+			type: [Number, String],
+			default: 3,
+		},
+		iconSize: {
+			type: Number,
+			default: 80,
+		},
+		color: {
+			type: String,
+			default: '#000',
+		},
+	});

-    ui: {
-      type: String,
-      default: '',
-    },
-    mode: {
-      //default
-      type: String,
-      default: 'default',
-    },
-    dotStyle: {
-      type: String,
-      default: 'long', //default long tag
-    },
-    dotCur: {
-      type: String,
-      default: 'ui-BG-Main',
-    },
-    bg: {
-      type: String,
-      default: 'bg-none',
-    },
-    height: {
-      type: Number,
-      default: 300,
-    },
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;

-    // 是否有边框
-    hasBorder: {
-      type: Boolean,
-      default: true,
-    },
-    // 边框颜色
-    borderColor: {
-      type: String,
-      default: 'red',
-    },
-    background: {
-      type: String,
-      default: 'blue',
-    },
-    hoverClass: {
-      type: String,
-      default: 'ss-hover-class', //'none'为没有hover效果
-    },
-    // 一排宫格数
-    col: {
-      type: [Number, String],
-      default: 3,
-    },
-    iconSize: {
-      type: Number,
-      default: 80,
-    },
-    color: {
-      type: String,
-      default: '#000',
-    },
-  });
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
+	});

-  // 生成数据
-  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
-  const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
-  const windowWidth = sheep.$platform.device.windowWidth;
+	// 生成数据
+	const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+	const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
+	const windowWidth = sheep.$platform.device.windowWidth;

-  // current 改变时会触发 change 事件
-  const swiperChange = (e) => {
-    state.cur = e.detail.current;
-  };
+	// current 改变时会触发 change 事件
+	const swiperChange = (e) => {
+		state.cur = e.detail.current;
+	};

-  // 重组数据
-  const splitData = (oArr = [], length = 1) => {
-    let arr = [];
-    let minArr = [];
-    oArr.forEach((c) => {
-      if (minArr.length === length) {
-        minArr = [];
-      }
-      if (minArr.length === 0) {
-        arr.push(minArr);
-      }
-      minArr.push(c);
-    });
+	// 重组数据
+	const splitData = (oArr = [], length = 1) => {
+		let arr = [];
+		let minArr = [];
+		oArr.forEach((c) => {
+			if (minArr.length === length) {
+				minArr = [];
+			}
+			if (minArr.length === 0) {
+				arr.push(minArr);
+			}
+			minArr.push(c);
+		});

-    return arr;
-  };
+		return arr;
+	};
 </script>

 <style lang="scss" scoped>
-  .grid-wrap {
-    width: 100%;
-    display: flex;
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-  .menu-box {
-    position: relative;
-    z-index: 1;
-    transform: translate(0, 0);
+	.grid-wrap {
+		width: 100%;
+		display: flex;
+		position: relative;
+		box-sizing: border-box;
+		overflow: hidden;
+		flex-wrap: wrap;
+		align-items: center;
+	}

-    .tag-box {
-      position: absolute;
-      z-index: 2;
-      top: 0;
-      right: -6rpx;
-      font-size: 2em;
-      line-height: 1;
-      padding: 0.4em 0.6em 0.3em;
-      transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
-      transform-origin: 100% 0;
-      border-radius: 200rpx;
-      white-space: nowrap;
-    }
+	.menu-box {
+		position: relative;
+		z-index: 1;
+		transform: translate(0, 0);

-    .menu-icon {
-      transform: translate(0, 0);
-      width: 80rpx;
-      height: 80rpx;
-      padding-bottom: 10rpx;
-    }
+		.tag-box {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: -6rpx;
+			font-size: 2em;
+			line-height: 1;
+			padding: 0.4em 0.6em 0.3em;
+			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+			transform-origin: 100% 0;
+			border-radius: 200rpx;
+			white-space: nowrap;
+		}

-    .menu-title {
-      font-size: 24rpx;
-      color: #333;
-    }
-  }
+		.menu-icon {
+			transform: translate(0, 0);
+			width: 80rpx;
+			height: 80rpx;
+			padding-bottom: 10rpx;
+		}

-  ::v-deep(.ui-swiper) {
-    position: relative;
-    z-index: 1;
+		.menu-title {
+			font-size: 24rpx;
+			color: #333;
+		}
+	}

-    .ui-swiper-dot {
-      position: absolute;
-      width: 100%;
-      bottom: 20rpx;
-      height: 30rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
+	::v-deep(.ui-swiper) {
+		position: relative;
+		z-index: 1;

-      &.default .line-box {
-        display: inline-flex;
-        border-radius: 50rpx;
-        width: 6px;
-        height: 6px;
-        border: 2px solid transparent;
-        margin: 0 10rpx;
-        opacity: 0.3;
-        position: relative;
-        justify-content: center;
-        align-items: center;
+		.ui-swiper-dot {
+			position: absolute;
+			width: 100%;
+			bottom: 20rpx;
+			height: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;

-        &.cur {
-          width: 8px;
-          height: 8px;
-          opacity: 1;
-          border: 0px solid transparent;
-        }
+			&.default .line-box {
+				display: inline-flex;
+				border-radius: 50rpx;
+				width: 6px;
+				height: 6px;
+				border: 2px solid transparent;
+				margin: 0 10rpx;
+				opacity: 0.3;
+				position: relative;
+				justify-content: center;
+				align-items: center;

-        &.cur::after {
-          content: '';
-          border-radius: 50rpx;
-          width: 4px;
-          height: 4px;
-          background-color: #fff;
-        }
-      }
+				&.cur {
+					width: 8px;
+					height: 8px;
+					opacity: 1;
+					border: 0px solid transparent;
+				}

-      &.long .line-box {
-        display: inline-block;
-        border-radius: 100rpx;
-        width: 6px;
-        height: 6px;
-        margin: 0 10rpx;
-        opacity: 0.3;
-        position: relative;
+				&.cur::after {
+					content: '';
+					border-radius: 50rpx;
+					width: 4px;
+					height: 4px;
+					background-color: #fff;
+				}
+			}

-        &.cur {
-          width: 24rpx;
-          opacity: 1;
-        }
+			&.long .line-box {
+				display: inline-block;
+				border-radius: 100rpx;
+				width: 6px;
+				height: 6px;
+				margin: 0 10rpx;
+				opacity: 0.3;
+				position: relative;

-        &.cur::after {
-        }
-      }
+				&.cur {
+					width: 24rpx;
+					opacity: 1;
+				}

-      &.line {
-        bottom: 20rpx;
+				&.cur::after {}
+			}

-        .line-box {
-          display: inline-block;
-          width: 30px;
-          height: 3px;
-          opacity: 0.3;
-          position: relative;
+			&.line {
+				bottom: 20rpx;

-          &.cur {
-            opacity: 1;
-          }
-        }
-      }
+				.line-box {
+					display: inline-block;
+					width: 30px;
+					height: 3px;
+					opacity: 0.3;
+					position: relative;

-      &.tag {
-        justify-content: flex-end;
-        position: absolute;
-        bottom: 20rpx;
-        right: 20rpx;
-      }
-    }
-  }
-</style>
+					&.cur {
+						opacity: 1;
+					}
+				}
+			}
+
+			&.tag {
+				justify-content: flex-end;
+				position: absolute;
+				bottom: 20rpx;
+				right: 20rpx;
+			}
+		}
+	}
+</style>
@@ -1,82 +1,104 @@
 <!-- 装修基础组件：宫格导航 -->
 <template>
-  <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
-    <uni-grid-item
-      v-for="(item, index) in data.list"
-      :key="index"
-      @tap="sheep.$router.go(item.url)"
-    >
-      <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
-        <view class="img-box">
-          <view
-            class="tag-box"
-            v-if="item.badge.show"
-            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-          >
-            {{ item.badge.text }}
-          </view>
-          <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
-        </view>
+	<view :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+		<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
+			<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="sheep.$router.go(item.url)">
+				<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
+					<view class="img-box">
+						<view class="tag-box" v-if="item.badge.show"
+							:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
+							{{ item.badge.text }}
+						</view>
+						<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
+					</view>
+
+					<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
+						<view class="grid-text" :style="[{ color: item.titleColor }]">
+							{{ item.title }}
+						</view>
+						<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+							{{ item.subtitle }}
+						</view>
+					</view>
+				</view>
+			</uni-grid-item>
+		</uni-grid>
+	</view>

-        <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
-          <view class="grid-text" :style="[{ color: item.titleColor }]">
-            {{ item.title }}
-          </view>
-          <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
-            {{ item.subtitle }}
-          </view>
-        </view>
-      </view>
-    </uni-grid-item>
-  </uni-grid>
 </template>

 <script setup>
-  import sheep from '@/sheep';
+	import sheep from '@/sheep';
+	import {
+		computed
+	} from 'vue';

-  const props = defineProps({
-    data: {
-      type: Object,
-      default() {},
-    },
-  });
+	const props = defineProps({
+		// 装修数据
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+		// 装修样式
+		styles: {
+			type: Object,
+			default: () => ({}),
+		},
+	});
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;
+
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
+	});
 </script>

 <style lang="scss" scoped>
-  .menu-image {
-    width: 24px;
-    height: 24px;
-  }
-  .grid-item-box {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    .img-box {
-      position: relative;
-      .tag-box {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        right: 0;
-        font-size: 2em;
-        line-height: 1;
-        padding: 0.4em 0.6em 0.3em;
-        transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
-        transform-origin: 100% 0;
-        border-radius: 200rpx;
-        white-space: nowrap;
-      }
-    }
+	.menu-image {
+		width: 24px;
+		height: 24px;
+	}

-    .title-box {
-      .grid-tip {
-        font-size: 24rpx;
-        white-space: nowrap;
-        text-align: center;
-      }
-    }
-  }
-</style>
+	.grid-item-box {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+
+		.img-box {
+			position: relative;
+
+			.tag-box {
+				position: absolute;
+				z-index: 2;
+				top: 0;
+				right: 0;
+				font-size: 2em;
+				line-height: 1;
+				padding: 0.4em 0.6em 0.3em;
+				transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+				transform-origin: 100% 0;
+				border-radius: 200rpx;
+				white-space: nowrap;
+			}
+		}
+
+		.title-box {
+			.grid-tip {
+				font-size: 24rpx;
+				white-space: nowrap;
+				text-align: center;
+			}
+		}
+	}
+</style>
@@ -1,6 +1,6 @@
 <!-- 装修用户组件：用户订单 -->
 <template>
-  <view class="ss-order-menu-wrap ss-flex ss-col-center">
+  <view class="ss-order-menu-wrap ss-flex ss-col-center" :style="[style, { marginLeft: `${data.space}px` }]">
    <view
      class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
      v-for="item in orderMap"
@@ -67,8 +67,32 @@
      path: '/pages/order/list',
    },
  ];
-
+  // 接收参数
+  const props = defineProps({
+  	// 装修数据
+  	data: {
+  	  type: Object,
+  	  default: () => ({}),
+  	},
+  	// 装修样式
+  	styles: {
+  	  type: Object,
+  	  default: () => ({}),
+  	},
+  });
+  // 设置角标
  const numData = computed(() => sheep.$store('user').numData);
+  // 设置背景样式
+  const style = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles; 
+    // 根据 bgType 返回相应的样式
+    return {
+  		background: bgType === 'img'
+  			? `url(${bgImg}) no-repeat top center / 100% 100%`
+  			: bgColor
+  	};
+  });
 </script>

 <style lang="scss" scoped>
@@ -1,86 +1,166 @@
-<!-- 装修组件 - 秒杀 -->
+<!-- 装修商品组件：【秒杀】商品卡片 -->
 <template>
+  <!-- 商品卡片 -->
  <view>
-    <!-- 样式一：三列 - 上图下文 -->
+    <!-- 布局1. 单列大图（上图，下内容）-->
    <view
-      v-if="layoutType === 'threeCol'"
-      class="goods-sm-box ss-flex ss-flex-wrap"
-      :style="[{ margin: '-' + data.space + 'rpx' }]"
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
+      class="goods-sl-box"
    >
      <view
-        v-for="product in productList"
-        :key="product.id"
-        class="goods-card-box"
-        :style="[
-          {
-            padding: data.space + 'rpx',
-          },
-        ]"
+        class="goods-box"
+        v-for="item in state.spuList"
+        :key="item.id"
+        :style="[{ marginBottom: data.space * 2 + 'rpx' }]"
      >
        <s-goods-column
-          class="goods-card"
-          size="sm"
+          class=""
+          size="sl"
          :goodsFields="data.fields"
-          :tagStyle="tagStyle"
-          :data="product"
+          :tagStyle="data.badge"
+          :data="item"
          :titleColor="data.fields.name?.color"
+          :subTitleColor="data.fields.introduction.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
-          @click="
-            sheep.$router.go('/pages/goods/seckill', {
-              id: props.data.activityId,
-            })
-          "
-        ></s-goods-column>
+          @click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
+        >
+          <!-- 购买按钮 -->
+          <template v-slot:cart>
+            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+            </button>
+          </template>
+        </s-goods-column>
      </view>
    </view>
-    <!-- 样式二：一列 - 左图右文 -->
-    <view class="goods-box" v-if="layoutType === 'oneCol'">
+
+    <!-- 布局2. 单列小图（左图，右内容） -->
+    <view
+      v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
+      class="goods-lg-box"
+    >
      <view
-        class="goods-list"
-        v-for="(product, index) in productList"
-        :key="index"
-        :style="[{ marginBottom: space + 'px' }]"
+        class="goods-box"
+        :style="[{ marginBottom: data.space + 'px' }]"
+        v-for="item in state.spuList"
+        :key="item.id"
      >
        <s-goods-column
          class="goods-card"
          size="lg"
          :goodsFields="data.fields"
-          :tagStyle="tagStyle"
-          :data="product"
+          :data="item"
+          :tagStyle="data.badge"
          :titleColor="data.fields.name?.color"
-          :subTitleColor="data.fields.introduction?.color"
+          :subTitleColor="data.fields.introduction.color"
          :topRadius="data.borderRadiusTop"
          :bottomRadius="data.borderRadiusBottom"
-          @click="
-            sheep.$router.go('/pages/goods/seckill', {
-              id: props.data.activityId,
-            })
-          "
+          @tap="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
        >
+          <!-- 购买按钮 -->
          <template v-slot:cart>
            <button class="ss-reset-button cart-btn" :style="[buyStyle]">
-              {{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
+              {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
            </button>
          </template>
        </s-goods-column>
      </view>
    </view>
+
+    <!-- 布局3. 双列（每一列：上图，下内容）-->
+    <view
+      v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
+      class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
+    >
+      <view class="goods-list-box">
+        <view
+          class="left-list"
+          :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.leftSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'left')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+      <view class="goods-list-box">
+        <view
+          class="right-list"
+          :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
+          v-for="item in state.rightSpuList"
+          :key="item.id"
+        >
+          <s-goods-column
+            class="goods-md-box"
+            size="md"
+            :goodsFields="data.fields"
+            :tagStyle="data.badge"
+            :data="item"
+            :titleColor="data.fields.name?.color"
+            :subTitleColor="data.fields.introduction.color"
+            :topRadius="data.borderRadiusTop"
+            :bottomRadius="data.borderRadiusBottom"
+            :titleWidth="330 - marginLeft - marginRight"
+            @click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
+            @getHeight="calculateGoodsColumn($event, 'right')"
+          >
+            <!-- 购买按钮 -->
+            <template v-slot:cart>
+              <button class="ss-reset-button cart-btn" :style="[buyStyle]">
+                {{ btnBuy.type === 'text' ? btnBuy.text : '' }}
+              </button>
+            </template>
+          </s-goods-column>
+        </view>
+      </view>
+    </view>
  </view>
 </template>

 <script setup>
  /**
-   * 秒杀商品列表
-   *
-   * @property {Array} list 商品列表
+   * 商品卡片
   */
-  import { computed, onMounted, ref } from 'vue';
+  import { computed, onMounted, reactive, ref } from 'vue';
  import sheep from '@/sheep';
-  import SeckillApi from "@/sheep/api/promotion/seckill";
-  import SpuApi from "@/sheep/api/product/spu";
+  import SeckillApi from '@/sheep/api/promotion/seckill';
+  import SpuApi from '@/sheep/api/product/spu';

-  // 接收参数
+  // 布局类型
+  const LayoutTypeEnum = {
+    // 单列大图
+    ONE_COL_BIG_IMG: 'oneColBigImg',
+    // 双列
+    TWO_COL: 'twoCol',
+    // 单列小图
+    ONE_COL_SMALL_IMG: 'oneColSmallImg',
+  };
+
+  const state = reactive({
+    spuList: [],
+    leftSpuList: [],
+    rightSpuList: [],
+  });
  const props = defineProps({
    data: {
      type: Object,
@@ -92,18 +172,19 @@
    },
  });

-  let { layoutType, tagStyle, btnBuy, space } = props.data;
-  let { marginLeft, marginRight } = props.styles;
+  const { layoutType, btnBuy, activityIds } = props.data || {};
+  const { marginLeft, marginRight } = props.styles || {};

  // 购买按钮样式
  const buyStyle = computed(() => {
-    let btnBuy = props.data.btnBuy;
-    if (btnBuy?.type === 'text') {
+    if (btnBuy.type === 'text') {
+      // 文字按钮：线性渐变背景颜色
      return {
        background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
      };
    }
-    if (btnBuy?.type === 'img') {
+    if (btnBuy.type === 'img') {
+      // 图片按钮
      return {
        width: '54rpx',
        height: '54rpx',
@@ -113,30 +194,124 @@
    }
  });

-  // 商品列表
-  const productList = ref([]);
-  // 查询秒杀活动商品
+  //region 商品瀑布流布局
+  // 下一个要处理的商品索引
+  let count = 0;
+  // 左列的高度
+  let leftHeight = 0;
+  // 右列的高度
+  let rightHeight = 0;
+
+  /**
+   * 计算商品在左列还是右列
+   * @param height 商品的高度
+   * @param where 添加到哪一列
+   */
+  function calculateGoodsColumn(height = 0, where = 'left') {
+    // 处理完
+    if (!state.spuList[count]) return;
+    // 增加列的高度
+    if (where === 'left') leftHeight += height;
+    if (where === 'right') rightHeight += height;
+    // 添加到矮的一列
+    if (leftHeight <= rightHeight) {
+      state.leftSpuList.push(state.spuList[count]);
+    } else {
+      state.rightSpuList.push(state.spuList[count]);
+    }
+    // 计数
+    count++;
+  }
+
+  //endregion
+
+  /**
+   * 根据商品编号列表，获取商品列表
+   * @param ids 商品编号列表
+   * @return {Promise<undefined>} 商品列表
+   */
+  async function getSeckillActivityDetailList(ids) {
+    const { data } = await SeckillApi.getSeckillActivityListByIds(ids);
+    return data;
+  }
+
+  /**
+   * 根据商品编号，获取商品详情
+   * @param ids 商品编号列表
+   * @return {Promise<undefined>} 商品列表
+   */
+  async function getSpuDetail(ids) {
+    const { data: spu } = await SpuApi.getSpuDetail(ids);
+    return spu;
+  }
+
+  // 初始化
  onMounted(async () => {
-    // todo：@owen 与Yudao结构不一致，待重构
-    const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
-    const { data: spu } = await SpuApi.getSpuDetail(activity.spuId)
-    productList.value = [spu];
+    // 加载活动列表
+    const activityList = await getSeckillActivityDetailList(activityIds.join(','));
+    // 循环获取活动商品SPU详情并添加到spuList
+    for (const activity of activityList) {
+      state.spuList.push(await getSpuDetail(activity.spuId));
+    }
+
+    // 循环活动列表
+    activityList.forEach((activity) => {
+      // 提取活动价格
+      const seckillPrice = activity.seckillPrice || Infinity;
+      // 查找对应的 spu 并更新价格
+      const spu = state.spuList.find((spu) => activity.spuId === spu.id);
+      if (spu) {
+        // 赋值最低价格
+        spu.price = Math.min(seckillPrice, spu.price);
+        // 赋值活动ID，为了点击跳转详情页
+        spu.activityId = activity.id;
+      }
+    });
+
+    // 只有双列布局时需要
+    if (layoutType === LayoutTypeEnum.TWO_COL) {
+      // 分列
+      calculateGoodsColumn();
+    }
  });
 </script>

 <style lang="scss" scoped>
-  .header-box {
-    height: 100rpx;
+  .goods-md-wrap {
+    width: 100%;
  }

-  .goods-list {
-    position: relative;
-    &:nth-last-child(1) {
+  .goods-list-box {
+    width: 50%;
+    box-sizing: border-box;
+
+    .left-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .right-list {
+      &:nth-last-child(1) {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+
+  .goods-box {
+    &:nth-last-of-type(1) {
      margin-bottom: 0 !important;
    }
+  }
+
+  .goods-md-box,
+  .goods-sl-box,
+  .goods-lg-box {
+    position: relative;
+
    .cart-btn {
      position: absolute;
-      bottom: 10rpx;
+      bottom: 18rpx;
      right: 20rpx;
      z-index: 11;
      height: 50rpx;
@@ -147,14 +322,4 @@
      color: #fff;
    }
  }
-  .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;
-    }
-  }
 </style>
@@ -5,7 +5,11 @@
    <view class="ss-modal-box bg-white ss-flex-col">
      <view class="modal-header ss-flex ss-col-center">
        <view class="header-left ss-m-r-30">
-          <image class="sku-image" :src="sheep.$url.cdn(state.selectedSku.picUrl || goodsInfo.picUrl)" mode="aspectFill" />
+          <image
+            class="sku-image"
+            :src="sheep.$url.cdn(state.selectedSku.picUrl || goodsInfo.picUrl)"
+            mode="aspectFill"
+          />
        </view>
        <view class="header-right ss-flex-col ss-row-between ss-flex-1">
          <view class="goods-title ss-line-2">
@@ -22,7 +26,13 @@
            </view>
          </view>
          <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
-            <view class="price-text"> {{ fen2yuan(goodsInfo.price) }}</view>
+            <view class="price-text">
+              {{
+                fen2yuan(
+                  state.selectedSku.price || goodsInfo.price || state.selectedSku.marketPrice,
+                )
+              }}</view
+            >

            <view class="stock-text ss-m-l-20">
              库存{{ state.selectedSku.stock || goodsInfo.stock }}件
@@ -35,22 +45,35 @@
          <view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
            <view class="label-text ss-m-b-20">{{ property.name }}</view>
            <view class="ss-flex ss-col-center ss-flex-wrap">
-              <button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
+              <button
+                class="ss-reset-button spec-btn"
+                v-for="value in property.values"
+                :class="[
                  {
                    'checked-btn': state.currentPropertyArray[property.id] === value.id,
                  },
                  {
                    'disabled-btn': value.disabled === true,
                  },
-                ]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
+                ]"
+                :key="value.id"
+                :disabled="value.disabled === true"
+                @tap="onSelectSku(property.id, value.id)"
+              >
                {{ value.name }}
              </button>
            </view>
          </view>
          <view class="buy-num-box ss-flex ss-col-center ss-row-between">
            <view class="label-text">购买数量</view>
-            <su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
-                           v-model="state.selectedSku.count" @change="onNumberChange($event)" activity="groupon" />
+            <su-number-box
+              :min="1"
+              :max="state.selectedSku.stock"
+              :step="1"
+              v-model="state.selectedSku.count"
+              @change="onNumberChange($event)"
+              activity="groupon"
+            />
          </view>
        </scroll-view>
      </view>
@@ -63,7 +86,16 @@
              <view class="btn-title">{{ grouponNum + '人团' }}</view>
            </button>
            <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
-              <view class="btn-price">{{ fen2yuan(goodsInfo.price) }}</view>
+              <view class="btn-price">
+                {{
+                  fen2yuan(
+                    state.selectedSku.price * state.selectedSku.count ||
+                      goodsInfo.price * state.selectedSku.count ||
+                      state.selectedSku.marketPrice * state.selectedSku.count ||
+                      goodsInfo.price,
+                  )
+                }}
+              </view>
              <view v-if="grouponAction === 'create'">立即开团</view>
              <view v-else-if="grouponAction === 'join'">参与拼团</view>
            </button>
@@ -77,7 +109,7 @@
 <script setup>
  import { computed, reactive, watch } from 'vue';
  import sheep from '@/sheep';
-  import {convertProductPropertyList, fen2yuan} from '@/sheep/hooks/useGoods';
+  import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';

  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-btn-long.png');
  const emits = defineEmits(['change', 'addCart', 'buy', 'close', 'ladder']);
@@ -88,7 +120,7 @@
    },
    goodsInfo: {
      type: Object,
-      default () {},
+      default() {},
    },
    grouponAction: {
      type: String,
@@ -111,7 +143,7 @@
  const skuList = computed(() => {
    let skuPrices = props.goodsInfo.skus;
    for (let price of skuPrices) {
-      price.value_id_array = price.properties.map((item) => item.valueId)
+      price.value_id_array = price.properties.map((item) => item.valueId);
    }
    return skuPrices;
  });
@@ -120,7 +152,8 @@
    () => state.selectedSku,
    (newVal) => {
      emits('change', newVal);
-    }, {
+    },
+    {
      immediate: true, // 立即执行
      deep: true, // 深度监听
    },
@@ -215,7 +248,7 @@
      // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
      for (let valueIndex in propertyList[propertyIndex]['values']) {
        propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
-            noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
+          noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
      }
    }
  }
@@ -245,7 +278,10 @@
  function onSelectSku(propertyId, valueId) {
    // 清空已选择
    let isChecked = true; // 选中 or 取消选中
-    if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
+    if (
+      state.currentPropertyArray[propertyId] !== undefined &&
+      state.currentPropertyArray[propertyId] === valueId
+    ) {
      // 点击已被选中的，删除并填充 ''
      isChecked = false;
      state.currentPropertyArray.splice(propertyId, 1, '');
@@ -5,7 +5,7 @@
    <!-- SKU 信息 -->
    <view class="ss-modal-box bg-white ss-flex-col">
      <view class="modal-header ss-flex ss-col-center">
-        <!-- 规格图 -->
+        <!-- 规格图片 -->
        <view class="header-left ss-m-r-30">
          <image
            class="sku-image"
@@ -125,10 +125,6 @@
    return skuPrices;
  });

-  if (!state.goodsInfo.is_sku) {
-    state.selectedSku = state.goodsInfo.skus[0];
-  }
-
  watch(
    () => state.selectedSku,
    (newVal) => {
@@ -66,7 +66,7 @@
    css: {
      // 根节点若无尺寸，自动获取父级节点
      width: sheep.$platform.device.windowWidth * 0.9,
-      height: 550,
+      height: 600,
    },
    views: [],
  });
@@ -82,12 +82,12 @@ const groupon = async (poster) => {
      type: 'text',
      text: '2人团',
      css: {
-        color: '#ff0000',
-        fontSize: 30,
+        color: '#fff',
+        fontSize: 12,
        fontFamily: 'OPPOSANS',
        position: 'fixed',
-        left: width * 0.3,
-        top: width * 1.32,
+        left: width * 0.84,
+        top: width * 1.3,
      },
    },
    // #ifndef MP-WEIXIN
@@ -96,7 +96,7 @@ const groupon = async (poster) => {
      text: poster.shareInfo.link,
      css: {
        position: 'fixed',
-        left: width * 0.75,
+        left: width * 0.5,
        top: width * 1.3,
        width: width * 0.2,
        height: width * 0.2,
@@ -1,100 +1,108 @@
 <!-- 装修商品组件：标题栏 -->
 <template>
-  <view
-    class="ss-title-wrap ss-flex ss-col-center"
-    :class="[state.typeMap[data.textAlign]]"
-    :style="[elStyles]"
-  >
-    <view class="title-content">
-      <!-- 主标题 -->
-      <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
-      <!-- 副标题 -->
-      <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
-    </view>
-    <!-- 查看更多 -->
-    <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
-          :style="{color: data.descriptionColor}">
-      <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
-      <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
-    </view>
-  </view>
+	<view class="ss-title-wrap ss-flex ss-col-center" :class="[state.typeMap[data.textAlign]]" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+		<view class="title-content">
+			<!-- 主标题 -->
+			<view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
+			<!-- 副标题 -->
+			<view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
+		</view>
+		<!-- 查看更多 -->
+		<view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
+			:style="{color: data.descriptionColor}">
+			<view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
+			<text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
+		</view>
+	</view>
 </template>

 <script setup>
-  /**
-   * 标题栏
-   */
-  import { reactive } from 'vue';
-  import sheep from '@/sheep';
+	/**
+	 * 标题栏
+	 */
+	import {
+		reactive,
+		computed
+	} from 'vue';
+	import sheep from '@/sheep';

-  // 数据
-  const state = reactive({
-    typeMap: {
-      left: 'ss-row-left',
-      center: 'ss-row-center',
-    },
-  });
+	// 数据
+	const state = reactive({
+		typeMap: {
+			left: 'ss-row-left',
+			center: 'ss-row-center',
+		},
+	});

-  // 接收参数
-  const props = defineProps({
-    data: {
-      type: Object,
-      default() {},
-    },
-    styles: {
-      type: Object,
-      default() {},
-    },
-  });
+	// 接收参数
+	const props = defineProps({
+		// 装修数据
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+		// 装修样式
+		styles: {
+			type: Object,
+			default: () => ({}),
+		},
+	});
+	// 设置背景样式
+	const bgStyle = computed(() => {
+		// 直接从 props.styles 解构
+		const {
+			bgType,
+			bgImg,
+			bgColor
+		} = props.styles;

-  // 组件样式
-  const elStyles = {
-    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
-    fontSize: `${props.data.titleSize}px`,
-    fontWeight: `${props.data.titleWeight}px`,
-  };
+		// 根据 bgType 返回相应的样式
+		return {
+			background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
+		};
+	});

-  // 标题样式
-  const titleStyles = {
-    color: props.data.titleColor,
-    fontSize: `${props.data.titleSize}px`,
-    textAlign: props.data.textAlign
-  };
+	// 标题样式
+	const titleStyles = {
+		color: props.data.titleColor,
+		fontSize: `${props.data.titleSize}px`,
+		textAlign: props.data.textAlign
+	};

-  // 副标题
-  const descStyles = {
-    color: props.data.descriptionColor,
-    textAlign: props.data.textAlign,
-    fontSize: `${props.data.descriptionSize}px`,
-    fontWeight: `${props.data.descriptionWeight}px`,
-  };
+	// 副标题
+	const descStyles = {
+		color: props.data.descriptionColor,
+		textAlign: props.data.textAlign,
+		fontSize: `${props.data.descriptionSize}px`,
+		fontWeight: `${props.data.descriptionWeight}px`,
+	};
 </script>

 <style lang="scss" scoped>
-  .ss-title-wrap {
-    height: 80rpx;
-    position: relative;
+	.ss-title-wrap {
+		height: 80rpx;
+		position: relative;

-    .title-content {
-      .title-text {
-        font-size: 30rpx;
-        color: #333;
-      }
+		.title-content {
+			.title-text {
+				font-size: 30rpx;
+				color: #333;
+			}

-      .sub-title-text {
-        font-size: 22rpx;
-        color: #999;
-      }
-    }
+			.sub-title-text {
+				font-size: 22rpx;
+				color: #999;
+			}
+		}

-    .more-box {
-      white-space: nowrap;
-      font-size: 22rpx;
-      color: #999;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 20rpx;
-    }
-  }
-</style>
+		.more-box {
+			white-space: nowrap;
+			font-size: 22rpx;
+			color: #999;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			right: 20rpx;
+		}
+	}
+</style>
@@ -1,167 +1,185 @@
 <!-- 装修用户组件：用户卡片 -->
 <template>
-	<view class="ss-user-info-wrap ss-p-t-50">
-		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
-			<view class="left-box ss-flex ss-col-center ss-m-l-36">
-				<view class="avatar-box ss-m-r-24">
-					<image class="avatar-img" :src="
+  <view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
+    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
+      <view class="left-box ss-flex ss-col-center ss-m-l-36">
+        <view class="avatar-box ss-m-r-24">
+          <image class="avatar-img" :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
-                : sheep.$url.static('/static/img/shop/default_avatar.png')
-            " mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
-				</view>
-				<view>
-					<view class="nickname-box ss-flex ss-col-center">
-						<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
-					</view>
-				</view>
-			</view>
-			<view class="right-box ss-m-r-52">
-				<button class="ss-reset-button" @tap="showShareModal">
-					<text class="sicon-qrcode"></text>
-				</button>
-			</view>
-		</view>
+                : sheep.$url.static('/static/img/shop/default_avatar.png')"
+                 mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')">
+          </image>
+        </view>
+        <view>
+          <view class="nickname-box ss-flex ss-col-center">
+            <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
+          </view>
+        </view>
+      </view>
+      <view class="right-box ss-m-r-52">
+        <button class="ss-reset-button" @tap="showShareModal">
+          <text class="sicon-qrcode"></text>
+        </button>
+      </view>
+    </view>

-		<!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
-		<view
+    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
+    <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o" />
-        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
+        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全</view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view>
-	</view>
+  </view>
 </template>

 <script setup>
-	/**
-	 * 用户卡片
-	 *
-	 * @property {Number} leftSpace 									- 容器左间距
-	 * @property {Number} rightSpace 									- 容器右间距
-	 *
-	 * @property {String} avatar 					- 头像
-	 * @property {String} nickname 					- 昵称
-	 * @property {String} vip		  				- 等级
-	 * @property {String} collectNum 				- 收藏数
-	 * @property {String} likeNum 					- 点赞数
-	 *
-	 *
-	 */
-	import {
-		computed,
-		reactive
-	} from 'vue';
-	import sheep from '@/sheep';
-	import {
-		showShareModal,
-		showAuthModal
-	} from '@/sheep/hooks/useModal';
+  /**
+   * 用户卡片
+   *
+   * @property {Number} leftSpace                  - 容器左间距
+   * @property {Number} rightSpace                  - 容器右间距
+   *
+   * @property {String} avatar          - 头像
+   * @property {String} nickname          - 昵称
+   * @property {String} vip              - 等级
+   * @property {String} collectNum        - 收藏数
+   * @property {String} likeNum          - 点赞数
+   *
+   *
+   */
+  import { computed } from 'vue';
+  import sheep from '@/sheep';
+  import {
+    showShareModal,
+    showAuthModal,
+  } from '@/sheep/hooks/useModal';

-	// 用户信息
-	const userInfo = computed(() => sheep.$store('user').userInfo);
-	console.log('用户信息', userInfo)
+  // 用户信息
+  const userInfo = computed(() => sheep.$store('user').userInfo);
+  console.log('用户信息', userInfo);

-	// 是否登录
-	const isLogin = computed(() => sheep.$store('user').isLogin);
-	// 接收参数
-	const props = defineProps({
-		background: {
-			type: String,
-			default: '',
-		},
-		// 头像
-		avatar: {
-			type: String,
-			default: '',
-		},
-		nickname: {
-			type: String,
-			default: '请先登录',
-		},
-		vip: {
-			type: [String, Number],
-			default: '1',
-		},
-		collectNum: {
-			type: [String, Number],
-			default: '1',
-		},
-		likeNum: {
-			type: [String, Number],
-			default: '1',
-		},
-	});
+  // 是否登录
+  const isLogin = computed(() => sheep.$store('user').isLogin);
+  // 接收参数
+  const props = defineProps({
+    // 装修数据
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 装修样式
+    styles: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 头像
+    avatar: {
+      type: String,
+      default: '',
+    },
+    nickname: {
+      type: String,
+      default: '请先登录',
+    },
+    vip: {
+      type: [String, Number],
+      default: '1',
+    },
+    collectNum: {
+      type: [String, Number],
+      default: '1',
+    },
+    likeNum: {
+      type: [String, Number],
+      default: '1',
+    },
+  });

-	function onBind() {
-		showAuthModal('changeMobile');
-	}
+  // 设置背景样式
+  const bgStyle = computed(() => {
+    // 直接从 props.styles 解构
+    const { bgType, bgImg, bgColor } = props.styles;
+
+    // 根据 bgType 返回相应的样式
+    return {
+      background: bgType === 'img'
+        ? `url(${bgImg}) no-repeat top center / 100% 100%`
+        : bgColor,
+    };
+  });
+
+  // 绑定手机号
+  function onBind() {
+    showAuthModal('changeMobile');
+  }
 </script>

 <style lang="scss" scoped>
-	.ss-user-info-wrap {
-		box-sizing: border-box;
+  .ss-user-info-wrap {
+    box-sizing: border-box;

-		.avatar-box {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			overflow: hidden;
+    .avatar-box {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      overflow: hidden;

-			.avatar-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
+      .avatar-img {
+        width: 100%;
+        height: 100%;
+      }
+    }

-		.nick-name {
-			font-size: 34rpx;
-			font-weight: 400;
-			color: #333333;
-			line-height: normal;
-		}
+    .nick-name {
+      font-size: 34rpx;
+      font-weight: 400;
+      color: #333333;
+      line-height: normal;
+    }

-		.vip-img {
-			width: 30rpx;
-			height: 30rpx;
-		}
+    .vip-img {
+      width: 30rpx;
+      height: 30rpx;
+    }

-		.sicon-qrcode {
-			font-size: 40rpx;
-		}
-	}
+    .sicon-qrcode {
+      font-size: 40rpx;
+    }
+  }

-	.bind-mobile-box {
-		width: 100%;
-		height: 84rpx;
-		padding: 0 34rpx 0 44rpx;
-		box-sizing: border-box;
-		background: #ffffff;
-		box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
+  .bind-mobile-box {
+    width: 100%;
+    height: 84rpx;
+    padding: 0 34rpx 0 44rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

-		.cicon-mobile-o {
-			font-size: 30rpx;
-			color: #ff690d;
-		}
+    .cicon-mobile-o {
+      font-size: 30rpx;
+      color: #ff690d;
+    }

-		.mobile-title {
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #ff690d;
-		}
+    .mobile-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ff690d;
+    }

-		.bind-btn {
-			width: 100rpx;
-			height: 50rpx;
-			background: #ff6100;
-			border-radius: 25rpx;
-			font-size: 24rpx;
-			font-weight: 500;
-			color: #ffffff;
-		}
-	}
+    .bind-btn {
+      width: 100rpx;
+      height: 50rpx;
+      background: #ff6100;
+      border-radius: 25rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
 </style>
@@ -1,6 +1,6 @@
 <!-- 装修用户组件：用户资产 -->
 <template>
-	<view class="ss-wallet-menu-wrap ss-flex ss-col-center">
+	<view class="ss-wallet-menu-wrap ss-flex ss-col-center" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
 		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
 			@tap="sheep.$router.go('/pages/user/wallet/money')">
 			<view class="value-box ss-flex ss-col-bottom">
@@ -42,8 +42,34 @@
 	 */
 	import { computed } from 'vue';
 	import sheep from '@/sheep';
-  import { fen2yuan } from '../../hooks/useGoods';
+	import { fen2yuan } from '../../hooks/useGoods';

+	// 接收参数
+	const props = defineProps({
+		// 装修数据
+		data: {
+		  type: Object,
+		  default: () => ({}),
+		},
+		// 装修样式
+		styles: {
+		  type: Object,
+		  default: () => ({}),
+		},
+	});
+	// 设置背景样式
+	const bgStyle = computed(() => {
+	  // 直接从 props.styles 解构
+	  const { bgType, bgImg, bgColor } = props.styles; 
+	
+	  // 根据 bgType 返回相应的样式
+	  return {
+		background: bgType === 'img'
+			? `url(${bgImg}) no-repeat top center / 100% 100%`
+			: bgColor
+		};
+	});
+	
 	const userWallet = computed(() => sheep.$store('user').userWallet);
 	const userInfo = computed(() => sheep.$store('user').userInfo);
 	const numData = computed(() => sheep.$store('user').numData);