【功能修复】修复装修优惠券整体的背景图片问题；如果2列或者3排优惠券现在居中显示并且有间隔

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

@@ -1,152 +1,173 @@
 <!-- 装修营销组件：优惠券  -->
 <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">
+			<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 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;
+	.scroll-box {
+		.coupon-box {
+			display: flex;
+			justify-content: space-around;
 
-      .btn-text {
-        font-size: 24rpx;
-        text-align: center;
-        writing-mode: vertical-lr;
-      }
-    }
-  }
-  .coupon-item {
-    &:nth-of-type(1) {
-      margin-left: 0 !important;
-    }
-  }
-</style>
+			.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;
+
+					.btn-text {
+						font-size: 24rpx;
+						text-align: center;
+						writing-mode: vertical-lr;
+					}
+				}
+			}
+
+			.coupon-item {
+				&:nth-of-type(1) {
+					margin-left: 0 !important;
+				}
+			}
+		}
+	}
+</style>

sheep/components/s-menu-button/s-menu-button.vue

@@ -173,7 +173,6 @@
 
 	// 设置背景样式
 	const bgStyle = computed(() => {
-		console.log(props.styles)
 		// 直接从 props.styles 解构
 		const {
 			bgType,