yudao-admin-vue3/src/components/DiyEditor/components/mobile/MenuGridTow/property.vue

@@ -2,32 +2,33 @@
 	<ComponentContainerProperty v-model="formData.style">
 		<!-- 表单 -->
 		<el-form label-width="80px" :model="formData" class="m-t-8px">
-      <el-form-item label="每行数量" prop="column">
+			<!-- <el-form-item label="每行数量" prop="column">
 				<el-radio-group v-model="formData.column">
 				  <el-radio :label="3">3个</el-radio>
 				  <el-radio :label="4">4个</el-radio>
 				  <el-radio :label="5">5个</el-radio>
 				</el-radio-group>
-      </el-form-item>
+			  </el-form-item> -->
 
 			<el-card header="菜单设置" class="property-group" shadow="never">
-        <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
+				<Draggable v-model="formData.list" handle="false">
 					<template #default="{ element }">
-            <el-form-item label="图标" prop="iconUrl">
+						<!-- <el-form-item label="图标" prop="iconUrl">
 						  <UploadImg v-model="element.iconUrl" height="80px" width="80px">
 							<template #tip> 建议尺寸：44 * 44 </template>
 						  </UploadImg>
-            </el-form-item>
+						</el-form-item> -->
 						<el-form-item label="标题" prop="title">
-              <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+							<!-- <InputWithColor v-model="element.title" v-model:color="element.titleColor" /> -->
+							<div>{{element.title}}</div>
 						</el-form-item>
-            <el-form-item label="副标题" prop="subtitle">
+						<!-- <el-form-item label="副标题" prop="subtitle">
               <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
-            </el-form-item>
+            </el-form-item> -->
 						<el-form-item label="链接" prop="url">
 							<AppLinkInput v-model="element.url" />
 						</el-form-item>
-            <el-form-item label="显示角标" prop="badge.show">
+						<!-- <el-form-item label="显示角标" prop="badge.show">
               <el-switch v-model="element.badge.show" />
             </el-form-item>
             <template v-if="element.badge.show">
@@ -40,7 +41,7 @@
               <el-form-item label="背景颜色" prop="badge.bgColor">
                 <ColorInput v-model="element.badge.bgColor" />
               </el-form-item>
-            </template>
+            </template> -->
 					</template>
 				</Draggable>
 			</el-card>
@@ -49,18 +50,58 @@
 </template>
 
 <script setup lang="ts">
-import { usePropertyForm } from '@/components/DiyEditor/util'
+	import { usePropertyForm } from '@/components/DiyEditor/util'
-import {
+	import {
 		EMPTY_MENU_GRID_ITEM_PROPERTY,
 		MenuGridProperty
-} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
+	} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
 
-/** 宫格导航属性面板 */
+	/** 宫格导航属性面板 */
-defineOptions({ name: 'MenuGridProperty' })
+	defineOptions({ name: 'MenuGridProperty' })
 
-const props = defineProps<{ modelValue: MenuGridProperty }>()
+	const props = defineProps<{ modelValue : MenuGridProperty }>()
-const emit = defineEmits(['update:modelValue'])
+	const emit = defineEmits(['update:modelValue'])
-const { formData } = usePropertyForm(props.modelValue, emit)
+	const { formData } = usePropertyForm(props.modelValue, emit)
+	if (formData.value.list.length == 1 || formData.value.list.length == 2 || formData.value.list.length == 3) {
+		formData.value = {
+			column: 3,
+			list: [
+				{
+					title: "今日推荐",
+					url: '/pages/index/page?id=19'
+				},
+				{
+					title: "热门榜单",
+					url: '/pages/index/page?id=21'
+				},
+				{
+					title: "首发新品",
+					url: '/pages/index/page?id=22'
+				},
+				{
+					title: "促销单品",
+					url: '/pages/index/page?id=23'
+				}
+			],
+			style: {
+				bgColor: "#fff",
+				bgType: "color",
+				borderBottomLeftRadius: 8,
+				borderBottomRightRadius: 8,
+				borderRadius: 8,
+				borderTopLeftRadius: 8,
+				borderTopRightRadius: 8,
+				marginBottom: 8,
+				marginLeft: 8,
+				marginRight: 8,
+				padding: 0,
+				paddingBottom: 0,
+				paddingLeft: 0,
+				paddingRight: 0,
+				paddingTop: 0
+			}
+		}
+	}
 </script>
 
 <style scoped lang="scss"></style>

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

@@ -69,10 +69,10 @@
 					</draggable>
 				</el-scrollbar>
 				<!-- 手机底部导航 -->
-				<!-- <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
+				<div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
 					<ComponentContainer :component="tabBarComponent" :show-toolbar="false"
 						:active="selectedComponent?.id === tabBarComponent.id" @click="handleTabBarSelected" />
-				</div> -->
+				</div>
 				<!-- 固定布局的组件 操作按钮区 -->
 				<div class="fixed-component-action-group">
 					<el-tag v-if="showPageConfig" size="large"

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

@@ -2,7 +2,7 @@
 	<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">
+		:preview-url="previewUrl" @save="submitForm" @reset="handleEditorReset" :showTabBar = "false">
 		<template #toolBarLeft>
 			<!-- <el-radio-group
         v-model="selectedTemplateItem"