Skip to content

Commit 33162a1

Browse files
owen118zowen118z
committed
营销：适配商城装修组件【标题栏】
1 parent 41a404a commit 33162a1

File tree

3 files changed

+120
-117
lines changed

3 files changed

+120
-117
lines changed

‎src/components/DiyEditor/components/mobile/TitleBar/config.ts

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { DiyComponent } from '@/components/DiyEditor/util'
1+
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
22

33
/** 标题栏属性 */
44
export interface TitleBarProperty {
5+
// 背景图
6+
bgImgUrl: string
7+
// 偏移
8+
marginLeft: number
9+
// 显示位置
10+
textAlign: 'left' | 'center'
511
// 主标题
612
title: string
713
// 副标题
@@ -12,18 +18,12 @@ export interface TitleBarProperty {
1218
descriptionSize: number
1319
// 标题粗细
1420
titleWeight: number
15-
// 显示位置
16-
position: 'left' | 'center'
1721
// 描述粗细
1822
descriptionWeight: number
1923
// 标题颜色
2024
titleColor: string
2125
// 描述颜色
2226
descriptionColor: string
23-
// 背景颜色
24-
backgroundColor: string
25-
// 底部分割线
26-
showBottomBorder: false
2727
// 查看更多
2828
more: {
2929
// 是否显示查看更多
@@ -35,6 +35,8 @@ export interface TitleBarProperty {
3535
// 链接
3636
url: string
3737
}
38+
// 组件样式
39+
style: ComponentStyle
3840
}
3941

4042
// 定义组件
@@ -48,18 +50,20 @@ export const component = {
4850
titleSize: 16,
4951
descriptionSize: 12,
5052
titleWeight: 400,
51-
position: 'left',
53+
textAlign: 'left',
5254
descriptionWeight: 200,
5355
titleColor: 'rgba(50, 50, 51, 10)',
5456
descriptionColor: 'rgba(150, 151, 153, 10)',
55-
backgroundColor: 'rgba(255, 255, 255, 10)',
56-
showBottomBorder: false,
5757
more: {
5858
//查看更多
5959
show: false,
6060
type: 'icon',
6161
text: '查看更多',
6262
url: ''
63-
}
63+
},
64+
style: {
65+
bgType: 'color',
66+
bgColor: '#fff'
67+
} as ComponentStyle
6468
}
6569
} as DiyComponent<TitleBarProperty>

‎src/components/DiyEditor/components/mobile/TitleBar/index.vue

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
<template>
2-
<div
3-
class="title-bar"
4-
:style="{
5-
background: property.backgroundColor,
6-
borderBottom: property.showBottomBorder ? '1px solid #F9F9F9' : '1px solid #fff'
7-
}"
8-
>
9-
<div>
2+
<div class="title-bar">
3+
<el-image :src="property.bgImgUrl" fit="cover" class="w-full" />
4+
<div class="absolute left-0 top-0 w-full">
105
<!-- 标题 -->
116
<div
127
:style="{
138
fontSize: `${property.titleSize}px`,
149
fontWeight: property.titleWeight,
1510
color: property.titleColor,
16-
textAlign: property.position
11+
textAlign: property.textAlign
1712
}"
1813
v-if="property.title"
1914
>
@@ -25,7 +20,7 @@
2520
fontSize: `${property.descriptionSize}px`,
2621
fontWeight: property.descriptionWeight,
2722
color: property.descriptionColor,
28-
textAlign: property.position
23+
textAlign: property.textAlign
2924
}"
3025
class="m-t-8px"
3126
v-if="property.description"
@@ -38,10 +33,10 @@
3833
class="more"
3934
v-show="property.more.show"
4035
:style="{
41-
color: property.more.type === 'text' ? '#38f' : ''
36+
color: property.descriptionColor
4237
}"
4338
>
44-
{{ property.more.type === 'icon' ? '' : property.more.text }}
39+
<span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
4540
<Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
4641
</div>
4742
</div>
@@ -59,8 +54,6 @@ defineProps<{ property: TitleBarProperty }>()
5954
position: relative;
6055
width: 100%;
6156
min-height: 20px;
62-
padding: 8px 16px;
63-
border: 2px solid #fff;
6457
box-sizing: border-box;
6558
6659
/* 更多 */

