From 23fd79bdfe084b46970764a246ac449b0a3fc29f Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Mon, 30 Sep 2024 16:02:23 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E8=A3=85=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-admin-vue3/src/api/mall/product/spu.ts  |  10 +
 .../AppLinkInput/AppLinkSelectDialog.vue      |  49 ++--
 .../src/components/AppLinkInput/data.ts       |  25 ++
 .../components/mobile/CouponCard/index.vue    |  27 +-
 .../components/mobile/ProductCard/index.vue   |   1 +
 .../mobile/PromotionCombination/index.vue     |  56 +++-
 .../mobile/PromotionCombination/property.vue  |   4 +-
 .../mobile/PromotionSeckill/index.vue         | 264 ++++++++++--------
 .../src/components/DiyEditor/util.ts          |   2 +-
 9 files changed, 284 insertions(+), 154 deletions(-)

diff --git a/yudao-admin-vue3/src/api/mall/product/spu.ts b/yudao-admin-vue3/src/api/mall/product/spu.ts
index e3a2162..32fe688 100644
--- a/yudao-admin-vue3/src/api/mall/product/spu.ts
+++ b/yudao-admin-vue3/src/api/mall/product/spu.ts
@@ -109,3 +109,13 @@ export const exportSpu = async (params) => {
 export const getSpuSimpleList = async () => {
   return request.get({ url: '/product/spu/list-all-simple' })
 }
+
+// 获得拼团商品 SPU 列表
+export const getSpuAdminSpuList = async () => {
+  return request.get({ url: '/promotion/combination-activity/adminSpuList' })
+}
+
+// 获得秒杀商品 SPU 列表
+export const getSpuMiaoShaAdminSpuList = async () => {
+  return request.get({ url: '/promotion/seckill-activity/adminSpuList' })
+}
diff --git a/yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue b/yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue
index 63f1966..5133f16 100644
--- a/yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue
+++ b/yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue
@@ -21,24 +21,27 @@
       <!-- 右侧链接列表 -->
       <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
         <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
-          <!-- 分组标题 -->
-          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
-          <!-- 链接列表 -->
-          <el-tooltip
-            v-for="(appLink, appLinkIndex) in group.links"
-            :key="appLinkIndex"
-            :content="appLink.path"
-            placement="bottom"
-            :show-after="300"
-          >
-            <el-button
-              class="m-b-8px m-r-8px m-l-0px!"
-              :type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
-              @click="handleAppLinkSelected(appLink)"
-            >
-              {{ appLink.name }}
-            </el-button>
-          </el-tooltip>
+			<template  v-if="activeGroup == group.name">
+				<!-- 分组标题 -->
+				<div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+				<!-- 链接列表 -->
+				<el-tooltip
+				  v-for="(appLink, appLinkIndex) in group.links"
+				  :key="appLinkIndex"
+				  :content="appLink.path"
+				  placement="bottom"
+				  :show-after="300"
+				>
+				  <el-button
+				    class="m-b-8px m-r-8px m-l-0px!"
+				    :type="isSameLink(appLink.path, activeAppLink.path) ? 'primary' : 'default'"
+				    @click="handleAppLinkSelected(appLink)"
+				  >
+				    {{ appLink.name }}
+				  </el-button>
+				</el-tooltip>
+			</template>
+          
         </div>
       </el-scrollbar>
     </div>
@@ -155,11 +158,11 @@ const linkScrollbar = ref<ScrollbarInstance>()
 // 处理分组选中
 const handleGroupSelected = (group: string) => {
   activeGroup.value = group
-  const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
-  if (titleRef) {
-    // 滚动分组标题
-    linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
-  }
+  // const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
+  // if (titleRef) {
+  //   // 滚动分组标题
+  //   linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
+  // }
 }
 
 // 分组滚动条
diff --git a/yudao-admin-vue3/src/components/AppLinkInput/data.ts b/yudao-admin-vue3/src/components/AppLinkInput/data.ts
index 6f1747b..77fb4e1 100644
--- a/yudao-admin-vue3/src/components/AppLinkInput/data.ts
+++ b/yudao-admin-vue3/src/components/AppLinkInput/data.ts
@@ -250,5 +250,30 @@ export const APP_LINK_GROUP_LIST = [
         path: '/pages/user/user_vip/index'
       }
     ]
