Skip to content

E
ElectricitySheep
Commit 2352d021 authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huangyuanyuan/electricitysheep

parents da61ea06 12f51a86
Hide whitespace changes
Inline Side-by-side
Showing with 832 additions and 68 deletions
src/components/common/NavigationLinks.vue 0 → 100644
View file @ 2352d021
<style>
</style>
<template>
<div>
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="导航名称">
<template slot-scope="scope">{{ scope.row.NavIconName }}</template>
</el-table-column>
<el-table-column prop="name" label="导航链接">
<template slot-scope="scope">{{ scope.row.NavIconUrl }}</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange"
:page-size="msg.pageSize" layout="prev, pager, next" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
dataList: [],
msg: {
pageIndex: 1,
pageSize: 15,
NavIconName: "",
MallBaseId: 0,
},
total: 0,
navArr:[]
};
},
created() {
},
methods: {
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList() {
this.apipost("/api/Tenant/GetMiniProgrameNaviconPage", this.msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
console.log(this.dataList,'datalist');
} else {
this.Info(res.data.message);
}
})
},
handleSelectionChange(val){
this.navArr=val;
},
getChooseLink(){
var newArr=[];
this.navArr.forEach(x=>{
let obj={
icon:x.NavIconImg,
name:x.NavIconName,
url:x.NavIconUrl,
openType:'navigate',
key:'diy'
}
newArr.push(obj);
})
return newArr;
}
},
mounted() {
this.getList();
}
};
</script>
src/components/sallCenter/plugin/banner.vue 0 → 100644
View file @ 2352d021
<style>
.banner-container{
background-color: #fff;
}
.banner-container .el-carousel{
height:100%;
}
.banner-container .el-carousel__container{
height:100%;
}
.bannerStyle-item {
width: 100px;
border: 1px solid #ebeef5;
cursor: pointer;
padding: 5px;
line-height: normal;
text-align: center;
color: #606266;
}
.banner_active{
border-color: #00a0e9;
color: #409EFF;
}
.banner-style-1 {
background: #e6f4ff;
display: block;
height: 50px;
margin: 0 auto 5px;
position: relative;
}
.banner-style-2{
display: block;
height: 50px;
margin: 0 auto 5px;
position: relative;
}
.banner-style-2 > div {
background: #e6f4ff;
position: absolute;
left: 0;
top: 10%;
height: 50px;
width: 100%;
z-index: 0;
zoom: .75;
}
.banner-style-2 > div:last-child {
left: 15%;
zoom: 1;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
z-index: 1;
width: 70%;
top: 0;
}
.banner-edit-item {
border: 1px solid #dcdfe6;
padding: 5px;
margin-bottom: 5px;
}
.navapp-image-upload .pic-box{
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.banner-edit-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.navapp-image-upload .pic-box .size-tip {
line-height: 1.35;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
}
.navapp-image-upload .pic-box i {
font-size: 22px;
color: #909399;
}
</style>
<template>
<div :class="{'active':banData.isCked}">
<div class="diy-component-options" v-if="banData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="banner-container" :style="{height:banData.data.height+'px'}">
<el-carousel :interval="3000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="diy-component-edit" v-if="banData.isCked">
<el-form label-width="100px;">
<el-form-item label="样式">
<div flex="dir:left">
<div class="bannerStyle-item banner_active">
<div class="banner-style-1"></div>
<div>样式1</div>
</div>
<div class="bannerStyle-item" style="margin-left:5px;">
<div flex class="banner-style-2">
<div></div>
<div></div>
</div>
<div>样式2</div>
</div>
</div>
</el-form-item>
<el-form-item label="填充方式">
<el-radio-group v-model="banData.data.fill">
<el-radio :label="0">留白</el-radio>
<el-radio :label="1">填充</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="高度">
<el-input type="number" size="small" v-model="banData.data.height">
<template slot="append">px</template>
</el-input>
</el-form-item>
<el-form-item label="拉取轮播图">
<el-button size="small" >选择</el-button>
</el-form-item>
<el-form-item label="轮播图">
<div flex="dir:top">
<div class="banner-edit-item" v-for="(item,index) in banData.data.banners" :key="index">
<div class="banner-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delBanner(index)" style="top: -6px; right: -31px;"></el-button>
</div>
<div flex="box:first">
<div>
<div class="navapp-image-upload" style="margin-right:5px;">
<div flex="main:center cross:center" class="pic-box" :style="{backgroundImage:'url(' + item.picUrl + ')'}">
<i class="el-icon-picture-outline" v-if="item.picUrl==''"></i>
<div class="size-tip">720 × 250</div>
</div>
</div>
</div>
<div>
<div>
<el-input type="text" v-model="item.url" placeholder="点击选择链接" size="small">
<el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
</el-input>
</div>
</div>
</div>
</div>
</div>
<el-button size="small" @click="addBanner()">添加轮播图</el-button>
</el-form-item>
</el-form>
</div>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMeun ref="chooseMeun"></chooseMeun>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import chooseMeun from "../../common/chooseMeun.vue";
export default {
props: ["banData","index","dataLeng"],
data() {
return {
isShowLink:false,
commonIndex:0,
};
},
components: {
chooseMeun,
},
created() {
},
methods: {
//添加轮播图
addBanner(){
let obj={
picUrl:'',
url:'',
openType:''
}
this.banData.data.banners.push(obj);
},
//删除banner
delBanner(index){
this.banData.data.banners.splice(index,1);
},
//选择链接
getMyChoice(index){
this.isShowLink=true;
this.commonIndex=index;
},
//获取选择链接
getChoiceLink(){
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.banData.data.banners[this.commonIndex].url=obj.PageUrl;
this.isShowLink = false;
},
},
mounted() {
}
};
</script>
\ No newline at end of file
src/components/sallCenter/plugin/navigationIcon.vue 0 → 100644
View file @ 2352d021
<style>
.diynav-container {
min-height: 100px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.Headernav-item {
text-align: center;
font-size: 24px;
padding: 20px 0;
}
.Navabout-text {
color: #909399;
font-size: 12px;
margin-top: -10px;
}
.navigation_pic_boxDiv {
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.navigation_pic_boxDiv i {
font-size: 22px;
color: #909399;
}
.divbg_position {
width: 170px;
height: 180px;
}
.divbg_position > div {
height: 50px;
width: 50px;
margin-bottom: 10px;
cursor: pointer;
background-color: #F5F7F9;
}
.bg_active{
background-color: #E6F4FF;
border: 2px dashed #5CB3FD;
}
.edit-nav-item {
border: 1px solid #e2e2e2;
line-height: normal;
padding: 5px;
margin-bottom: 5px;
}
.nav-edit-options {
position: relative;
}
.navapp-image-upload{
display: inline-block;
margin-right: 5px;
}
.nav-edit-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.navapp-image-upload .pic-box {
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.navapp-image-upload .pic-box i {
font-size: 22px;
color: #909399;
}
.navapp-image-upload .pic-box .size-tip {
line-height: 1.35;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
}
.navapp-image-upload .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.navapp-image-upload .image-delete i{
font-size: 12px;
color: #fff;
}
.navapp-image-upload:hover .image-delete {
visibility: visible;
}
.Headernav-item img {
display: block;
width: 88px;
height: 88px;
margin: 0 auto 5px auto;
}
.Headernav-item > div {
height: 25px;
line-height: 25px;
}
.navigation_pic_boxDiv .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.navigation_pic_boxDiv:hover .image-delete{
visibility: visible;
}
.navigation_pic_boxDiv .image-delete i{
font-size: 12px;
color: #fff;
}
</style>
<template>
<div :class="{'active':navData.isCked}">
<div class="diy-component-options" v-if="navData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="diynav-container" :style="{backgroundColor:navData.data.backgroundColor,overflowX:navData.data.scroll?'auto':'hidden',backgroundPosition:bgPostion,
backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}">
<div flex="dir:left" style="width:750px;flex-wrap:wrap;">
<div class="Headernav-item" v-for="(item,index) in navData.data.navs" :key="index" :style="{width:getNavWidth(navData.data.columns)}">
<img :src="item.icon"/>
<div style="color: rgb(53, 53, 53);">{{item.name}}</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="navData.isCked">
<el-form label-width="100px">
<el-form-item label="每页行数" size="small">
<el-input type="number" :min="1" :max="100" v-model="navData.data.rows"></el-input>
</el-form-item>
<el-form-item label="每行个数">
<el-radio-group v-model="navData.data.columns">
<el-radio :label="3">3</el-radio>
<el-radio :label="4">4</el-radio>
<el-radio :label="5">5</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="左右滑动">
<el-switch v-model="navData.data.scroll"></el-switch>
</el-form-item>
<el-form-item label="拉取商城导航">
<el-button size="small" @click="isShowLink=true">选择</el-button>
</el-form-item>
<el-form-item label="导航图标">
<div flex="dir:top">
<div class="edit-nav-item" v-for="(item,index) in navData.data.navs" :key="index">
<div class="nav-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delIcon(index)" style="top: -6px; right: -31px;"></el-button>
</div>
<div flex="dir:left box:first cross:center">
<div>
<div class="navapp-image-upload">
<div flex="main:center cross:center" class="pic-box" :style="{backgroundImage:'url(' + item.icon + ')'}">
<i class="el-icon-picture-outline" v-if="item.icon==''"></i>
<div class="size-tip">88 × 88</div>
</div>
</div>
</div>
<div>
<div style="margin-bottom:5px;">
<el-input type="text" placeholder="名称" v-model="item.name" size="small"></el-input>
</div>
<div>
<el-input type="text" v-model="item.url" placeholder="点击选择链接" size="small">
<el-button slot="append" @click="getMyChoice(index)">选择链接</el-button>
</el-input>
</div>
</div>
</div>
</div>
</div>
<el-button size="small" @click="addNavigatiton()">添加图标</el-button>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="navData.data.backgroundColor" size="small"></el-color-picker>
<el-input type="text" v-model="navData.data.backgroundColor" size="small" style="width: 80px; margin-right: 25px;"></el-input>
</el-form-item>
<el-form-item label="背景图片">
<el-switch v-model="navData.data.showImg"></el-switch>
<div class="Navabout-text">当前组件高度为156px,宽750px</div>
</el-form-item>
<el-form-item label="上传背景" v-if="navData.data.showImg">
<div style="line-height:normal;display:inline-block;">
<div class="navigation_pic_boxDiv" @click="choicImg=true" flex="main:center cross:center" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}">
<i class="el-icon-picture-outline" v-if="navData.data.backgroundPicUrl==''"></i>
<el-button type="danger" class="image-delete" v-if="navData.data.backgroundPicUrl!=''" size="mini" icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl=''" circle></el-button>
</div>
</div>
</el-form-item>
<el-form-item label="图片位置" v-if="navData.data.showImg">
<div flex="main:justify wrap:wrap" class="divbg_position">
<div :class="{'bg_active':navData.data.position==1}" @click="navData.data.position=1,selectPosition('left top')"></div>
<div :class="{'bg_active':navData.data.position==2}" @click="navData.data.position=2,selectPosition('center top')"></div>
<div :class="{'bg_active':navData.data.position==3}" @click="navData.data.position=3,selectPosition('right top')"></div>
<div :class="{'bg_active':navData.data.position==4}" @click="navData.data.position=4,selectPosition('left center')"></div>
<div :class="{'bg_active':navData.data.position==5}" @click="navData.data.position=5,selectPosition('center center')"></div>
<div :class="{'bg_active':navData.data.position==6}" @click="navData.data.position=6,selectPosition('right center')"></div>
<div :class="{'bg_active':navData.data.position==7}" @click="navData.data.position=7,selectPosition('left bottom')"></div>
<div :class="{'bg_active':navData.data.position==8}" @click="navData.data.position=8,selectPosition('center bottom')"></div>
<div :class="{'bg_active':navData.data.position==9}" @click="navData.data.position=9,selectPosition('right bottom')"></div>
</div>
</el-form-item>
<el-form-item label="填充方式" v-if="navData.data.showImg">
<el-radio-group v-model="navData.data.mode">
<el-radio :label="1">充满</el-radio>
<el-radio :label="2">左右平铺</el-radio>
<el-radio :label="3">上下平铺</el-radio>
<el-radio :label="4">平铺满</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="背景图宽" v-if="navData.data.mode!=1">
<el-slider v-model="navData.data.backgroundWidth" show-input :show-input-controls='false' style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div>
</el-form-item>
<el-form-item label="背景图高" v-if="navData.data.mode!=1">
<el-slider v-model="navData.data.backgroundHeight" show-input :show-input-controls='false' style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker v-model="navData.data.color" size="small"></el-color-picker>
<el-input type="text" v-model="navData.data.color" size="small" style="width: 80px; margin-right: 25px;"></el-input>
</el-form-item>
</el-form>
</div>
<el-dialog title="导航链接" :visible.sync="isShowNavLink" width="800px">
<Navigation ref="Navigation"></Navigation>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowNavLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getMyLink()">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMeun ref="chooseMeun"></chooseMeun>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import Navigation from "../../common/NavigationLinks.vue";
import chooseMeun from "../../common/chooseMeun.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["navData","index","dataLeng"],
data() {
return {
bgPostion:'',
//宽度
navWidth:'',
isShowNavLink:false,
//弹窗
isShowLink:false,
//数组下标
commonIndex:0,
//选择图片弹窗
choicImg:false,
};
},
components: {
Navigation,
chooseMeun,
ChooseImg
},
created() {
},
methods: {
//切换背景位置
selectPosition(po){
this.bgPostion=po;
},
//改变宽度
getNavWidth(w){
let str=''
if(w==3){
str='33.3333%'
}else if(w==4){
str='25%'
}else{
str='20%'
}
return str;
},
//添加导航图标
addNavigatiton(){
let obj={
icon:'',
name:'',
url:'',
openType:'navigate',
key:'diy'
}
this.navData.data.navs.push(obj);
},
//删除导航图标
delIcon(index){
this.navData.data.navs.splice(index,1);
},
//点击确定获取linK
getMyLink(){
var ckedArr = this.$refs.Navigation.getChooseLink();
this.navData.data.navs = this.navData.data.navs.concat(ckedArr);
this.isShowNavLink=false;
},
getMyChoice(index){
this.isShowLink=true;
this.commonIndex=index;
},
//获取选择链接
getChoiceLink(){
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.navData.data.navs[this.commonIndex].url=obj.PageUrl;
this.isShowLink = false;
},
//选择图片
SelectId(msg){
this.navData.data.backgroundPicUrl=msg.url;
this.choicImg=false;
},
//向父组件传值 并调用排序
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
}
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/search.vue
View file @ 2352d021
<style>
.diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right:20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409EFF;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
.diy-search {
padding: 24px;
cursor: pointer;
background: rgb(242, 242, 242);
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.diy-search > div {
height: 60px;
line-height: 60px;
padding: 0 24px;
font-size: 28px;
}
.diy-component-edit .el-color-picker {
vertical-align: middle;
}
</style>
<template>
<div :class="{'avctive':searchData.isCked}">
<div :class="{'active':searchData.isCked}">
<div class="diy-component-options" v-if="searchData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="diy-search">
<div style="background: rgb(255, 255, 255); border-radius: 4px; color: rgb(85, 85, 85); text-align: left;">搜索
<div class="diy-search" :style="{background:searchData.data.background}">
<div :style="{background:searchData.data.color,borderRadius:searchData.data.radius+'px',color:searchData.data.textColor,textAlign:searchData.data.textPosition}"
>{{searchData.data.placeholder}}
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="searchData.isCked">
<el-form label-width="100px">
<el-form-item label="搜索框颜色">
......@@ -97,7 +44,7 @@
</template>
<script>
export default {
props: ["searchData"],
props: ["searchData","index","dataLeng"],
data() {
return {
......@@ -106,9 +53,12 @@
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
}
},
mounted() {
console.log(this.searchData,'data');
}
};
......
src/components/sallCenter/templateEdit.vue
View file @ 2352d021
......@@ -87,6 +87,68 @@
background-position: left center;
}
.diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right:20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409EFF;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
.diy-search {
padding: 24px;
cursor: pointer;
background: rgb(242, 242, 242);
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.diy-search > div {
height: 60px;
line-height: 60px;
padding: 0 24px;
font-size: 28px;
}
.diy-component-edit .el-color-picker {
vertical-align: middle;
}
.tpEdit_btmMenu{
height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
</style>
<template>
<div class="templateEdit">
......@@ -130,17 +192,24 @@
</div>
<!-- 为空的样式结束 -->
<div v-for="(item,index) in dataList" :key="index" @click="getItem(item)">
<search v-if="item.Id=='search'" :searchData="item"></search>
<search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></search>
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tpEdit_btmMenu">
<el-button type="primary" size="small">保存</el-button>
</div>
</div>
</template>
<script>
import search from "../sallCenter/plugin/search.vue"
import navigationIcon from "../sallCenter/plugin/navigationIcon.vue"
import banner from "../sallCenter/plugin/banner.vue"
export default {
data() {
return {
......@@ -154,7 +223,9 @@
},
components: {
search
search,
navigationIcon,
banner,
},
methods: {
//获取左侧菜单
......@@ -162,6 +233,7 @@
this.apipost("/api/Tenant/GetPlugInList", {}, res => {
if (res.data.resultCode == 1) {
this.allComponents=res.data.data;
console.log(this.allComponents);
} else {
this.Info(res.data.message);
}
......@@ -173,7 +245,7 @@
switch(Id.toString()) {
//搜索
case 'search':
let obj = {
let searchObj = {
Id:'search',
isCked:false,
data:{
......@@ -185,13 +257,62 @@
textPosition:"left"
}
}
this.dataList.push(obj);
this.dataList.push(searchObj);
break;
case n:
case 'nav':
let navObj={
Id:'nav',
isCked:false,
data:{
color:'#353535',
rows:1,
columns:3,
scroll:true,
navs:[],
showImg:false,
backgroundColor:'#ffffff',
backgroundPicUrl:'',
position:5,
mode:1,
backgroundHeight:100,
backgroundWidth:100,
borderBackground:'#ffffff'
}
}
this.dataList.push(navObj);
break;
case 'banner':
let banObj={
Id:"banner",
isCked:false,
data:{
style:1,
fill:1, //填充方式0-留白 1填充
height:450,
banners:[],
}
}
this.dataList.push(banObj);
break;
}
},
//给子组件调用 重新排序上移下移
getSord(index,IsUp){
var currentItem = this.dataList[index];
if(IsUp==0){
if (index > 0) {
var upItem = this.dataList[index - 1];
this.$set(this.dataList, index - 1, currentItem);
this.$set(this.dataList, index, upItem);
}
}else{
if(index!=this.dataList.length-1){
var downItem = this.dataList[index + 1];
this.$set(this.dataList, index + 1, currentItem);
this.$set(this.dataList, index, downItem);
}
}
},
//点击选中
getItem(item){
this.dataList.forEach(x=>{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment