Branch_csl #44
@ -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',
|
||||||
|
@ -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)],
|
||||||
|
@ -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="new-main">
|
||||||
|
<div class="flex items-center justify-between p-x-18px p-y-24px " style="padding-bottom:15px;">
|
||||||
<div class="flex flex-1 items-center gap-16px">
|
<div class="flex flex-1 items-center gap-16px">
|
||||||
<el-avatar :size="60">
|
<el-avatar :size="60">
|
||||||
<Icon icon="ep:avatar" :size="60" />
|
<Icon icon="ep:avatar" :size="60" />
|
||||||
</el-avatar>
|
</el-avatar>
|
||||||
<span class="text-18px font-bold">芋道源码</span>
|
<span class="text-18px font-bold">用户名称</span>
|
||||||
</div>
|
</div>
|
||||||
<Icon icon="tdesign:qrcode" :size="20" />
|
<Icon icon="tdesign:qrcode" :size="20" />
|
||||||
</div>
|
</div>
|
||||||
<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: '',
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
<!-- 中心区域 -->
|
<!-- 中心区域 -->
|
||||||
<el-container class="editor-container">
|
<el-container class="editor-container">
|
||||||
<!-- 左侧:组件库(ComponentLibrary) -->
|
<!-- 左侧:组件库(ComponentLibrary) -->
|
||||||
<ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
|
<ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0 && isShow" />
|
||||||
<!-- 中心:设计区域(ComponentContainer) -->
|
<!-- 中心:设计区域(ComponentContainer) -->
|
||||||
<div class="editor-center page-prop-area" @click="handlePageSelected">
|
<div class="editor-center page-prop-area" @click="handlePageSelected">
|
||||||
<!-- 手机顶部 -->
|
<!-- 手机顶部 -->
|
||||||
@ -39,94 +39,54 @@
|
|||||||
<!-- 手机顶部状态栏 -->
|
<!-- 手机顶部状态栏 -->
|
||||||
<img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
|
<img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
|
||||||
<!-- 手机顶部导航栏 -->
|
<!-- 手机顶部导航栏 -->
|
||||||
<ComponentContainer
|
<ComponentContainer v-if="showNavigationBar" :component="navigationBarComponent"
|
||||||
v-if="showNavigationBar"
|
:show-toolbar="false" :active="selectedComponent?.id === navigationBarComponent.id"
|
||||||
:component="navigationBarComponent"
|
@click="handleNavigationBarSelected" class="cursor-pointer!" />
|
||||||
:show-toolbar="false"
|
|
||||||
:active="selectedComponent?.id === navigationBarComponent.id"
|
|
||||||
@click="handleNavigationBarSelected"
|
|
||||||
class="cursor-pointer!"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 绝对定位的组件:例如 弹窗、浮动按钮等 -->
|
<!-- 绝对定位的组件:例如 弹窗、浮动按钮等 -->
|
||||||
<div
|
<div v-for="(component, index) in pageComponents" :key="index"
|
||||||
v-for="(component, index) in pageComponents"
|
@click="handleComponentSelected(component, index)">
|
||||||
:key="index"
|
<component v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
|
||||||
@click="handleComponentSelected(component, index)"
|
:is="component.id" :property="component.property" />
|
||||||
>
|
|
||||||
<component
|
|
||||||
v-if="component.position === 'fixed' && selectedComponent?.uid === component.uid"
|
|
||||||
:is="component.id"
|
|
||||||
:property="component.property"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 手机页面编辑区域 -->
|
<!-- 手机页面编辑区域 -->
|
||||||
<el-scrollbar
|
<el-scrollbar height="100%" wrap-class="editor-design-center page-prop-area"
|
||||||
height="100%"
|
view-class="phone-container" :view-style="{
|
||||||
wrap-class="editor-design-center page-prop-area"
|
|
||||||
view-class="phone-container"
|
|
||||||
:view-style="{
|
|
||||||
backgroundColor: pageConfigComponent.property.backgroundColor,
|
backgroundColor: pageConfigComponent.property.backgroundColor,
|
||||||
backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
|
backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
|
||||||
}"
|
}">
|
||||||
>
|
<draggable class="page-prop-area drag-area" v-model="pageComponents" item-key="index"
|
||||||
<draggable
|
:animation="200" filter=".component-toolbar" ghost-class="draggable-ghost"
|
||||||
class="page-prop-area drag-area"
|
:force-fallback="true" group="component" @change="handleComponentChange">
|
||||||
v-model="pageComponents"
|
|
||||||
item-key="index"
|
|
||||||
:animation="200"
|
|
||||||
filter=".component-toolbar"
|
|
||||||
ghost-class="draggable-ghost"
|
|
||||||
:force-fallback="true"
|
|
||||||
group="component"
|
|
||||||
@change="handleComponentChange"
|
|
||||||
>
|
|
||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<ComponentContainer
|
<ComponentContainer v-if="!element.position || element.position === 'center'"
|
||||||
v-if="!element.position || element.position === 'center'"
|
:component="element" :active="selectedComponentIndex === index" :can-move-up="index > 0"
|
||||||
:component="element"
|
|
||||||
:active="selectedComponentIndex === index"
|
|
||||||
:can-move-up="index > 0"
|
|
||||||
:can-move-down="index < pageComponents.length - 1"
|
:can-move-down="index < pageComponents.length - 1"
|
||||||
@move="(direction) => handleMoveComponent(index, direction)"
|
@move="(direction) => handleMoveComponent(index, direction)"
|
||||||
@copy="handleCopyComponent(index)"
|
@copy="handleCopyComponent(index)" @delete="handleDeleteComponent(index)"
|
||||||
@delete="handleDeleteComponent(index)"
|
@click="handleComponentSelected(element, index)" />
|
||||||
@click="handleComponentSelected(element, index)"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</draggable>
|
</draggable>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<!-- 手机底部导航 -->
|
<!-- 手机底部导航 -->
|
||||||
<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
|
<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
|
||||||
<ComponentContainer
|
<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
|
||||||
:component="tabBarComponent"
|
:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
|
||||||
:show-toolbar="false"
|
|
||||||
:active="selectedComponent?.id === tabBarComponent.id"
|
|
||||||
@click="handleTabBarSelected"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 固定布局的组件 操作按钮区 -->
|
<!-- 固定布局的组件 操作按钮区 -->
|
||||||
<div class="fixed-component-action-group">
|
<div class="fixed-component-action-group">
|
||||||
<el-tag
|
<el-tag v-if="showPageConfig" size="large"
|
||||||
v-if="showPageConfig"
|
|
||||||
size="large"
|
|
||||||
:effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
|
:effect="selectedComponent?.uid === pageConfigComponent.uid ? 'dark' : 'plain'"
|
||||||
:type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
|
:type="selectedComponent?.uid === pageConfigComponent.uid ? '' : 'info'"
|
||||||
@click="handleComponentSelected(pageConfigComponent)"
|
@click="handleComponentSelected(pageConfigComponent)">
|
||||||
>
|
|
||||||
<Icon :icon="pageConfigComponent.icon" :size="12" />
|
<Icon :icon="pageConfigComponent.icon" :size="12" />
|
||||||
<span>{{ pageConfigComponent.name }}</span>
|
<span>{{ pageConfigComponent.name }}</span>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<template v-for="(component, index) in pageComponents" :key="index">
|
<template v-for="(component, index) in pageComponents" :key="index">
|
||||||
<el-tag
|
<el-tag v-if="component.position === 'fixed'" size="large" closable
|
||||||
v-if="component.position === 'fixed'"
|
|
||||||
size="large"
|
|
||||||
closable
|
|
||||||
:effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
|
:effect="selectedComponent?.uid === component.uid ? 'dark' : 'plain'"
|
||||||
:type="selectedComponent?.uid === component.uid ? '' : 'info'"
|
:type="selectedComponent?.uid === component.uid ? '' : 'info'"
|
||||||
@click="handleComponentSelected(component)"
|
@click="handleComponentSelected(component)" @close="handleDeleteComponent(index)">
|
||||||
@close="handleDeleteComponent(index)"
|
|
||||||
>
|
|
||||||
<Icon :icon="component.icon" :size="12" />
|
<Icon :icon="component.icon" :size="12" />
|
||||||
<span>{{ component.name }}</span>
|
<span>{{ component.name }}</span>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
@ -135,11 +95,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 右侧:属性面板(ComponentContainerProperty) -->
|
<!-- 右侧:属性面板(ComponentContainerProperty) -->
|
||||||
<el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
|
<el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
|
||||||
<el-card
|
<el-card shadow="never" body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
|
||||||
shadow="never"
|
class="h-full">
|
||||||
body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
|
|
||||||
class="h-full"
|
|
||||||
>
|
|
||||||
<!-- 组件名称 -->
|
<!-- 组件名称 -->
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="flex items-center gap-8px">
|
<div class="flex items-center gap-8px">
|
||||||
@ -147,15 +104,10 @@
|
|||||||
<span>{{ selectedComponent?.name }}</span>
|
<span>{{ selectedComponent?.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<el-scrollbar
|
<el-scrollbar class="m-[calc(0px-var(--el-card-padding))]"
|
||||||
class="m-[calc(0px-var(--el-card-padding))]"
|
view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property">
|
||||||
view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
|
<component :key="selectedComponent?.uid || selectedComponent?.id"
|
||||||
>
|
:is="selectedComponent?.id + 'Property'" v-model="selectedComponent.property" />
|
||||||
<component
|
|
||||||
:key="selectedComponent?.uid || selectedComponent?.id"
|
|
||||||
:is="selectedComponent?.id + 'Property'"
|
|
||||||
v-model="selectedComponent.property"
|
|
||||||
/>
|
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
@ -165,10 +117,7 @@
|
|||||||
<!-- 预览弹框 -->
|
<!-- 预览弹框 -->
|
||||||
<Dialog v-model="previewDialogVisible" title="预览" width="700">
|
<Dialog v-model="previewDialogVisible" title="预览" width="700">
|
||||||
<div class="flex justify-around">
|
<div class="flex justify-around">
|
||||||
<IFrame
|
<IFrame class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!" :src="previewUrl" />
|
||||||
class="w-375px border-4px border-rounded-8px border-solid p-2px h-667px!"
|
|
||||||
:src="previewUrl"
|
|
||||||
/>
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<el-text>手机扫码预览</el-text>
|
<el-text>手机扫码预览</el-text>
|
||||||
<Qrcode :text="previewUrl" logo="/logo.gif" />
|
<Qrcode :text="previewUrl" logo="/logo.gif" />
|
||||||
@ -177,45 +126,45 @@
|
|||||||
</Dialog>
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// 注册所有的组件
|
// 注册所有的组件
|
||||||
import { components } from './components/mobile/index'
|
import { components } from './components/mobile/index'
|
||||||
export default {
|
export default {
|
||||||
components: { ...components }
|
components: { ...components }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import ComponentLibrary from './components/ComponentLibrary.vue'
|
import ComponentLibrary from './components/ComponentLibrary.vue'
|
||||||
import { cloneDeep, includes } from 'lodash-es'
|
import { cloneDeep, includes } from 'lodash-es'
|
||||||
import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
|
import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
|
||||||
import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
|
import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
|
||||||
import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
|
import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
|
||||||
import { isString } from '@/utils/is'
|
import { isString } from '@/utils/is'
|
||||||
import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
|
import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
|
||||||
import { componentConfigs } from '@/components/DiyEditor/components/mobile'
|
import { componentConfigs } from '@/components/DiyEditor/components/mobile'
|
||||||
import { array, oneOfType } from 'vue-types'
|
import { array, oneOfType } from 'vue-types'
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
|
||||||
/** 页面装修详情页 */
|
/** 页面装修详情页 */
|
||||||
defineOptions({ name: 'DiyPageDetail' })
|
defineOptions({ name: 'DiyPageDetail' })
|
||||||
|
|
||||||
// 左侧组件库
|
// 左侧组件库
|
||||||
const componentLibrary = ref()
|
const componentLibrary = ref()
|
||||||
// 页面设置组件
|
// 页面设置组件
|
||||||
const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
|
const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
|
||||||
// 顶部导航栏
|
// 顶部导航栏
|
||||||
const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
|
const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
|
||||||
// 底部导航菜单
|
// 底部导航菜单
|
||||||
const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
|
const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
|
||||||
|
|
||||||
// 选中的组件,默认选中顶部导航栏
|
// 选中的组件,默认选中顶部导航栏
|
||||||
const selectedComponent = ref<DiyComponent<any>>()
|
const selectedComponent = ref<DiyComponent<any>>()
|
||||||
// 选中的组件索引
|
// 选中的组件索引
|
||||||
const selectedComponentIndex = ref<number>(-1)
|
const selectedComponentIndex = ref<number>(-1)
|
||||||
// 组件列表
|
// 组件列表
|
||||||
const pageComponents = ref<DiyComponent<any>[]>([])
|
const pageComponents = ref<DiyComponent<any>[]>([])
|
||||||
// 定义属性
|
// 定义属性
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// 页面配置,支持Json字符串
|
// 页面配置,支持Json字符串
|
||||||
modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
|
modelValue: oneOfType<string | PageConfig>([String, Object]).isRequired,
|
||||||
// 标题
|
// 标题
|
||||||
@ -229,12 +178,14 @@ const props = defineProps({
|
|||||||
// 是否显示页面配置
|
// 是否显示页面配置
|
||||||
showPageConfig: propTypes.bool.def(true),
|
showPageConfig: propTypes.bool.def(true),
|
||||||
// 预览地址:提供了预览地址,才会显示预览按钮
|
// 预览地址:提供了预览地址,才会显示预览按钮
|
||||||
previewUrl: propTypes.string.def('')
|
previewUrl: propTypes.string.def(''),
|
||||||
})
|
//是否显示左侧导航栏
|
||||||
|
isShow:propTypes.bool.def(true),
|
||||||
|
})
|
||||||
|
|
||||||
// 监听传入的页面配置
|
// 监听传入的页面配置
|
||||||
// 解析出 pageConfigComponent 页面整体的配置,navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
|
// 解析出 pageConfigComponent 页面整体的配置,navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
() => {
|
() => {
|
||||||
const modelValue = isString(props.modelValue)
|
const modelValue = isString(props.modelValue)
|
||||||
@ -249,15 +200,15 @@ watch(
|
|||||||
const component = componentConfigs[item.id]
|
const component = componentConfigs[item.id]
|
||||||
return { ...component, property: item.property }
|
return { ...component, property: item.property }
|
||||||
})
|
})
|
||||||
console.log(modelValue,"pageComponents.value")
|
console.log(modelValue, "pageComponents.value")
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
// 保存
|
// 保存
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
const pageConfig = {
|
const pageConfig = {
|
||||||
page: pageConfigComponent.value.property,
|
page: pageConfigComponent.value.property,
|
||||||
navigationBar: navigationBarComponent.value.property,
|
navigationBar: navigationBarComponent.value.property,
|
||||||
@ -275,41 +226,41 @@ const handleSave = () => {
|
|||||||
emits('update:modelValue', modelValue)
|
emits('update:modelValue', modelValue)
|
||||||
// 发送保存通知
|
// 发送保存通知
|
||||||
emits('save', pageConfig)
|
emits('save', pageConfig)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理页面选中:显示属性表单
|
// 处理页面选中:显示属性表单
|
||||||
const handlePageSelected = (event: any) => {
|
const handlePageSelected = (event : any) => {
|
||||||
if (!props.showPageConfig) return
|
if (!props.showPageConfig) return
|
||||||
|
|
||||||
// 配置了样式 page-prop-area 的元素,才显示页面设置
|
// 配置了样式 page-prop-area 的元素,才显示页面设置
|
||||||
if (includes(event?.target?.classList, 'page-prop-area')) {
|
if (includes(event?.target?.classList, 'page-prop-area')) {
|
||||||
handleComponentSelected(unref(pageConfigComponent))
|
handleComponentSelected(unref(pageConfigComponent))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 选中组件
|
* 选中组件
|
||||||
*
|
*
|
||||||
* @param component 组件
|
* @param component 组件
|
||||||
* @param index 组件的索引
|
* @param index 组件的索引
|
||||||
*/
|
*/
|
||||||
const handleComponentSelected = (component: DiyComponent<any>, index: number = -1) => {
|
const handleComponentSelected = (component : DiyComponent<any>, index : number = -1) => {
|
||||||
selectedComponent.value = component
|
selectedComponent.value = component
|
||||||
selectedComponentIndex.value = index
|
selectedComponentIndex.value = index
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选中顶部导航栏
|
// 选中顶部导航栏
|
||||||
const handleNavigationBarSelected = () => {
|
const handleNavigationBarSelected = () => {
|
||||||
handleComponentSelected(unref(navigationBarComponent))
|
handleComponentSelected(unref(navigationBarComponent))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选中底部导航菜单
|
// 选中底部导航菜单
|
||||||
const handleTabBarSelected = () => {
|
const handleTabBarSelected = () => {
|
||||||
handleComponentSelected(unref(tabBarComponent))
|
handleComponentSelected(unref(tabBarComponent))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组件变动(拖拽)
|
// 组件变动(拖拽)
|
||||||
const handleComponentChange = (dragEvent: any) => {
|
const handleComponentChange = (dragEvent : any) => {
|
||||||
// 新增,即从组件库拖拽添加组件
|
// 新增,即从组件库拖拽添加组件
|
||||||
if (dragEvent.added) {
|
if (dragEvent.added) {
|
||||||
const { element, newIndex } = dragEvent.added
|
const { element, newIndex } = dragEvent.added
|
||||||
@ -320,38 +271,38 @@ const handleComponentChange = (dragEvent: any) => {
|
|||||||
// 保持选中
|
// 保持选中
|
||||||
selectedComponentIndex.value = newIndex
|
selectedComponentIndex.value = newIndex
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 交换组件
|
// 交换组件
|
||||||
const swapComponent = (oldIndex: number, newIndex: number) => {
|
const swapComponent = (oldIndex : number, newIndex : number) => {
|
||||||
;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
|
;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
|
||||||
pageComponents.value[newIndex],
|
pageComponents.value[newIndex],
|
||||||
pageComponents.value[oldIndex]
|
pageComponents.value[oldIndex]
|
||||||
]
|
]
|
||||||
// 保持选中
|
// 保持选中
|
||||||
selectedComponentIndex.value = newIndex
|
selectedComponentIndex.value = newIndex
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 移动组件(上移、下移) */
|
/** 移动组件(上移、下移) */
|
||||||
const handleMoveComponent = (index: number, direction: number) => {
|
const handleMoveComponent = (index : number, direction : number) => {
|
||||||
const newIndex = index + direction
|
const newIndex = index + direction
|
||||||
if (newIndex < 0 || newIndex >= pageComponents.value.length) return
|
if (newIndex < 0 || newIndex >= pageComponents.value.length) return
|
||||||
|
|
||||||
swapComponent(index, newIndex)
|
swapComponent(index, newIndex)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 复制组件 */
|
/** 复制组件 */
|
||||||
const handleCopyComponent = (index: number) => {
|
const handleCopyComponent = (index : number) => {
|
||||||
const component = cloneDeep(pageComponents.value[index])
|
const component = cloneDeep(pageComponents.value[index])
|
||||||
component.uid = new Date().getTime()
|
component.uid = new Date().getTime()
|
||||||
pageComponents.value.splice(index + 1, 0, component)
|
pageComponents.value.splice(index + 1, 0, component)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除组件
|
* 删除组件
|
||||||
* @param index 当前组件index
|
* @param index 当前组件index
|
||||||
*/
|
*/
|
||||||
const handleDeleteComponent = (index: number) => {
|
const handleDeleteComponent = (index : number) => {
|
||||||
// 删除组件
|
// 删除组件
|
||||||
pageComponents.value.splice(index, 1)
|
pageComponents.value.splice(index, 1)
|
||||||
if (index < pageComponents.value.length) {
|
if (index < pageComponents.value.length) {
|
||||||
@ -366,28 +317,28 @@ const handleDeleteComponent = (index: number) => {
|
|||||||
// 3. 组件全部删除之后,显示页面设置
|
// 3. 组件全部删除之后,显示页面设置
|
||||||
handleComponentSelected(unref(pageConfigComponent))
|
handleComponentSelected(unref(pageConfigComponent))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 工具栏操作
|
// 工具栏操作
|
||||||
const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
|
const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
|
||||||
|
|
||||||
// 注入无感刷新页面函数
|
// 注入无感刷新页面函数
|
||||||
const reload = inject<() => void>('reload')
|
const reload = inject<() => void>('reload')
|
||||||
// 重置
|
// 重置
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
if (reload) reload()
|
if (reload) reload()
|
||||||
emits('reset')
|
emits('reset')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 预览
|
// 预览
|
||||||
const previewDialogVisible = ref(false)
|
const previewDialogVisible = ref(false)
|
||||||
const handlePreview = () => {
|
const handlePreview = () => {
|
||||||
previewDialogVisible.value = true
|
previewDialogVisible.value = true
|
||||||
emits('preview')
|
emits('preview')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置默认选中的组件
|
// 设置默认选中的组件
|
||||||
const setDefaultSelectedComponent = () => {
|
const setDefaultSelectedComponent = () => {
|
||||||
if (props.showPageConfig) {
|
if (props.showPageConfig) {
|
||||||
selectedComponent.value = unref(pageConfigComponent)
|
selectedComponent.value = unref(pageConfigComponent)
|
||||||
} else if (props.showNavigationBar) {
|
} else if (props.showNavigationBar) {
|
||||||
@ -395,22 +346,22 @@ const setDefaultSelectedComponent = () => {
|
|||||||
} else if (props.showTabBar) {
|
} else if (props.showTabBar) {
|
||||||
selectedComponent.value = unref(tabBarComponent)
|
selectedComponent.value = unref(tabBarComponent)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
|
() => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
|
||||||
() => setDefaultSelectedComponent()
|
() => setDefaultSelectedComponent()
|
||||||
)
|
)
|
||||||
|
|
||||||
onMounted(() => setDefaultSelectedComponent())
|
onMounted(() => setDefaultSelectedComponent())
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 手机宽度 */
|
/* 手机宽度 */
|
||||||
$phone-width: 375px;
|
$phone-width: 375px;
|
||||||
$toolbar-height: 42px;
|
$toolbar-height: 42px;
|
||||||
|
|
||||||
/* 根节点样式 */
|
/* 根节点样式 */
|
||||||
.editor {
|
.editor {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: calc(0px - var(--app-content-padding));
|
margin: calc(0px - var(--app-content-padding));
|
||||||
@ -446,10 +397,7 @@ $toolbar-height: 42px;
|
|||||||
|
|
||||||
/* 中心操作区 */
|
/* 中心操作区 */
|
||||||
.editor-container {
|
.editor-container {
|
||||||
height: calc(
|
height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - $toolbar-height );
|
||||||
100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
|
|
||||||
$toolbar-height
|
|
||||||
);
|
|
||||||
|
|
||||||
/* 右侧属性面板 */
|
/* 右侧属性面板 */
|
||||||
.editor-right {
|
.editor-right {
|
||||||
@ -548,6 +496,7 @@ $toolbar-height: 42px;
|
|||||||
:deep(.el-tag) {
|
:deep(.el-tag) {
|
||||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
.el-tag__content {
|
.el-tag__content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -562,5 +511,5 @@ $toolbar-height: 42px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -2,7 +2,7 @@
|
|||||||
<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"
|
||||||
|
Loading…
Reference in New Issue
Block a user