营销：装修模板，底部导航适配APP
This commit is contained in:
owen
parent
9bd33355e2
commit
3c0f3ceed5
@ -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'
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user