yudao-admin-vue3/src/api/mall/product/spu.ts

@@ -109,13 +109,3 @@ 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' })
-}

yudao-admin-vue3/src/components/AppLinkInput/AppLinkSelectDialog.vue

@@ -21,7 +21,6 @@
       <!-- 右侧链接列表 -->
       <el-scrollbar class="h-full flex-1" @scroll="handleScroll" ref="linkScrollbar">
         <div v-for="(group, groupIndex) in APP_LINK_GROUP_LIST" :key="groupIndex">
-			<template  v-if="activeGroup == group.name">
           <!-- 分组标题 -->
           <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
           <!-- 链接列表 -->
@@ -40,8 +39,6 @@
               {{ appLink.name }}
             </el-button>
           </el-tooltip>
-			</template>
-          
         </div>
       </el-scrollbar>
     </div>
@@ -158,11 +155,11 @@ const linkScrollbar = ref<ScrollbarInstance>()
 // 处理分组选中
 const handleGroupSelected = (group: string) => {
   activeGroup.value = group
-  // const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
+  const titleRef = groupTitleRefs.value.find((item: HTMLInputElement) => item.textContent === group)
-  // if (titleRef) {
+  if (titleRef) {
-  //   // 滚动分组标题
+    // 滚动分组标题
-  //   linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
+    linkScrollbar.value?.setScrollTop(titleRef.offsetTop)
-  // }
+  }
 }
 
 // 分组滚动条

yudao-admin-vue3/src/components/AppLinkInput/data.ts

@@ -250,30 +250,5 @@ 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[]

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-right: 1px solid var(--el-border-color-lighter);
-    // border-bottom: 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;

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="new-class flex flex-row text-12px"
+      class="flex flex-row text-12px"
       :style="{
         gap: `${property.space}px`,
         width: scrollbarWidth
@@ -20,10 +20,13 @@
         :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">
@@ -37,11 +40,11 @@
               立即领取
             </div>
           </div>
-        </div> -->
+        </div>
         <!-- 布局2：2列-->
-		<!-- v-else-if="property.columns === 2"s -->
         <div
-          class="m-l-16px flex flex-row justify-between"
+          v-else-if="property.columns === 2"
+          class="m-l-16px flex flex-row justify-between p-8px"
         >
           <div class="flex flex-col justify-evenly gap-4px">
             <!-- 优惠值 -->
@@ -61,7 +64,8 @@
           </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
@@ -73,7 +77,7 @@
           >
             立即领取
           </div>
-        </div> -->
+        </div>
       </div>
     </div>
   </el-scrollbar>
@@ -135,11 +139,4 @@ onMounted(() => {
   phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
 })
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-	.new-class{
-		margin-left: 10px;
-		.box-content{
-			margin-right:10px;
-		}
-	}
-</style>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/ProductCard/index.vue

@@ -26,7 +26,6 @@
             'w-140px': property.layoutType === 'oneColSmallImg'
           }
         ]"
-		style="padding:10px;"
       >
         <el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue

@@ -1,25 +1,5 @@
 <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"
@@ -31,7 +11,7 @@
     >
       <!-- 商品 -->
       <div
-        class="new-class relative box-content flex flex-row flex-wrap overflow-hidden "
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
         :style="{
           borderTopLeftRadius: `${property.borderRadiusTop}px`,
           borderTopRightRadius: `${property.borderRadiusTop}px`,
@@ -99,8 +79,7 @@ watch(
     if (!props.property.activityId) return
     const activity = await CombinationActivityApi.getCombinationActivity(props.property.activityId)
     if (!activity?.spuId) return
-    spuList.value = await ProductSpuApi.getSpuAdminSpuList()
+    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
-	console.log(spuList.value,'请求成功')
   },
   {
     immediate: true,
@@ -143,31 +122,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-	
-	.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>

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

yudao-admin-vue3/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue

@@ -1,64 +1,59 @@
 <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/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
-		<div class="new-main" :style="{
+      class="grid overflow-x-auto"
-        
+      :style="{
+        gridGap: `${property.space}px`,
         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"
-			<div class="new-class relative box-content flex-row flex-wrap overflow-hidden"
+        :key="index"
-				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">
+        <div
-					<el-image fit="cover" :src="property.badge.imgUrl" class="new-img" />
+          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="[
+        <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"
+          <div
-						:style="{ color: property.fields.name.color }">
+            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"
+            <span
-							:style="{ color: property.fields.price.color }">
+              v-if="property.fields.price.show"
+              class="text-12px"
+              :style="{ color: property.fields.price.color }"
+            >
               ￥{{ spu.price }}
             </span>
           </div>
@@ -84,7 +79,7 @@
     if (!props.property.activityId) return
     const activity = await SeckillActivityApi.getSeckillActivity(props.property.activityId)
     if (!activity?.spuId) return
-			spuList.value = await ProductSpuApi.getSpuMiaoShaAdminSpuList()
+    spuList.value = [await ProductSpuApi.getSpu(activity.spuId)]
   },
   {
     immediate: true,
@@ -127,39 +122,4 @@
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-	: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>

yudao-admin-vue3/src/components/DiyEditor/index.vue

@@ -249,7 +249,6 @@ watch(
       const component = componentConfigs[item.id]
       return { ...component, property: item.property }
     })
