Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
phsl
/
admin
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
4870231b
authored
Sep 05, 2024
by
卢越
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
【代码优化】代码格式化
parent
40fe63a3
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
376 additions
and
345 deletions
+376
-345
src/api/mall/promotion/combination/combinationActivity.ts
+31
-31
src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
+84
-84
src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+82
-79
src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
+46
-46
src/components/DiyEditor/index.vue
+5
-1
src/views/mall/promotion/combination/components/CombinationShowcase.vue
+50
-39
src/views/mall/promotion/combination/components/CombinationTableSelect.vue
+78
-65
No files found.
src/api/mall/promotion/combination/combinationActivity.ts
View file @
4870231b
import
request
from
'@/config/axios'
import
request
from
'@/config/axios'
import
{
Sku
,
Spu
}
from
'@/api/mall/product/spu'
import
{
Sku
,
Spu
}
from
'@/api/mall/product/spu'
export
interface
CombinationActivityVO
{
export
interface
CombinationActivityVO
{
id
?:
number
id
?:
number
name
?:
string
name
?:
string
spuId
?:
number
spuId
?:
number
totalLimitCount
?:
number
totalLimitCount
?:
number
singleLimitCount
?:
number
singleLimitCount
?:
number
startTime
?:
Date
startTime
?:
Date
endTime
?:
Date
endTime
?:
Date
userSize
?:
number
userSize
?:
number
totalCount
?:
number
totalCount
?:
number
successCount
?:
number
successCount
?:
number
orderUserCount
?:
number
orderUserCount
?:
number
virtualGroup
?:
number
virtualGroup
?:
number
status
?:
number
status
?:
number
limitDuration
?:
number
limitDuration
?:
number
products
:
CombinationProductVO
[]
products
:
CombinationProductVO
[]
spuName
?:
string
spuName
?:
string
picUrl
?:
string
picUrl
?:
string
marketPrice
?:
number
marketPrice
?:
number
}
}
// 拼团活动所需属性
// 拼团活动所需属性
export
interface
CombinationProductVO
{
export
interface
CombinationProductVO
{
spuId
:
number
spuId
:
number
skuId
:
number
skuId
:
number
combinationPrice
:
number
// 拼团价格
combinationPrice
:
number
// 拼团价格
}
}
// 扩展 Sku 配置
// 扩展 Sku 配置
export
type
SkuExtension
=
Sku
&
{
export
type
SkuExtension
=
Sku
&
{
productConfig
:
CombinationProductVO
productConfig
:
CombinationProductVO
}
}
export
interface
SpuExtension
extends
Spu
{
export
interface
SpuExtension
extends
Spu
{
skus
:
SkuExtension
[]
// 重写类型
skus
:
SkuExtension
[]
// 重写类型
}
}
// 查询拼团活动列表
// 查询拼团活动列表
export
const
getCombinationActivityPage
=
async
(
params
)
=>
{
export
const
getCombinationActivityPage
=
async
(
params
)
=>
{
return
await
request
.
get
({
url
:
'/promotion/combination-activity/page'
,
params
})
return
await
request
.
get
({
url
:
'/promotion/combination-activity/page'
,
params
})
}
}
// 查询拼团活动详情
// 查询拼团活动详情
export
const
getCombinationActivity
=
async
(
id
:
number
)
=>
{
export
const
getCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
get
({
url
:
'/promotion/combination-activity/get?id='
+
id
})
return
await
request
.
get
({
url
:
'/promotion/combination-activity/get?id='
+
id
})
}
}
// 查询拼团活动详情列表
// 查询拼团活动详情列表
export
const
getCombinationActivityDetailList
=
(
ids
:
number
[])
=>
{
export
const
getCombinationActivityDetailList
=
(
ids
:
number
[])
=>
{
return
request
.
get
({
url
:
`/promotion/combination-activity/detail-list?ids=
${
ids
}
`
})
return
request
.
get
({
url
:
`/promotion/combination-activity/detail-list?ids=
${
ids
}
`
})
}
}
// 新增拼团活动
// 新增拼团活动
export
const
createCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
export
const
createCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
return
await
request
.
post
({
url
:
'/promotion/combination-activity/create'
,
data
})
return
await
request
.
post
({
url
:
'/promotion/combination-activity/create'
,
data
})
}
}
// 修改拼团活动
// 修改拼团活动
export
const
updateCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
export
const
updateCombinationActivity
=
async
(
data
:
CombinationActivityVO
)
=>
{
return
await
request
.
put
({
url
:
'/promotion/combination-activity/update'
,
data
})
return
await
request
.
put
({
url
:
'/promotion/combination-activity/update'
,
data
})
}
}
// 关闭拼团活动
// 关闭拼团活动
export
const
closeCombinationActivity
=
async
(
id
:
number
)
=>
{
export
const
closeCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
put
({
url
:
'/promotion/combination-activity/close?id='
+
id
})
return
await
request
.
put
({
url
:
'/promotion/combination-activity/close?id='
+
id
})
}
}
// 删除拼团活动
// 删除拼团活动
export
const
deleteCombinationActivity
=
async
(
id
:
number
)
=>
{
export
const
deleteCombinationActivity
=
async
(
id
:
number
)
=>
{
return
await
request
.
delete
({
url
:
'/promotion/combination-activity/delete?id='
+
id
})
return
await
request
.
delete
({
url
:
'/promotion/combination-activity/delete?id='
+
id
})
}
}
src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
View file @
4870231b
import
{
ComponentStyle
,
DiyComponent
}
from
'@/components/DiyEditor/util'
import
{
ComponentStyle
,
DiyComponent
}
from
'@/components/DiyEditor/util'
/** 拼团属性 */
/** 拼团属性 */
export
interface
PromotionCombinationProperty
{
export
interface
PromotionCombinationProperty
{
// 布局类型:单列 | 三列
// 布局类型:单列 | 三列
layoutType
:
'oneColBigImg'
|
'oneColSmallImg'
|
'twoCol'
;
layoutType
:
'oneColBigImg'
|
'oneColSmallImg'
|
'twoCol'
// 商品字段
// 商品字段
fields
:
{
fields
:
{
// 商品名称
// 商品名称
name
:
PromotionCombinationFieldProperty
name
:
PromotionCombinationFieldProperty
// 商品简介
// 商品简介
introduction
:
PromotionCombinationFieldProperty
introduction
:
PromotionCombinationFieldProperty
// 商品价格
// 商品价格
price
:
PromotionCombinationFieldProperty
price
:
PromotionCombinationFieldProperty
// 市场价
// 市场价
marketPrice
:
PromotionCombinationFieldProperty
marketPrice
:
PromotionCombinationFieldProperty
// 商品销量
// 商品销量
salesCount
:
PromotionCombinationFieldProperty
salesCount
:
PromotionCombinationFieldProperty
// 商品库存
// 商品库存
stock
:
PromotionCombinationFieldProperty
stock
:
PromotionCombinationFieldProperty
}
}
// 角标
// 角标
badge
:
{
badge
:
{
// 是否显示
// 是否显示
show
:
boolean
show
:
boolean
// 角标图片
// 角标图片
imgUrl
:
string
imgUrl
:
string
}
}
// 按钮
// 按钮
btnBuy
:
{
btnBuy
:
{
// 类型:文字 | 图片
// 类型:文字 | 图片
type
:
'text'
|
'img'
type
:
'text'
|
'img'
// 文字
// 文字
text
:
string
text
:
string
// 文字按钮:背景渐变起始颜色
// 文字按钮:背景渐变起始颜色
bgBeginColor
:
string
bgBeginColor
:
string
// 文字按钮:背景渐变结束颜色
// 文字按钮:背景渐变结束颜色
bgEndColor
:
string
bgEndColor
:
string
// 图片按钮:图片地址
// 图片按钮:图片地址
imgUrl
:
string
imgUrl
:
string
}
}
// 上圆角
// 上圆角
borderRadiusTop
:
number
borderRadiusTop
:
number
// 下圆角
// 下圆角
borderRadiusBottom
:
number
borderRadiusBottom
:
number
// 间距
// 间距
space
:
number
space
:
number
// 拼团活动编号
// 拼团活动编号
activityIds
:
number
[]
activityIds
:
number
[]
// 组件样式
// 组件样式
style
:
ComponentStyle
style
:
ComponentStyle
}
}
// 商品字段
// 商品字段
export
interface
PromotionCombinationFieldProperty
{
export
interface
PromotionCombinationFieldProperty
{
// 是否显示
// 是否显示
show
:
boolean
show
:
boolean
// 颜色
// 颜色
color
:
string
color
:
string
}
}
// 定义组件
// 定义组件
export
const
component
=
{
export
const
component
=
{
id
:
'PromotionCombination'
,
id
:
'PromotionCombination'
,
name
:
'拼团'
,
name
:
'拼团'
,
icon
:
'mdi:account-group'
,
icon
:
'mdi:account-group'
,
property
:
{
property
:
{
layoutType
:
'oneColBigImg'
,
layoutType
:
'oneColBigImg'
,
fields
:
{
fields
:
{
name
:
{
show
:
true
,
color
:
'#000'
},
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
:
false
,
color
:
'#c4c4c4'
}
stock
:
{
show
:
false
,
color
:
'#c4c4c4'
}
},
},
badge
:
{
show
:
false
,
imgUrl
:
''
},
badge
:
{
show
:
false
,
imgUrl
:
''
},
btnBuy
:
{
btnBuy
:
{
type
:
'text'
,
type
:
'text'
,
text
:
'去拼团'
,
text
:
'去拼团'
,
bgBeginColor
:
'#FF6000'
,
bgBeginColor
:
'#FF6000'
,
bgEndColor
:
'#FE832A'
,
bgEndColor
:
'#FE832A'
,
imgUrl
:
''
imgUrl
:
''
},
},
borderRadiusTop
:
8
,
borderRadiusTop
:
8
,
borderRadiusBottom
:
8
,
borderRadiusBottom
:
8
,
space
:
8
,
space
:
8
,
style
:
{
style
:
{
bgType
:
'color'
,
bgType
:
'color'
,
bgColor
:
''
,
bgColor
:
''
,
marginLeft
:
8
,
marginLeft
:
8
,
marginRight
:
8
,
marginRight
:
8
,
marginBottom
:
8
marginBottom
:
8
}
as
ComponentStyle
}
as
ComponentStyle
}
}
}
as
DiyComponent
<
PromotionCombinationProperty
>
}
as
DiyComponent
<
PromotionCombinationProperty
>
src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
View file @
4870231b
This diff is collapsed.
Click to expand it.
src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
View file @
4870231b
...
@@ -2,24 +2,24 @@
...
@@ -2,24 +2,24 @@
<ComponentContainerProperty
v-model=
"formData.style"
>
<ComponentContainerProperty
v-model=
"formData.style"
>
<el-form
label-width=
"80px"
:model=
"formData"
>
<el-form
label-width=
"80px"
:model=
"formData"
>
<el-card
header=
"拼团活动"
class=
"property-group"
shadow=
"never"
>
<el-card
header=
"拼团活动"
class=
"property-group"
shadow=
"never"
>
<CombinationShowcase
v-model=
"formData.activityIds"
/>
<CombinationShowcase
v-model=
"formData.activityIds"
/>
</el-card>
</el-card>
<el-card
header=
"商品样式"
class=
"property-group"
shadow=
"never"
>
<el-card
header=
"商品样式"
class=
"property-group"
shadow=
"never"
>
<el-form-item
label=
"布局"
prop=
"type"
>
<el-form-item
label=
"布局"
prop=
"type"
>
<el-radio-group
v-model=
"formData.layoutType"
>
<el-radio-group
v-model=
"formData.layoutType"
>
<el-tooltip
class=
"item"
content=
"单列大图"
placement=
"bottom"
>
<el-tooltip
class=
"item"
content=
"单列大图"
placement=
"bottom"
>
<el-radio-button
value=
"oneColBigImg"
>
<el-radio-button
value=
"oneColBigImg"
>
<Icon
icon=
"fluent:text-column-one-24-filled"
/>
<Icon
icon=
"fluent:text-column-one-24-filled"
/>
</el-radio-button>
</el-radio-button>
</el-tooltip>
</el-tooltip>
<el-tooltip
class=
"item"
content=
"单列小图"
placement=
"bottom"
>
<el-tooltip
class=
"item"
content=
"单列小图"
placement=
"bottom"
>
<el-radio-button
value=
"oneColSmallImg"
>
<el-radio-button
value=
"oneColSmallImg"
>
<Icon
icon=
"fluent:text-column-two-left-24-filled"
/>
<Icon
icon=
"fluent:text-column-two-left-24-filled"
/>
</el-radio-button>
</el-radio-button>
</el-tooltip>
</el-tooltip>
<el-tooltip
class=
"item"
content=
"双列"
placement=
"bottom"
>
<el-tooltip
class=
"item"
content=
"双列"
placement=
"bottom"
>
<el-radio-button
value=
"twoCol"
>
<el-radio-button
value=
"twoCol"
>
<Icon
icon=
"fluent:text-column-two-24-filled"
/>
<Icon
icon=
"fluent:text-column-two-24-filled"
/>
</el-radio-button>
</el-radio-button>
</el-tooltip>
</el-tooltip>
<!--
<el-tooltip
class=
"item"
content=
"三列"
placement=
"bottom"
>
<!--
<el-tooltip
class=
"item"
content=
"三列"
placement=
"bottom"
>
...
@@ -31,44 +31,44 @@
...
@@ -31,44 +31,44 @@
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品名称"
prop=
"fields.name.show"
>
<el-form-item
label=
"商品名称"
prop=
"fields.name.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.name.color"
/>
<ColorInput
v-model=
"formData.fields.name.color"
/>
<el-checkbox
v-model=
"formData.fields.name.show"
/>
<el-checkbox
v-model=
"formData.fields.name.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品简介"
prop=
"fields.introduction.show"
>
<el-form-item
label=
"商品简介"
prop=
"fields.introduction.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.introduction.color"
/>
<ColorInput
v-model=
"formData.fields.introduction.color"
/>
<el-checkbox
v-model=
"formData.fields.introduction.show"
/>
<el-checkbox
v-model=
"formData.fields.introduction.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品价格"
prop=
"fields.price.show"
>
<el-form-item
label=
"商品价格"
prop=
"fields.price.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.price.color"
/>
<ColorInput
v-model=
"formData.fields.price.color"
/>
<el-checkbox
v-model=
"formData.fields.price.show"
/>
<el-checkbox
v-model=
"formData.fields.price.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"市场价"
prop=
"fields.marketPrice.show"
>
<el-form-item
label=
"市场价"
prop=
"fields.marketPrice.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.marketPrice.color"
/>
<ColorInput
v-model=
"formData.fields.marketPrice.color"
/>
<el-checkbox
v-model=
"formData.fields.marketPrice.show"
/>
<el-checkbox
v-model=
"formData.fields.marketPrice.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品销量"
prop=
"fields.salesCount.show"
>
<el-form-item
label=
"商品销量"
prop=
"fields.salesCount.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.salesCount.color"
/>
<ColorInput
v-model=
"formData.fields.salesCount.color"
/>
<el-checkbox
v-model=
"formData.fields.salesCount.show"
/>
<el-checkbox
v-model=
"formData.fields.salesCount.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
<el-form-item
label=
"商品库存"
prop=
"fields.stock.show"
>
<el-form-item
label=
"商品库存"
prop=
"fields.stock.show"
>
<div
class=
"flex gap-8px"
>
<div
class=
"flex gap-8px"
>
<ColorInput
v-model=
"formData.fields.stock.color"
/>
<ColorInput
v-model=
"formData.fields.stock.color"
/>
<el-checkbox
v-model=
"formData.fields.stock.show"
/>
<el-checkbox
v-model=
"formData.fields.stock.show"
/>
</div>
</div>
</el-form-item>
</el-form-item>
</el-card>
</el-card>
<el-card
header=
"角标"
class=
"property-group"
shadow=
"never"
>
<el-card
header=
"角标"
class=
"property-group"
shadow=
"never"
>
<el-form-item
label=
"角标"
prop=
"badge.show"
>
<el-form-item
label=
"角标"
prop=
"badge.show"
>
<el-switch
v-model=
"formData.badge.show"
/>
<el-switch
v-model=
"formData.badge.show"
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"角标"
prop=
"badge.imgUrl"
v-if=
"formData.badge.show"
>
<el-form-item
label=
"角标"
prop=
"badge.imgUrl"
v-if=
"formData.badge.show"
>
<UploadImg
v-model=
"formData.badge.imgUrl"
height=
"44px"
width=
"72px"
>
<UploadImg
v-model=
"formData.badge.imgUrl"
height=
"44px"
width=
"72px"
>
...
@@ -85,13 +85,13 @@
...
@@ -85,13 +85,13 @@
</el-form-item>
</el-form-item>
<
template
v-if=
"formData.btnBuy.type === 'text'"
>
<
template
v-if=
"formData.btnBuy.type === 'text'"
>
<el-form-item
label=
"按钮文字"
prop=
"btnBuy.text"
>
<el-form-item
label=
"按钮文字"
prop=
"btnBuy.text"
>
<el-input
v-model=
"formData.btnBuy.text"
/>
<el-input
v-model=
"formData.btnBuy.text"
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"左侧背景"
prop=
"btnBuy.bgBeginColor"
>
<el-form-item
label=
"左侧背景"
prop=
"btnBuy.bgBeginColor"
>
<ColorInput
v-model=
"formData.btnBuy.bgBeginColor"
/>
<ColorInput
v-model=
"formData.btnBuy.bgBeginColor"
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"右侧背景"
prop=
"btnBuy.bgEndColor"
>
<el-form-item
label=
"右侧背景"
prop=
"btnBuy.bgEndColor"
>
<ColorInput
v-model=
"formData.btnBuy.bgEndColor"
/>
<ColorInput
v-model=
"formData.btnBuy.bgEndColor"
/>
</el-form-item>
</el-form-item>
</
template
>
</
template
>
<
template
v-else
>
<
template
v-else
>
...
@@ -105,32 +105,32 @@
...
@@ -105,32 +105,32 @@
<el-card
header=
"商品样式"
class=
"property-group"
shadow=
"never"
>
<el-card
header=
"商品样式"
class=
"property-group"
shadow=
"never"
>
<el-form-item
label=
"上圆角"
prop=
"borderRadiusTop"
>
<el-form-item
label=
"上圆角"
prop=
"borderRadiusTop"
>
<el-slider
<el-slider
v-model=
"formData.borderRadiusTop"
v-model=
"formData.borderRadiusTop"
:max=
"100"
:max=
"100"
:min=
"0"
:min=
"0"
show-input
show-input
input-size=
"small"
input-size=
"small"
:show-input-controls=
"false"
:show-input-controls=
"false"
/>
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"下圆角"
prop=
"borderRadiusBottom"
>
<el-form-item
label=
"下圆角"
prop=
"borderRadiusBottom"
>
<el-slider
<el-slider
v-model=
"formData.borderRadiusBottom"
v-model=
"formData.borderRadiusBottom"
:max=
"100"
:max=
"100"
:min=
"0"
:min=
"0"
show-input
show-input
input-size=
"small"
input-size=
"small"
:show-input-controls=
"false"
:show-input-controls=
"false"
/>
/>
</el-form-item>
</el-form-item>
<el-form-item
label=
"间隔"
prop=
"space"
>
<el-form-item
label=
"间隔"
prop=
"space"
>
<el-slider
<el-slider
v-model=
"formData.space"
v-model=
"formData.space"
:max=
"100"
:max=
"100"
:min=
"0"
:min=
"0"
show-input
show-input
input-size=
"small"
input-size=
"small"
:show-input-controls=
"false"
:show-input-controls=
"false"
/>
/>
</el-form-item>
</el-form-item>
</el-card>
</el-card>
...
@@ -139,26 +139,26 @@
...
@@ -139,26 +139,26 @@
</template>
</template>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
PromotionCombinationProperty
}
from
'./config'
import
{
PromotionCombinationProperty
}
from
'./config'
import
{
usePropertyForm
}
from
'@/components/DiyEditor/util'
import
{
usePropertyForm
}
from
'@/components/DiyEditor/util'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
CommonStatusEnum
}
from
'@/utils/constants'
import
{
CommonStatusEnum
}
from
'@/utils/constants'
import
CombinationShowcase
from
"@/views/mall/promotion/combination/components/CombinationShowcase.vue"
;
import
CombinationShowcase
from
'@/views/mall/promotion/combination/components/CombinationShowcase.vue'
// 拼团属性面板
// 拼团属性面板
defineOptions
({
name
:
'PromotionCombinationProperty'
})
defineOptions
({
name
:
'PromotionCombinationProperty'
})
const
props
=
defineProps
<
{
modelValue
:
PromotionCombinationProperty
}
>
()
const
props
=
defineProps
<
{
modelValue
:
PromotionCombinationProperty
}
>
()
const
emit
=
defineEmits
([
'update:modelValue'
])
const
emit
=
defineEmits
([
'update:modelValue'
])
const
{
formData
}
=
usePropertyForm
(
props
.
modelValue
,
emit
)
const
{
formData
}
=
usePropertyForm
(
props
.
modelValue
,
emit
)
// 活动列表
// 活动列表
const
activityList
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
const
activityList
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
onMounted
(
async
()
=>
{
onMounted
(
async
()
=>
{
const
{
list
}
=
await
CombinationActivityApi
.
getCombinationActivityPage
({
const
{
list
}
=
await
CombinationActivityApi
.
getCombinationActivityPage
({
status
:
CommonStatusEnum
.
ENABLE
status
:
CommonStatusEnum
.
ENABLE
})
})
activityList
.
value
=
list
activityList
.
value
=
list
console
.
log
(
"formDa"
,
props
);
console
.
log
(
'formDa'
,
props
)
})
})
</
script
>
</
script
>
...
...
src/components/DiyEditor/index.vue
View file @
4870231b
...
@@ -153,7 +153,11 @@
...
@@ -153,7 +153,11 @@
>
>
<!--这里的 key 使用时间戳是为了保证每次点击组件都进行刷新-->
<!--这里的 key 使用时间戳是为了保证每次点击组件都进行刷新-->
<component
<component
:key=
"selectedComponent?.uid || selectedComponent?.id + new Date().getTime() || new Date().getTime().toString()"
:key=
"
selectedComponent?.uid ||
selectedComponent?.id + new Date().getTime() ||
new Date().getTime().toString()
"
:is=
"selectedComponent?.id + 'Property'"
:is=
"selectedComponent?.id + 'Property'"
v-model=
"selectedComponent.property"
v-model=
"selectedComponent.property"
/>
/>
...
...
src/views/mall/promotion/combination/components/CombinationShowcase.vue
View file @
4870231b
<
template
>
<
template
>
<div
class=
"flex flex-wrap items-center gap-8px"
>
<div
class=
"flex flex-wrap items-center gap-8px"
>
<div
<div
v-for=
"(combinationActivity, index) in Activitys"
v-for=
"(combinationActivity, index) in Activitys"
:key=
"combinationActivity.id"
:key=
"combinationActivity.id"
class=
"select-box spu-pic"
>
class=
"select-box spu-pic"
>
<el-tooltip
:content=
"combinationActivity.name"
>
<el-tooltip
:content=
"combinationActivity.name"
>
<div
class=
"relative h-full w-full"
>
<div
class=
"relative h-full w-full"
>
<el-image
:src=
"combinationActivity.picUrl"
class=
"h-full w-full"
/>
<el-image
:src=
"combinationActivity.picUrl"
class=
"h-full w-full"
/>
<Icon
<Icon
v-show=
"!disabled"
v-show=
"!disabled"
class=
"del-icon"
class=
"del-icon"
icon=
"ep:circle-close-filled"
icon=
"ep:circle-close-filled"
@
click=
"handleRemoveActivity(index)"
@
click=
"handleRemoveActivity(index)"
/>
/>
</div>
</div>
</el-tooltip>
</el-tooltip>
</div>
</div>
<el-tooltip
content=
"选择活动"
v-if=
"canAdd"
>
<el-tooltip
content=
"选择活动"
v-if=
"canAdd"
>
<div
class=
"select-box"
@
click=
"openCombinationActivityTableSelect"
>
<div
class=
"select-box"
@
click=
"openCombinationActivityTableSelect"
>
<Icon
icon=
"ep:plus"
/>
<Icon
icon=
"ep:plus"
/>
</div>
</div>
</el-tooltip>
</el-tooltip>
</div>
</div>
<!-- 拼团活动选择对话框(表格形式) -->
<!-- 拼团活动选择对话框(表格形式) -->
<CombinationTableSelect
ref=
"combinationActivityTableSelectRef"
:multiple=
"limit != 1"
<CombinationTableSelect
@
change=
"handleActivitySelected"
/>
ref=
"combinationActivityTableSelectRef"
:multiple=
"limit != 1"
@
change=
"handleActivitySelected"
/>
</
template
>
</
template
>
<
script
lang=
"ts"
setup
>
<
script
lang=
"ts"
setup
>
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
*
as
CombinationActivityApi
from
'@/api/mall/promotion/combination/combinationActivity'
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
propTypes
}
from
'@/utils/propTypes'
import
{
oneOfType
}
from
'vue-types'
import
{
oneOfType
}
from
'vue-types'
import
{
isArray
}
from
'@/utils/is'
import
{
isArray
}
from
'@/utils/is'
import
CombinationTableSelect
from
"@/views/mall/promotion/combination/components/CombinationTableSelect.vue"
;
import
CombinationTableSelect
from
'@/views/mall/promotion/combination/components/CombinationTableSelect.vue'
// 活动橱窗,一般用于装修时使用
// 活动橱窗,一般用于装修时使用
// 提供功能:展示活动列表、添加活动、删除活动
// 提供功能:展示活动列表、添加活动、删除活动
defineOptions
({
name
:
'CombinationShowcase'
})
defineOptions
({
name
:
'CombinationShowcase'
})
const
props
=
defineProps
({
const
props
=
defineProps
({
modelValue
:
oneOfType
<
number
|
Array
<
number
>>
([
Number
,
Array
]).
isRequired
,
modelValue
:
oneOfType
<
number
|
Array
<
number
>>
([
Number
,
Array
]).
isRequired
,
...
@@ -58,26 +62,29 @@ const canAdd = computed(() => {
...
@@ -58,26 +62,29 @@ const canAdd = computed(() => {
const
Activitys
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
const
Activitys
=
ref
<
CombinationActivityApi
.
CombinationActivityVO
[]
>
([])
watch
(
watch
(
()
=>
props
.
modelValue
,
()
=>
props
.
modelValue
,
async
()
=>
{
async
()
=>
{
const
ids
=
isArray
(
props
.
modelValue
)
const
ids
=
isArray
(
props
.
modelValue
)
?
// 情况一:多选
?
// 情况一:多选
props
.
modelValue
props
.
modelValue
:
// 情况二:单选
:
// 情况二:单选
props
.
modelValue
props
.
modelValue
?
[
props
.
modelValue
]
?
[
props
.
modelValue
]
:
[]
:
[]
// 不需要返显
// 不需要返显
if
(
ids
.
length
===
0
)
{
if
(
ids
.
length
===
0
)
{
Activitys
.
value
=
[]
Activitys
.
value
=
[]
return
return
}
}
// 只有活动发生变化之后,才会查询活动
// 只有活动发生变化之后,才会查询活动
if
(
Activitys
.
value
.
length
===
0
||
Activitys
.
value
.
some
((
combinationActivity
)
=>
!
ids
.
includes
(
combinationActivity
.
id
!
)))
{
if
(
Activitys
.
value
=
await
CombinationActivityApi
.
getCombinationActivityDetailList
(
ids
)
Activitys
.
value
.
length
===
0
||
}
Activitys
.
value
.
some
((
combinationActivity
)
=>
!
ids
.
includes
(
combinationActivity
.
id
!
))
},
)
{
{
immediate
:
true
}
Activitys
.
value
=
await
CombinationActivityApi
.
getCombinationActivityDetailList
(
ids
)
}
},
{
immediate
:
true
}
)
)
/** 活动表格选择对话框 */
/** 活动表格选择对话框 */
...
@@ -91,7 +98,11 @@ const openCombinationActivityTableSelect = () => {
...
@@ -91,7 +98,11 @@ const openCombinationActivityTableSelect = () => {
* 选择活动后触发
* 选择活动后触发
* @param activityVOs 选中的活动列表
* @param activityVOs 选中的活动列表
*/
*/
const
handleActivitySelected
=
(
activityVOs
:
CombinationActivityApi
.
CombinationActivityVO
|
CombinationActivityApi
.
CombinationActivityVO
[])
=>
{
const
handleActivitySelected
=
(
activityVOs
:
|
CombinationActivityApi
.
CombinationActivityVO
|
CombinationActivityApi
.
CombinationActivityVO
[]
)
=>
{
Activitys
.
value
=
isArray
(
activityVOs
)
?
activityVOs
:
[
activityVOs
]
Activitys
.
value
=
isArray
(
activityVOs
)
?
activityVOs
:
[
activityVOs
]
emitActivityChange
()
emitActivityChange
()
}
}
...
@@ -112,8 +123,8 @@ const emitActivityChange = () => {
...
@@ -112,8 +123,8 @@ const emitActivityChange = () => {
emit
(
'change'
,
combinationActivity
)
emit
(
'change'
,
combinationActivity
)
}
else
{
}
else
{
emit
(
emit
(
'update:modelValue'
,
'update:modelValue'
,
Activitys
.
value
.
map
((
combinationActivity
)
=>
combinationActivity
.
id
)
Activitys
.
value
.
map
((
combinationActivity
)
=>
combinationActivity
.
id
)
)
)
emit
(
'change'
,
Activitys
.
value
)
emit
(
'change'
,
Activitys
.
value
)
}
}
...
...
src/views/mall/promotion/combination/components/CombinationTableSelect.vue
View file @
4870231b
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment