芋道源码
2 years ago
committed by
Gitee
commit
8f97155b43
@ -0,0 +1,78 @@
|
||||
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
|
||||
import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
|
||||
import { floatToFixed2 } from '@/utils'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
// 优惠值
|
||||
export const CouponDiscount = defineComponent({
|
||||
name: 'CouponDiscount',
|
||||
props: {
|
||||
coupon: {
|
||||
type: CouponTemplateApi.CouponTemplateVO
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
|
||||
// 折扣
|
||||
let value = coupon.discountPercent + ''
|
||||
let suffix = ' 折'
|
||||
// 满减
|
||||
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
|
||||
value = floatToFixed2(coupon.discountPrice)
|
||||
suffix = ' 元'
|
||||
}
|
||||
return () => (
|
||||
<div>
|
||||
<span class={'text-20px font-bold'}>{value}</span>
|
||||
<span>{suffix}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// 优惠描述
|
||||
export const CouponDiscountDesc = defineComponent({
|
||||
name: 'CouponDiscountDesc',
|
||||
props: {
|
||||
coupon: {
|
||||
type: CouponTemplateApi.CouponTemplateVO
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
|
||||
// 使用条件
|
||||
const useCondition = coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : ''
|
||||
// 优惠描述
|
||||
const discountDesc =
|
||||
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
|
||||
? `减${floatToFixed2(coupon.discountPrice)}元`
|
||||
: `打${coupon.discountPercent}折`
|
||||
return () => (
|
||||
<div>
|
||||
<span>{useCondition}</span>
|
||||
<span>{discountDesc}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// 有效期
|
||||
export const CouponValidTerm = defineComponent({
|
||||
name: 'CouponValidTerm',
|
||||
props: {
|
||||
coupon: {
|
||||
type: CouponTemplateApi.CouponTemplateVO
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
|
||||
const text =
|
||||
coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
|
||||
? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
|
||||
coupon.validEndTime,
|
||||
'YYYY-MM-DD'
|
||||
)}`
|
||||
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
|
||||
return () => <div>{text}</div>
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,47 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 商品卡片属性 */
|
||||
export interface CouponCardProperty {
|
||||
// 列数
|
||||
columns: number
|
||||
// 背景图
|
||||
bgImg: string
|
||||
// 文字颜色
|
||||
textColor: string
|
||||
// 按钮样式
|
||||
button: {
|
||||
// 颜色
|
||||
color: string
|
||||
// 背景颜色
|
||||
bgColor: string
|
||||
}
|
||||
// 间距
|
||||
space: number
|
||||
// 优惠券编号列表
|
||||
couponIds: number[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'CouponCard',
|
||||
name: '优惠券',
|
||||
icon: 'ep:ticket',
|
||||
property: {
|
||||
columns: 1,
|
||||
bgImg: '',
|
||||
textColor: '#E9B461',
|
||||
button: {
|
||||
color: '#434343',
|
||||
bgColor: ''
|
||||
},
|
||||
space: 0,
|
||||
couponIds: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<CouponCardProperty>
|
||||
@ -0,0 +1,64 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 商品卡片属性 */
|
||||
export interface ProductListProperty {
|
||||
// 布局类型：双列 | 三列 | 水平滑动
|
||||
layoutType: 'twoCol' | 'threeCol' | 'horizSwiper'
|
||||
// 商品字段
|
||||
fields: {
|
||||
// 商品名称
|
||||
name: ProductListFieldProperty
|
||||
// 商品价格
|
||||
price: ProductListFieldProperty
|
||||
}
|
||||
// 角标
|
||||
badge: {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 角标图片
|
||||
imgUrl: string
|
||||
}
|
||||
// 上圆角
|
||||
borderRadiusTop: number
|
||||
// 下圆角
|
||||
borderRadiusBottom: number
|
||||
// 间距
|
||||
space: number
|
||||
// 商品编号列表
|
||||
spuIds: number[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
// 商品字段
|
||||
export interface ProductListFieldProperty {
|
||||
// 是否显示
|
||||
show: boolean
|
||||
// 颜色
|
||||
color: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'ProductList',
|
||||
name: '商品栏',
|
||||
icon: 'fluent:text-column-two-24-filled',
|
||||
property: {
|
||||
layoutType: 'twoCol',
|
||||
fields: {
|
||||
name: { show: true, color: '#000' },
|
||||
price: { show: true, color: '#ff3000' }
|
||||
},
|
||||
badge: { show: false, imgUrl: '' },
|
||||
borderRadiusTop: 8,
|
||||
borderRadiusBottom: 8,
|
||||
space: 8,
|
||||
spuIds: [],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '',
|
||||
marginLeft: 8,
|
||||
marginRight: 8,
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<ProductListProperty>
|
||||
Loading…
Reference in New Issue