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 @@
- {{ item.name }} + {{ item.text }}
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 @@
- + - + 纯色 图片 - - + + - - + + @@ -92,11 +84,11 @@ 选中图片
- - + + - - + + @@ -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)