root/allLikeMall
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Branch_csl #44

Merged
root merged 2 commits from Branch_csl into master 2024-10-15 19:50:54 +08:00
Conversation 0 Commits 2 Files Changed 49 +651 -591
26 changed files with 651 additions and 591 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d13cfad70c - Show all commits

12
yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
View File

@ -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);

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/Carousel/config.ts
View File

@ -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',

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/config.ts
View File

@ -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: '',

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/Divider/config.ts
View File

@ -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,

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/FloatingActionButton/config.ts
View File

@ -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',

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/HotZone/config.ts
View File

@ -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[],

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/ImageBar/config.ts
View File

@ -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: '',

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MagicCube/config.ts
View File

@ -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,

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
View File

@ -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)],

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuList/config.ts
View File

@ -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: {

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
View File

@ -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,

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
View File

@ -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: [

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/Popover/config.ts
View File

@ -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' }]

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/config.ts
View File

@ -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: {

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductList/config.ts
View File

@ -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: {

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionArticle/config.ts
View File

@ -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',

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/config.ts
View File

@ -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: {

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionPoint/config.ts
View File

@ -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: {

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/config.ts
View File

@ -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',

4
yudao-admin-vue3/src/components/DiyEditor/components/mobile/SearchBar/config.ts
View File

@ -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,

3
yudao-admin-vue3/src/components/DiyEditor/components/mobile/TitleBar/config.ts
View File

@ -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: '副标题',

108
yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserCard/index.vue
View File

@ -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>

3
yudao-admin-vue3/src/components/DiyEditor/components/mobile/UserOrder/index.vue
View File

@ -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'

5
yudao-admin-vue3/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
View File

@ -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: '',

307
yudao-admin-vue3/src/components/DiyEditor/index.vue
View File

@ -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
yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
View File

@ -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"