初始上传
This commit is contained in:
71
app/component/view/follow_official_account/css/design.css
Executable file
71
app/component/view/follow_official_account/css/design.css
Executable file
@@ -0,0 +1,71 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
.follow-official-account-wrap{
|
||||
/*position: absolute;*/
|
||||
/*width: 370px;*/
|
||||
/*z-index: 999;*/
|
||||
}
|
||||
|
||||
.follow-official-account-wrap .preview-draggable{
|
||||
/*padding: 0 !important;*/
|
||||
}
|
||||
|
||||
/* 关注公众号 */
|
||||
.site-info-box {
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
/*position: absolute;*/
|
||||
/*width: calc(100% - 20px);*/
|
||||
/*left:0;*/
|
||||
}
|
||||
.site-info-box .site-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.site-info-box .site-info .img-box {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: initial;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.site-info-box .site-info .img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.site-info-box .site-info .info-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
width: 200px;
|
||||
}
|
||||
.site-info-box .site-info span {
|
||||
display: -webkit-box;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.site-info-box .site-info span:nth-child(1) {
|
||||
width: 150px;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
.site-info-box button {
|
||||
width: 90px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-radius: 33px;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
64
app/component/view/follow_official_account/design.html
Executable file
64
app/component/view/follow_official_account/design.html
Executable file
@@ -0,0 +1,64 @@
|
||||
<nc-component :data="data[index]" class="follow-official-account-wrap">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div class="site-info-box" :style="{ }" data-disabled="1">
|
||||
<div class="site-info" data-disabled="1">
|
||||
<div class="img-box" data-disabled="1">
|
||||
<img :src="changeImgUrl('public/static/img/default_img/square.png')" />
|
||||
</div>
|
||||
<div class="info-box" :style="{ color: '#ffffff' }" data-disabled="1">
|
||||
<span class="font-size-base">店铺名称</span>
|
||||
<span>{{ nc.welcomeMsg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="layui-btn layui-btn-primary text-color">关注公众号</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<div class="template-edit-title">
|
||||
<h3>内容设置</h3>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">欢迎语</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.welcomeMsg" placeholder="请输入欢迎语" class="layui-input" maxlength="20">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item checkbox-wrap">
|
||||
<label class="layui-form-label sm">展示开关</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-if="nc.isShow == true">显示</span>
|
||||
<span v-else>隐藏</span>
|
||||
<div v-if="nc.isShow == true" @click="nc.isShow = false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
<div v-else @click="nc.isShow = true" class="layui-unselect layui-form-checkbox" lay-skin="primary">
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux diy-word-aux">该组件只会在微信内部展示，在普画浏览器或者小程序不展示，需要配置微信公众号，同时用户关注后会自动隐藏</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<follow-official-account-sources></follow-official-account-sources>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
38
app/component/view/follow_official_account/js/design.js
Executable file
38
app/component/view/follow_official_account/js/design.js
Executable file
@@ -0,0 +1,38 @@
|
||||
var followOfficialAccountHtml = '<div></div>';
|
||||
|
||||
Vue.component("follow-official-account-sources", {
|
||||
template: followOfficialAccountHtml,
|
||||
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 = ['pageBgColor','componentBgColor','textColor','marginBoth','componentAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// $(".draggable-element .follow-official-account-wrap").css({
|
||||
// top: 86, // 55+20+11
|
||||
// });
|
||||
//
|
||||
// $(".draggable-element .follow-official-account-wrap .edit-attribute").css({
|
||||
// position: 'fixed',
|
||||
// right:15,
|
||||
// top: 55 // layui-header-right 的高度
|
||||
// })
|
||||
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
if (vue.data[index].welcomeMsg.length === 0) {
|
||||
res.code = false;
|
||||
res.message = "请输入欢迎语";
|
||||
}
|
||||
return res;
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user