初始上传
This commit is contained in:
173
addon/store/component/view/store_show/css/design.css
Executable file
173
addon/store/component/view/store_show/css/design.css
Executable file
@@ -0,0 +1,173 @@
|
||||
@CHARSET "UTF-8";
|
||||
.draggable-element .component-store-show-info .preview-draggable .preview-box {
|
||||
}
|
||||
|
||||
/* 风格一 */
|
||||
.component-store-show-info .style-one, .component-store-show-info .style-three {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-one .info-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-one .store-name {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-one .change {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-one p {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-one .img-wrap, .component-store-show-info .style-two .img-wrap, .component-store-show-info .style-three .img-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 风格二 */
|
||||
.component-store-show-info .style-two {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-two .info-item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-two .store-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-two p {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-two .change {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 风格三 */
|
||||
.component-store-show-info .style-three .info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-three .store-name {
|
||||
margin-left: 8px;
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-three .change {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-three .icon-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-three .icon-wrap img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* 风格四 */
|
||||
.component-store-show-info .style-four {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-four .store-left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-four .store-left-wrap .iconweizhi {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-four .store-left-wrap .layui-icon-down {
|
||||
font-size: 14px;
|
||||
margin-left: 3px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-four .store-right-search {
|
||||
width: 235px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-store-show-info .style-four .store-right-search .iconsousuo2 {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
height: 12px;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.style-list-con-store {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.style-list-con-store .item {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
width: 32%;
|
||||
margin-right: 2%;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ededed;
|
||||
background: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.style-list-con-store .item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.style-list-con-store .item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
94
addon/store/component/view/store_show/design.html
Executable file
94
addon/store/component/view/store_show/design.html
Executable file
@@ -0,0 +1,94 @@
|
||||
<nc-component :data="data[index]" class="component-store-show-info">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
|
||||
<div class="preview-box">
|
||||
<div class="info-list">
|
||||
<div class="info-item style-one" v-if="nc.style == 1">
|
||||
<div class="info-item">
|
||||
<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
|
||||
<span class="change" :style="{ color: nc.textColor }">切换 ></span>
|
||||
<p :style="{ color: nc.textColor }">这里展示门店地址</p>
|
||||
</div>
|
||||
<div class="img-wrap">
|
||||
<img src="{$resource_path}/img/default_store.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item style-three" v-if="nc.style == 2">
|
||||
<div class="info-item">
|
||||
<div class="img-wrap">
|
||||
<img src="{$resource_path}/img/default_store.png" />
|
||||
</div>
|
||||
<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
|
||||
<span class="change" :style="{ color: nc.textColor }">切换 ></span>
|
||||
</div>
|
||||
<div class="icon-wrap">
|
||||
<img src="{$resource_path}/img/sousuo.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-item style-four" v-if="nc.style == 3">
|
||||
<div class="store-left-wrap">
|
||||
<i class="iconfont iconweizhi" :style="{ color: nc.textColor }"></i>
|
||||
<span class="store-name" :style="{ color: nc.textColor }">门店名称</span>
|
||||
<i class="layui-icon layui-icon-down" :style="{ color: nc.textColor }"></i>
|
||||
</div>
|
||||
<div class="store-right-search">
|
||||
<div>商品搜索<i class="iconfont iconsousuo2"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>门店风格</h3>
|
||||
<store-show-style></store-show-style>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 风格弹框 -->
|
||||
<article class="store-style" style="display: none;">
|
||||
<div class="style-list-con-store">
|
||||
<div class="item" :class="{'selected border-color': nc.style == 1}">
|
||||
<img src="{$resource_path}/img/style1.png" />
|
||||
<span class="layui-hide">风格一</span>
|
||||
</div>
|
||||
<div class="item" :class="{'selected border-color': nc.style == 2}">
|
||||
<img src="{$resource_path}/img/style3.png" />
|
||||
<span class="layui-hide">风格二</span>
|
||||
</div>
|
||||
<div class="item" :class="{'selected border-color': nc.style == 3}">
|
||||
<img src="{$resource_path}/img/style4.png" />
|
||||
<span class="layui-hide">风格三</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="style">
|
||||
<input type="hidden" name="style_name" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>门店样式</h3>
|
||||
<color :data="{ field : 'textColor', 'label' : '文本颜色','defaultColor': '#303133' }"></color>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
addon/store/component/view/store_show/img/default_store.png
Executable file
BIN
addon/store/component/view/store_show/img/default_store.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
addon/store/component/view/store_show/img/location.png
Executable file
BIN
addon/store/component/view/store_show/img/location.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 932 B |
BIN
addon/store/component/view/store_show/img/search.png
Executable file
BIN
addon/store/component/view/store_show/img/search.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
BIN
addon/store/component/view/store_show/img/sousuo.png
Executable file
BIN
addon/store/component/view/store_show/img/sousuo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
addon/store/component/view/store_show/img/style1.png
Executable file
BIN
addon/store/component/view/store_show/img/style1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
addon/store/component/view/store_show/img/style2.png
Executable file
BIN
addon/store/component/view/store_show/img/style2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
addon/store/component/view/store_show/img/style3.png
Executable file
BIN
addon/store/component/view/store_show/img/style3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
addon/store/component/view/store_show/img/style4.png
Executable file
BIN
addon/store/component/view/store_show/img/style4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
55
addon/store/component/view/store_show/js/design.js
Executable file
55
addon/store/component/view/store_show/js/design.js
Executable file
@@ -0,0 +1,55 @@
|
||||
var storeShowStyle = '<div>';
|
||||
storeShowStyle += '<div class="layui-form-item">';
|
||||
storeShowStyle += '<label class="layui-form-label sm">选择风格</label>';
|
||||
storeShowStyle += '<div class="layui-input-block">';
|
||||
storeShowStyle += '<div v-if="data.styleName" class="input-text text-color selected-style" @click="selectGoodsStyle()">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
|
||||
storeShowStyle += '<div v-else class="input-text selected-style" @click="selectGoodsStyle()">选择 <i class="layui-icon layui-icon-right"></i></div>';
|
||||
storeShowStyle += '</div>';
|
||||
storeShowStyle += '</div>';
|
||||
storeShowStyle += '</div>';
|
||||
|
||||
Vue.component("store-show-style", {
|
||||
template: storeShowStyle,
|
||||
data: function() {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
}
|
||||
},
|
||||
created:function() {
|
||||
if(!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['elementAngle','componentAngle','elementBgColor','componentBgColor']; //加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = { code: true, message: "" };
|
||||
return res;
|
||||
},
|
||||
selectGoodsStyle: function() {
|
||||
var self = this;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '风格选择',
|
||||
area:['800px','270px'],
|
||||
btn: ['确定', '返回'],
|
||||
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .store-style").html(),
|
||||
success: function(layero, index) {
|
||||
$(".layui-layer-content input[name='style']").val(self.data.style);
|
||||
$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
|
||||
$("body").off("click", ".layui-layer-content .style-list-con-store .item").on("click", ".layui-layer-content .style-list-con-store .item", function () {
|
||||
$(this).addClass("selected border-color").siblings().removeClass("selected border-color");
|
||||
$(".layui-layer-content input[name='style']").val($(this).index() + 1);
|
||||
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
|
||||
});
|
||||
},
|
||||
yes: function (index, layero) {
|
||||
self.data.style = $(".layui-layer-content input[name='style']").val();
|
||||
self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
|
||||
layer.closeAll()
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user