Skip to content

phsl / admin

Go to a project
Commit 33162a12 by owen
Options

营销：适配商城装修组件【标题栏】

parent 41a404a5
Showing with 120 additions and 117 deletions
src/components/DiyEditor/components/mobile/TitleBar/config.ts
import { DiyComponent } from '@/components/DiyEditor/util' import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
/** 标题栏属性 */ /** 标题栏属性 */
export interface TitleBarProperty { export interface TitleBarProperty {
// 背景图
bgImgUrl: string
// 偏移
marginLeft: number
// 显示位置
textAlign: 'left' | 'center'
// 主标题 // 主标题
title: string title: string
// 副标题 // 副标题
...@@ -12,18 +18,12 @@ export interface TitleBarProperty { ...@@ -12,18 +18,12 @@ export interface TitleBarProperty {
descriptionSize: number descriptionSize: number
// 标题粗细 // 标题粗细
titleWeight: number titleWeight: number
// 显示位置
position: 'left' | 'center'
// 描述粗细 // 描述粗细
descriptionWeight: number descriptionWeight: number
// 标题颜色 // 标题颜色
titleColor: string titleColor: string
// 描述颜色 // 描述颜色
descriptionColor: string descriptionColor: string
// 背景颜色
backgroundColor: string
// 底部分割线
showBottomBorder: false
// 查看更多 // 查看更多
more: { more: {
// 是否显示查看更多 // 是否显示查看更多
...@@ -35,6 +35,8 @@ export interface TitleBarProperty { ...@@ -35,6 +35,8 @@ export interface TitleBarProperty {
// 链接 // 链接
url: string url: string
} }
// 组件样式
style: ComponentStyle
} }
// 定义组件 // 定义组件
...@@ -48,18 +50,20 @@ export const component = { ...@@ -48,18 +50,20 @@ export const component = {
titleSize: 16, titleSize: 16,
descriptionSize: 12, descriptionSize: 12,
titleWeight: 400, titleWeight: 400,
position: 'left', textAlign: 'left',
descriptionWeight: 200, descriptionWeight: 200,
titleColor: 'rgba(50, 50, 51, 10)', titleColor: 'rgba(50, 50, 51, 10)',
descriptionColor: 'rgba(150, 151, 153, 10)', descriptionColor: 'rgba(150, 151, 153, 10)',
backgroundColor: 'rgba(255, 255, 255, 10)',
showBottomBorder: false,
more: { more: {
//查看更多 //查看更多
show: false, show: false,
type: 'icon', type: 'icon',
text: '查看更多', text: '查看更多',
url: '' url: ''
} },
style: {
bgType: 'color',
bgColor: '#fff'
} as ComponentStyle
} }
} as DiyComponent<TitleBarProperty> } as DiyComponent<TitleBarProperty>
src/components/DiyEditor/components/mobile/TitleBar/index.vue
<template> <template>
<div <div class="title-bar">
class="title-bar" <el-image :src="property.bgImgUrl" fit="cover" class="w-full" />
:style="{ <div class="absolute left-0 top-0 w-full">
background: property.backgroundColor,
borderBottom: property.showBottomBorder ? '1px solid #F9F9F9' : '1px solid #fff'
}"
>
<div>
<!-- 标题 --> <!-- 标题 -->
<div <div
:style="{ :style="{
fontSize: `${property.titleSize}px`, fontSize: `${property.titleSize}px`,
fontWeight: property.titleWeight, fontWeight: property.titleWeight,
color: property.titleColor, color: property.titleColor,
textAlign: property.position textAlign: property.textAlign
}" }"
v-if="property.title" v-if="property.title"
> >
...@@ -25,7 +20,7 @@ ...@@ -25,7 +20,7 @@
fontSize: `${property.descriptionSize}px`, fontSize: `${property.descriptionSize}px`,
fontWeight: property.descriptionWeight, fontWeight: property.descriptionWeight,
color: property.descriptionColor, color: property.descriptionColor,
textAlign: property.position textAlign: property.textAlign
}" }"
class="m-t-8px" class="m-t-8px"
v-if="property.description" v-if="property.description"
...@@ -38,10 +33,10 @@ ...@@ -38,10 +33,10 @@
class="more" class="more"
v-show="property.more.show" v-show="property.more.show"
:style="{ :style="{
color: property.more.type === 'text' ? '#38f' : '' color: property.descriptionColor
}" }"
> >
{{ property.more.type === 'icon' ? '' : property.more.text }} <span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
<Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" /> <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
</div> </div>
</div> </div>
...@@ -59,8 +54,6 @@ defineProps<{ property: TitleBarProperty }>() ...@@ -59,8 +54,6 @@ defineProps<{ property: TitleBarProperty }>()
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 20px; min-height: 20px;
padding: 8px 16px;
border: 2px solid #fff;
box-sizing: border-box; box-sizing: border-box;
/* 更多 */ /* 更多 */
......
src/components/DiyEditor/components/mobile/TitleBar/property.vue
<template> <template>
<section class="title-bar"> <ComponentContainerProperty v-model="formData.style">
<el-form label-width="85px" :model="formData" :rules="rules"> <el-form label-width="85px" :model="formData" :rules="rules">
<el-form-item label="主标题" prop="title"> <el-card header="风格" class="property-group" shadow="never">
<el-input <el-form-item label="背景图片" prop="bgImgUrl">
v-model="formData.title" <UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
placeholder="请输入主标题" <template #tip>建议尺寸 750*80</template>
show-word-limit </UploadImg>
maxlength="20" </el-form-item>
/> <el-form-item label="标题位置" prop="textAlign">
</el-form-item> <el-radio-group v-model="formData!.textAlign">
<el-form-item label="副标题" prop="description"> <el-tooltip content="居左" placement="top">
<el-input <el-radio-button label="left">
type="textarea" <Icon icon="ant-design:align-left-outlined" />
v-model="formData.description" </el-radio-button>
placeholder="请输入副标题" </el-tooltip>
maxlength="50" <el-tooltip content="居中" placement="top">
show-word-limit <el-radio-button label="center">
/> <Icon icon="ant-design:align-center-outlined" />
</el-form-item> </el-radio-button>
<el-form-item label="显示位置" prop="position"> </el-tooltip>
<el-radio-group v-model="formData!.position">
<el-tooltip content="居左" placement="top">
<el-radio-button label="left">
<Icon icon="ant-design:align-left-outlined" />
</el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top">
<el-radio-button label="center">
<Icon icon="ant-design:align-center-outlined" />
</el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="标题大小" prop="titleSize">
<el-slider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
</el-form-item>
<el-form-item label="副标题大小" prop="descriptionSize">
<el-slider
v-model="formData.descriptionSize"
:max="60"
:min="10"
show-input
input-size="small"
/>
</el-form-item>
<el-form-item label="标题粗细" prop="titleWeight">
<el-slider
v-model="formData.titleWeight"
:min="100"
:max="900"
:step="100"
show-input
input-size="small"
/>
</el-form-item>
<el-form-item label="副标题粗细" prop="descriptionWeight">
<el-slider
v-model="formData.descriptionWeight"
:min="100"
:max="900"
:step="100"
show-input
input-size="small"
/>
</el-form-item>
<el-form-item label="标题颜色" prop="titleColor">
<ColorInput v-model="formData.titleColor" />
</el-form-item>
<el-form-item label="副标题颜色" prop="descriptionColor">
<ColorInput v-model="formData.descriptionColor" />
</el-form-item>
<el-form-item label="背景颜色" prop="backgroundColor">
<ColorInput v-model="formData.backgroundColor" />
</el-form-item>
<el-form-item label="底部分割线" prop="showBottomBorder">
<el-switch v-model="formData!.showBottomBorder" />
</el-form-item>
<el-form-item label="查看更多" prop="more.show">
<el-checkbox v-model="formData.more.show" />
</el-form-item>
<!-- 更多样式选择 -->
<template v-if="formData.more.show">
<el-form-item label="样式" prop="more.type">
<el-radio-group v-model="formData.more.type">
<el-radio label="text">文字</el-radio>
<el-radio label="icon">图标</el-radio>
<el-radio label="all">文字+图标</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'"> </el-card>
<el-input v-model="formData.more.text" /> <el-card header="主标题" class="property-group" shadow="never">
<el-form-item label="文字" prop="title" label-width="40px">
<InputWithColor
v-model="formData.title"
v-model:color="formData.titleColor"
show-word-limit
maxlength="20"
/>
</el-form-item>
<el-form-item label="大小" prop="titleSize" label-width="40px">
<el-slider
v-model="formData.titleSize"
:max="60"
:min="10"
show-input
input-size="small"
/>
</el-form-item>
<el-form-item label="粗细" prop="titleWeight" label-width="40px">
<el-slider
v-model="formData.titleWeight"
:min="100"
:max="900"
:step="100"
show-input
input-size="small"
/>
</el-form-item>
</el-card>
<el-card header="副标题" class="property-group" shadow="never">
<el-form-item label="文字" prop="description" label-width="40px">
<InputWithColor
v-model="formData.description"
v-model:color="formData.descriptionColor"
show-word-limit
maxlength="50"
/>
</el-form-item>
<el-form-item label="大小" prop="descriptionSize" label-width="40px">
<el-slider
v-model="formData.descriptionSize"
:max="60"
:min="10"
show-input
input-size="small"
/>
</el-form-item>
<el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
<el-slider
v-model="formData.descriptionWeight"
:min="100"
:max="900"
:step="100"
show-input
input-size="small"
/>
</el-form-item> </el-form-item>
<el-form-item label="跳转链接" prop="more.url"> </el-card>
<AppLinkInput v-model="formData.more.url" /> <el-card header="查看更多" class="property-group" shadow="never">
<el-form-item label="是否显示" prop="more.show">
<el-checkbox v-model="formData.more.show" />
</el-form-item> </el-form-item>
</template> <!-- 更多按钮的 样式选择 -->
<template v-if="formData.more.show">
<el-form-item label="样式" prop="more.type">
<el-radio-group v-model="formData.more.type">
<el-radio label="text">文字</el-radio>
<el-radio label="icon">图标</el-radio>
<el-radio label="all">文字+图标</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
<el-input v-model="formData.more.text" />
</el-form-item>
<el-form-item label="跳转链接" prop="more.url">
<AppLinkInput v-model="formData.more.url" />
</el-form-item>
</template>
</el-card>
</el-form> </el-form>
</section> </ComponentContainerProperty>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { TitleBarProperty } from './config' import { TitleBarProperty } from './config'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment