Skip to content

Commit 8a9644f

Browse files
zhrrobertzhrrobert
committed
create 前台DIY UI组件
1 parent 66e58a1 commit 8a9644f

File tree

347 files changed

+13956
-39
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

347 files changed

+13956
-39
lines changed

‎assets/ep/diycomponent/community_show/css/style.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@CHARSET "UTF-8";
2+
.draggable-element .component-store-show-info .preview-draggable .preview-box {
3+
padding: 10px 0;
4+
margin: 0 15px;
5+
}
6+
7+
.component-store-show-info .info-list {
8+
padding: 0 10px;
9+
}
10+
11+
/* 风格一 */
12+
.component-store-show-info .style-one, .component-store-show-info .style-three{
13+
display: flex;
14+
justify-content: space-between;
15+
}
16+
.component-store-show-info .style-one .info-item{
17+
flex: 1;
18+
}
19+
.component-store-show-info .style-one .store-name{
20+
margin-right: 10px;
21+
font-size: 20px;
22+
}
23+
.component-store-show-info .style-one .change{
24+
font-size: 12px;
25+
}
26+
.component-store-show-info .style-one p{
27+
margin-top: 4px;
28+
font-size: 12px;
29+
}
30+
.component-store-show-info .style-one .img-wrap, .component-store-show-info .style-two .img-wrap, .component-store-show-info .style-three .img-wrap{
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
width: 35px;
35+
height: 35px;
36+
border-radius: 50%;
37+
overflow: hidden;
38+
flex-shrink: 0;
39+
margin: 0 auto;
40+
}
41+
.component-store-show-info .style-one .img-wrap img, .component-store-show-info .style-two .img-wrap img, .component-store-show-info .style-three .img-wrap img{
42+
width: 100%;
43+
height: 100%;
44+
}
45+
.conmunity-name {
46+
font-size: 12px;
47+
}
48+
49+
50+
/* 风格二 */
51+
.component-store-show-info .style-two{
52+
display: flex;
53+
}
54+
.component-store-show-info .style-two .info-item{
55+
margin-left: 10px;
56+
}
57+
.component-store-show-info .style-two .store-name{
58+
font-size: 16px;
59+
}
60+
.component-store-show-info .style-two p{
61+
margin-top: 10px;
62+
font-size: 12px;
63+
}
64+
65+
.component-store-show-info .style-two .change{
66+
margin-left: auto;
67+
align-self: center;
68+
flex-shrink: 0;
69+
}
70+
71+
/* 风格三 */
72+
.component-store-show-info .style-three .info-item{
73+
display: flex;
74+
align-items: center;
75+
}
76+
.component-store-show-info .style-three .store-name{
77+
margin-left: 8px;
78+
margin-right: 15px;
79+
font-size: 16px;
80+
}
81+
.component-store-show-info .style-three .img-wrap {
82+
width: 30px;
83+
height: 30px;
84+
}
85+
.component-store-show-info .style-three .store-name {
86+
font-size: 15px;
87+
}
88+
.component-store-show-info .style-three .change{
89+
font-size: 12px;
90+
}
91+
.component-store-show-info .style-three .store-right-search {
92+
height: 30px;
93+
line-height: 30px;
94+
display: flex;
95+
justify-content: space-between;
96+
padding: 0 20px;
97+
font-size: 12px;
98+
color: #909399;
99+
box-sizing: border-box;
100+
background-color: #ebebeb;
101+
border-radius: 15px;
102+
position: relative;
103+
text-align: center;
104+
}
105+
.component-store-show-info .style-three .store-right-search img {
106+
width: 14px;
107+
margin-right: 5px;
108+
}
109+
110+
/* 风格四 */
111+
.component-store-show-info .style-four {
112+
display: flex;
113+
justify-content: space-between;
114+
align-items: center;
115+
}
116+
117+
.component-store-show-info .style-four .store-left-wrap {
118+
display: flex;
119+
align-items: center;
120+
line-height: 34px;
121+
}
122+
123+
.component-store-show-info .style-four .store-left-wrap .iconweizhi {
124+
font-size: 14px;
125+
color: #303133;
126+
margin-right: 3px;
127+
}
128+
129+
.component-store-show-info .style-four .store-left-wrap .layui-icon-down {
130+
font-size: 14px;
131+
margin-left: 3px;
132+
color: #303133;
133+
}
134+
135+
.component-store-show-info .style-four .store-right-search {
136+
width: 235px;
137+
height: 35px;
138+
line-height: 35px;
139+
display: flex;
140+
justify-content: space-between;
141+
padding: 0 15px;
142+
font-size: 12px;
143+
color: #909399;
144+
box-sizing: border-box;
145+
background-color: #FFFFFF;
146+
border-radius: 18px;
147+
position: relative;
148+
}
149+
150+
.component-store-show-info .style-four .store-right-search .iconsousuo2 {
151+
position: absolute;
152+
right: 15px;
153+
height: 12px;
154+
font-size: 13px;
155+
color: #909399;
156+
}
157+
158+
/* 弹窗 */
159+
.style-list-con-store {
160+
display: flex;
161+
flex-wrap: wrap;
162+
}
163+
.style-list-con-store .style-li-goods{
164+
height: 240px;
165+
line-height: 240px;
166+
width: 32%;
167+
margin-right: 2%;
168+
margin-bottom: 15px;
169+
cursor: pointer;
170+
border: 1px solid #ededed;
171+
background: #f7f8fa;
172+
box-sizing: border-box;
173+
}
174+
.style-list-con-store .style-li-goods img{
175+
max-width: 100%;
176+
}
177+
.style-list-con-store .style-li-goods:nth-child(3n) {
178+
margin-right: 0;
179+
}

