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

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

@@ -1,39 +1,20 @@
 <!-- 装修营销组件：优惠券  -->
 <template>
-  <scroll-view class="scroll-box" scroll-x scroll-anchoring>
+	<scroll-view class="scroll-box" scroll-x scroll-anchoring :style="[bgStyle, { marginLeft: `${data.space}px` }]">
 		<view class="coupon-box ss-flex">
-      <view
+			<view class="coupon-item" :style="[couponBg, { marginLeft: `${data.space}px` }]"
-        class="coupon-item"
+				v-for="(item, index) in couponList" :key="index">
-        :style="[couponBg, { marginLeft: `${data.space}px` }]"
+				<su-coupon :size="SIZE_LIST[columns - 1]" :textColor="data.textColor" background="" :couponId="item.id"
-        v-for="(item, index) in couponList"
+					:title="item.name" :type="formatCouponDiscountType(item)" :value="formatCouponDiscountValue(item)"
-        :key="index"
+					:sellBy="formatValidityType(item)">
-      >
-        <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
+						<button v-if="columns === 2" @click.stop="onGetCoupon(item.id)"
-              v-if="columns === 2"
+							class="ss-reset-button card-btn vertical" :style="[btnStyles]">
-              @click.stop="onGetCoupon(item.id)"
-              class="ss-reset-button card-btn vertical"
-              :style="[btnStyles]"
-            >
 							<view class="btn-text">立即领取</view>
 						</button>
-            <button
+						<button v-else class="ss-reset-button card-btn" :style="[btnStyles]"
-              v-else
+							@click.stop="onGetCoupon(item.id)">
-              class="ss-reset-button card-btn"
-              :style="[btnStyles]"
-              @click.stop="onGetCoupon(item.id)"
-            >
 							立即领取
 						</button>
 					</template>
@@ -46,9 +27,19 @@
 <script setup>
 	import sheep from '@/sheep';
 	import CouponApi from '@/sheep/api/promotion/coupon';
-  import { ref, onMounted } from 'vue';
+	import {
-  import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from "@/sheep/util/const";
+		ref,
-  import { floatToFixed2, formatDate } from "@/sheep/util";
+		onMounted,
+		computed
+	} from 'vue';
+	import {
+		CouponTemplateValidityTypeEnum,
+		PromotionDiscountTypeEnum
+	} from "@/sheep/util/const";
+	import {
+		floatToFixed2,
+		formatDate
+	} from "@/sheep/util";
 
 	const props = defineProps({
 		data: {
@@ -60,7 +51,10 @@
 			default: () => ({}),
 		},
 	});
-  const { columns, button } = props.data;
+	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%`,
@@ -69,13 +63,26 @@
 		background: button.bgColor,
 		color: button.color,
 	};
+	// 设置背景样式
+	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 formatCouponDiscountType = (coupon) => {
-    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
 			return 'reduce'
 		}
-    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
 			return 'percent'
 		}
 		return `未知【${coupon.discountType}】`
@@ -83,10 +90,10 @@
 
 	// 格式化【折扣】
 	const formatCouponDiscountValue = (coupon) => {
-    if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
 			return floatToFixed2(coupon.discountPrice)
 		}
-    if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+		if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
 			return coupon.discountPercent
 		}
 		return `未知【${coupon.discountType}】`
@@ -106,7 +113,10 @@
 	const couponList = ref([]);
 	// 立即领取优惠券
 	async function onGetCoupon(id) {
-    const { error, msg } = await CouponApi.takeCoupon(id);
+		const {
+			error,
+			msg
+		} = await CouponApi.takeCoupon(id);
 		if (error === 0) {
 			uni.showToast({
 				title: msg,
@@ -117,7 +127,9 @@
 		await getCouponTemplateList()
 	}
 	const getCouponTemplateList = async () => {
-    const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
+		const {
+			data
+		} = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
 		couponList.value = data;
 	}
 	onMounted(() => {
@@ -126,12 +138,18 @@
 </script>
 
 <style lang="scss" scoped>
+	.scroll-box {
+		.coupon-box {
+			display: flex;
+			justify-content: space-around;
+
 			.card-btn {
 				width: 140rpx;
 				height: 50rpx;
 				border-radius: 25rpx;
 				font-size: 24rpx;
 				line-height: 50rpx;
+
 				&.vertical {
 					width: 50rpx;
 					height: 140rpx;
@@ -144,9 +162,12 @@
 					}
 				}
 			}
+
 			.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,