Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3
liuhongfeng
2 years ago
commit
7df7719be3
@ -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