+  },
+  {
+    name: '自定义页面',
+    links: [
+      {
+        name: '促销页面',
+        path: 'ss'
+      },
+      {
+        name: '关于我们',
+        path: '/pages/pay/recharge-lo'
+      },
+      {
+        name: '产品与服务',
+        path: '/pages/pay/recharge-l'
+      },
+      {
+        name: '自定义页面',
+        path: '/pages/pay/recharge-'
+      },
+      {
+        name: '个人中心',
+        path: '/pages/pay/recharge'
+      }
+    ]
   }
 ] as AppLinkGroup[]
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
index 3e2302a..dd557fd 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/CouponCard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
     <div
-      class="flex flex-row text-12px"
+      class="new-class flex flex-row text-12px"
       :style="{
         gap: `${property.space}px`,
         width: scrollbarWidth
@@ -20,13 +20,10 @@
         :key="index"
       >
         <!-- 布局1：1列-->
-        <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
+        <!-- <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
           <div class="flex flex-col justify-evenly gap-4px">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 有效期 -->
             <CouponValidTerm :coupon="coupon" />
           </div>
           <div class="flex flex-col justify-evenly">
@@ -40,11 +37,11 @@
               立即领取
             </div>
           </div>
-        </div>
+        </div> -->
         <!-- 布局2：2列-->
+		<!-- v-else-if="property.columns === 2"s -->
         <div
-          v-else-if="property.columns === 2"
-          class="m-l-16px flex flex-row justify-between p-8px"
+          class="m-l-16px flex flex-row justify-between"
         >
           <div class="flex flex-col justify-evenly gap-4px">
             <!-- 优惠值 -->
@@ -64,8 +61,7 @@
           </div>
         </div>
         <!-- 布局3：3列-->
-        <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
-          <!-- 优惠值 -->
+        <!-- <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
           <CouponDiscount :coupon="coupon" />
           <div>{{ coupon.name }}</div>
           <div
@@ -77,7 +73,7 @@
           >
             立即领取
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </el-scrollbar>
@@ -139,4 +135,11 @@ onMounted(() => {
   phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
 })
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	.new-class{
+		margin-left: 10px;
+		.box-content{
+			margin-right:10px;
+		}
+	}
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
index f05d4fa..a7f0de4 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue
@@ -26,6 +26,7 @@
             'w-140px': property.layoutType === 'oneColSmallImg'
           }
         ]"
+		style="padding:10px;"
       >
         <el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
index fe6f3a8..328c049 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@@ -1,6 +1,26 @@
 <template>
   <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
-    <!-- 商品网格 -->
+    
+	<div class="component">
+		<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
+			<div class="min-h-42px flex flex-col">
+				<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
+					<div class="flex flex-1 flex-row items-center gap-8px">
+						<div class="wh">
+							<img
+								src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png" />
+						</div>
+						<span class="text-16px" style="color: rgb(187, 187, 187);">92人拼团成功</span>
+					</div>
+					<div class="item-center flex flex-row justify-center gap-4px">
+						<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
+						<Icon icon="ep-arrow-right" color="#000" :size="16" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
       :style="{
@@ -11,7 +31,7 @@
     >
       <!-- 商品 -->
       <div
-        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        class="new-class relative box-content flex flex-row flex-wrap overflow-hidden "
         :style="{
           borderTopLeftRadius: `${property.borderRadiusTop}px`,
           borderTopRightRadius: `${property.borderRadiusTop}px`,