‎assets/ep/diycomponent/community_show/img/default_store.png‎

2.32 KB
Loading

‎assets/ep/diycomponent/community_show/img/sousuo.png‎

6.3 KB
Loading

‎assets/ep/diycomponent/community_show/img/style1.jpg‎

8.05 KB
Loading

‎assets/ep/diycomponent/community_show/img/style2.jpg‎

5.75 KB
Loading

‎assets/ep/diycomponent/community_show/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<cm-construct v-bind:data="data[index]" class="component-store-show-info">
2+
3+
<!-- 预览 -->
4+
<template slot="preview">
5+
6+
<div class="preview-box" v-bind:style="{ backgroundColor : nc.backgroundColor }">
7+
<div class="info-list">
8+
<div class="info-item style-one" v-if="nc.style == 1">
9+
<div class="info-item">
10+
<span class="store-name" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">社区名称</span>
11+
<span class="change" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">切换 ></span>
12+
<p :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">这里展示社区地址</p>
13+
</div>
14+
<div class="info-item-r">
15+
<div class="img-wrap">
16+
<img src="{$resourceurl}/community_show/img/default_store.png" />
17+
</div>
18+
<div class="conmunity-name" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">团长昵称</div>
19+
</div>
20+
</div>
21+
22+
<div class="info-item style-three" v-if="nc.style == 2">
23+
<div class="info-item">
24+
<div class="img-wrap">
25+
<img src="{$resourceurl}/community_show/img/default_store.png" />
26+
</div>
27+
<span class="store-name" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">门店名称</span>
28+
<span class="change" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">切换 ></span>
29+
</div>
30+
<div class="store-right-search">
31+
<div><img src="{$resourceurl}/community_show/img/sousuo.png" /> 搜索</div>
32+
</div>
33+
</div>
34+
35+
<div class="info-item style-four" v-if="nc.style == 3">
36+
<div class="store-left-wrap">
37+
<i class="iconfont iconweizhi" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }"></i>
38+
<span class="store-name" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }">门店名称</span>
39+
<i class="layui-icon layui-icon-down" :style="{ color: nc.textColor?nc.textColor:'rgba(0,0,0,0)' }"></i>
40+
</div>
41+
<div class="store-right-search">
42+
<div>商品搜索<i class="iconfont iconsousuo2"></i></div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
48+
</template>
49+
50+
<!-- 编辑 -->
51+
<template slot="edit">
52+
<template v-if="nc.lazyLoad">
53+
<store-show-style></store-show-style>
54+
</template>
55+
56+
57+
<!-- 商品列表风格弹框 -->
58+
<div class="goods-list-style" style="display: none;">
59+
<div class="style-list-goods layui-form">
60+
<div class="style-list-con-store">
61+
<div class="style-li-goods" v-bind:class="{'selected ns-border-color': nc.style == 1}">
62+
<img src="{$resourceurl}/community_show/img/style1.jpg" />
63+
<span class="layui-hide">风格一</span>
64+
</div>
65+
<div class="style-li-goods" v-bind:class="{'selected ns-border-color': nc.style == 2}">
66+
<img src="{$resourceurl}/community_show/img/style2.jpg" />
67+
<span class="layui-hide">风格二</span>
68+
</div>
69+
</div>
70+
71+
<input type="hidden" name="style">
72+
<input type="hidden" name="style_name" />
73+
74+
</div>
75+
</div>
76+
</template>
77+
78+
<!-- 资源 -->
79+
<template slot="resource">
80+
81+
<css src="{$resourceurl}/community_show/css/style.css"></css>
82+
<js src="{$resourceurl}/community_show/js/style.js"></js>
83+
84+
</template>
85+
86+
</cm-construct>

