reactor:consts 挪到 helper 目录下

This commit is contained in:
YunaiV
2025-04-28 22:43:30 +08:00
parent 997404dfb4
commit dfe4a33e2d
19 changed files with 328 additions and 283 deletions
+165 -160
View File
@@ -1,176 +1,181 @@
<!-- 装修营销组件优惠券 -->
<template>
<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>
<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,
computed
} 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/helper/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 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 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;
// 根据 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}`
}
// 根据 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;
.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;
&.vertical {
width: 50rpx;
height: 140rpx;
margin: auto 20rpx auto 0;
.btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
}
}
}
.btn-text {
font-size: 24rpx;
text-align: center;
writing-mode: vertical-lr;
}
}
}
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
}
</style>
.coupon-item {
&:nth-of-type(1) {
margin-left: 0 !important;
}
}
</style>
@@ -502,7 +502,7 @@
getRewardActivityRuleItemDescriptions,
} from '@/sheep/hooks/useGoods';
import { isArray } from 'lodash-es';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
// 数据
let defaultImgWidth = ref(0);
@@ -141,11 +141,11 @@
/**
* 商品卡片
*/
import { computed, onMounted, reactive, ref } from 'vue';
import { computed, onMounted, reactive } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import PointApi from '@/sheep/api/promotion/point';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
// 布局类型
const LayoutTypeEnum = {
@@ -260,10 +260,10 @@
// 查找对应的 spu 并更新价格
const spu = state.spuList.find((spu) => activity.spuId === spu.id);
if (spu) {
spu.pointStock = activity.stock
spu.pointTotalStock = activity.totalStock
spu.point = activity.point
spu.pointPrice = activity.price
spu.pointStock = activity.stock;
spu.pointTotalStock = activity.totalStock;
spu.point = activity.point;
spu.pointPrice = activity.price;
// 赋值活动ID,为了点击跳转详情页
spu.activityId = activity.id;
// 赋值活动类型
+60 -46
View File
@@ -76,7 +76,12 @@
<view class="goods-list-box">
<view
class="left-list"
:style="[{ paddingRight: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
:style="[
{
paddingRight: state.property.space + 'rpx',
marginBottom: state.property.space + 'px',
},
]"
v-for="item in state.leftSpuList"
:key="item.id"
>
@@ -106,7 +111,12 @@
<view class="goods-list-box">
<view
class="right-list"
:style="[{ paddingLeft: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
:style="[
{
paddingLeft: state.property.space + 'rpx',
marginBottom: state.property.space + 'px',
},
]"
v-for="item in state.rightSpuList"
:key="item.id"
>
@@ -141,10 +151,10 @@
/**
* 商品卡片
*/
import { computed, nextTick, onMounted, reactive, watch } from 'vue';
import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
import { isEmpty } from '@/sheep/helper/utils';
// 布局类型
@@ -162,53 +172,53 @@
leftSpuList: [],
rightSpuList: [],
property: {
'layoutType': 'oneColBigImg',
'fields': {
'name': {
'show': true,
'color': '#000',
layoutType: 'oneColBigImg',
fields: {
name: {
show: true,
color: '#000',
},
'introduction': {
'show': true,
'color': '#999',
introduction: {
show: true,
color: '#999',
},
'price': {
'show': true,
'color': '#ff3000',
price: {
show: true,
color: '#ff3000',
},
'marketPrice': {
'show': true,
'color': '#c4c4c4',
marketPrice: {
show: true,
color: '#c4c4c4',
},
'salesCount': {
'show': true,
'color': '#c4c4c4',
salesCount: {
show: true,
color: '#c4c4c4',
},
'stock': {
'show': true,
'color': '#c4c4c4',
stock: {
show: true,
color: '#c4c4c4',
},
},
'badge': {
'show': false,
'imgUrl': '',
badge: {
show: false,
imgUrl: '',
},
'btnBuy': {
'type': 'text',
'text': '立即兑换',
'bgBeginColor': '#FF6000',
'bgEndColor': '#FE832A',
'imgUrl': '',
btnBuy: {
type: 'text',
text: '立即兑换',
bgBeginColor: '#FF6000',
bgEndColor: '#FE832A',
imgUrl: '',
},
'borderRadiusTop': 8,
'borderRadiusBottom': 8,
'space': 8,
'style': {
'bgType': 'color',
'bgColor': '',
'marginLeft': 8,
'marginRight': 8,
'marginBottom': 8,
borderRadiusTop: 8,
borderRadiusBottom: 8,
space: 8,
style: {
bgType: 'color',
bgColor: '',
marginLeft: 8,
marginRight: 8,
marginBottom: 8,
},
},
});
@@ -219,9 +229,13 @@
},
});
// 动态更新 property
watch(() => props.property, (newVal) => {
state.property = { ...state.property, ...newVal };
}, { immediate: true, deep: true });
watch(
() => props.property,
(newVal) => {
state.property = { ...state.property, ...newVal };
},
{ immediate: true, deep: true },
);
const { marginLeft, marginRight } = state.property.styles || {};
// 购买按钮样式
@@ -317,7 +331,7 @@
function getActivityCount() {
return state.spuList.length;
}
defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
defineExpose({ concatActivity, getActivityCount, calculateGoodsColumn });
</script>
<style lang="scss" scoped>
@@ -105,7 +105,7 @@
import sheep from '@/sheep';
import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
import { isEmpty, min } from 'lodash-es';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { PromotionActivityTypeEnum } from '@/sheep/helper/const';
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({