Compare commits
5 Commits
0da862a180
...
13eb6a75a9
Author | SHA1 | Date | |
---|---|---|---|
13eb6a75a9 | |||
b7f71f6018 | |||
02cc14d9f6 | |||
00551ec8fe | |||
d13cfad70c |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-01.png
Normal file
After Width: | Height: | Size: 640 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-02.png
Normal file
After Width: | Height: | Size: 573 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-03.png
Normal file
After Width: | Height: | Size: 462 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-04.png
Normal file
After Width: | Height: | Size: 615 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-05.png
Normal file
After Width: | Height: | Size: 369 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-06.png
Normal file
After Width: | Height: | Size: 534 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-07.png
Normal file
After Width: | Height: | Size: 466 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-08.png
Normal file
After Width: | Height: | Size: 480 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-09.png
Normal file
After Width: | Height: | Size: 514 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-10.png
Normal file
After Width: | Height: | Size: 404 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-11.png
Normal file
After Width: | Height: | Size: 545 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-12.png
Normal file
After Width: | Height: | Size: 335 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-13.png
Normal file
After Width: | Height: | Size: 529 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-14.png
Normal file
After Width: | Height: | Size: 759 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-15.png
Normal file
After Width: | Height: | Size: 609 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-16.png
Normal file
After Width: | Height: | Size: 440 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-17.png
Normal file
After Width: | Height: | Size: 821 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-18.png
Normal file
After Width: | Height: | Size: 814 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-19.png
Normal file
After Width: | Height: | Size: 604 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-20.png
Normal file
After Width: | Height: | Size: 339 B |
BIN
yudao-admin-vue3/src/assets/imgs/DiyEditorImges/组件图标-21.png
Normal file
After Width: | Height: | Size: 573 B |
BIN
yudao-admin-vue3/src/assets/imgs/userCar/seckilbg.png
Normal file
After Width: | Height: | Size: 36 KiB |
@ -23,8 +23,11 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="drag-placement">组件放置区域</div>
|
<div class="drag-placement">组件放置区域</div>
|
||||||
<div class="component">
|
<div class="component">
|
||||||
<Icon :icon="element.icon" :size="32" />
|
<!-- <Icon :icon="element.icon" :size="32" /> -->
|
||||||
<span class="mt-4px text-12px">{{ element.name }}</span>
|
<div>
|
||||||
|
<img :src="element.icon" />
|
||||||
|
</div>
|
||||||
|
<span class="text-12px">{{ element.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -142,8 +145,9 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
|
|||||||
|
|
||||||
.component.active,
|
.component.active,
|
||||||
.component:hover {
|
.component:hover {
|
||||||
color: var(--el-color-white);
|
// color: var(--el-color-white);
|
||||||
background: var(--el-color-primary);
|
// background: var(--el-color-primary);
|
||||||
|
background: #f6f6f6;
|
||||||
|
|
||||||
.el-icon {
|
.el-icon {
|
||||||
color: var(--el-color-white);
|
color: var(--el-color-white);
|
||||||
|
@ -26,12 +26,13 @@ export interface CarouselItemProperty {
|
|||||||
// 跳转链接
|
// 跳转链接
|
||||||
url: string
|
url: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-09.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'Carousel',
|
id: 'Carousel',
|
||||||
name: '轮播图',
|
name: '轮播图',
|
||||||
icon: 'system-uicons:carousel',
|
// icon: 'system-uicons:carousel',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
type: 'default',
|
type: 'default',
|
||||||
indicator: 'dot',
|
indicator: 'dot',
|
||||||
|
@ -67,7 +67,8 @@ export const CouponValidTerm = defineComponent({
|
|||||||
coupon.validEndTime,
|
coupon.validEndTime,
|
||||||
'YYYY-MM-DD'
|
'YYYY-MM-DD'
|
||||||
)}`
|
)}`
|
||||||
: `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
|
// : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`
|
||||||
|
: `领取后 ${coupon.fixedEndTerm} 天内可用`
|
||||||
return () => <div>{text}</div>
|
return () => <div>{text}</div>
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -22,12 +22,13 @@ export interface CouponCardProperty {
|
|||||||
// 组件样式
|
// 组件样式
|
||||||
style: ComponentStyle
|
style: ComponentStyle
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-19.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'CouponCard',
|
id: 'CouponCard',
|
||||||
name: '优惠券',
|
name: '优惠券',
|
||||||
icon: 'ep:ticket',
|
// icon: 'ep:ticket',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
columns: 1,
|
columns: 1,
|
||||||
bgImg: '',
|
bgImg: '',
|
||||||
|
@ -13,12 +13,13 @@ export interface DividerProperty {
|
|||||||
// 类型
|
// 类型
|
||||||
borderType: 'solid' | 'dashed' | 'dotted' | 'none'
|
borderType: 'solid' | 'dashed' | 'dotted' | 'none'
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-12.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'Divider',
|
id: 'Divider',
|
||||||
name: '分割线',
|
name: '分割线',
|
||||||
icon: 'tdesign:component-divider-vertical',
|
// icon: 'tdesign:component-divider-vertical',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
height: 30,
|
height: 30,
|
||||||
lineWidth: 1,
|
lineWidth: 1,
|
||||||
|
@ -21,12 +21,13 @@ export interface FloatingActionButtonItemProperty {
|
|||||||
// 文字颜色
|
// 文字颜色
|
||||||
textColor: string
|
textColor: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-07.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'FloatingActionButton',
|
id: 'FloatingActionButton',
|
||||||
name: '悬浮按钮',
|
name: '悬浮按钮',
|
||||||
icon: 'tabler:float-right',
|
// icon: 'tabler:float-right',
|
||||||
|
icon: logo,
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
property: {
|
property: {
|
||||||
direction: 'vertical',
|
direction: 'vertical',
|
||||||
|
@ -25,12 +25,13 @@ export interface HotZoneItemProperty {
|
|||||||
// 左
|
// 左
|
||||||
left: number
|
left: number
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-14.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'HotZone',
|
id: 'HotZone',
|
||||||
name: '热区',
|
name: '热区',
|
||||||
icon: 'tabler:hand-click',
|
// icon: 'tabler:hand-click',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
imgUrl: '',
|
imgUrl: '',
|
||||||
list: [] as HotZoneItemProperty[],
|
list: [] as HotZoneItemProperty[],
|
||||||
|
@ -9,12 +9,13 @@ export interface ImageBarProperty {
|
|||||||
// 组件样式
|
// 组件样式
|
||||||
style: ComponentStyle
|
style: ComponentStyle
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-08.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'ImageBar',
|
id: 'ImageBar',
|
||||||
name: '图片展示',
|
name: '图片展示',
|
||||||
icon: 'ep:picture',
|
// icon: 'ep:picture',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
imgUrl: '',
|
imgUrl: '',
|
||||||
url: '',
|
url: '',
|
||||||
|
@ -29,12 +29,13 @@ export interface MagicCubeItemProperty {
|
|||||||
// 左
|
// 左
|
||||||
left: number
|
left: number
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-13.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'MagicCube',
|
id: 'MagicCube',
|
||||||
name: '广告魔方',
|
name: '广告魔方',
|
||||||
icon: 'bi:columns',
|
// icon: 'bi:columns',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
borderRadiusTop: 0,
|
borderRadiusTop: 0,
|
||||||
borderRadiusBottom: 0,
|
borderRadiusBottom: 0,
|
||||||
|
@ -49,12 +49,13 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
|
|||||||
bgColor: '#FF6000'
|
bgColor: '#FF6000'
|
||||||
}
|
}
|
||||||
} as MenuGridItemProperty
|
} as MenuGridItemProperty
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-04.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'MenuGrid',
|
id: 'MenuGrid',
|
||||||
name: '宫格导航',
|
name: '宫格导航',
|
||||||
icon: 'bi:grid-3x3-gap',
|
// icon: 'bi:grid-3x3-gap',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
column: 3,
|
column: 3,
|
||||||
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
|
list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<el-radio-group v-model="formData.column">
|
<el-radio-group v-model="formData.column">
|
||||||
<el-radio :label="3">3个</el-radio>
|
<el-radio :label="3">3个</el-radio>
|
||||||
<el-radio :label="4">4个</el-radio>
|
<el-radio :label="4">4个</el-radio>
|
||||||
|
<el-radio :label="5">5个</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
@ -31,12 +31,13 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
|
|||||||
subtitle: '副标题',
|
subtitle: '副标题',
|
||||||
subtitleColor: '#bbb'
|
subtitleColor: '#bbb'
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-05.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'MenuList',
|
id: 'MenuList',
|
||||||
name: '列表导航',
|
name: '列表导航',
|
||||||
icon: 'fa-solid:list',
|
// icon: 'fa-solid:list',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
|
list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
|
||||||
style: {
|
style: {
|
||||||
|
@ -46,12 +46,13 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
|
|||||||
bgColor: '#FF6000'
|
bgColor: '#FF6000'
|
||||||
}
|
}
|
||||||
} as MenuSwiperItemProperty
|
} as MenuSwiperItemProperty
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-03.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'MenuSwiper',
|
id: 'MenuSwiper',
|
||||||
name: '菜单导航',
|
name: '菜单导航',
|
||||||
icon: 'bi:grid-3x2-gap',
|
// icon: 'bi:grid-3x2-gap',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
layout: 'iconText',
|
layout: 'iconText',
|
||||||
row: 1,
|
row: 1,
|
||||||
|
@ -21,12 +21,13 @@ export interface NoticeContentProperty {
|
|||||||
// 链接地址
|
// 链接地址
|
||||||
url: string
|
url: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-02.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'NoticeBar',
|
id: 'NoticeBar',
|
||||||
name: '公告栏',
|
name: '公告栏',
|
||||||
icon: 'ep:bell',
|
// icon: 'ep:bell',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
|
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
|
||||||
contents: [
|
contents: [
|
||||||
|
@ -13,12 +13,13 @@ export interface PopoverItemProperty {
|
|||||||
// 显示类型:仅显示一次、每次启动都会显示
|
// 显示类型:仅显示一次、每次启动都会显示
|
||||||
showType: 'once' | 'always'
|
showType: 'once' | 'always'
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-06.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'Popover',
|
id: 'Popover',
|
||||||
name: '弹窗广告',
|
name: '弹窗广告',
|
||||||
icon: 'carbon:popup',
|
// icon: 'carbon:popup',
|
||||||
|
icon: logo,
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
property: {
|
property: {
|
||||||
list: [{ showType: 'once' }]
|
list: [{ showType: 'once' }]
|
||||||
|
@ -57,12 +57,13 @@ export interface ProductCardFieldProperty {
|
|||||||
// 颜色
|
// 颜色
|
||||||
color: string
|
color: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-15.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'ProductCard',
|
id: 'ProductCard',
|
||||||
name: '商品卡片',
|
name: '商品卡片',
|
||||||
icon: 'fluent:text-column-two-left-24-filled',
|
// icon: 'fluent:text-column-two-left-24-filled',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
layoutType: 'oneColBigImg',
|
layoutType: 'oneColBigImg',
|
||||||
fields: {
|
fields: {
|
||||||
|
@ -36,12 +36,13 @@ export interface ProductListFieldProperty {
|
|||||||
// 颜色
|
// 颜色
|
||||||
color: string
|
color: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-16.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'ProductList',
|
id: 'ProductList',
|
||||||
name: '商品栏',
|
name: '商品栏',
|
||||||
icon: 'fluent:text-column-two-24-filled',
|
// icon: 'fluent:text-column-two-24-filled',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
layoutType: 'twoCol',
|
layoutType: 'twoCol',
|
||||||
fields: {
|
fields: {
|
||||||
|
@ -7,12 +7,13 @@ export interface PromotionArticleProperty {
|
|||||||
// 组件样式
|
// 组件样式
|
||||||
style: ComponentStyle
|
style: ComponentStyle
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-20.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'PromotionArticle',
|
id: 'PromotionArticle',
|
||||||
name: '营销文章',
|
name: '营销文章',
|
||||||
icon: 'ph:article-medium',
|
// icon: 'ph:article-medium',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
style: {
|
style: {
|
||||||
bgType: 'color',
|
bgType: 'color',
|
||||||
|
@ -37,12 +37,13 @@ export interface PromotionCombinationFieldProperty {
|
|||||||
// 颜色
|
// 颜色
|
||||||
color: string
|
color: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-17.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'PromotionCombination',
|
id: 'PromotionCombination',
|
||||||
name: '拼团',
|
name: '拼团',
|
||||||
icon: 'mdi:account-group',
|
// icon: 'mdi:account-group',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
layoutType: 'oneCol',
|
layoutType: 'oneCol',
|
||||||
fields: {
|
fields: {
|
||||||
|
@ -58,12 +58,13 @@ export interface PromotionPointFieldProperty {
|
|||||||
// 颜色
|
// 颜色
|
||||||
color: string
|
color: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-21.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'PromotionPoint',
|
id: 'PromotionPoint',
|
||||||
name: '积分商城',
|
name: '积分商城',
|
||||||
icon: 'ep:present',
|
// icon: 'ep:present',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
layoutType: 'oneColBigImg',
|
layoutType: 'oneColBigImg',
|
||||||
fields: {
|
fields: {
|
||||||
|
@ -36,12 +36,13 @@ export interface PromotionSeckillFieldProperty {
|
|||||||
// 颜色
|
// 颜色
|
||||||
color: string
|
color: string
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-18.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'PromotionSeckill',
|
id: 'PromotionSeckill',
|
||||||
name: '秒杀',
|
name: '秒杀',
|
||||||
icon: 'mdi:calendar-time',
|
// icon: 'mdi:calendar-time',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
activityId: undefined,
|
activityId: undefined,
|
||||||
layoutType: 'oneCol',
|
layoutType: 'oneCol',
|
||||||
|
@ -15,12 +15,12 @@ export interface SearchProperty {
|
|||||||
|
|
||||||
// 文字位置
|
// 文字位置
|
||||||
export type PlaceholderPosition = 'left' | 'center'
|
export type PlaceholderPosition = 'left' | 'center'
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-01.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'SearchBar',
|
id: 'SearchBar',
|
||||||
name: '搜索框',
|
name: '搜索框',
|
||||||
icon: 'ep:search',
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
height: 28,
|
height: 28,
|
||||||
showScan: false,
|
showScan: false,
|
||||||
|
@ -38,12 +38,13 @@ export interface TitleBarProperty {
|
|||||||
// 组件样式
|
// 组件样式
|
||||||
style: ComponentStyle
|
style: ComponentStyle
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-10.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'TitleBar',
|
id: 'TitleBar',
|
||||||
name: '标题栏',
|
name: '标题栏',
|
||||||
icon: 'material-symbols:line-start',
|
icon: 'material-symbols:line-start',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
title: '主标题',
|
title: '主标题',
|
||||||
description: '副标题',
|
description: '副标题',
|
||||||
|
@ -1,29 +1,115 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col" style=" margin-bottom: 27px;">
|
||||||
<div class="flex items-center justify-between p-x-18px p-y-24px">
|
|
||||||
<div class="flex flex-1 items-center gap-16px">
|
<div class="new-main">
|
||||||
<el-avatar :size="60">
|
<div class="flex items-center justify-between p-x-18px p-y-24px " style="padding-bottom:15px;">
|
||||||
<Icon icon="ep:avatar" :size="60" />
|
<div class="flex flex-1 items-center gap-16px">
|
||||||
</el-avatar>
|
<el-avatar :size="60">
|
||||||
<span class="text-18px font-bold">芋道源码</span>
|
<Icon icon="ep:avatar" :size="60" />
|
||||||
</div>
|
</el-avatar>
|
||||||
<Icon icon="tdesign:qrcode" :size="20" />
|
<span class="text-18px font-bold">用户名称</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<Icon icon="tdesign:qrcode" :size="20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="new-usercard" style="z-index: 9999;">
|
||||||
|
<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
|
||||||
|
<div class="value-box ss-flex ss-col-bottom">
|
||||||
|
<div class="value-text ss-line-1">0.00</div>
|
||||||
|
<div class="unit-text ss-m-l-6">
|
||||||
|
<!-- 元 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-title ss-m-t-28">余额</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
|
||||||
|
<div class="value-box ss-flex ss-col-bottom">
|
||||||
|
<div class="value-text">0</div>
|
||||||
|
<div class="unit-text ss-m-l-6">
|
||||||
|
<!-- 张 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-title ss-m-t-28">优惠券</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center">
|
||||||
|
<div class="value-box ss-flex ss-col-bottom">
|
||||||
|
<div class="value-text">0</div>
|
||||||
|
<div class="unit-text ss-m-l-6">
|
||||||
|
<!-- 个 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu-title ss-m-t-28">积分</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="new-bottom">
|
||||||
|
<img src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png"
|
||||||
|
alt="" />
|
||||||
|
<div class="btn">
|
||||||
|
立即开通
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div
|
||||||
class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
|
class="flex items-center justify-between justify-between bg-white p-x-20px p-y-8px text-12px"
|
||||||
>
|
>
|
||||||
<span class="color-#ff690d">点击绑定手机号</span>
|
<span class="color-#ff690d">点击绑定手机号</span>
|
||||||
<span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
|
<span class="rounded-26px bg-#ff6100 p-x-8px p-y-5px color-white">去绑定</span>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { UserCardProperty } from './config'
|
import { UserCardProperty } from './config'
|
||||||
|
|
||||||
/** 用户卡片 */
|
/** 用户卡片 */
|
||||||
defineOptions({ name: 'UserCard' })
|
defineOptions({ name: 'UserCard' })
|
||||||
// 定义属性
|
// 定义属性
|
||||||
defineProps<{ property: UserCardProperty }>()
|
defineProps<{ property : UserCardProperty }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
.new-main {
|
||||||
|
position: relative;
|
||||||
|
background: url('@/assets/imgs/userCar/seckilbg.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
padding-bottom: 53px;
|
||||||
|
|
||||||
|
.value-box {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-usercard {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -28px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999999999999999;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 92%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 19px;
|
||||||
|
right: 29px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #946d2d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" />
|
<!-- <el-image src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png" /> -->
|
||||||
|
<el-image src=" https://zysc.fjptzykj.com:3000/shangcheng/0ba158a1a2de7d39c6cec22cfe54736237438f63893b09c7453b5b5e3482f826.png" />
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { UserOrderProperty } from './config'
|
import { UserOrderProperty } from './config'
|
||||||
|
@ -17,12 +17,13 @@ export interface VideoPlayerStyle extends ComponentStyle {
|
|||||||
// 视频高度
|
// 视频高度
|
||||||
height: number
|
height: number
|
||||||
}
|
}
|
||||||
|
import logo from '@/assets/imgs/DiyEditorImges/组件图标-11.png'
|
||||||
// 定义组件
|
// 定义组件
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'VideoPlayer',
|
id: 'VideoPlayer',
|
||||||
name: '视频播放',
|
name: '视频播放',
|
||||||
icon: 'ep:video-play',
|
// icon: 'ep:video-play',
|
||||||
|
icon: logo,
|
||||||
property: {
|
property: {
|
||||||
videoUrl: '',
|
videoUrl: '',
|
||||||
posterUrl: '',
|
posterUrl: '',
|
||||||
|
@ -28,7 +28,8 @@ export const validityTypeFormat = (row: CouponTemplateVO) => {
|
|||||||
return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
|
return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
|
||||||
}
|
}
|
||||||
if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
|
if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
|
||||||
return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
|
// return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
|
||||||
|
return `领取后 ${row.fixedEndTerm + 1} 天内可用`
|
||||||
}
|
}
|
||||||
return '未知【' + row.validityType + '】'
|
return '未知【' + row.validityType + '】'
|
||||||
}
|
}
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
<el-form-item label="优惠类型" prop="discountType">
|
<el-form-item label="优惠类型" prop="discountType">
|
||||||
<el-radio-group v-model="formData.discountType">
|
<el-radio-group v-model="formData.discountType">
|
||||||
<el-radio
|
<el-radio
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
|
v-for="dict in filteredDictOptions()"
|
||||||
:key="dict.value"
|
:key="dict.value"
|
||||||
:label="dict.value"
|
:label="dict.value"
|
||||||
>
|
>
|
||||||
@ -151,10 +151,10 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="formData.validityType === CouponTemplateValidityTypeEnum.TERM.type"
|
v-if="formData.validityType === CouponTemplateValidityTypeEnum.TERM.type"
|
||||||
label="领取日期"
|
label="有效日期"
|
||||||
prop="fixedStartTerm"
|
prop="fixedStartTerm"
|
||||||
>
|
>
|
||||||
第
|
<!-- 第
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="formData.fixedStartTerm"
|
v-model="formData.fixedStartTerm"
|
||||||
:min="0"
|
:min="0"
|
||||||
@ -162,13 +162,13 @@
|
|||||||
class="mx-2"
|
class="mx-2"
|
||||||
placeholder="0 为今天生效"
|
placeholder="0 为今天生效"
|
||||||
/>
|
/>
|
||||||
至
|
至 -->
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="formData.fixedEndTerm"
|
v-model="formData.fixedEndTerm"
|
||||||
:min="0"
|
:min="1"
|
||||||
:precision="0"
|
:precision="0"
|
||||||
class="mx-2"
|
class="mx-2"
|
||||||
placeholder="请输入结束天数"
|
placeholder="请输入有效天数"
|
||||||
/>
|
/>
|
||||||
天有效
|
天有效
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -215,7 +215,7 @@ const formData = ref({
|
|||||||
validTimes: [],
|
validTimes: [],
|
||||||
validStartTime: undefined,
|
validStartTime: undefined,
|
||||||
validEndTime: undefined,
|
validEndTime: undefined,
|
||||||
fixedStartTerm: undefined,
|
fixedStartTerm: 0,
|
||||||
fixedEndTerm: undefined,
|
fixedEndTerm: undefined,
|
||||||
productScope: PromotionProductScopeEnum.ALL.scope,
|
productScope: PromotionProductScopeEnum.ALL.scope,
|
||||||
productScopeValues: [], // 商品范围:值为 品类编号列表 或 商品编号列表 ,用于提交
|
productScopeValues: [], // 商品范围:值为 品类编号列表 或 商品编号列表 ,用于提交
|
||||||
@ -255,6 +255,7 @@ const open = async (type: string, id?: number) => {
|
|||||||
const data = await CouponTemplateApi.getCouponTemplate(id)
|
const data = await CouponTemplateApi.getCouponTemplate(id)
|
||||||
formData.value = {
|
formData.value = {
|
||||||
...data,
|
...data,
|
||||||
|
fixedEndTerm: data.fixedEndTerm - data.fixedStartTerm + 1, // 显示时总天数(实际需要+1)
|
||||||
discountPrice: formatToFraction(data.discountPrice),
|
discountPrice: formatToFraction(data.discountPrice),
|
||||||
discountPercent:
|
discountPercent:
|
||||||
data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
|
data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
|
||||||
@ -283,6 +284,7 @@ const submitForm = async () => {
|
|||||||
try {
|
try {
|
||||||
const data = {
|
const data = {
|
||||||
...formData.value,
|
...formData.value,
|
||||||
|
fixedEndTerm: (formData.value.fixedEndTerm || 0) + formData.value.fixedStartTerm - 1, // 得到结束的天数
|
||||||
discountPrice: convertToInteger(formData.value.discountPrice),
|
discountPrice: convertToInteger(formData.value.discountPrice),
|
||||||
discountPercent:
|
discountPercent:
|
||||||
formData.value.discountPercent !== undefined
|
formData.value.discountPercent !== undefined
|
||||||
@ -335,7 +337,7 @@ const resetForm = () => {
|
|||||||
validTimes: [],
|
validTimes: [],
|
||||||
validStartTime: undefined,
|
validStartTime: undefined,
|
||||||
validEndTime: undefined,
|
validEndTime: undefined,
|
||||||
fixedStartTerm: undefined,
|
fixedStartTerm: 0,
|
||||||
fixedEndTerm: undefined,
|
fixedEndTerm: undefined,
|
||||||
productScope: PromotionProductScopeEnum.ALL.scope,
|
productScope: PromotionProductScopeEnum.ALL.scope,
|
||||||
productScopeValues: [],
|
productScopeValues: [],
|
||||||
@ -383,6 +385,12 @@ function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/** 暂时隐藏掉字典中的折扣 */
|
||||||
|
function filteredDictOptions() {
|
||||||
|
return getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE).filter(
|
||||||
|
dict => dict.value !== 2 // 过滤掉 value 为 2 的选项
|
||||||
|
);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
@ -2,19 +2,19 @@
|
|||||||
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
|
||||||
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
|
||||||
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
|
||||||
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
|
:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :isShow="false">
|
||||||
<template #toolBarLeft>
|
<template #toolBarLeft>
|
||||||
<!-- <el-radio-group
|
<!-- <el-radio-group
|
||||||
v-model="selectedTemplateItem"
|
v-model="selectedTemplateItem"
|
||||||
class="h-full!"
|
class="h-full!"
|
||||||
@change="handleTemplateItemChange"
|
@change="handleTemplateItemChange"
|
||||||
>
|
>
|
||||||
<el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
|
<el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
|
||||||
<el-radio-button :label="index">
|
<el-radio-button :label="index">
|
||||||
<Icon :icon="item.icon" :size="24" />
|
<Icon :icon="item.icon" :size="24" />
|
||||||
</el-radio-button>
|
</el-radio-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</el-radio-group> -->
|
</el-radio-group> -->
|
||||||
</template>
|
</template>
|
||||||
</DiyEditor>
|
</DiyEditor>
|
||||||
</template>
|
</template>
|
||||||
|