From d83522607b9fb0ea1aa2c32bb54d176a24b1f1a5 Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Sat, 5 Oct 2024 11:47:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E8=A3=85=E4=BF=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8E=BB=E6=8E=89=E7=9B=B4=E6=8E=A5=E5=9C=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=8F=E9=87=8C=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=B7=B3=E8=BD=AC=E5=88=B0=E5=AF=B9=E5=BA=94?=
 =?UTF-8?q?=E7=9A=84=E8=A3=85=E4=BF=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DiyEditor/index.vue        |   1 +
 .../src/router/modules/remaining.ts           |   2 +-
 .../mall/promotion/diy/template/decorate.vue  | 291 +++++++++---------
 .../mall/promotion/diy/template/decorate1.vue | 175 +++++++++++
 .../mall/promotion/diy/template/decorate3.vue | 175 +++++++++++
 5 files changed, 500 insertions(+), 144 deletions(-)
 create mode 100644 yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
 create mode 100644 yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue

diff --git a/yudao-admin-vue3/src/components/DiyEditor/index.vue b/yudao-admin-vue3/src/components/DiyEditor/index.vue
index 700d32b..942a153 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/index.vue
@@ -249,6 +249,7 @@ watch(
       const component = componentConfigs[item.id]
       return { ...component, property: item.property }
     })
