From 3c0f3ceed5f5e3c32d92fc7e4a6970990bc83358 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Fri, 3 Nov 2023 06:47:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E8=A3=85=E4=BF=AE?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=EF=BC=8C=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E9=80=82=E9=85=8DAPP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/TabBar/config.ts        | 40 +++++++++++--------
 .../components/mobile/TabBar/index.vue        |  8 ++--
 .../components/mobile/TabBar/property.vue     | 36 +++++------------
 3 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/TabBar/config.ts b/src/components/DiyEditor/components/mobile/TabBar/config.ts
index 4a570a8e..88d706fe 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/TabBar/config.ts
@@ -12,18 +12,24 @@ export interface TabBarProperty {
 
 // 选项属性
 export interface TabBarItemProperty {
-  name: string // 标签名称
-  link: string // 链接
-  iconUrl: string // 默认图标链接
-  activeIconUrl: string // 选中的图标链接
+  // 标签文字
+  text: string
+  // 链接
+  url: string
+  // 默认图标链接
+  iconUrl: string
+  // 选中的图标链接
+  activeIconUrl: string
 }
 
 // 样式
 export interface TabBarStyle {
   // 背景类型
-  backgroundType: 'color' | 'img'
-  // 背景颜色 或 图片链接
-  background: string
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 图片链接
+  bgImg: string
   // 默认颜色
   color: string
   // 选中的颜色
@@ -38,33 +44,33 @@ export const component = {
   property: {
     theme: 'red',
     style: {
-      backgroundType: 'color',
-      background: '#fff',
+      bgType: 'color',
+      bgColor: '#fff',
       color: '#282828',
       activeColor: '#fc4141'
     },
     items: [
       {
-        name: '首页',
-        link: '/',
+        text: '首页',
+        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: '分类',
-        link: '/pages/goods_cate/goods_cate',
+        text: '分类',
+        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: '购物车',
-        link: '/pages/order_addcart/order_addcart',
+        text: '购物车',
+        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: '我的',
-        link: '/pages/user/index',
+        text: '我的',
+        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'
       }
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
index 266a20c5..647e3369 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -4,9 +4,9 @@
       class="tab-bar-bg"
       :style="{
         background:
-          property.style.backgroundType === 'color'
-            ? property.style.background
-            : `url(${property.style.background})`,
+          property.style.bgType === 'color'
+            ? property.style.bgColor
+            : `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>
diff --git a/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
index 512bb5a8..eefdf54a 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/property.vue
+++ b/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
-          v-model="formData!.style.backgroundType"
-          @change="handleBackgroundTypeChange"
-        >
+        <el-radio-group v-model="formData!.style.bgType">
           <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'">
-        <ColorInput v-model="formData!.style.background" />
+      <el-form-item label="选择颜色" v-if="formData!.style.bgType === 'color'">
+        <ColorInput v-model="formData!.style.bgColor" />
       </el-form-item>
-      <el-form-item label="选择图片" v-if="formData!.style.backgroundType === 'img'">
-        <UploadImg
-          v-model="formData!.style.background"
-          width="100%"
-          height="50px"
-          class="min-w-200px"
-        >
+      <el-form-item label="选择图片" v-if="formData!.style.bgType === 'img'">
+        <UploadImg v-model="formData!.style.bgImg" 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-input v-model="element.name" placeholder="请输入文字" />
+              <el-form-item prop="text" label-width="0" class="m-b-8px!">
+                <el-input v-model="element.text" placeholder="请输入文字" />
               </el-form-item>
-              <el-form-item draggable="false" label-width="0" class="m-b-0!">
-                <el-input v-model="element.link" placeholder="请选择链接" />
+              <el-form-item prop="url" label-width="0" class="m-b-0!">
+                <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)