-
+
{{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
-
+
{{ deliveryExpressList.find((item) => item.id === formData.logisticsId)?.name }}
-
+
{{ formData.logisticsNo }}
-
+
{{ formatDate(formData.deliveryTime) }}
+
-
+
+
-
-
+
{{ pickUpStore?.name }}
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index e08715df..c892292a 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -125,10 +125,10 @@
-
+
-
+
-
+
+
From b9ab22dad170349cfab009ea71d98ed1dabbe000 Mon Sep 17 00:00:00 2001
From: YunaiV
Date: Fri, 27 Oct 2023 23:01:00 +0800
Subject: [PATCH 12/18] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
=?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/crm/customer/CustomerForm.vue | 1 +
src/views/crm/customer/index.vue | 2 ++
2 files changed, 3 insertions(+)
diff --git a/src/views/crm/customer/CustomerForm.vue b/src/views/crm/customer/CustomerForm.vue
index 52ff923a..4c04617e 100644
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -1,5 +1,6 @@
+
+
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
new file mode 100644
index 00000000..8e918fa9
--- /dev/null
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -0,0 +1,196 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/Carousel/config.ts b/src/components/DiyEditor/components/mobile/Carousel/config.ts
new file mode 100644
index 00000000..6c790186
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/config.ts
@@ -0,0 +1,44 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+ // 选择模板
+ swiperType: number
+ // 图片圆角
+ borderRadius: number
+ // 页面边距
+ pageMargin: number
+ // 图片边距
+ imageMargin: number
+ // 分页类型
+ pagingType: 'bullets' | 'fraction' | 'progressbar'
+ // 一行个数
+ rowIndividual: number
+ // 添加图片
+ items: CarouselItemProperty[]
+}
+
+export interface CarouselItemProperty {
+ title: string
+ imgUrl: string
+ link: string
+}
+
+// 定义组件
+export const component = {
+ id: 'Carousel',
+ name: '轮播图',
+ icon: 'system-uicons:carousel',
+ property: {
+ swiperType: 0, // 选择模板
+ borderRadius: 0, // 图片圆角
+ pageMargin: 0, // 页面边距
+ imageMargin: 0, // 图片边距
+ pagingType: 'bullets', // 分页类型
+ rowIndividual: 2, // 一行个数
+ items: [
+ { imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg' },
+ { imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg' }
+ ] as CarouselItemProperty[]
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/Carousel/index.vue b/src/components/DiyEditor/components/mobile/Carousel/index.vue
new file mode 100644
index 00000000..e9a0ab39
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/Carousel/property.vue b/src/components/DiyEditor/components/mobile/Carousel/property.vue
new file mode 100644
index 00000000..acaee35f
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加图片
+ 拖动左上角的小圆点可对其排序
+
+
+ 添加图片
+
+
+
+ 2个
+ 3个
+ 4个
+ 5个
+ 6个
+
+
+
+
+ 不显示
+ 样式一
+ 样式二
+ 样式三
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/Divider/config.ts b/src/components/DiyEditor/components/mobile/Divider/config.ts
new file mode 100644
index 00000000..9b553604
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/config.ts
@@ -0,0 +1,29 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 分割线属性 */
+export interface DividerProperty {
+ // 高度
+ height: number
+ // 线宽
+ lineWidth: number
+ // 边距类型
+ paddingType: 'none' | 'horizontal'
+ // 颜色
+ lineColor: string
+ // 类型
+ borderType: 'solid' | 'dashed' | 'dotted' | 'none'
+}
+
+// 定义组件
+export const component = {
+ id: 'Divider',
+ name: '分割线',
+ icon: 'tdesign:component-divider-vertical',
+ property: {
+ height: 30,
+ lineWidth: 1,
+ paddingType: 'none',
+ lineColor: '#dcdfe6',
+ borderType: 'solid'
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/Divider/index.vue b/src/components/DiyEditor/components/mobile/Divider/index.vue
new file mode 100644
index 00000000..f7785043
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/index.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
new file mode 100644
index 00000000..b250f5f1
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -0,0 +1,38 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 顶部导航栏属性 */
+export interface NavigationBarProperty {
+ // 页面标题
+ title: string
+ // 页面描述
+ description: string
+ // 顶部导航高度
+ navBarHeight: number
+ // 页面背景颜色
+ backgroundColor: string
+ // 页面背景图片
+ backgroundImage: string
+ // 样式类型：默认 | 沉浸式
+ styleType: 'default' | 'immersion'
+ // 常驻显示
+ alwaysShow: boolean
+ // 是否显示返回按钮
+ showGoBack: boolean
+}
+
+// 定义组件
+export const component = {
+ id: 'NavigationBar',
+ name: '顶部导航栏',
+ icon: 'tabler:layout-navbar',
+ property: {
+ title: '页面标题',
+ description: '',
+ navBarHeight: 35,
+ backgroundColor: '#f5f5f5',
+ backgroundImage: '',
+ styleType: 'default',
+ alwaysShow: true,
+ showGoBack: true
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
new file mode 100644
index 00000000..953748c7
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/property.vue b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
new file mode 100644
index 00000000..c4ca4588
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+ 默认
+ 沉浸式
+
+
+
+
+ 关闭
+ 开启
+
+
+
+
+
+
+
+
+
+
+ 建议宽度 750px
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/config.ts b/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
new file mode 100644
index 00000000..03e7143a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
@@ -0,0 +1,39 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 公告栏属性 */
+export interface NoticeBarProperty {
+ // 图标地址
+ iconUrl: string
+ // 公告内容列表
+ contents: NoticeContentProperty[]
+ // 背景颜色
+ backgroundColor: string
+ // 文字颜色
+ textColor: string
+}
+
+/** 内容属性 */
+export interface NoticeContentProperty {
+ // 内容文字
+ text: string
+ // 链接地址
+ url: string
+}
+
+// 定义组件
+export const component = {
+ id: 'NoticeBar',
+ name: '公告栏',
+ icon: 'ep:bell',
+ property: {
+ iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
+ contents: [
+ {
+ text: '',
+ url: ''
+ }
+ ],
+ backgroundColor: '#fff',
+ textColor: '#333'
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
new file mode 100644
index 00000000..dc360688
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+ 建议尺寸：24 * 24
+
+
+
+
+
+
+ 公告内容
+ 拖动左上角的小圆点可以调整热词顺序
+
+
+
+
+
+
+
+ 添加内容
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/PageConfig/config.ts b/src/components/DiyEditor/components/mobile/PageConfig/config.ts
new file mode 100644
index 00000000..f8e45e45
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PageConfig/config.ts
@@ -0,0 +1,23 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 页面设置属性 */
+export interface PageConfigProperty {
+ // 页面描述
+ description: string
+ // 页面背景颜色
+ backgroundColor: string
+ // 页面背景图片
+ backgroundImage: string
+}
+
+// 定义页面组件
+export const component = {
+ id: 'PageConfig',
+ name: '页面设置',
+ icon: 'ep:document',
+ property: {
+ description: '',
+ backgroundColor: '#f5f5f5',
+ backgroundImage: ''
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/PageConfig/property.vue b/src/components/DiyEditor/components/mobile/PageConfig/property.vue
new file mode 100644
index 00000000..278bc940
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PageConfig/property.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+ 建议宽度 750px
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
new file mode 100644
index 00000000..1241748d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -0,0 +1,35 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 搜索框属性 */
+export interface SearchProperty {
+ height: number // 搜索栏高度
+ showScan: boolean // 显示扫一扫
+ borderRadius: number // 框体样式
+ placeholder: string // 占位文字
+ placeholderPosition: PlaceholderPosition // 占位文字位置
+ backgroundColor: string // 背景颜色
+ borderColor: string // 框体颜色
+ textColor: string // 字体颜色
+ hotKeywords: string[] // 热词
+}
+
+// 文字位置
+export type PlaceholderPosition = 'left' | 'center'
+
+// 定义组件
+export const component = {
+ id: 'SearchBar',
+ name: '搜索框',
+ icon: 'ep:search',
+ property: {
+ height: 28,
+ showScan: false,
+ borderRadius: 0,
+ placeholder: '搜索商品',
+ placeholderPosition: 'left',
+ backgroundColor: 'rgb(249, 249, 249)',
+ borderColor: 'rgb(255, 255, 255)',
+ textColor: 'rgb(150, 151, 153)',
+ hotKeywords: []
+ }
+} as DiyComponent
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
new file mode 100644
index 00000000..e120405a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/property.vue b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
new file mode 100644
index 00000000..9123ebe5
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
@@ -0,0 +1,100 @@
+
+ 搜索热词
+ 拖动左侧的小圆点可以调整热词顺序
+
+
+
+
+
+ 添加热词
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/TabBar/config.ts b/src/components/DiyEditor/components/mobile/TabBar/config.ts
new file mode 100644
index 00000000..4a570a8e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/config.ts
@@ -0,0 +1,91 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 底部导航菜单属性 */
+export interface TabBarProperty {
+ // 选项列表
+ items: TabBarItemProperty[]
+ // 主题
+ theme: string
+ // 样式
+ style: TabBarStyle
+}
+
+// 选项属性
+export interface TabBarItemProperty {
+ name: string // 标签名称
+ link: string // 链接
+ iconUrl: string // 默认图标链接
+ activeIconUrl: string // 选中的图标链接
+}
+
+// 样式
+export interface TabBarStyle {
+ // 背景类型
+ backgroundType: 'color' | 'img'
+ // 背景颜色 或 图片链接
+ background: string
+ // 默认颜色
+ color: string
+ // 选中的颜色
+ activeColor: string
+}
+
+// 定义组件
+export const component = {
+ id: 'TabBar',
+ name: '底部导航',
+ icon: 'fluent:table-bottom-row-16-filled',
+ property: {
+ theme: 'red',
+ style: {
+ backgroundType: 'color',
+ background: '#fff',
+ color: '#282828',
+ activeColor: '#fc4141'
+ },
+ items: [
+ {
+ name: '首页',
+ link: '/',
+ iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
+ activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png'
+ },
+ {
+ name: '分类',
+ link: '/pages/goods_cate/goods_cate',
+ iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
+ activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png'
+ },
+ {
+ name: '购物车',
+ link: '/pages/order_addcart/order_addcart',
+ iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
+ activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png'
+ },
+ {
+ name: '我的',
+ link: '/pages/user/index',
+ iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
+ activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png'
+ }
+ ]
+ }
+} as DiyComponent
+
+export const THEME_LIST = [
+ { id: 'red', name: '中国红', icon: 'icon-park-twotone:theme', color: '#d10019' },
+ { id: 'orange', name: '桔橙', icon: 'icon-park-twotone:theme', color: '#f37b1d' },
+ { id: 'gold', name: '明黄', icon: 'icon-park-twotone:theme', color: '#fbbd08' },
+ { id: 'green', name: '橄榄绿', icon: 'icon-park-twotone:theme', color: '#8dc63f' },
+ { id: 'cyan', name: '天青', icon: 'icon-park-twotone:theme', color: '#1cbbb4' },
+ { id: 'blue', name: '海蓝', icon: 'icon-park-twotone:theme', color: '#0081ff' },
+ { id: 'purple', name: '姹紫', icon: 'icon-park-twotone:theme', color: '#6739b6' },
+ { id: 'brightRed', name: '嫣红', icon: 'icon-park-twotone:theme', color: '#e54d42' },
+ { id: 'forestGreen', name: '森绿', icon: 'icon-park-twotone:theme', color: '#39b54a' },
+ { id: 'mauve', name: '木槿', icon: 'icon-park-twotone:theme', color: '#9c26b0' },
+ { id: 'pink', name: '桃粉', icon: 'icon-park-twotone:theme', color: '#e03997' },
+ { id: 'brown', name: '棕褐', icon: 'icon-park-twotone:theme', color: '#a5673f' },
+ { id: 'grey', name: '玄灰', icon: 'icon-park-twotone:theme', color: '#8799a3' },
+ { id: 'gray', name: '草灰', icon: 'icon-park-twotone:theme', color: '#aaaaaa' },
+ { id: 'black', name: '墨黑', icon: 'icon-park-twotone:theme', color: '#333333' }
+]
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
new file mode 100644
index 00000000..266a20c5
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -0,0 +1,58 @@
+
+
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/index.vue b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
new file mode 100644
index 00000000..aab65779
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/property.vue b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
new file mode 100644
index 00000000..3e4dac2d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/index.ts b/src/components/DiyEditor/components/mobile/index.ts
new file mode 100644
index 00000000..c0dc67da
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/index.ts
@@ -0,0 +1,61 @@
+/*
+ * 组件注册
+ *
+ * 组件规范：
+ * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ * 4. property.vue：组件属性表单，用于配置组件，必选，
+ *
+ * 注：
+ * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ */
+
+// 导入组件界面模块
+const viewModules: Record = import.meta.glob('./*/*.vue')
+// 导入配置模块
+const configModules: Record = import.meta.glob('./*/config.ts', { eager: true })
+
+// 界面模块
+const components = {}
+// 组件配置模块
+const componentConfigs = {}
+
+// 组件界面的类型
+type ViewType = 'index' | 'property'
+
+/**
+ * 注册组件的界面模块
+ *
+ * @param componentId 组件ID
+ * @param configPath 配置模块的文件路径
+ * @param viewType 组件界面的类型
+ */
+const registerComponentViewModule = (
+ componentId: string,
+ configPath: string,
+ viewType: ViewType
+) => {
+ const viewPath = configPath.replace('config.ts', `${viewType}.vue`)
+ const viewModule = viewModules[viewPath]
+ if (viewModule) {
+ // 定义异步组件
+ components[componentId] = defineAsyncComponent(viewModule)
+ }
+}
+
+// 注册
+Object.keys(configModules).forEach((modulePath: string) => {
+ const component = configModules[modulePath].component
+ const componentId = component?.id
+ if (componentId) {
+ // 注册组件
+ componentConfigs[componentId] = component
+ // 注册预览界面
+ registerComponentViewModule(componentId, modulePath, 'index')
+ // 注册属性配置表单
+ registerComponentViewModule(`${componentId}Property`, modulePath, 'property')
+ }
+})
+
+export { components, componentConfigs }
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
new file mode 100644
index 00000000..520cd497
--- /dev/null
+++ b/src/components/DiyEditor/index.vue
@@ -0,0 +1,539 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
new file mode 100644
index 00000000..407efa30
--- /dev/null
+++ b/src/components/DiyEditor/util.ts
@@ -0,0 +1,59 @@
+import { ref, Ref } from 'vue'
+import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
+import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
+import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
+
+export interface DiyComponent {
+ id: string
+ name: string
+ icon: string
+ property: T
+}
+
+export interface DiyComponentLibrary {
+ name: string
+ extended: boolean
+ components: string[]
+}
+
+// 页面配置
+export interface PageConfig {
+ // 页面属性
+ page: PageConfigProperty
+ // 顶部导航栏属性
+ navigationBar: NavigationBarProperty
+ // 底部导航菜单属性
+ tabBar: TabBarProperty
+ // 页面组件列表
+ components: PageComponent[]
+}
+// 页面组件，只保留组件ID，组件属性
+export interface PageComponent extends Pick, 'id' | 'property'> {}
+
+// 属性表单监听
+export function usePropertyForm(modelValue: T, emit: Function): { formData: Ref } {
+ const formData = ref()
+ // 监听属性数据变动
+ watch(
+ () => modelValue,
+ () => {
+ formData.value = modelValue
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+ )
+ // 监听表单数据变动
+ watch(
+ () => formData.value,
+ () => {
+ emit('update:modelValue', formData.value)
+ },
+ {
+ deep: true
+ }
+ )
+
+ return { formData }
+}
diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue
index 3cfc0a73..996fe40b 100644
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@@ -18,15 +18,15 @@
+
+
+ 组件放置区域
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+ {{ item.title }}
+
+ ![]()
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/Divider/property.vue b/src/components/DiyEditor/components/mobile/Divider/property.vue
new file mode 100644
index 00000000..3d7be26d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/property.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/property.vue b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
new file mode 100644
index 00000000..11e7f4b7
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
@@ -0,0 +1,77 @@
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
new file mode 100644
index 00000000..512bb5a8
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -0,0 +1,161 @@
+
+
+
+
+
+
+
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/config.ts b/src/components/DiyEditor/components/mobile/TitleBar/config.ts
new file mode 100644
index 00000000..3d486cc3
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/config.ts
@@ -0,0 +1,65 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 标题栏属性 */
+export interface TitleBarProperty {
+ // 主标题
+ title: string
+ // 副标题
+ description: string
+ // 标题大小
+ titleSize: number
+ // 描述大小
+ descriptionSize: number
+ // 标题粗细
+ titleWeight: number
+ // 显示位置
+ position: 'left' | 'center'
+ // 描述粗细
+ descriptionWeight: number
+ // 标题颜色
+ titleColor: string
+ // 描述颜色
+ descriptionColor: string
+ // 背景颜色
+ backgroundColor: string
+ // 底部分割线
+ showBottomBorder: false
+ // 查看更多
+ more: {
+ // 是否显示查看更多
+ show: false
+ // 样式选择
+ type: 'text' | 'icon' | 'all'
+ // 自定义文字
+ text: string
+ // 链接
+ url: string
+ }
+}
+
+// 定义组件
+export const component = {
+ id: 'TitleBar',
+ name: '标题栏',
+ icon: 'material-symbols:line-start',
+ property: {
+ title: '主标题',
+ description: '副标题',
+ titleSize: 16,
+ descriptionSize: 12,
+ titleWeight: 400,
+ position: 'left',
+ descriptionWeight: 200,
+ titleColor: 'rgba(50, 50, 51, 10)',
+ descriptionColor: 'rgba(150, 151, 153, 10)',
+ backgroundColor: 'rgba(255, 255, 255, 10)',
+ showBottomBorder: false,
+ more: {
+ //查看更多
+ show: false,
+ type: 'icon',
+ text: '查看更多',
+ url: ''
+ }
+ }
+} as DiyComponent
+
+
+ ![]()
+
+ {{ item.name }}
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ element.name }}
+
+
+
+
+
+
+
+
-
@@ -81,7 +81,11 @@ const props = defineProps({
fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
- borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+ borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
+ // 是否显示删除按钮
+ showDelete: propTypes.bool.def(true),
+ // 是否显示按钮文字
+ showBtnText: propTypes.bool.def(true)
})
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index aa260cf1..70dc5b2f 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -459,6 +459,34 @@ const remainingRouter: AppRouteRecordRaw[] = [
component: () => import('@/views/pay/cashier/index.vue')
}
]
+ },
+ {
+ path: '/diy',
+ name: 'DiyCenter',
+ meta: { hidden: true },
+ component: Layout,
+ children: [
+ {
+ path: 'template/decorate/:id',
+ name: 'DiyTemplateDecorate',
+ meta: {
+ title: '模板装修',
+ noCache: true,
+ hidden: true
+ },
+ component: () => import('@/views/mall/promotion/diy/template/decorate.vue')
+ },
+ {
+ path: 'page/decorate/:id',
+ name: 'DiyPageDecorate',
+ meta: {
+ title: '页面装修',
+ noCache: true,
+ hidden: true
+ },
+ component: () => import('@/views/mall/promotion/diy/page/decorate.vue')
+ }
+ ]
}
]
diff --git a/src/views/mall/promotion/diy/page/DiyPageForm.vue b/src/views/mall/promotion/diy/page/DiyPageForm.vue
new file mode 100644
index 00000000..e0cb18b6
--- /dev/null
+++ b/src/views/mall/promotion/diy/page/DiyPageForm.vue
@@ -0,0 +1,114 @@
+
+
+
+
diff --git a/src/views/mall/promotion/diy/page/decorate.vue b/src/views/mall/promotion/diy/page/decorate.vue
new file mode 100644
index 00000000..76336bc4
--- /dev/null
+++ b/src/views/mall/promotion/diy/page/decorate.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 装修
+
+
+ 编辑
+
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/mall/promotion/diy/template/index.vue b/src/views/mall/promotion/diy/template/index.vue
new file mode 100644
index 00000000..dcf13698
--- /dev/null
+++ b/src/views/mall/promotion/diy/template/index.vue
@@ -0,0 +1,225 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 装修
+
+
+ 编辑
+
+
+
+ 使用
+
+
+ 删除
+
+
+
+
+
+
+
+
+
+
Date: Sun, 29 Oct 2023 22:29:03 +0800
Subject: [PATCH 18/18] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
=?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/crm/contract/index.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/views/crm/contract/index.vue b/src/views/crm/contract/index.vue
index 7a8211be..1670c418 100644
--- a/src/views/crm/contract/index.vue
+++ b/src/views/crm/contract/index.vue
@@ -166,7 +166,7 @@ import download from '@/utils/download'
import * as ContractApi from '@/api/crm/contract'
import ContractForm from './ContractForm.vue'
-defineOptions({ name: 'Contract' })
+defineOptions({ name: 'CrmContract' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化