@@ -79,7 +99,8 @@ watch(
     if (!props.property.activityId) return
     const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
     if (!activity?.spuId) return
-    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
+    spuList.value = await ProductSpuApi.getSpuAdminSpuList()
+	console.log(spuList.value,'请求成功')
   },
   {
     immediate: true,
@@ -122,4 +143,31 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	
+	.new-class{
+		    padding: 10px;
+		// width:42%;
+	}
+	
+	:deep(.el-scrollbar__view) {
+		background-color: white;
+		border-radius: 12px;
+	}
+	
+	.wh {
+		position: relative;
+		padding-right: 10px;
+	}
+	
+	.wh::after {
+		position: absolute;
+		content: "";
+		top: 50%;
+		right: 0;
+		width: 1px;
+		height: 57%;
+		border-right: 1px solid #ababab;
+		transform: translateY(-50%);
+	}
+</style>
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
index ec09dc4..b479582 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/property.vue
@@ -14,7 +14,7 @@
         </el-form-item>
       </el-card>
       <el-card header="商品样式" class="property-group" shadow="never">
-        <el-form-item label="布局" prop="type">
+        <!-- <el-form-item label="布局" prop="type">
           <el-radio-group v-model="formData.layoutType">
             <el-tooltip class="item" content="单列" placement="bottom">
               <el-radio-button label="oneCol">
@@ -27,7 +27,7 @@
               </el-radio-button>
             </el-tooltip>
           </el-radio-group>
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="商品名称" prop="fields.name.show">
           <div class="flex gap-8px">
             <ColorInput v-model="formData.fields.name.color" />
diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
index 1b4113b..b851de6 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@@ -1,125 +1,165 @@
 <template>
-  <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
-    <!-- 商品网格 -->
-    <div
-      class="grid overflow-x-auto"
-      :style="{
-        gridGap: `${property.space}px`,
+	<el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+		<div class="component">
+			<div style="padding: 0px; border-radius: 0px; overflow: hidden;">
+				<div class="min-h-42px flex flex-col">
+					<div class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px">
+						<div class="flex flex-1 flex-row items-center gap-8px">
+							<div class="wh">
+								<img
+									src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png" />
+							</div>
+							<span class="text-16px" style="color: rgb(187, 187, 187);">已有99人购买</span>
+						</div>
+						<div class="item-center flex flex-row justify-center gap-4px">
+							<span class="text-12px" style="color: rgb(187, 187, 187);">查看更多</span>
+							<Icon icon="ep-arrow-right" color="#000" :size="16" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 商品网格 -->
+		<!-- gridGap: `${property.space}px`, -->
+		<div class="new-main" :style="{
+        
         gridTemplateColumns,
         width: scrollbarWidth
-      }"
-    >
-      <!-- 商品 -->
-      <div
-        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
-        :style="{
-          borderTopLeftRadius: `${property.borderRadiusTop}px`,
-          borderTopRightRadius: `${property.borderRadiusTop}px`,
-          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
-          borderBottomRightRadius: `${property.borderRadiusBottom}px`
-        }"
-        v-for="(spu, index) in spuList"
-        :key="index"
-      >
-        <!-- 角标 -->
-        <div
-          v-if="property.badge.show"
-          class="absolute left-0 top-0 z-1 items-center justify-center"
-        >
-          <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
-        </div>
-        <!-- 商品封面图 -->
-        <el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
-        <div
-          :class="[
+      }">
+			<!-- 商品 -->
+			<!-- 
+	   :style="{
+	     borderTopLeftRadius: `${property.borderRadiusTop}px`,
+	     borderTopRightRadius: `${property.borderRadiusTop}px`,
+	     borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+	     borderBottomRightRadius: `${property.borderRadiusBottom}px`
+	   }"
+	   -->
+			<div class="new-class relative box-content flex-row flex-wrap overflow-hidden"
+				v-for="(spu, index) in spuList" :key="index">
+				<!-- 角标 -->
+				<div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
+					<el-image fit="cover" :src="property.badge.imgUrl" class="new-img" />
+				</div>
+				<!-- 商品封面图 -->
+				<el-image fit="cover" :src="spu.picUrl" :style="{ width: imageSize, height: imageSize }" />
+				<div :class="[
             'flex flex-col gap-8px p-8px box-border',
             {
               'w-[calc(100%-64px)]': columns === 2,
               'w-full': columns === 3
             }