-	console.log(modelValue,"pageComponents.value")
   },
   {
     immediate: true

yudao-admin-vue3/src/components/DiyEditor/util.ts

@@ -146,7 +146,7 @@ export const PAGE_LIBS = [
     components: [
       'PromotionCombination',
       'PromotionSeckill',
-      // 'PromotionPoint',
+      'PromotionPoint',
       'CouponCard',
       'PromotionArticle'
     ]

yudao-admin-vue3/src/router/modules/remaining.ts

@@ -469,7 +469,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
   {
-    path: '/diy-template/diy',
+    path: '/diy',
     name: 'DiyCenter',
     meta: { hidden: true },
     component: Layout,

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate.vue

@@ -1,10 +1,18 @@
 <template>
-	<DiyEditor v-if="formData && !formLoading" v-model="currentFormData!.property"
+  <DiyEditor
-		:title="templateItems[selectedTemplateItem].name" :libs="libs" :show-page-config="selectedTemplateItem !== 0"
+    v-if="formData && !formLoading"
-		:show-tab-bar="selectedTemplateItem === 0" :show-navigation-bar="selectedTemplateItem !== 0"
+    v-model="currentFormData!.property"
-		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset">
+    :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
+      <el-radio-group
         v-model="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
@@ -14,7 +22,7 @@
             <Icon :icon="item.icon" :size="24" />
           </el-radio-button>
         </el-tooltip>
-      </el-radio-group> -->
+      </el-radio-group>
     </template>
   </DiyEditor>
 </template>
@@ -25,17 +33,12 @@
 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('0')
+const selectedTemplateItem = ref(0)
-	// console.log(selectedTemplateItem.value,'selectedTemplateItemselectedTemplateItem')
 const templateItems = reactive([
   { name: '基础设置', icon: 'ep:iphone' },
   { name: '首页', icon: 'ep:home-filled' },
@@ -58,6 +61,7 @@
   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}`
@@ -73,21 +77,17 @@
 // 模板选项切换
 const handleTemplateItemChange = () => {
   // 编辑模板
-		// if (selectedTemplateItem.value === 0) {
+  if (selectedTemplateItem.value === 0) {
-		//   libs.value = templateLibs
+    libs.value = templateLibs
-		//   currentFormData.value = formData.value
+    currentFormData.value = formData.value
-		//   return
+    return
-		// }
+  }
 
   // 编辑页面
   libs.value = PAGE_LIBS
-		console.log(formData.value!.pages, 'PAGE_LIBS')
+  currentFormData.value = formData.value!.pages.find(
-		// currentFormData.value = formData.value!.pages.find(
+    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
-		//   // (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')
 }
 
 // 提交表单
@@ -97,7 +97,7 @@
   // 提交请求
   formLoading.value = true
   try {
-			if (selectedTemplateItem.value === '0') {
+    if (selectedTemplateItem.value === 0) {
       // 提交模板属性
       await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
     } else {
@@ -148,25 +148,20 @@
 }
 //#endregion
 
-
+/** 初始化 **/
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
 onMounted(async () => {
   resetForm()
-		// if (!currentRoute.value.params.id) {
+  if (!currentRoute.value.params.id) {
-		//   message.warning('参数错误，页面编号不能为空！')
+    message.warning('参数错误，页面编号不能为空！')
-		//   delView(unref(currentRoute))
+    delView(unref(currentRoute))
-		//   return
+    return
-		// }
+  }
+
   // 查询详情
-		// await getPageDetail(currentRoute.value.params.id)
+  await getPageDetail(currentRoute.value.params.id)
-		await getPageDetail(4)
   // 恢复重置前的页面
   recoverPageIndex()
-		currentFormData.value = formData.value!.pages[0]
-
 })
-	
-	// watch(() => route.path, (newPath, oldPath) => {
-	// console.log(newPath,'newPathnewPath');
-	// // handleTemplateItemChange()
-	// }, { immediate: true });
 </script>

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate1.vue

@@ -1,175 +0,0 @@
-<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>

yudao-admin-vue3/src/views/mall/promotion/diy/template/decorate3.vue

@@ -1,175 +0,0 @@
-<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>