营销：装修模板，底部导航适配APP

src/components/DiyEditor/components/mobile/TabBar/config.ts

@@ -12,18 +12,24 @@ export interface TabBarProperty {
 
 // 选项属性
 export interface TabBarItemProperty {
-  name: string // 标签名称
+  // 标签文字
-  link: string // 链接
+  text: string
-  iconUrl: string // 默认图标链接
+  // 链接
-  activeIconUrl: string // 选中的图标链接
+  url: string
+  // 默认图标链接
+  iconUrl: string
+  // 选中的图标链接
+  activeIconUrl: string
 }
 
 // 样式
 export interface TabBarStyle {
   // 背景类型
-  backgroundType: 'color' | 'img'
+  bgType: 'color' | 'img'
-  // 背景颜色 或 图片链接
+  // 背景颜色
-  background: string
+  bgColor: string
+  // 图片链接
+  bgImg: string
   // 默认颜色
   color: string
   // 选中的颜色
@@ -38,33 +44,33 @@ export const component = {
   property: {
     theme: 'red',
     style: {
-      backgroundType: 'color',
+      bgType: 'color',
-      background: '#fff',
+      bgColor: '#fff',
       color: '#282828',
       activeColor: '#fc4141'
     },
     items: [
       {
-        name: '首页',
+        text: '首页',
-        link: '/',
+        url: '/pages/index/index',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png'
       },
       {
-        name: '分类',
+        text: '分类',
-        link: '/pages/goods_cate/goods_cate',
+        url: '/pages/index/category?id=3',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png'
       },
       {
-        name: '购物车',
+        text: '购物车',
-        link: '/pages/order_addcart/order_addcart',
+        url: '/pages/index/cart',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png'
       },
       {
-        name: '我的',
+        text: '我的',
-        link: '/pages/user/index',
+        url: '/pages/index/user',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png'
       }

src/components/DiyEditor/components/mobile/TabBar/index.vue

@@ -4,9 +4,9 @@
       class="tab-bar-bg"
       :style="{
         background:
-          property.style.backgroundType === 'color'
+          property.style.bgType === 'color'
-            ? property.style.background
+            ? property.style.bgColor
-            : `url(${property.style.background})`,
+            : `url(${property.style.bgImg})`,
         backgroundSize: '100% 100%',
         backgroundRepeat: 'no-repeat'
       }"
@@ -14,7 +14,7 @@
       <div v-for="(item, index) in property.items" :key="index" class="tab-bar-item">
         <img :src="index === 0 ? item.activeIconUrl : item.iconUrl" alt="" />
         <span :style="{ color: index === 0 ? property.style.activeColor : property.style.color }">
-          {{ item.name }}
+          {{ item.text }}
         </span>
       </div>
     </div>

src/components/DiyEditor/components/mobile/TabBar/property.vue

@@ -2,7 +2,7 @@
   <div class="tab-bar">
     <!-- 表单 -->
     <el-form :model="formData" label-width="80px">
-      <el-form-item label="主题">
+      <el-form-item label="主题" prop="theme">
         <el-select v-model="formData!.theme" @change="handleThemeChange">
           <el-option
             v-for="(theme, index) in THEME_LIST"
@@ -26,24 +26,16 @@
         <ColorInput v-model="formData!.style.activeColor" />
       </el-form-item>
       <el-form-item label="导航背景">
-        <el-radio-group
+        <el-radio-group v-model="formData!.style.bgType">
-          v-model="formData!.style.backgroundType"
-          @change="handleBackgroundTypeChange"
-        >
           <el-radio-button label="color">纯色</el-radio-button>
           <el-radio-button label="img">图片</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="选择颜色" v-if="formData!.style.backgroundType === 'color'">
+      <el-form-item label="选择颜色" v-if="formData!.style.bgType === 'color'">
-        <ColorInput v-model="formData!.style.background" />
+        <ColorInput v-model="formData!.style.bgColor" />
       </el-form-item>
-      <el-form-item label="选择图片" v-if="formData!.style.backgroundType === 'img'">
+      <el-form-item label="选择图片" v-if="formData!.style.bgType === 'img'">
-        <UploadImg
+        <UploadImg v-model="formData!.style.bgImg" width="100%" height="50px" class="min-w-200px">
-          v-model="formData!.style.background"
-          width="100%"
-          height="50px"
-          class="min-w-200px"
-        >
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </el-form-item>
@@ -92,11 +84,11 @@
                   <el-text>选中图片</el-text>
                 </div>
               </div>
-              <el-form-item draggable="false" label-width="0" class="m-b-8px!">
+              <el-form-item prop="text" label-width="0" class="m-b-8px!">
-                <el-input v-model="element.name" placeholder="请输入文字" />
+                <el-input v-model="element.text" placeholder="请输入文字" />
               </el-form-item>
-              <el-form-item draggable="false" label-width="0" class="m-b-0!">
+              <el-form-item prop="url" label-width="0" class="m-b-0!">
-                <el-input v-model="element.link" placeholder="请选择链接" />
+                <el-input v-model="element.url" placeholder="请选择链接" />
               </el-form-item>
             </div>
           </div>
@@ -132,14 +124,6 @@ const props = defineProps<{ modelValue: TabBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
 
-// 缓存背景：当背景类型切换时，防止参数丢失
-const backgroundCache = ref('')
-const handleBackgroundTypeChange = () => {
-  const background = formData.value!.style.background
-  formData.value!.style.background = backgroundCache.value
-  backgroundCache.value = background
-}
-
 /** 添加导航项 */
 const handleAddItem = () => {
   formData?.value?.items?.push({} as TabBarItemProperty)