Skip to content

Commit 7df7719

Browse files
souvcsouvc
committed
2 parents 764e171 + 54897b6 commit 7df7719

File tree

26 files changed

+1104
-431
lines changed

26 files changed

+1104
-431
lines changed

‎src/api/crm/permission/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export interface PermissionVO {
66
bizType: number | undefined // Crm 类型
77
bizId: number | undefined // Crm 类型数据编号
88
level: number | undefined // 权限级别
9-
deptName?: string // 部门名称 // 岗位名称数组 TODO @puhui999：数组？
9+
deptName?: string // 部门名称
1010
nickname?: string // 用户昵称
11-
postNames?: string // 岗位名称数组 TODO @puhui999：数组？
11+
postNames?: string[] // 岗位名称数组
1212
createTime?: Date
1313
}
1414

@@ -19,7 +19,7 @@ export const getPermissionList = async (params) => {
1919

2020
// 新增团队成员
2121
export const createPermission = async (data: PermissionVO) => {
22-
return await request.post({ url: `/crm/permission/add`, data })
22+
return await request.post({ url: `/crm/permission/create`, data })
2323
}
2424

2525
// 修改团队成员权限级别

‎src/api/mall/promotion/coupon/couponTemplate.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ export function getCouponTemplatePage(params: PageParam) {
7373
})
7474
}
7575

