yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/80/head
卢越 2024-08-15 14:18:44 +08:00
parent 0575bd56b0
commit bf75dc2768
2 changed files with 159 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
sheep/components/s-coupon-block/s-coupon-block.vue
View File

@ -1,152 +1,173 @@
<!-- 装修营销组件：优惠券 --> <!-- 装修营销组件：优惠券 -->
<template> <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 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)">
> <template v-slot:btn>
<su-coupon <!-- 两列时，领取按钮坚排 -->
:size="SIZE_LIST[columns - 1]" <button v-if="columns === 2" @click.stop="onGetCoupon(item.id)"
:textColor="data.textColor" class="ss-reset-button card-btn vertical" :style="[btnStyles]">
background="" <view class="btn-text">立即领取</view>
:couponId="item.id" </button>
:title="item.name" <button v-else class="ss-reset-button card-btn" :style="[btnStyles]"
:type="formatCouponDiscountType(item)" @click.stop="onGetCoupon(item.id)">
:value="formatCouponDiscountValue(item)" 立即领取
:sellBy="formatValidityType(item)" </button>
> </template>
<template v-slot:btn> </su-coupon>
<!-- 两列时，领取按钮坚排 --> </view>
<button </view>
v-if="columns === 2" </scroll-view>
@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> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon'; 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({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
styles: { styles: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}); });
const { columns, button } = props.data; const {
const SIZE_LIST = ['lg', 'md', 'xs'] columns,
const couponBg = { button
background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`, } = props.data;
}; const SIZE_LIST = ['lg', 'md', 'xs']
const btnStyles = { const couponBg = {
background: button.bgColor, background: `url(${sheep.$url.cdn(props.data.bgImg)}) no-repeat top center / 100% 100%`,
color: button.color, };
}; const btnStyles = {
background: button.bgColor,
color: button.color,
};
// 设置背景样式
const bgStyle = computed(() => {
// 直接从 props.styles 解构
const {
bgType,
bgImg,
bgColor
} = props.styles;
// 格式化【折扣类型】 // 根据 bgType 返回相应的样式
const formatCouponDiscountType = (coupon) => { return {
if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) { background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor
return 'reduce' };
} });
if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) { // 格式化【折扣类型】
return 'percent' const formatCouponDiscountType = (coupon) => {
} if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
return `未知【${coupon.discountType}】` return 'reduce'
} }
if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return 'percent'
}
return `未知【${coupon.discountType}】`
}
// 格式化【折扣】 // 格式化【折扣】
const formatCouponDiscountValue = (coupon) => { const formatCouponDiscountValue = (coupon) => {
if(coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) { if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
return floatToFixed2(coupon.discountPrice) return floatToFixed2(coupon.discountPrice)
} }
if(coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) { if (coupon.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
return coupon.discountPercent return coupon.discountPercent
} }
return `未知【${coupon.discountType}】` return `未知【${coupon.discountType}】`
} }
// 格式化【有效期限】 // 格式化【有效期限】
const formatValidityType = (row) => { const formatValidityType = (row) => {
if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) { if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}` return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
} }
if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) { if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用` return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
} }
return '未知【' + row.validityType + '】' return '未知【' + row.validityType + '】'
} }
const couponList = ref([]); const couponList = ref([]);
// 立即领取优惠券 // 立即领取优惠券
async function onGetCoupon(id) { async function onGetCoupon(id) {
const { error, msg } = await CouponApi.takeCoupon(id); const {
if (error === 0) { error,
uni.showToast({ msg
title: msg, } = await CouponApi.takeCoupon(id);
icon: 'none', if (error === 0) {
}); uni.showToast({
return title: msg,
} icon: 'none',
await getCouponTemplateList() });
} return
const getCouponTemplateList = async () => { }
const { data } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(',')); await getCouponTemplateList()
couponList.value = data; }
} const getCouponTemplateList = async () => {
onMounted(() => { const {
getCouponTemplateList() data
}); } = await CouponApi.getCouponTemplateListByIds(props.data.couponIds.join(','));
couponList.value = data;
}
onMounted(() => {
getCouponTemplateList()
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card-btn { .scroll-box {
width: 140rpx; .coupon-box {
height: 50rpx; display: flex;
border-radius: 25rpx; justify-content: space-around;
font-size: 24rpx;
line-height: 50rpx;
&.vertical {
width: 50rpx;
height: 140rpx;
margin: auto 20rpx auto 0;
.btn-text { .card-btn {
font-size: 24rpx; width: 140rpx;
text-align: center; height: 50rpx;
writing-mode: vertical-lr; border-radius: 25rpx;
} font-size: 24rpx;
} line-height: 50rpx;
}
.coupon-item { &.vertical {
&:nth-of-type(1) { width: 50rpx;
margin-left: 0 !important; height: 140rpx;
} margin: auto 20rpx auto 0;
}
</style> .btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
}
}
}
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
}
}
}
</style>

1
sheep/components/s-menu-button/s-menu-button.vue
View File

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