-          ]"
-        >
-          <!-- 商品名称 -->
-          <div
-            v-if="property.fields.name.show"
-            class="truncate text-12px"
-            :style="{ color: property.fields.name.color }"
-          >
-            {{ spu.name }}
-          </div>
-          <div>
-            <!-- 商品价格 -->
-            <span
-              v-if="property.fields.price.show"
-              class="text-12px"
-              :style="{ color: property.fields.price.color }"
-            >
-              ￥{{ spu.price }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </el-scrollbar>
+          ]">
+					<!-- 商品名称 -->
+					<div v-if="property.fields.name.show" class="truncate text-12px"
+						:style="{ color: property.fields.name.color }">
+						{{ spu.name }}
+					</div>
+					<div>
+						<!-- 商品价格 -->
+						<span v-if="property.fields.price.show" class="text-12px"
+							:style="{ color: property.fields.price.color }">
+							￥{{ spu.price }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</el-scrollbar>
 </template>
 <script setup lang="ts">
-import { PromotionSeckillProperty } from './config'
-import * as ProductSpuApi from '@/api/mall/product/spu'
-import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+	import { PromotionSeckillProperty } from './config'
+	import * as ProductSpuApi from '@/api/mall/product/spu'
+	import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
 
-/** 秒杀 */
-defineOptions({ name: 'PromotionSeckill' })
-// 定义属性
-const props = defineProps<{ property: PromotionSeckillProperty }>()
-// 商品列表
-const spuList = ref<ProductSpuApi.Spu[]>([])
-watch(
-  () => props.property.activityId,
-  async () => {
-    if (!props.property.activityId) return
-    const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
-    if (!activity?.spuId) return
-    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-// 手机宽度
-const phoneWidth = ref(375)
-// 容器
-const containerRef = ref()
-// 商品的列数
-const columns = ref(2)
-// 滚动条宽度
-const scrollbarWidth = ref('100%')
-// 商品图大小
-const imageSize = ref('0')
-// 商品网络列数
-const gridTemplateColumns = ref('')
-// 计算布局参数
-watch(
-  () => [props.property, phoneWidth, spuList.value.length],
-  () => {
-    // 计算列数
-    columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
-    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
-    const productWidth =
-      (phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
-    // 商品图布局：2列时，左右布局 3列时，上下布局
-    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
-    // 指定列数
-    gridTemplateColumns.value = `repeat(${columns.value}, auto)`
-    // 不滚动
-    scrollbarWidth.value = '100%'
-  },
-  { immediate: true, deep: true }
-)
-onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
-})
+	/** 秒杀 */
+	defineOptions({ name: 'PromotionSeckill' })
+	// 定义属性
+	const props = defineProps<{ property : PromotionSeckillProperty }>()
+	// 商品列表
+	const spuList = ref<ProductSpuApi.Spu[]>([])
+	watch(
+		() => props.property.activityId,
+		async () => {
+			if (!props.property.activityId) return
+			const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
+			if (!activity?.spuId) return
+			spuList.value = await ProductSpuApi.getSpuMiaoShaAdminSpuList()
+		},
+		{
+			immediate: true,
+			deep: true
+		}
+	)
+	// 手机宽度
+	const phoneWidth = ref(375)
+	// 容器
+	const containerRef = ref()
+	// 商品的列数
+	const columns = ref(2)
+	// 滚动条宽度
+	const scrollbarWidth = ref('100%')
+	// 商品图大小
+	const imageSize = ref('0')
+	// 商品网络列数
+	const gridTemplateColumns = ref('')
+	// 计算布局参数
+	watch(
+		() => [props.property, phoneWidth, spuList.value.length],
+		() => {
+			// 计算列数
+			columns.value = props.property.layoutType === 'oneCol' ? 1 : 3
+			// 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+			const productWidth =
+				(phoneWidth.value - props.property.space * (columns.value - 1)) / columns.value
+			// 商品图布局：2列时，左右布局 3列时，上下布局
+			imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`
+			// 指定列数
+			gridTemplateColumns.value = `repeat(${columns.value}, auto)`
+			// 不滚动
+			scrollbarWidth.value = '100%'
+		},
+		{ immediate: true, deep: true }
+	)
+	onMounted(() => {
+		// 提取手机宽度
+		phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+	})
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+	:deep(.el-scrollbar__view) {
+		background-color: white;
+		border-radius: 12px;
+	}
+
+	.new-class {
+		width: 33%;
+		padding: 10px;
+		// width:42%;
+	}
+
+	.new-main {
+		display: flex;
+	}
+
+	:deep(.el-image) {
+		width: 100% !important;
+	}
+
+	.wh {
+		position: relative;
+		padding-right: 10px;
+	}
+
+	.wh::after {
+		position: absolute;
+		content: "";
+		top: 50%;
+		right: 0;
+		width: 1px;
+		height: 57%;
+		border-right: 1px solid #ababab;
+		transform: translateY(-50%);
+	}
+</style>
\ No newline at end of file
diff --git a/yudao-admin-vue3/src/components/DiyEditor/util.ts b/yudao-admin-vue3/src/components/DiyEditor/util.ts
index c75945f..5154c9b 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/util.ts
+++ b/yudao-admin-vue3/src/components/DiyEditor/util.ts
@@ -146,7 +146,7 @@ export const PAGE_LIBS = [
     components: [
       'PromotionCombination',
       'PromotionSeckill',
-      'PromotionPoint',
+      // 'PromotionPoint',
       'CouponCard',
       'PromotionArticle'
     ]

From d477567030c4e0d94fc17e0ed963761c2ce7910b Mon Sep 17 00:00:00 2001
From: 77 <270260644@qq.com>
Date: Mon, 30 Sep 2024 19:02:16 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=963?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiyEditor/components/ComponentLibrary.vue |   4 +-
 .../seckill/config/SeckillConfigForm.vue      | 232 ++++++++----------
 2 files changed, 110 insertions(+), 126 deletions(-)

diff --git a/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue b/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
index b8bd1ec..f2af137 100644
--- a/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/yudao-admin-vue3/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -128,8 +128,8 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     width: 86px;
     height: 86px;
     cursor: move;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
+    // border-right: 1px solid var(--el-border-color-lighter);
+    // border-bottom: 1px solid var(--el-border-color-lighter);
     flex-direction: column;
     align-items: center;
     justify-content: center;
diff --git a/yudao-admin-vue3/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue b/yudao-admin-vue3/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
index a7ce5fe..d596ec1 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
@@ -1,133 +1,117 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="秒杀时段名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
-      </el-form-item>
-      <el-form-item label="开始时间点" prop="startTime">
-        <el-time-picker
-          v-model="formData.startTime"
-          value-format="HH:mm:ss"
-          placeholder="选择开始时间点"
-        />
-      </el-form-item>
-      <el-form-item label="结束时间点" prop="endTime">
-        <el-time-picker
-          v-model="formData.endTime"
-          value-format="HH:mm:ss"
-          placeholder="选择结束时间点"
-        />
-      </el-form-item>
-      <el-form-item label="秒杀轮播图" prop="sliderPicUrls">
-        <UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
-      </el-form-item>
-      <el-form-item label="活动状态" prop="status">
-        <el-radio-group v-model="formData.status">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
+	<Dialog :title="dialogTitle" v-model="dialogVisible">
+		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
+			<el-form-item label="秒杀时段名称" prop="name">
+				<el-input v-model="formData.name" placeholder="请输入秒杀时段名称" />
+			</el-form-item>
+			<el-form-item label="开始时间点" prop="startTime">
+				<el-time-picker v-model="formData.startTime" value-format="HH:mm" format="HH:mm"
+					placeholder="选择开始时间点" />
+			</el-form-item>
+			<el-form-item label="结束时间点" prop="endTime">
+				<el-time-picker v-model="formData.endTime" value-format="HH:mm" format="HH:mm" placeholder="选择结束时间点" />
+			</el-form-item>
+			<el-form-item label="秒杀轮播图" prop="sliderPicUrls">
+				<UploadImgs v-model="formData.sliderPicUrls" placeholder="请输入秒杀轮播图" />
+			</el-form-item>
+			<el-form-item label="活动状态" prop="status">
+				<el-radio-group v-model="formData.status">
+					<el-radio v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value"
+						:label="dict.value">
+						{{ dict.label }}
+					</el-radio>
+				</el-radio-group>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+			<el-button @click="dialogVisible = false">取 消</el-button>
+		</template>
+	</Dialog>
 </template>
 <script setup lang="ts">
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
-import { CommonStatusEnum } from '@/utils/constants'
+	import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+	import { SeckillConfigApi, SeckillConfigVO } from '@/api/mall/promotion/seckill/seckillConfig.ts'
+	import { CommonStatusEnum } from '@/utils/constants'
 
-/** 秒杀时段 表单 */
-defineOptions({ name: 'SeckillConfigForm' })
+	/** 秒杀时段 表单 */
+	defineOptions({ name: 'SeckillConfigForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+	const { t } = useI18n() // 国际化
+	const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  name: undefined,
-  startTime: undefined,
-  endTime: undefined,
-  sliderPicUrls: undefined,
-  status: undefined
-})
-const formRules = reactive({
-  name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
-  startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
-  endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
-  status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
+	const dialogVisible = ref(false) // 弹窗的是否展示
+	const dialogTitle = ref('') // 弹窗的标题
+	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+	const formType = ref('') // 表单的类型：create - 新增；update - 修改
+	const formData = ref({
+		id: undefined,
+		name: undefined,
+		startTime: undefined,
+		endTime: undefined,
+		sliderPicUrls: undefined,
+		status: undefined
+	})
+	const formRules = reactive({
+		name: [{ required: true, message: '秒杀时段名称不能为空', trigger: 'blur' }],
+		startTime: [{ required: true, message: '开始时间点不能为空', trigger: 'blur' }],
+		endTime: [{ required: true, message: '结束时间点不能为空', trigger: 'blur' }],
+		status: [{ required: true, message: '活动状态不能为空', trigger: 'blur' }]
+	})
+	const formRef = ref() // 表单 Ref
 
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await SeckillConfigApi.getSeckillConfig(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+	/** 打开弹窗 */
+	const open = async (type : string, id ?: number) => {
+		dialogVisible.value = true
+		dialogTitle.value = t('action.' + type)
+		formType.value = type
+		resetForm()
+		// 修改时，设置数据
+		if (id) {
+			formLoading.value = true
+			try {
+				formData.value = await SeckillConfigApi.getSeckillConfig(id)
+			} finally {
+				formLoading.value = false
+			}
+		}
+	}
+	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as SeckillConfigVO
-    if (formType.value === 'create') {
-      await SeckillConfigApi.createSeckillConfig(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await SeckillConfigApi.updateSeckillConfig(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
+	/** 提交表单 */
+	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+	const submitForm = async () => {
+		// 校验表单
+		await formRef.value.validate()
+		// 提交请求
+		formLoading.value = true
+		try {
+			const data = formData.value as unknown as SeckillConfigVO
+			if (formType.value === 'create') {
+				await SeckillConfigApi.createSeckillConfig(data)
+				message.success(t('common.createSuccess'))
+			} else {
+				await SeckillConfigApi.updateSeckillConfig(data)
+				message.success(t('common.updateSuccess'))
+			}
+			dialogVisible.value = false
+			// 发送操作成功的事件
+			emit('success')
+		} finally {
+			formLoading.value = false
+		}
+	}
 
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: undefined,
-    startTime: undefined,
-    endTime: undefined,
-    sliderPicUrls: [],
-    status: CommonStatusEnum.ENABLE
-  }
-  formRef.value?.resetFields()
-}
-</script>
+	/** 重置表单 */
+	const resetForm = () => {
+		formData.value = {
+			id: undefined,
+			name: undefined,
+			startTime: undefined,
+			endTime: undefined,
+			sliderPicUrls: [],
+			status: CommonStatusEnum.ENABLE
+		}
+		formRef.value?.resetFields()
+	}
+</script>
\ No newline at end of file

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 3/3] =?UTF-8?q?=E5=B0=86=E8=A3=85=E4=BF=AE=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=E5=8E=BB=E6=8E=89=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E5=9C=A8=E8=8F=9C=E5=8D=95=E6=A0=8F=E9=87=8C=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=8C=89=E9=92=AE=E8=B7=B3=E8=BD=AC=E5=88=B0=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=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