+	console.log(modelValue,"pageComponents.value")
   },
   {
     immediate: true
diff --git a/yudao-admin-vue3/src/router/modules/remaining.ts b/yudao-admin-vue3/src/router/modules/remaining.ts
index 05c227a..a91a181 100644
--- a/yudao-admin-vue3/src/router/modules/remaining.ts
+++ b/yudao-admin-vue3/src/router/modules/remaining.ts
@@ -469,7 +469,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
   {
-    path: '/diy',
+    path: '/diy-template/diy',
     name: 'DiyCenter',
     meta: { hidden: true },
     component: Layout,
diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
index e7838f2..4fa8d08 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue
@@ -1,18 +1,10 @@
 <template>
-  <DiyEditor
-    v-if="formData && !formLoading"
-    v-model="currentFormData!.property"
-    :title="templateItems[selectedTemplateItem].name"
-    :libs="libs"
-    :show-page-config="selectedTemplateItem !== 0"
-    :show-tab-bar="selectedTemplateItem === 0"
-    :show-navigation-bar="selectedTemplateItem !== 0"
-    :preview-url="previewUrl"
-    @save="submitForm"
-    @reset="handleEditorReset"
-  >
-    <template #toolBarLeft>
-      <el-radio-group
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		<template #toolBarLeft>
+			<!-- <el-radio-group
         v-model="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
@@ -22,146 +14,159 @@
             <Icon :icon="item.icon" :size="24" />
           </el-radio-button>
         </el-tooltip>
-      </el-radio-group>
-    </template>
-  </DiyEditor>
+      </el-radio-group> -->
+		</template>
+	</DiyEditor>
 </template>
 <script setup lang="ts">
-// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
-import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
-import * as DiyPageApi from '@/api/mall/promotion/diy/page'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
-import { toNumber } from 'lodash-es'
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+	import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+	import { useTagsViewStore } from '@/store/modules/tagsView'
+	import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
 
-/** 装修模板表单 */
-defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 装修模板表单 */
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('0')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
 
-// 左上角工具栏操作按钮
-const selectedTemplateItem = ref(0)
-const templateItems = reactive([
-  { name: '基础设置', icon: 'ep:iphone' },
-  { name: '首页', icon: 'ep:home-filled' },
-  { name: '我的', icon: 'ep:user-filled' }
-])
+	const message = useMessage() // 消息弹窗
 
-const message = useMessage() // 消息弹窗
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
 
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
-const formRef = ref() // 表单 Ref
-// 当前编辑的属性
-const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
-// 商城 H5 预览地址
-const previewUrl = ref('')
+	// 获取详情
+	const getPageDetail = async (id : any) => {
+		formLoading.value = true
+		try {
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+			currentFormData.value = formData.value
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
 
-// 获取详情
-const getPageDetail = async (id: any) => {
-  formLoading.value = true
-  try {
-    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
-    currentFormData.value = formData.value
+	// 模板组件库
+	const templateLibs = [] as DiyComponentLibrary[]
+	// 当前组件库
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
+	// 模板选项切换
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
 
-    // 拼接手机预览链接
-    const domain = import.meta.env.VITE_MALL_H5_DOMAIN
-    previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
-  } finally {
-    formLoading.value = false
-  }
-}
+		// 编辑页面
+		libs.value = PAGE_LIBS
+		console.log(formData.value!.pages, 'PAGE_LIBS')
+		// currentFormData.value = formData.value!.pages.find(
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
 
-// 模板组件库
-const templateLibs = [] as DiyComponentLibrary[]
-// 当前组件库
-const libs = ref<DiyComponentLibrary[]>(templateLibs)
-// 模板选项切换
-const handleTemplateItemChange = () => {
-  // 编辑模板
-  if (selectedTemplateItem.value === 0) {
-    libs.value = templateLibs
-    currentFormData.value = formData.value
-    return
-  }
+	// 提交表单
+	const submitForm = async () => {
+		// 校验表单
+		if (!formRef) return
+		// 提交请求
+		formLoading.value = true
+		try {
+			if (selectedTemplateItem.value === '0') {
+				// 提交模板属性
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+			} else {
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
 
-  // 编辑页面
-  libs.value = PAGE_LIBS
-  currentFormData.value = formData.value!.pages.find(
-    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
-  )
-}
+	// 重置表单
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: '',
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		formRef.value?.resetFields()
+	}
 
-// 提交表单
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    if (selectedTemplateItem.value === 0) {
-      // 提交模板属性
-      await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
-    } else {
-      // 提交页面属性
-      await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
-    }
-    message.success('保存成功')
-  } finally {
-    formLoading.value = false
-  }
-}
+	// 重置时记录当前编辑的页面
+	const handleEditorReset = () => storePageIndex()
 
-// 重置表单
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: '',
-    used: false,
-    usedTime: undefined,
-    remark: '',
-    previewPicUrls: [],
-    property: '',
-    pages: []
-  } as DiyTemplateApi.DiyTemplatePropertyVO
-  formRef.value?.resetFields()
-}
+	//#region 无感刷新
+	// 记录标识
+	const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+	// 1. 记录
+	const storePageIndex = () =>
+		sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+	// 2. 恢复
+	const recoverPageIndex = () => {
+		// 恢复重置前的页面，默认是第一个页面
+		const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+		// 移除标记
+		sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+		// 切换页面
+		if (pageIndex !== selectedTemplateItem.value) {
+			selectedTemplateItem.value = pageIndex
+			handleTemplateItemChange()
+		}
+	}
+	//#endregion
+		
 
-// 重置时记录当前编辑的页面
-const handleEditorReset = () => storePageIndex()
+	onMounted(async () => {
+		resetForm()
+		// if (!currentRoute.value.params.id) {
+		//   message.warning('参数错误，页面编号不能为空！')
+		//   delView(unref(currentRoute))
+		//   return
+		// }
+		// 查询详情
+		// await getPageDetail(currentRoute.value.params.id)
+		await getPageDetail(4)
+		// 恢复重置前的页面
+		recoverPageIndex()
+		currentFormData.value = formData.value!.pages[0]
 
-//#region 无感刷新
-// 记录标识
-const DIY_PAGE_INDEX_KEY = 'diy_page_index'
-// 1. 记录
-const storePageIndex = () =>
-  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
-// 2. 恢复
-const recoverPageIndex = () => {
-  // 恢复重置前的页面，默认是第一个页面
-  const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
-  // 移除标记
-  sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
-  // 切换页面
-  if (pageIndex !== selectedTemplateItem.value) {
-    selectedTemplateItem.value = pageIndex
-    handleTemplateItemChange()
-  }
-}
-//#endregion
-
-/** 初始化 **/
-const { currentRoute } = useRouter() // 路由
-const { delView } = useTagsViewStore() // 视图操作
-onMounted(async () => {
-  resetForm()
-  if (!currentRoute.value.params.id) {
-    message.warning('参数错误，页面编号不能为空！')
-    delView(unref(currentRoute))
-    return
-  }
-
-  // 查询详情
-  await getPageDetail(currentRoute.value.params.id)
-  // 恢复重置前的页面
-  recoverPageIndex()
-})
-</script>
+	})
+	
+	// watch(() => route.path, (newPath, oldPath) => {
+	// console.log(newPath,'newPathnewPath');
+	// // handleTemplateItemChange()
+	// }, { immediate: true });
+</script>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
new file mode 100644
index 0000000..42502fa
--- /dev/null
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue
@@ -0,0 +1,175 @@
+<template>
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		<template #toolBarLeft>
+			<!-- <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group> -->
+		</template>
+	</DiyEditor>
+</template>
+<script setup lang="ts">
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+	import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+	import { useTagsViewStore } from '@/store/modules/tagsView'
+	import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
+
+	/** 装修模板表单 */
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('1')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
+
+	const message = useMessage() // 消息弹窗
+
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
+
+	// 获取详情
+	const getPageDetail = async (id : any) => {
+		formLoading.value = true
+		try {
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+			currentFormData.value = formData.value
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 模板组件库
+	const templateLibs = [] as DiyComponentLibrary[]
+	// 当前组件库
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
+	// 模板选项切换
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
+
+		// 编辑页面
+		libs.value = PAGE_LIBS
+		console.log(formData.value!.pages, 'PAGE_LIBS')
+		// currentFormData.value = formData.value!.pages.find(
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
+
+	// 提交表单
+	const submitForm = async () => {
+		// 校验表单
+		if (!formRef) return
+		// 提交请求
+		formLoading.value = true
+		try {
+			if (selectedTemplateItem.value === '0') {
+				// 提交模板属性
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+			} else {
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 重置表单
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: '',
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		formRef.value?.resetFields()
+	}
+
+	// 重置时记录当前编辑的页面
+	const handleEditorReset = () => storePageIndex()
+
+	//#region 无感刷新
+	// 记录标识
+	const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+	// 1. 记录
+	const storePageIndex = () =>
+		sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+	// 2. 恢复
+	const recoverPageIndex = () => {
+		// 恢复重置前的页面，默认是第一个页面
+		const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+		// 移除标记
+		sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+		// 切换页面
+		if (pageIndex !== selectedTemplateItem.value) {
+			selectedTemplateItem.value = pageIndex
+			handleTemplateItemChange()
+		}
+	}
+	//#endregion
+		
+
+	onMounted(async () => {
+		resetForm()
+		// if (!currentRoute.value.params.id) {
+		//   message.warning('参数错误，页面编号不能为空！')
+		//   delView(unref(currentRoute))
+		//   return
+		// }
+		// 查询详情
+		// await getPageDetail(currentRoute.value.params.id)
+		await getPageDetail(4)
+		// 恢复重置前的页面
+		recoverPageIndex()
+		selectedTemplateItem.value = 1
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		// handleTemplateItemChange()
+		console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
+
+	})
+	
+	// watch(() => route.path, (newPath, oldPath) => {
+	// console.log(newPath,'newPathnewPath');
+	// // handleTemplateItemChange()
+	// }, { immediate: true });
+</script>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue
new file mode 100644
index 0000000..5ea5f26
--- /dev/null
+++ b/yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue
@@ -0,0 +1,175 @@
+<template>
+	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+		<template #toolBarLeft>
+			<!-- <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group> -->
+		</template>
+	</DiyEditor>
+</template>
+<script setup lang="ts">
+	// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
+	import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+	import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+	import { useTagsViewStore } from '@/store/modules/tagsView'
+	import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util' // 商城的 DIY 组件，在 DiyEditor 目录下
+	import { toNumber } from 'lodash-es'
+	// import { watch } from 'vue'; 
+
+	/** 装修模板表单 */
+	defineOptions({ name: 'DiyTemplateDecorate' })
+	/** 初始化 **/
+	const { currentRoute } = useRouter() // 路由
+	const { delView } = useTagsViewStore() // 视图操作
+	const route = useRoute();
+	// 左上角工具栏操作按钮
+	const selectedTemplateItem = ref('1')
+	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
+	const templateItems = reactive([
+		{ name: '基础设置', icon: 'ep:iphone' },
+		{ name: '首页', icon: 'ep:home-filled' },
+		{ name: '我的', icon: 'ep:user-filled' }
+	])
+
+	const message = useMessage() // 消息弹窗
+
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
+	const formRef = ref() // 表单 Ref
+	// 当前编辑的属性
+	const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
+	// 商城 H5 预览地址
+	const previewUrl = ref('')
+
+	// 获取详情
+	const getPageDetail = async (id : any) => {
+		formLoading.value = true
+		try {
+			formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+			currentFormData.value = formData.value
+			// 拼接手机预览链接
+			const domain = import.meta.env.VITE_MALL_H5_DOMAIN
+			previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 模板组件库
+	const templateLibs = [] as DiyComponentLibrary[]
+	// 当前组件库
+	const libs = ref<DiyComponentLibrary[]>(templateLibs)
+	// 模板选项切换
+	const handleTemplateItemChange = () => {
+		// 编辑模板
+		// if (selectedTemplateItem.value === 0) {
+		//   libs.value = templateLibs
+		//   currentFormData.value = formData.value
+		//   return
+		// }
+
+		// 编辑页面
+		libs.value = PAGE_LIBS
+		console.log(formData.value!.pages, 'PAGE_LIBS')
+		// currentFormData.value = formData.value!.pages.find(
+		//   // (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+		//   (page: DiyPageApi.DiyPageVO) => page.name === templateItems[1].name
+		// )
+		currentFormData.value = formData.value!.pages[selectedTemplateItem.value]
+		console.log(selectedTemplateItem.value, 'selectedTemplateItem.value11111111111111')
+	}
+
+	// 提交表单
+	const submitForm = async () => {
+		// 校验表单
+		if (!formRef) return
+		// 提交请求
+		formLoading.value = true
+		try {
+			if (selectedTemplateItem.value === '0') {
+				// 提交模板属性
+				await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+			} else {
+				// 提交页面属性
+				await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+			}
+			message.success('保存成功')
+		} finally {
+			formLoading.value = false
+		}
+	}
+
+	// 重置表单
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: '',
+			used: false,
+			usedTime: undefined,
+			remark: '',
+			previewPicUrls: [],
+			property: '',
+			pages: []
+		} as DiyTemplateApi.DiyTemplatePropertyVO
+		formRef.value?.resetFields()
+	}
+
+	// 重置时记录当前编辑的页面
+	const handleEditorReset = () => storePageIndex()
+
+	//#region 无感刷新
+	// 记录标识
+	const DIY_PAGE_INDEX_KEY = 'diy_page_index'
+	// 1. 记录
+	const storePageIndex = () =>
+		sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`)
+	// 2. 恢复
+	const recoverPageIndex = () => {
+		// 恢复重置前的页面，默认是第一个页面
+		const pageIndex = toNumber(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0
+		// 移除标记
+		sessionStorage.removeItem(DIY_PAGE_INDEX_KEY)
+		// 切换页面
+		if (pageIndex !== selectedTemplateItem.value) {
+			selectedTemplateItem.value = pageIndex
+			handleTemplateItemChange()
+		}
+	}
+	//#endregion
+		
+
+	onMounted(async () => {
+		resetForm()
+		// if (!currentRoute.value.params.id) {
+		//   message.warning('参数错误，页面编号不能为空！')
+		//   delView(unref(currentRoute))
+		//   return
+		// }
+		// 查询详情
+		// await getPageDetail(currentRoute.value.params.id)
+		await getPageDetail(4)
+		// 恢复重置前的页面
+		recoverPageIndex()
+		libs.value = templateLibs
+		currentFormData.value = formData.value
+		// handleTemplateItemChange()
+		console.log(currentRoute.value.params.id, "currentRoute.value.params.id");
+
+	})
+	
+	// watch(() => route.path, (newPath, oldPath) => {
+	// console.log(newPath,'newPathnewPath');
+	// // handleTemplateItemChange()
+	// }, { immediate: true });
+</script>
\ No newline at end of file