‎assets/ep/diycomponent/community_show/js/style.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
var storeShowStyle = '<div>'
2+
storeShowStyle += '<div class="layui-form-item">';
3+
storeShowStyle += '<label class="layui-form-label sm">选择风格</label>';
4+
storeShowStyle += '<div class="layui-input-block">';
5+
storeShowStyle += '<div v-if="data.styleName" class="ns-input-text ns-text-color selected-style" v-on:click="selectGoodsStyle">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
6+
storeShowStyle += '<div v-else class="ns-input-text selected-style" v-on:click="selectGoodsStyle">选择 <i class="layui-icon layui-icon-right"></i></div>';
7+
storeShowStyle += '</div>';
8+
storeShowStyle += '</div>';
9+
storeShowStyle += '<color v-bind:data="{ defaultcolor: \'#333333\' }"></color>';
10+
storeShowStyle += '<color v-bind:data="{ field : \'backgroundColor\', label : \'背景颜色\' }"></color>';
11+
storeShowStyle += '</div>';
12+
13+
Vue.component("store-show-style", {
14+
template: storeShowStyle,
15+
data: function() {
16+
return {
17+
data: this.$parent.data,
18+
}
19+
},
20+
created:function() {
21+
if(!this.$parent.data.verify) this.$parent.data.verify = [];
22+
this.$parent.data.verify.push(this.verify);//加载验证方法
23+
},
24+
methods: {
25+
verify: function () {
26+
var res = { code: true, message: "" };
27+
return res;
28+
},
29+
selectGoodsStyle: function() {
30+
var self = this;
31+
layer.open({
32+
type: 1,
33+
title: '风格选择',
34+
area:['930px','630px'],
35+
btn: ['确定', '返回'],
36+
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .goods-list-style").html(),
37+
success: function(layero, index) {
38+
$(".layui-layer-content input[name='style']").val(self.data.style);
39+
$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
40+
$("body").on("click", ".layui-layer-content .style-list-con-store .style-li-goods", function () {
41+
$(this).addClass("selected ns-border-color").siblings().removeClass("selected ns-border-color");
42+
$(".layui-layer-content input[name='style']").val($(this).index() + 1);
43+
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
44+
});
45+
},
46+
yes: function (index, layero) {
47+
self.data.style = $(".layui-layer-content input[name='style']").val();
48+
self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
49+
layer.closeAll()
50+
}
51+
});
52+
},
53+
}
54+
});

0 commit comments

Comments
 (0)