Skip to content

Commit 0106776

Browse files
lljj-xlljj-x
committed
feat(vue editor): 更新vue editor
1 parent 1f1f983 commit 0106776

File tree

8 files changed

+398
-3
lines changed

8 files changed

+398
-3
lines changed

‎packages/demo/src/vue-editor/views/editor/Editor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -498,7 +498,7 @@
498498
.dragArea {
499499
/* min-height: calc(100vh - var(--site-top-height) - 50px); */
500500
min-height: calc(100vh + 100px);
501-
background: var(--color-white);
501+
background-color: #f5f5f5;
502502
padding: 10px 0;
503503
:global {
504504
.draggableToolItem {

‎packages/demo/src/vue-editor/views/editor/config/defaultItems.js‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ export default [
2323
]
2424
}
2525
},
26+
{
27+
name: 'Text',
28+
value: {
29+
txt: '抢购商品',
30+
txtColor: '#507aa0'
31+
}
32+
},
2633
{
2734
// 默认秒杀商品
2835
name: 'FlashSaleGoodsList',
@@ -119,7 +126,7 @@ export default [
119126
name: 'Text',
120127
value: {
121128
txt: '超值进口新发现',
122-
txtColor: '#000'
129+
txtColor: '#589A6D'
123130
}
124131
},
125132
{
@@ -143,6 +150,58 @@ export default [
143150
}
144151
}
145152
},
153+
{
154+
name: 'CategoryGoods',
155+
value: {
156+
title: '打造爱巢',
157+
subTitle: 'HOME',
158+
banner: {
159+
link: {
160+
imgUrl: 'https://img.alicdn.com/tps/i4/TB1MesKcWmWQ1JjSZPhwu0CJFXa.png',
161+
imgLink: 'https://www.jd.com'
162+
},
163+
bannerTitle: '广告位',
164+
bannerSubTitle: '广告位副标题'
165+
},
166+
goodsList: [
167+
{
168+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i3/3243519086/O1CN016gQ0Ia2GzR82IAhdR_!!0-item_pic.jpg',
169+
imgLink: 'https://www.jd.com'
170+
},
171+
{
172+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i1/2145455856/O1CN01tJoDJ11t85wjbqfVw_!!0-item_pic.jpg',
173+
imgLink: 'https://www.jd.com'
174+
},
175+
{
176+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i1/2750439771/TB14Nr2MVXXXXbMapXXXXXXXXXX_!!0-item_pic.jpg',
177+
imgLink: 'https://www.jd.com'
178+
},
179+
{
180+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i2/2619099633/O1CN01XQNyC82L1xuQm6aeX_!!0-item_pic.jpg',
181+
imgLink: 'https://www.jd.com'
182+
},
183+
{
184+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i1/748159429/O1CN01xeiYck2JWX37gKDJk_!!2-item_pic.png',
185+
imgLink: 'https://www.jd.com'
186+
},
187+
{
188+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i1/3294603858/O1CN01HpuPy31eN0YdGTTkz_!!2-item_pic.png',
189+
imgLink: 'https://www.jd.com'
190+
},
191+
{
192+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i1/2105113961/O1CN01C6b1kj1f8BJxju0i4_!!0-item_pic.jpg',
193+
imgLink: 'https://www.jd.com'
194+
},
195+
{
196+
imgUrl: 'https://gw.alicdn.com/bao/uploaded/i3/670743919/TB1ikrMawnH8KJjSspcXXb3QFXa_!!0-item_pic.jpg',
197+
imgLink: 'https://www.jd.com'
198+
}
199+
]
200+
}
201+
},
202+
{
203+
name: 'CategoryGoods'
204+
},
146205
{
147206
name: 'RecommendedGoodsList'
148207
},

‎packages/demo/src/vue-editor/views/editor/config/tools.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import * as componentPackMultipleImg23 from '../viewComponents/MultipleImg2_3';
2020
// 多图模块 1-2
2121
import * as componentPackMultipleImg13 from '../viewComponents/MultipleImg1_3';
2222

23+
// 分类管区
24+
import * as componentPackCategoryGoods from '../viewComponents/CategoryGoods';
25+
2326
// 推荐
2427
import * as componentPackRecommendedGoodsList from '../viewComponents/RecommendedGoodsList';
2528

@@ -67,6 +70,11 @@ const tools = [
6770
maxNum: 10,
6871
icon: 'el-icon-s-grid',
6972
componentPack: componentPackMultipleImg13
73+
}, {
74+
title: '分类管区',
75+
maxNum: 10,
76+
icon: 'el-icon-s-grid',
77+
componentPack: componentPackCategoryGoods
7078
}, {
7179
title: '纯文本',
7280
maxNum: 20,

‎packages/demo/src/vue-editor/views/editor/viewComponents/CategoryGoods/View.vue‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<template>
2+
<div :class="$style.box">
3+
<div v-if="isNoEmpty" :class="$style.content">
4+
<div :class="$style.titleBox">
5+
<i :class="$style.colorMark"></i>
6+
<span :class="$style.title">{{ formData.title }}</span>
7+
<span :class="$style.subTitle">{{ formData.subTitle }}</span>
8+
</div>
9+
<div :class="$style.contentBox">
10+
<div :class="$style.bannerBox">
11+
<a :href="formData.banner.link.imgLink">
12+
<el-image
13+
:src="formData.banner.link.imgUrl"
14+
:style="{
15+
width: '235px',
16+
height: '618px',
17+
}"
18+
fit="cover"
19+
>
20+
</el-image>
21+
<div :class="$style.bannerText">
22+
<span :class="$style.bannerTitle">{{ formData.banner.bannerTitle }}</span>
23+
<span :class="$style.bannerSubTitle">{{ formData.banner.bannerSubTitle }}</span>
24+
</div>
25+
<div :class="$style.detailWrap">
26+
<img src="https://img.alicdn.com/tfs/TB1IQBtXaagSKJjy0FbXXa.mVXa-68-68.png">
27+
</div>
28+
</a>
29+
</div>
30+
<div :class="$style.goodsList">
31+
<div
32+
v-for="(goodsItem, goodsItemIndex) in formData.goodsList"
33+
:key="goodsItemIndex"
34+
:class="$style.goodsItem"
35+
>
36+
<a :class="$style.goodsLink" :href="goodsItem.imgLink">
37+
<el-image
38+
:class="$style.goodsImg"
39+
:src="goodsItem.imgUrl"
40+
:style="{
41+
width: '185px',
42+
height: '185px',
43+
}"
44+
fit="cover"
45+
alt=""
46+
>
47+
</el-image>
48+
</a>
49+
<div :class="$style.goodsTitle">
50+
商品标题，可以结合具体业务活动商品数据
51+
</div>
52+
<div :class="$style.goodsPrice">
53+
￥69.8
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<GoodsListView
60+
v-else
61+
:line-num="2"
62+
:line-items="5"
63+
title="分类管区"
64+
></GoodsListView>
65+
</div>
66+
</template>
67+
68+
<script>
69+
import GoodsListView from '../../components/GoodsListView';
70+
71+
export default {
72+
name: 'CategoryGoodsView',
73+
components: {
74+
GoodsListView
75+
},
76+
props: {
77+
formData: {
78+
type: Object,
79+
default: () => ({})
80+
}
81+
},
82+
data() {
83+
return {
84+
};
85+
},
86+
computed: {
87+
isNoEmpty() {
88+
const { formData: { goodsList } } = this;
89+
return goodsList && goodsList.length > 0 && goodsList[0].imgUrl;
90+
}
91+
}
92+
};
93+
</script>
94+
95+
<style module>
96+
.titleBox {
97+
padding: 20px 0;
98+
display: flex;
99+
align-items: center;
100+
.colorMark {
101+
display: inline-block;
102+
background-color: #333;
103+
width: 5px;
104+
height: 18px;
105+
vertical-align: middle;
106+
}
107+
.title {
108+
margin-left: 10px;
109+
font-size: 18px;
110+
color: #000;
111+
}
112+
.subTitle {
113+
font-size: 14px;
114+
color: #000;
115+
margin-left: 10px;
116+
}
117+
}
118+
.contentBox {
119+
overflow: hidden;
120+
display: flex;
121+
height: 618px;
122+
justify-content: space-between;
123+
}
124+
.bannerBox {
125+
position: relative;
126+
}
127+
.bannerText {
128+
position: absolute;
129+
vertical-align: middle;
130+
bottom: 20%;
131+
width: 218px;
132+
height: 64px;
133+
line-height: 24px;
134+
font-size: 18px;
135+
text-align: center;
136+
color: #FFF;
137+
.bannerTitle {
138+
box-sizing: border-box;
139+
display: flex;
140+
align-items: center;
141+
background: rgba(0,0,0,.9);
142+
width: 70px;
143+
padding: 0 14px;
144+
height: 64px;
145+
overflow: hidden;
146+
}
147+
.bannerSubTitle {
148+
box-sizing: border-box;
149+
display: flex;
150+
padding: 0 22px;
151+
align-items: center;
152+
left: 70px;
153+
top: 0;
154+
position: absolute;
155+
background: rgba(0,0,0,.6);
156+
overflow: hidden;
157+
width: 128px;
158+
height: 64px;
159+
}
160+
}
161+
.detailWrap {
162+
background-image: linear-gradient(-180deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.36) 100%);
163+
width: 100%;
164+
height: 60px;
165+
position: absolute;
166+
bottom: 0;
167+
left: 0;
168+
img {
169+
position: absolute;
170+
bottom: 15px;
171+
right: 15px;
172+
width: 32px;
173+
height: 32px;
174+
}
175+
}
176+
.goodsList {
177+
width: 938px;
178+
display: flex;
179+
flex-wrap: wrap;
180+
justify-content: space-between;
181+
}
182+
.goodsItem {
183+
width: 220px;
184+
height: 300px;
185+
padding-top: 20px;
186+
box-sizing: border-box;
187+
background-color: #FFFFFF;
188+
border: 1px solid #FFFFFF;;
189+
text-align: center;
190+
}
191+
.goodsImg {
192+
vertical-align: middle;
193+
}
194+
.goodsTitle {
195+
width: 135px;
196+
height: 40px;
197+
font-size: 14px;
198+
color: #333;
199+
line-height: 20px;
200+
overflow: hidden;
201+
margin: 8px auto;
202+
}
203+
.goodsPrice {
204+
font-size: 18px;
205+
color: #FF0036;
206+
line-height: 18px;
207+
margin: 10px auto;
208+
}
209+
</style>

‎packages/demo/src/vue-editor/views/editor/viewComponents/CategoryGoods/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Created by Liu.Jun on 2020/7/25 15:23.
3+
*/
4+
5+
import propsSchema from './schema.json';
6+
import uiSchema from './uiSchema';
7+
8+
const View = () => import('./View.vue');
9+
10+
const NAME = propsSchema.id;
11+
const componentViewName = `${NAME}View`;
12+
13+
export {
14+
componentViewName,
15+
View,
16+
propsSchema,
17+
uiSchema
18+
};

0 commit comments

Comments
 (0)