76+
// 获得优惠劵模板分页
77+
export function getCouponTemplateList(ids: number[]) {
78+
return request.get({
79+
url: `/promotion/coupon-template/list?ids=${ids}`
80+
})
81+
}
82+
7683
// 导出优惠劵模板 Excel
7784
export function exportCouponTemplateExcel(params: PageParam) {
7885
return request.get({

‎src/components/DiyEditor/components/mobile/CouponCard/component.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
2+
import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
3+
import { floatToFixed2 } from '@/utils'
4+
import { formatDate } from '@/utils/formatTime'
5+
6+
// 优惠值
7+
export const CouponDiscount = defineComponent({
8+
name: 'CouponDiscount',
9+
props: {
10+
coupon: {
11+
type: CouponTemplateApi.CouponTemplateVO
12+
}
13+
},
14+
setup(props) {
15+
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
16+
// 折扣
17+
let value = coupon.discountPercent + ''
18+
let suffix = ' 折'
19+
// 满减
20+
if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
21+
value = floatToFixed2(coupon.discountPrice)
22+
suffix = ' 元'
23+
}
24+
return () => (
25+
<div>
26+
<span class={'text-20px font-bold'}>{value}</span>
27+
<span>{suffix}</span>
28+
</div>
29+
)
30+
}
31+
})
32+
33+
// 优惠描述
34+
export const CouponDiscountDesc = defineComponent({
35+
name: 'CouponDiscountDesc',
36+
props: {
37+
coupon: {
38+
type: CouponTemplateApi.CouponTemplateVO
39+
}
40+
},
41+
setup(props) {
42+
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
43+
// 使用条件
44+
const useCondition = coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : ''
45+
// 优惠描述
46+
const discountDesc =
47+
coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
48+
? `减${floatToFixed2(coupon.discountPrice)}元`
49+
: `打${coupon.discountPercent}折`
50+
return () => (
51+
<div>
52+
<span>{useCondition}</span>
53+
<span>{discountDesc}</span>
54+
</div>
55+
)
56+
}
57+
})
58+
59+
// 有效期
60+
export const CouponValidTerm = defineComponent({
61+
name: 'CouponValidTerm',
62+
props: {
63+
coupon: {
64+
type: CouponTemplateApi.CouponTemplateVO
65+
}
66+
},
67+
setup(props) {
68+
const coupon = props.coupon as CouponTemplateApi.CouponTemplateVO
69+
const text =
70+
coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
71+
? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
72+
coupon.validEndTime,
73+
'YYYY-MM-DD'
74+
)}`
75+
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
76+
return () => <div>{text}</div>
77+
}
78+
})

‎src/components/DiyEditor/components/mobile/CouponCard/config.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
2+
3+
/** 商品卡片属性 */
4+
export interface CouponCardProperty {
5+
// 列数
6+
columns: number
7+
// 背景图
8+
bgImg: string
9+
// 文字颜色
10+
textColor: string
11+
// 按钮样式
12+
button: {
13+
// 颜色
14+
color: string
15+
// 背景颜色
16+
bgColor: string
17+
}
18+
// 间距
19+
space: number
20+
// 优惠券编号列表
21+
couponIds: number[]
22+
// 组件样式
23+
style: ComponentStyle
24+
}
25+
26+
// 定义组件
27+
export const component = {
28+
id: 'CouponCard',
29+
name: '优惠券',
30+
icon: 'ep:ticket',
31+
property: {
32+
columns: 1,
33+
bgImg: '',
34+
textColor: '#E9B461',
35+
button: {
36+
color: '#434343',
37+
bgColor: ''
38+
},
39+
space: 0,
40+
couponIds: [],
41+
style: {
42+
bgType: 'color',
43+
bgColor: '',
44+
marginBottom: 8
45+
} as ComponentStyle
46+
}
47+
} as DiyComponent<CouponCardProperty>

‎src/components/DiyEditor/components/mobile/CouponCard/index.vue

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
3+
<div
4+
class="flex flex-row text-12px"
5+
:style="{
6+
gap: `${property.space}px`,
7+
width: scrollbarWidth
8+
}"
9+
>
10+
<div
11+
class="box-content"
12+
:style="{
13+
background: property.bgImg
14+
? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
15+
: '#fff',
16+
width: `${couponWidth}px`,
17+
color: property.textColor
18+
}"
19+
v-for="(coupon, index) in couponList"
20+
:key="index"
21+
>
22+
<!-- 布局1：1列-->
23+
<div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
24+
<div class="flex flex-col justify-evenly gap-4px">
25+
<!-- 优惠值 -->
26+
<CouponDiscount :coupon="coupon" />
27+
<!-- 优惠描述 -->
28+
<CouponDiscountDesc :coupon="coupon" />
29+
<!-- 有效期 -->
30+
<CouponValidTerm :coupon="coupon" />
31+
</div>
32+
<div class="flex flex-col justify-evenly">
33+
<div
34+
class="rounded-20px p-x-8px p-y-2px"
35+
:style="{
36+
color: property.button.color,
37+
background: property.button.bgColor
38+
}"
39+
>
40+
立即领取
41+
</div>
42+
</div>
43+
</div>
44+
<!-- 布局2：2列-->
45+
<div
46+
v-else-if="property.columns === 2"
47+
class="m-l-16px flex flex-row justify-between p-8px"
48+
>
49+
<div class="flex flex-col justify-evenly gap-4px">
50+
<!-- 优惠值 -->
51+
<CouponDiscount :coupon="coupon" />
52+
<div>{{ coupon.name }}</div>
53+
</div>
54+
<div class="flex flex-col">
55+
<div
56+
class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
57+
:style="{
58+
color: property.button.color,
59+
background: property.button.bgColor
60+
}"
61+
>
62+
立即领取
63+
</div>
64+
</div>
65+
</div>
66+
<!-- 布局3：3列-->
67+
<div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
68+
<!-- 优惠值 -->
69+
<CouponDiscount :coupon="coupon" />
70+
<div>{{ coupon.name }}</div>
71+
<div
72+
class="rounded-20px p-x-8px p-y-2px"
73+
:style="{
74+
color: property.button.color,
75+
background: property.button.bgColor
76+
}"
77+
>
78+
立即领取
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</el-scrollbar>
84+
</template>
85+
<script setup lang="ts">
86+
import { CouponCardProperty } from './config'
87+
import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
88+
import { CouponDiscount } from './component'
89+
import {
90+
CouponDiscountDesc,
91+
CouponValidTerm
92+
} from '@/components/DiyEditor/components/mobile/CouponCard/component'
93+
94+
/** 商品卡片 */
95+
defineOptions({ name: 'CouponCard' })
96+
// 定义属性
97+
const props = defineProps<{ property: CouponCardProperty }>()
98+
// 商品列表
99+
const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
100+
watch(
101+
() => props.property.couponIds,
102+
async () => {
103+
if (props.property.couponIds?.length > 0) {
104+
couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds)
105+
}
106+
},
107+
{
108+
immediate: true,
109+
deep: true
110+
}
111+
)
112+
113+
// 手机宽度
114+
const phoneWidth = ref(375)
115+
// 容器
116+
const containerRef = ref()
117+
// 滚动条宽度
118+
const scrollbarWidth = ref('100%')
119+
// 优惠券的宽度
120+
const couponWidth = ref(375)
121+
// 计算布局参数
122+
watch(
123+
() => [props.property, phoneWidth, couponList.value.length],
124+
() => {
125+
// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
126+
couponWidth.value =
127+
(phoneWidth.value * 0.95 - props.property.space * (props.property.columns - 1)) /
128+
props.property.columns
129+
// 显示滚动条
130+
scrollbarWidth.value = `${
131+
couponWidth.value * couponList.value.length +
132+
props.property.space * (couponList.value.length - 1)
133+
}px`
134+
},
135+
{ immediate: true, deep: true }
136+
)
137+
onMounted(() => {
138+
// 提取手机宽度
139+
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
140+
})
141+
</script>
142+
<style scoped lang="scss"></style>

0 commit comments

Comments
 (0)