‎src/components/DiyEditor/components/mobile/TitleBar/property.vue

Lines changed: 98 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,108 @@
11
<template>
2-
<section class="title-bar">
2+
<ComponentContainerProperty v-model="formData.style">
33
<el-form label-width="85px" :model="formData" :rules="rules">
4-
<el-form-item label="主标题" prop="title">
5-
<el-input
6-
v-model="formData.title"
7-
placeholder="请输入主标题"
8-
show-word-limit
9-
maxlength="20"
10-
/>
11-
</el-form-item>
12-
<el-form-item label="副标题" prop="description">
13-
<el-input
14-
type="textarea"
15-
v-model="formData.description"
16-
placeholder="请输入副标题"
17-
maxlength="50"
18-
show-word-limit
19-
/>
20-
</el-form-item>
21-
<el-form-item label="显示位置" prop="position">
22-
<el-radio-group v-model="formData!.position">
23-
<el-tooltip content="居左" placement="top">
24-
<el-radio-button label="left">
25-
<Icon icon="ant-design:align-left-outlined" />
26-
</el-radio-button>
27-
</el-tooltip>
28-
<el-tooltip content="居中" placement="top">
29-
<el-radio-button label="center">
30-
<Icon icon="ant-design:align-center-outlined" />
31-
</el-radio-button>
32-
</el-tooltip>
33-
</el-radio-group>
34-
</el-form-item>
35-
<el-form-item label="标题大小" prop="titleSize">
36-
<el-slider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
37-
</el-form-item>
38-
<el-form-item label="副标题大小" prop="descriptionSize">
39-
<el-slider
40-
v-model="formData.descriptionSize"
41-
:max="60"
42-
:min="10"
43-
show-input
44-
input-size="small"
45-
/>
46-
</el-form-item>
47-
<el-form-item label="标题粗细" prop="titleWeight">
48-
<el-slider
49-
v-model="formData.titleWeight"
50-
:min="100"
51-
:max="900"
52-
:step="100"
53-
show-input
54-
input-size="small"
55-
/>
56-
</el-form-item>
57-
<el-form-item label="副标题粗细" prop="descriptionWeight">
58-
<el-slider
59-
v-model="formData.descriptionWeight"
60-
:min="100"
61-
:max="900"
62-
:step="100"
63-
show-input
64-
input-size="small"
65-
/>
66-
</el-form-item>
67-
<el-form-item label="标题颜色" prop="titleColor">
68-
<ColorInput v-model="formData.titleColor" />
69-
</el-form-item>
70-
<el-form-item label="副标题颜色" prop="descriptionColor">
71-
<ColorInput v-model="formData.descriptionColor" />
72-
</el-form-item>
73-
<el-form-item label="背景颜色" prop="backgroundColor">
74-
<ColorInput v-model="formData.backgroundColor" />
75-
</el-form-item>
76-
<el-form-item label="底部分割线" prop="showBottomBorder">
77-
<el-switch v-model="formData!.showBottomBorder" />
78-
</el-form-item>
79-
<el-form-item label="查看更多" prop="more.show">
80-
<el-checkbox v-model="formData.more.show" />
81-
</el-form-item>
82-
<!-- 更多样式选择 -->
83-
<template v-if="formData.more.show">
84-
<el-form-item label="样式" prop="more.type">
85-
<el-radio-group v-model="formData.more.type">
86-
<el-radio label="text">文字</el-radio>
87-
<el-radio label="icon">图标</el-radio>
88-
<el-radio label="all">文字+图标</el-radio>
4+
<el-card header="风格" class="property-group" shadow="never">
5+
<el-form-item label="背景图片" prop="bgImgUrl">
6+
<UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
7+
<template #tip>建议尺寸 750*80</template>
8+
</UploadImg>
9+
</el-form-item>
10+
<el-form-item label="标题位置" prop="textAlign">
11+
<el-radio-group v-model="formData!.textAlign">
12+
<el-tooltip content="居左" placement="top">
13+
<el-radio-button label="left">
14+
<Icon icon="ant-design:align-left-outlined" />
15+
</el-radio-button>
16+
</el-tooltip>
17+
<el-tooltip content="居中" placement="top">
18+
<el-radio-button label="center">
19+
<Icon icon="ant-design:align-center-outlined" />
20+
</el-radio-button>
21+
</el-tooltip>
8922
</el-radio-group>
9023
</el-form-item>
91-
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
92-
<el-input v-model="formData.more.text" />
24+
</el-card>
25+
<el-card header="主标题" class="property-group" shadow="never">
26+
<el-form-item label="文字" prop="title" label-width="40px">
27+
<InputWithColor
28+
v-model="formData.title"
29+
v-model:color="formData.titleColor"
30+
show-word-limit
31+
maxlength="20"
32+
/>
33+
</el-form-item>
34+
<el-form-item label="大小" prop="titleSize" label-width="40px">
35+
<el-slider
36+
v-model="formData.titleSize"
37+
:max="60"
38+
:min="10"
39+
show-input
40+
input-size="small"
41+
/>
42+
</el-form-item>
43+
<el-form-item label="粗细" prop="titleWeight" label-width="40px">
44+
<el-slider
45+
v-model="formData.titleWeight"
46+
:min="100"
47+
:max="900"
48+
:step="100"
49+
show-input
50+
input-size="small"
51+
/>
52+
</el-form-item>
53+
</el-card>
54+
<el-card header="副标题" class="property-group" shadow="never">
55+
<el-form-item label="文字" prop="description" label-width="40px">
56+
<InputWithColor
57+
v-model="formData.description"
58+
v-model:color="formData.descriptionColor"
59+
show-word-limit
60+
maxlength="50"
61+
/>
62+
</el-form-item>
63+
<el-form-item label="大小" prop="descriptionSize" label-width="40px">
64+
<el-slider
65+
v-model="formData.descriptionSize"
66+
:max="60"
67+
:min="10"
68+
show-input
69+
input-size="small"
70+
/>
71+
</el-form-item>
72+
<el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
73+
<el-slider
74+
v-model="formData.descriptionWeight"
75+
:min="100"
76+
:max="900"
77+
:step="100"
78+
show-input
79+
input-size="small"
80+
/>
9381
</el-form-item>
94-
<el-form-item label="跳转链接" prop="more.url">
95-
<AppLinkInput v-model="formData.more.url" />
82+
</el-card>
83+
<el-card header="查看更多" class="property-group" shadow="never">
84+
<el-form-item label="是否显示" prop="more.show">
85+
<el-checkbox v-model="formData.more.show" />
9686
</el-form-item>
97-
</template>
87+
<!-- 更多按钮的 样式选择 -->
88+
<template v-if="formData.more.show">
89+
<el-form-item label="样式" prop="more.type">
90+
<el-radio-group v-model="formData.more.type">
91+
<el-radio label="text">文字</el-radio>
92+
<el-radio label="icon">图标</el-radio>
93+
<el-radio label="all">文字+图标</el-radio>
94+
</el-radio-group>
95+
</el-form-item>
96+
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
97+
<el-input v-model="formData.more.text" />
98+
</el-form-item>
99+
<el-form-item label="跳转链接" prop="more.url">
100+
<AppLinkInput v-model="formData.more.url" />
101+
</el-form-item>
102+
</template>
103+
</el-card>
98104
</el-form>
99-
</section>
105+
</ComponentContainerProperty>
100106
</template>
101107
<script setup lang="ts">
102108
import { TitleBarProperty } from './config'

0 commit comments

Comments
 (0)